/*
Theme Name: Natural Action Water
Theme URI: https://naturalactionwater.ca/
Author: Meridian Energies
Description: Custom WooCommerce theme for Natural Action Water.
Version: 0.1.0
Text Domain: natural-action-water
*/
/* Layout: sticky slim header · split hero (headline left, unit on water right) · editorial sections on a faint hexagonal lattice · product grid · researchers strip · footer columns */
:root{
  --bg:#f3f7f8;
  --surface:#ffffff;
  --ink:#0d2233;
  --muted:#4d6475;
  --line:#d3e0e6;
  --cobalt:#1f4fa3;
  --mineral:#13857a;
  --tint:#e3eef2;
  --on-accent:#ffffff;
  --display:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#081622;--surface:#0e2131;--ink:#e6f0f4;--muted:#9db3c1;--line:#1f3a4e;
  --cobalt:#7ea6ec;--mineral:#4fc7b8;--tint:#112a3d;--on-accent:#06121c;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#081622;--surface:#0e2131;--ink:#e6f0f4;--muted:#9db3c1;--line:#1f3a4e;
  --cobalt:#7ea6ec;--mineral:#4fc7b8;--tint:#112a3d;--on-accent:#06121c;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cobalt);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mineral);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance;margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mineral);margin:0}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;border-radius:999px;background:var(--cobalt);color:var(--on-accent);font-weight:600;text-decoration:none;font-size:15px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px var(--cobalt)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--cobalt);box-shadow:none}

/* lattice: hexagonal water motif */
.lattice{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%2313857a' stroke-opacity='.09'/%3E%3C/svg%3E");background-size:56px 97px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand img{height:44px;width:auto}
.brand .word{font-family:var(--display);font-size:24px;font-weight:600;line-height:1}
.brand img+.word{display:none}
.brand img.broken{display:none}
.brand img.broken+.word{display:inline}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav>li{position:relative}
.nav>li>a{display:block;padding:10px 12px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;border-radius:8px}
.nav>li>a:hover{background:var(--tint)}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.sub{position:absolute;top:100%;left:-12px;width:520px;padding:14px;margin:0;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -24px rgba(8,30,50,.35);display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.sub a:hover{background:var(--tint);color:var(--cobalt)}
.sub .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:600;color:var(--cobalt)}
.tools{display:flex;align-items:center;gap:6px}
.icon-link{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);text-decoration:none;position:relative}
.icon-link:hover{background:var(--tint)}
.icon-link svg{width:20px;height:20px}
.count{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--mineral);color:var(--on-accent);font:600 10px/17px var(--mono);text-align:center}
.mobile-nav{display:none}
@media (max-width:980px){
  .nav{display:none}
  .tools{margin-left:auto}
  .mobile-nav{display:block}
  .mobile-nav summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:50%}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary svg{width:22px;height:22px}
  .mobile-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);padding:12px clamp(16px,4vw,40px) 24px;max-height:calc(100vh - 72px);overflow:auto}
  .mobile-panel ul{list-style:none;padding:0;margin:0}
  .mobile-panel a{display:block;padding:11px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-weight:500}
  .mobile-panel details summary{display:block;width:auto;height:auto;border-radius:0;padding:11px 0;border-bottom:1px solid var(--line);font-weight:500}
  .mobile-panel details a{padding-left:16px;font-weight:400;font-size:15px;color:var(--muted)}
  /* The logo graphic's natural aspect ratio is very wide (~7.6:1), so the
     desktop 44px height renders ~333px wide — more than enough to push
     the account/cart icons and hamburger button off a narrow screen and
     cause horizontal page overflow. Scale it down once the hamburger nav
     takes over. */
  .brand img{height:24px}
}

/* hero */
.hero{padding-block:clamp(40px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(46px,7.4vw,96px);line-height:.95;letter-spacing:-.01em;margin-top:18px}
.hero h1 em{display:block;font-style:italic;color:var(--cobalt)}
.hero p.lede{font-size:19px;color:var(--muted);max-width:30em;margin:24px 0 32px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:220px 220px 24px 24px;overflow:hidden;background:linear-gradient(170deg,var(--tint),color-mix(in srgb,var(--cobalt) 30%,var(--tint)))}
.hero-visual .water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual .unit{position:absolute;left:50%;bottom:6%;width:78%;transform:translateX(-50%);filter:drop-shadow(0 24px 30px rgba(5,25,45,.4));animation:float 7s ease-in-out infinite}
.hero-visual .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-size:28px;color:var(--cobalt);opacity:.5}
.hero-visual img:not(.broken)~.ph{display:none}
@keyframes float{50%{transform:translate(-50%,-10px)}}
@media (prefers-reduced-motion:reduce){.hero-visual .unit{animation:none}html{scroll-behavior:auto}}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:420px;width:100%;justify-self:center}}

/* sections */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:40px}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,54px);line-height:1.05;margin-top:10px}
.why{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.why-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.why-grid .copy{min-width:0}
.why-grid .copy p{max-width:34em;margin:0 0 16px;color:var(--muted)}
.why-grid .copy p.big{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);line-height:1.3;color:var(--ink)}
.why-grid strong{color:var(--ink)}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}}

/* video */
.video{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:18px;overflow:hidden;background:var(--ink) center/cover no-repeat;color:#fff;text-decoration:none}
.video::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,35,.05),rgba(5,20,35,.55))}
.video .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:transform .2s}
.video:hover .play{transform:scale(1.07)}
.video .play svg{width:26px;height:26px;margin-left:4px;fill:#1f4fa3}
.video .label{position:absolute;left:20px;bottom:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* products */
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
@media (max-width:900px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.products{grid-template-columns:1fr}}
.product{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .2s,transform .2s}
.product:hover{border-color:color-mix(in srgb,var(--cobalt) 45%,var(--line));transform:translateY(-3px)}
.product .media{position:relative;display:block;aspect-ratio:1;background:#fff;overflow:hidden}
.product .media img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;transition:opacity .35s}
.product .media img.alt{opacity:0}
.product:hover .media img.alt:not(.broken){opacity:1}
.product:hover .media img.alt:not(.broken)~img.main,.product .media img.main.swap-out{opacity:0}
.product .media .ph{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-family:var(--display);font-style:italic;font-size:24px;color:var(--cobalt);background:var(--tint)}
.product .media img.main:not(.broken)~.ph{display:none}
.product .info{display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px;flex:1;border-top:1px solid var(--line)}
.product h3{font-family:var(--body);font-size:18px;font-weight:600;line-height:1.35}
.product h3 a{color:var(--ink);text-decoration:none}
.product h3 a:hover{color:var(--cobalt)}
.product .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.price{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.price small{font-size:11px;color:var(--muted);margin-left:4px;letter-spacing:.08em}
.add{padding:.6em 1.1em;font-size:14px}

/* researchers */
.researchers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
@media (max-width:800px){.researchers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.researcher a{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.researcher .portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:120px 120px 16px 16px;overflow:hidden;background:var(--tint)}
.researcher .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s,transform .4s}
.researcher a:hover .portrait img{filter:none;transform:scale(1.03)}
.researcher .portrait .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:48px;color:var(--cobalt);opacity:.45}
.researcher .portrait img:not(.broken)~.ph{display:none}
.researcher .name{font-family:var(--display);font-size:24px;font-style:italic;line-height:1.1}
.researcher .more{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mineral)}
.all-researchers{margin-top:36px;display:flex;flex-wrap:wrap;gap:8px}
.all-researchers a{font-size:14px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;background:var(--surface)}
.all-researchers a:hover{color:var(--cobalt);border-color:var(--cobalt)}

/* videos + did you know */
.media-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,48px);align-items:stretch}
@media (max-width:860px){.media-grid{grid-template-columns:1fr}}
.dyk{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(28px,4vw,44px);border-radius:20px;background:var(--cobalt);color:var(--on-accent);position:relative;overflow:hidden}
.dyk .eyebrow{color:inherit;opacity:.8}
.dyk h3{font-family:var(--display);font-weight:500;font-size:clamp(26px,2.8vw,34px);line-height:1.2}
.dyk a{color:inherit;font-weight:600}
.dyk::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:250px;opacity:.18;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115'%3E%3Cpath d='M50 2l46 26v57L50 113 4 85V28z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding-block:64px 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1fr;gap:36px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-grid a{color:var(--ink);text-decoration:none;font-size:15px}
.foot-grid a:hover{color:var(--cobalt)}
.foot-brand p{color:var(--muted);font-size:15px;max-width:22em;margin:12px 0 0}
.foot-brand .tag{font-family:var(--display);font-style:italic;font-size:26px;color:var(--ink);line-height:1.15;margin:0}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%}
.social a:hover{border-color:var(--cobalt)}
.social svg{width:18px;height:18px;fill:currentColor}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.legal a{color:var(--muted)}

/* Mobile nav reuses .sub for submenus (see functions.php filters);
   neutralize the desktop hover-dropdown styling inside .mobile-panel. */
.mobile-panel .sub-menu{position:static;opacity:1;visibility:visible;transform:none;width:auto;box-shadow:none;border:0;background:transparent;padding:0 0 0 16px;display:grid;grid-template-columns:1fr}
.mobile-panel .sub-menu a{display:block;font-weight:400;font-size:15px;color:var(--muted);padding:9px 10px;border-radius:8px}

/* ===== Generic pages + research profile ===== */
.page-content{padding-block:clamp(40px,7vw,88px)}
.page-header h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,54px);line-height:1.05;margin:0 0 32px}
.researcher-profile{display:flex;align-items:center;gap:24px;margin-bottom:32px}
.researcher-profile .portrait{position:relative;width:120px;height:150px;border-radius:60px 60px 12px 12px;overflow:hidden;background:var(--tint);flex-shrink:0}
.researcher-profile .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.researcher-profile .portrait .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:32px;color:var(--cobalt);opacity:.45}
.researcher-profile .name{font-family:var(--display);font-size:clamp(28px,3vw,40px);font-style:italic;font-weight:500;margin:0}
.entry-content{color:var(--ink);font-size:17px;line-height:1.7}
.entry-content p{margin:0 0 20px}
.entry-content h2,.entry-content h3{font-family:var(--display);font-weight:500;margin:36px 0 16px}
.entry-content a{color:var(--cobalt)}

/* ===== 404 ===== */
.not-found{text-align:center;padding-block:clamp(64px,10vw,120px)}
.not-found h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,54px);margin:10px 0 20px}
.not-found p:not(.eyebrow){color:var(--muted);max-width:30em;margin:0 auto 32px}
.not-found-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ===== Search results ===== */
.search-results{list-style:none;padding:0;margin:0;display:grid;gap:28px}
.search-result{padding-bottom:24px;border-bottom:1px solid var(--line)}
.search-result h2{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,28px);margin:6px 0 10px}
.search-result h2 a{color:var(--ink);text-decoration:none}
.search-result h2 a:hover{color:var(--cobalt)}
.search-result p:not(.eyebrow){color:var(--muted);margin:0}
.search-no-results{color:var(--muted)}

/* ===== WooCommerce: shared base (every WooCommerce-recognized page) ===== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link{
	display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;border-radius:999px;
	background:var(--cobalt);color:var(--on-accent);font-weight:600;text-decoration:none;
	font-size:15px;font-family:var(--body);border:0;transition:transform .2s,box-shadow .2s;cursor:pointer
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px var(--cobalt)}
/* WooCommerce's own CSS gives `.button.alt` (e.g. the single-product
   "Add to cart" button) a higher-specificity purple background — match
   the rest of the site's buttons instead. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--cobalt)!important;color:var(--on-accent)!important}
.woocommerce-notices-wrapper{margin-bottom:24px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
	list-style:none;padding:16px 20px 16px 50px;border-radius:12px;background:var(--tint);color:var(--ink);
	border:1px solid var(--line);font-size:15px
}
/* WC's notice icon is an absolutely positioned ::before at left:1.5em —
   pin it inside the left padding above so it never overlaps the text. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{left:20px}
.woocommerce-error{border-color:var(--cobalt)}

/* ===== Shop archive + single product (classic WooCommerce templates) ===== */
.woocommerce .woocommerce-products-header__title{font-family:var(--display);font-weight:500;font-size:clamp(34px,4.6vw,54px);margin:0 0 24px}
.woocommerce .woocommerce-loop-product__title{font-family:var(--body);font-size:18px;font-weight:600;line-height:1.35;margin:14px 0 8px;color:var(--ink)}
.woocommerce ul.products li.product img{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff}
.woocommerce ul.products li.product{padding:18px 20px 22px;text-align:left}
.woocommerce ul.products li.product .price{font-family:var(--mono);font-size:17px;color:var(--ink);display:block;margin:0 0 12px}
.woocommerce .woocommerce-Price-currencySymbol{font-size:11px;color:var(--muted)}

.woocommerce div.product div.images,
.woocommerce div.product div.summary{float:none;width:auto;clear:none}
/* Grid, not flex: div.product has other direct children too (the
   description tabs, related products) that must stay full-width block
   sections below the image/summary row, not become flex/grid items
   themselves fighting for the same row. */
/* Neutralize the homepage's bare .product card styling (background,
   border, border-radius, overflow, hover transform) — WooCommerce's own
   single-product wrapper div also carries class="product", so without
   this it inherits that card look by accident. */
.woocommerce div.product{background:transparent;border:0;border-radius:0;overflow:visible;transition:none}
.woocommerce div.product:hover{border-color:transparent;transform:none}
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(32px,5vw,64px);padding-block:clamp(40px,6vw,72px)}
.woocommerce div.product div.images{grid-column:1;grid-row:1;min-width:0}
.woocommerce div.product .summary.entry-summary{grid-column:2;grid-row:1;min-width:0;max-width:none;padding-top:4px}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.products{grid-column:1 / -1}
@media (max-width:820px){
	.woocommerce div.product{grid-template-columns:1fr}
	.woocommerce div.product div.images{grid-column:1;grid-row:1}
	.woocommerce div.product .summary.entry-summary{grid-column:1;grid-row:2}
}
.woocommerce div.product .product_title{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin:0 0 16px}
.woocommerce div.product .summary .price{font-family:var(--mono);font-size:22px;color:var(--ink);display:block;margin:0 0 20px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);margin-bottom:24px}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.woocommerce div.product .quantity .qty{width:64px;padding:.6em;border:1px solid var(--line);border-radius:8px;font-family:var(--mono)}
.woocommerce div.product .product_meta{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.woocommerce div.product .woocommerce-product-gallery{border-radius:16px;overflow:hidden;background:var(--surface)}
.woocommerce div.product .woocommerce-tabs{margin-top:48px;border-top:1px solid var(--line);padding-top:32px}
.woocommerce div.product .woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:24px;padding:0;margin:0 0 24px}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--cobalt)}
.woocommerce .related.products{margin-top:64px;border-top:1px solid var(--line);padding-top:48px}
.woocommerce .related.products>h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.2vw,38px);margin:0 0 32px}

.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{float:none;width:auto;margin:0;clear:none}
/* woocommerce-layout.css sizes cards per column count via
   `.woocommerce ul.products.columns-N li.product{width:30.75%}` etc., which
   outranks the reset above and shrinks each card inside its grid cell —
   match that specificity so the reset wins at any WC "Products per row". */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce[class*="columns-"] ul.products li.product{float:none;width:auto;margin:0;clear:none}
/* woocommerce-smallscreen.css (loaded only under max-width:768px) sets its
   own width:48%/float:left on product cards via an attribute-selector rule
   that otherwise wins on mobile — force the grid card back to filling its
   column at narrow viewports. */
@media (max-width:768px){
	.woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important}
}
.woocommerce .related.products,.woocommerce .up-sells.products{display:block;grid-template-columns:none}
.woocommerce .up-sells.products{margin-top:64px;border-top:1px solid var(--line);padding-top:48px}

/* ===== Cart & Checkout (WooCommerce Blocks) ===== */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{font-family:var(--body);color:var(--ink)}
.wp-block-woocommerce-filled-cart-block,.wp-block-woocommerce-checkout-fields-block{display:flex;flex-direction:column;gap:24px}
.wp-block-woocommerce-cart-order-summary-block,.wp-block-woocommerce-checkout-order-summary-block{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.wp-block-woocommerce-checkout-fields-block h2,
.wp-block-woocommerce-checkout-order-summary-block h2,
.wp-block-woocommerce-cart-order-summary-block h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 16px}
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-cart input[type="text"],
.wp-block-woocommerce-cart input[type="number"]{
	border:1px solid var(--line);border-radius:8px;padding:.7em .9em;font-family:var(--body);background:var(--bg)
}
.wp-block-woocommerce-cart-cross-sells-block{margin-top:40px;border-top:1px solid var(--line);padding-top:32px}
.wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-title{font-family:var(--body);font-size:16px;font-weight:600}
.wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-price{font-family:var(--mono);color:var(--ink)}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions button{
	display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;border-radius:999px;
	background:var(--cobalt);color:var(--on-accent)!important;font-weight:600;text-decoration:none;
	font-size:15px;font-family:var(--body);border:0;transition:transform .2s,box-shadow .2s;cursor:pointer
}
.wc-block-components-button:hover,.wc-block-cart__submit-button:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px var(--cobalt)}
/* WC Blocks product-grid "Add to cart" links (e.g. the cart page's
   empty-cart cross-sells) render through .entry-content, whose
   `.entry-content a{color:var(--cobalt)}` rule has higher specificity
   than .wp-block-button__link and was making the button text the same
   blue as its own background. */
.wc-block-grid__product-add-to-cart .wp-block-button__link{color:var(--on-accent)!important}

/* ===== My Account (classic templates) ===== */
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 14px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500}
.woocommerce-MyAccount-navigation li a:hover,.woocommerce-MyAccount-navigation li.is-active a{background:var(--tint);color:var(--cobalt)}
.woocommerce-MyAccount-content{margin-top:32px}
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-EditAccountForm,.woocommerce-address-fields{display:flex;flex-direction:column;gap:16px;max-width:30em}
.woocommerce-form-row label,.woocommerce-form__label{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;display:block}
.woocommerce-Input,.woocommerce-form-login input[type="text"],.woocommerce-form-login input[type="password"]{
	border:1px solid var(--line);border-radius:8px;padding:.7em .9em;font-family:var(--body);background:var(--surface);width:100%
}
.woocommerce-orders-table,.shop_table{width:100%;border-collapse:collapse;font-size:15px}
.woocommerce-orders-table__header,.shop_table th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px;border-bottom:1px solid var(--line)}
.woocommerce-orders-table__cell,.shop_table td{padding:14px 12px;border-bottom:1px solid var(--line)}
.woocommerce-pagination{margin-top:24px}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content{max-width:none}
.woocommerce-cart .page-header h1,
.woocommerce-checkout .page-header h1,
.woocommerce-account .page-header h1{font-family:var(--body);font-weight:600;font-size:28px;margin:0 0 24px}

/* WC Blocks' own notice-banner icon only sets height:100% with no width,
   which blows up to a huge square since the row has no definite height
   of its own — lock it to a fixed size so it sits beside the text. */
.wc-block-components-notice-banner>svg{width:20px!important;height:20px!important;flex:0 0 20px!important;align-self:center!important}

/* ===== Shop archive / single product content wrapper (replaces WC's default #primary/#main) ===== */
.shop-wrap{padding-block:clamp(40px,7vw,88px)}
.shop-eyebrow{margin:0 0 10px}

/* ===== Research archive page: style each researcher's photo like the
   individual bio-page portrait (page-id-104 = the "Research" page itself,
   confirmed via body_class — no page-research slug class is emitted by
   default WP, so the numeric ID is the reliable scope) ===== */
/* Core's block CSS makes .aligncenter figures display:table with a
   table-caption figcaption, which fights a fixed-height clipped frame (and
   sizes linked vs. unlinked images differently) — so the arch frame lives
   on the <img> itself and the figure is reset to a plain block. */
.page-id-104 .wp-block-image figure{display:block;width:120px;max-width:100%;margin:0 auto}
.page-id-104 .wp-block-image figure>a{display:block}
.page-id-104 .wp-block-image img{display:block;width:120px;max-width:100%;height:150px;object-fit:cover;border-radius:60px 60px 12px 12px;background:var(--tint);filter:grayscale(1) contrast(1.05);transition:filter .4s}
.page-id-104 .wp-block-image figure:hover img{filter:none}
.page-id-104 .wp-block-image figure>figcaption{display:block;font-family:var(--display);font-style:italic;font-size:16px;margin:10px 0 0;text-align:center;color:var(--ink)}