/*
Theme Name: Scapers Arena
Theme URI: https://scapersarena.com
Author: Raiyan
Description: Premium brand-and-sales-focused WooCommerce theme for Scapers Arena — terrariums, aquascapes and rare plants. "Glasshouse at dusk" aesthetic.
Version: 1.6.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: scapers-arena
WC requires at least: 8.0
WC tested up to: 9.4
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#12150D;
  --ink-2:#1B2116;
  --ink-3:#242B1D;
  --line:#39412E;
  --paper:#F1EDE1;
  --paper-dim:#C9C4B3;
  --moss:#8FA173;
  --moss-dim:#5C6B49;
  --amber:#D6A24A;
  --amber-dim:#9C7635;
  --field:#EDE6D3;
  --field-ink:#26301F;
  --field-line:#cfc6a8;
  --warn:#8a5a1e;
  --radius-jar:6px 6px 42px 42px / 6px 6px 20px 20px;
  --wrap:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.62;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}
h1,h2,h3,h4,.serif{font-family:'Instrument Serif',Georgia,serif; font-weight:400; letter-spacing:.005em; line-height:1.08;}
h1,h2{text-wrap:balance;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
p{max-width:64ch;}
.mono{font-family:'Space Mono',ui-monospace,'Courier New',monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,44px);}
.eyebrow{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--amber-dim);}
.section{padding-block:clamp(60px,9vw,116px);}
.section--field{background:var(--field); color:var(--field-ink);}
.section--field p{color:#4b4636;}
.section--field .eyebrow{color:#7a5a22;} .section--field .eyebrow::before{background:#7a5a22;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; margin-bottom:44px;}
.section-head h2{font-size:clamp(30px,4vw,50px); margin:0;}
.section-head .sub{max-width:40ch; font-size:14px; color:var(--paper-dim); margin:12px 0 0;}
.section--field .section-head .sub{color:#4b4636;}
.section-head .lnk{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.05em; color:var(--paper-dim); border-bottom:1px solid var(--line); padding-bottom:3px; white-space:nowrap;}
.section--field .section-head .lnk{color:var(--field-ink); border-color:var(--field-line);}

/* ---------- buttons ---------- */
.btn,.button,button.button,.wp-element-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 26px; border-radius:2px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid var(--amber-dim); background:transparent; color:var(--paper); cursor:pointer; line-height:1;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,color .22s ease; text-decoration:none;
}
.btn:hover,.button:hover,.wp-element-button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--amber); border-color:var(--amber); color:var(--ink); transform:translateY(-1px);
}
.btn--ghost{border-color:var(--line); color:var(--paper-dim);}
.btn--ghost:hover{background:var(--ink-3); border-color:var(--moss-dim); color:var(--paper);}
.btn--solid{background:var(--amber); border-color:var(--amber); color:var(--ink);}
.section--field .btn{color:var(--field-ink);} .section--field .btn:hover{color:var(--ink);}
.section--field .btn--ghost{border-color:var(--field-line);}

html.nav-lock{overflow:hidden;}

/* ---------- accessibility ---------- */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important;}
.skip-link:focus{clip:auto; clip-path:none; width:auto; height:auto; margin:0; z-index:1000; top:10px; left:10px; padding:12px 18px; background:var(--amber); color:var(--ink); font-weight:700;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.search-form--compact .search-field:focus-visible{outline:0;}

/* ---------- header ---------- */
.admin-bar .site-header{top:32px;}
@media (max-width:782px){.admin-bar .site-header{top:46px;}}
.site-header{position:fixed; inset:0 0 auto 0; width:100%; z-index:300; transition:background .35s ease,padding .35s ease,border-color .35s ease; border-bottom:1px solid transparent;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:20px; max-width:1400px;}
.site-header.solid{background:rgba(18,21,13,.94); backdrop-filter:blur(10px); border-color:var(--line);}
.site-header.solid .wrap{padding-block:12px;}
.brand{display:flex; align-items:center; gap:11px; flex:none;}
.brand svg{width:32px; height:32px; flex:none;}
.brand b{font-family:'Instrument Serif',serif; font-size:19px; letter-spacing:.04em; display:block; line-height:1;}
.brand>span>span{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.22em; color:var(--moss); margin-top:3px; display:block;}
.nav-main{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:22px; flex:none;}
.nav-main a{font-size:13px; color:var(--paper-dim); position:relative; padding:4px 0; white-space:nowrap;}
.nav-main a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--amber); transition:width .3s ease;}
.nav-main a:hover{color:var(--paper);} .nav-main a:hover::after{width:100%;}
.header-actions{display:flex; align-items:center; gap:16px; flex:none;}
.header-cart{position:relative; color:var(--paper-dim); display:flex; padding:11px; margin:-11px;}
.header-cart .count{position:absolute; top:3px; right:1px; background:var(--amber); color:var(--ink); font-family:'Space Mono',monospace; font-size:10px; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;}

/* Compact, always-visible search — real and findable (not an icon that
   has to be discovered/clicked) but small enough to sit in the single
   header row without crowding logo+nav+cart+CTA. Shrinks between its
   min and max as the row gets tighter, and only drops out of this row
   (into the mobile-nav panel's own search field) once nav-main itself
   is hidden and the hamburger takes over. */
.search-form--compact{
  display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:60px; max-width:200px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:2px; padding:7px 10px;
  transition:border-color .2s ease;
}
.search-form--compact:focus-within{border-color:var(--amber-dim);}
.search-form--compact .search-field{flex:1; min-width:0; width:0; background:transparent; border:0; color:var(--paper); font-family:'Space Mono',monospace; font-size:12.5px; outline:0;}
.search-form--compact .search-field::placeholder{color:var(--paper-dim);}
.search-form--compact .search-submit{flex:none; background:none; border:0; padding:10px; margin:-10px -10px -10px 0; color:var(--paper-dim); cursor:pointer; display:flex; transition:color .2s ease;}
.search-form--compact .search-submit:hover{color:var(--amber);}

/* live search predictions dropdown */
.search-suggest{
  position:absolute; top:calc(100% + 10px); left:0; min-width:290px; max-width:min(360px,90vw); z-index:20;
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.search-suggest__hint{padding:8px 12px 2px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim);}
.search-suggest__item{display:flex; align-items:center; gap:10px; padding:8px 12px; text-decoration:none; border-top:1px solid var(--line);}
.search-suggest__hint + .search-suggest__item{border-top:0;}
.search-suggest__item:first-child{border-top:0;}
.search-suggest__item:hover,.search-suggest__item.active{background:rgba(214,162,74,.1);}
.search-suggest__item img{width:32px; height:32px; object-fit:cover; border-radius:2px; border:1px solid var(--line); flex:none; background:var(--ink-3);}
.search-suggest__name{flex:1; min-width:0; font-size:13px; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.search-suggest__price{flex:none; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--amber);}
.search-suggest__price ins{text-decoration:none;}
.search-suggest__price del{display:none;}
@media (max-width:680px){ .search-suggest{left:0; right:0; max-width:none; min-width:0;} }
.nav-toggle{display:none; width:44px; height:44px; flex-direction:column; justify-content:space-between; background:none; border:0; padding:11px 6px 12px; cursor:pointer; margin-right:-6px;}
.nav-toggle span{display:block; width:100%; height:1px; background:var(--paper); transition:transform .3s ease,opacity .3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
/* This used to fade in via opacity, but opacity applies to the whole
   box — including its own solid background — so for the ~320ms of the
   fade the overlay was partially see-through and whatever page content
   sits behind it (e.g. the Shop page's own heading) could bleed into
   view through the menu. Swap to a visibility toggle instead: the
   background is fully opaque from the very first frame, and only the
   slide (transform) actually animates. The delay-on-close keeps it
   visible until the slide-out finishes, then hides it instantly. */
/* justify-content:center positioned this list relative to the WHOLE
   screen height, with no allowance for the header sitting on top of it
   (z-index 300 vs this overlay's 250) — on a short-enough viewport
   (a real phone's usable height, after browser chrome, is well under
   a desktop test window) the centered content starts above where the
   header ends, so "Shop" rendered underneath/behind the search bar.
   Reserve the header's own height as top padding instead of centering
   blind, and let it scroll if a small screen still can't fit every
   item — never collide with the header, whatever the content length. */
.mobile-nav{position:fixed; inset:0; width:100%; height:100%; z-index:250; background:var(--ink); display:flex; flex-direction:column; justify-content:flex-start; gap:20px; padding:calc(var(--header-h,78px) + 28px) clamp(24px,8vw,64px) 40px; overflow-y:auto; visibility:hidden; pointer-events:none; transform:translateY(-10px); transition:transform .32s ease,visibility 0s linear .32s;}
.mobile-nav.open{visibility:visible; pointer-events:auto; transform:translateY(0); transition:transform .32s ease,visibility 0s linear 0s;}
/* wp_nav_menu always outputs a <ul>, which the flex layout above only
   treats as one opaque child — its own <li>s stayed in normal block
   flow with the browser's default bullet markers still showing. Reset
   and re-flex the list itself so items stack cleanly with no bullets. */
.mobile-nav__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;}
.mobile-nav a{font-family:'Instrument Serif',serif; font-size:clamp(28px,8vw,42px); color:var(--paper);}
.site-main{padding-top:0;}
/* clear the fixed header on every page except the full-bleed home hero */
body:not(.home) .site-main{padding-top:var(--header-h,78px);}

/* ---------- hero ---------- */
.hero{position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:72px;}
.hero__bg{position:absolute; inset:0; z-index:0;}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:50% 42%;}
.hero__scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(10,12,7,.5),rgba(10,12,7,.18) 32%,rgba(10,12,7,.55) 66%,rgba(10,12,7,.96)),linear-gradient(90deg,rgba(10,12,7,.66),transparent 58%);}
.hero__inner{position:relative; z-index:2; max-width:660px;}
.hero__inner>*{opacity:0; transform:translateY(22px); animation:heroIn .9s cubic-bezier(.16,.8,.24,1) forwards;}
.hero__inner .eyebrow{animation-delay:.05s;}
.hero__inner h1{animation-delay:.15s;}
.hero__inner p{animation-delay:.28s;}
.hero__inner .hero__cta{animation-delay:.4s;}
@keyframes heroIn{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.hero__inner>*{opacity:1; transform:none; animation:none;}}
.hero h1{font-size:clamp(42px,6.6vw,80px); margin:18px 0 16px; color:var(--paper);}
.hero h1 em{font-style:italic; color:var(--moss);}
.hero p{font-size:16.5px; color:var(--paper-dim); margin:0 0 30px; max-width:44ch;}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap;}
/* ---------- trust strip ---------- */
.trust{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.trust__item{padding:34px 26px; border-left:1px solid var(--line);}
.trust__item:first-child{border-left:none;}
.trust__num{font-family:'Instrument Serif',serif; font-size:34px; color:var(--amber); display:block; margin-bottom:6px;}
.trust__label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-dim);}

/* ---------- product rail (carousel) ---------- */
.rail-wrap{position:relative;}
.rail{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px; scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail>*{flex:0 0 clamp(230px,24vw,290px); scroll-snap-align:start;}
.rail-nav{display:flex; gap:10px; margin-top:8px;}
.rail-nav button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .22s ease,border-color .22s ease;}
.rail-nav button:hover{background:var(--ink-3); border-color:var(--moss-dim);}
.section--field .rail-nav button{color:var(--field-ink); border-color:var(--field-line);}

/* ---------- product cards ---------- */
/* WooCommerce's own core CSS puts a clearfix (content:" ";display:table) on
   ul.products::before/::after for its legacy float grid. Once this element
   is display:grid instead, that generated content becomes a real (invisible)
   grid item and consumes the first cell, shoving every actual product over
   by one column. Kill it here so our grid auto-placement isn't shifted. */
ul.products::before,ul.products::after,
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce-page ul.products::before,.woocommerce-page ul.products::after{content:none !important; display:none !important;}
ul.products,.product-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
/* WooCommerce's core CSS also sets an explicit width (e.g. 22.05%) and
   float/margin on li.product, written for the old float-based grid where
   that percentage resolves against the full row width. Inside our grid,
   the same percentage resolves against the (much narrower) column track
   instead, shrinking every card to a sliver in the corner of its cell —
   the "tiny distorted image" bug. Force it back to filling its column.
   min-width:0 fixes a second, separate issue: grid items default to
   min-width:auto (their content's own minimum size), and a percentage
   width like the one above doesn't override that default — it's ignored
   for track-sizing purposes to avoid a circular dependency. A long
   unbreakable price (white-space:nowrap) in one card was enough to force
   its whole COLUMN wider than the other three, since the browser falls
   back to each item's natural content width when sizing 1fr tracks.
   min-width:0 tells it not to do that, so all 4 columns end up equal. */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,
ul.products li.product,.product-card{
  width:100% !important; float:none !important; margin:0 !important; min-width:0 !important;
  display:flex; flex-direction:column; text-align:left;
}
.product-card__media{position:relative; border-radius:var(--radius-jar); overflow:hidden; aspect-ratio:3/4; background:var(--ink-2); border:1px solid var(--line); display:block;}
.product-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,.8,.24,1); margin:0;}
.product-card:hover .product-card__media img,ul.products li.product:hover a img{transform:scale(1.06);}
ul.products li.product a img{border-radius:var(--radius-jar); border:1px solid var(--line); aspect-ratio:3/4; object-fit:cover; width:100%; margin:0; transition:transform .6s ease;}
.badge{position:absolute; top:11px; left:11px; z-index:2; background:var(--field); color:var(--field-ink); font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:1px;}
.badge--sale{background:var(--amber); color:var(--ink);}
.badge--mto{background:var(--ink-3); color:var(--paper-dim); border:1px solid var(--line);}
.badge--preorder{background:var(--moss); color:var(--ink);}
.product-card__info{padding:14px 0 12px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:4px 10px;}
/* Title+category (left) and price (right) shared this row with neither
   given room to shrink, and the price is white-space:nowrap — so under
   space pressure the price's own BOX got squeezed narrower than its
   text by flex-shrink, and since the text can't wrap, it spilled out
   past its own box and into the next card over (visible on narrow
   phones with a wide sale price like "৳6,000 ৳5,500"). Giving the
   title unlimited shrink room alone just crushed it to "F…" instead —
   there simply isn't width for a full sale price AND a title on one
   line at ~180px. Instead: let the row wrap, with the title given a
   sane minimum (~100px, still 2-3 words before its own ellipsis) so
   wrapping kicks in — the price drops to its own line below when it
   doesn't fit, and never truncates either. */
.product-card__info > div:first-child{min-width:100px; flex:1 1 100px;}
/* WooCommerce's core CSS also puts padding and a smaller font-size on the
   product title (again sized for its own default card, not ours), which
   was the last thing making card heights inconsistent: with line-clamp
   below reserving a fixed 2 lines, that stray 16px of padding was enough
   to make a short (1-line) title's card measurably shorter than a long
   (2-line) one. Pin the real values here with equal/higher specificity so
   every card ends up exactly the same height regardless of title length. */
.woocommerce ul.products li.product h3,.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-card__info h3,ul.products li.product .woocommerce-loop-product__title{
  font-family:'Instrument Serif',serif; font-weight:400; font-size:18px; margin:0 0 5px; color:var(--paper); padding:0;
  min-height:2.16em;
}
.section--field .product-card__info h3{color:var(--field-ink);}
/* Clamp the title to 2 lines (ellipsis) so a long name can't grow the
   card taller than its min-height reserves — this and min-height above
   together guarantee every card is the same height, everywhere. */
.product-card__info h3 a,ul.products li.product .woocommerce-loop-product__title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.product-card__info .cat{font-size:11px; color:var(--paper-dim); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.section--field .product-card__info .cat{color:#6b6553;}
.price,.woocommerce ul.products li.product .price,.woocommerce div.product p.price{font-family:'Space Mono',monospace; font-size:14px; color:var(--paper); white-space:nowrap; flex:none;}
/* Old + new price may wrap onto two lines in a narrow card instead of
   spilling into the next card; each amount itself never breaks. */
.product-card .price{white-space:normal; flex:0 1 auto; max-width:100%;}
.product-card .price del,.product-card .price ins,.product-card .price > .amount{white-space:nowrap; display:inline-block;}
.section--field .price{color:var(--field-ink);}
.price del{color:var(--paper-dim); opacity:.7; font-weight:400; margin-right:4px;}
.price ins{text-decoration:none; color:var(--amber);}
/* Two buttons per card now (Add to Cart / View + Buy Now) — the wrapper,
   not the individual buttons, is what pins to the card's bottom, same
   trick as before (margin-top:auto in a flex column card). */
.product-card__actions{margin-top:auto; display:flex; gap:8px;}
.woocommerce ul.products li.product .product-card__actions .button,
ul.products li.product .product-card__actions .button,
.product-card .product-card__actions .button{
  /* WooCommerce's own core CSS (.woocommerce ul.products li.product
     .button{display:inline-block}) outranks our shared .button rule's
     display:inline-flex — 4 classes there vs 2 here — and silently
     dropped it back to inline-block, which is why the label rendered
     left-aligned (its default) instead of centered. Match/beat that
     specificity here to keep flex centering. */
  display:inline-flex;
  flex:1; width:auto; margin-top:0; padding-inline:10px;
  min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.button--buy-now{background:var(--amber); border-color:var(--amber); color:var(--ink);}
/* Cards appear in grids of different widths (shop, homepage, related
   products, rails). Decide stacking from the CARD's own width, not the
   viewport: two side-by-side buttons need about 250px. */
.product-card{container-type:inline-size;}
@container (max-width:250px){
  .product-card__actions{flex-direction:column; min-height:92px; justify-content:center;}
  .product-card__actions .button,.woocommerce ul.products li.product .product-card__actions .button{flex:none; width:100%;}
}
.button--buy-now:hover{background:var(--amber-dim); border-color:var(--amber-dim); color:var(--ink);}

/* ---------- collection tiles ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line);}
.cat-tile{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink-2); display:block;}
.cat-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,.8,.24,1),filter .7s ease;}
.cat-tile:hover img{transform:scale(1.08); filter:brightness(.62);}
.cat-tile__scrim{position:absolute; inset:0; background:linear-gradient(0deg,rgba(10,12,7,.9),transparent 55%);}
.cat-tile__label{position:absolute; left:0; right:0; bottom:0; padding:22px; display:flex; align-items:flex-end;}
.cat-tile__label h3{font-size:21px; margin:0; color:var(--paper);}
.cat-tile__arrow{color:var(--paper); position:absolute; top:16px; right:16px; width:32px; height:32px; border:1px solid rgba(241,237,225,.5); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .3s ease,border-color .3s ease,transform .3s ease;}
.cat-tile:hover .cat-tile__arrow{background:var(--amber); border-color:var(--amber); transform:rotate(45deg);}
.cat-tile:hover .cat-tile__arrow{color:var(--ink);}

/* ---------- flagship spotlight ---------- */
.flagship{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
.flagship__frame{position:relative; border-radius:var(--radius-jar); overflow:hidden; border:1px solid var(--line);}
.flagship__frame img{width:100%; height:600px; object-fit:cover;}
.flagship__tag{position:absolute; top:22px; left:22px; background:var(--ink); border:1px solid var(--amber-dim); padding:9px 14px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber);}
.flagship__body h2{font-size:clamp(30px,3.6vw,46px); margin:18px 0 18px; color:var(--paper);}
.flagship__price{display:flex; align-items:baseline; gap:12px; margin:24px 0 28px; font-family:'Space Mono',monospace;}
.flagship__price .now{font-size:28px; color:var(--paper);}
.flagship__price .was{font-size:14px; color:var(--paper-dim); text-decoration:line-through;}
.flagship__specs{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:10px;}
.flagship__specs li{display:flex; gap:12px; font-size:13.5px; color:var(--paper-dim);}
.flagship__specs li::before{content:"-"; color:var(--moss);}

/* ---------- why-us / value blocks ---------- */
.value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--field-line);}
.value-card{background:var(--field); padding:44px;}
.value-card h3{font-size:24px; color:var(--field-ink); margin:0 0 12px;}
.value-card p{font-size:14px; color:#4b4636; margin:0;}

/* ---------- craft steps ---------- */
.craft{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.craft__img{border-radius:var(--radius-jar); overflow:hidden; border:1px solid var(--field-line);}
.craft__img img{width:100%; height:540px; object-fit:cover;}
.craft h2{color:var(--field-ink); font-size:clamp(30px,3.6vw,46px); margin:16px 0 20px;}
.steps{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:20px;}
.steps li{display:grid; grid-template-columns:42px 1fr; gap:18px; border-top:1px solid var(--field-line); padding-top:18px;}
.steps .num{font-family:'Space Mono',monospace; font-size:13px; color:var(--amber-dim);}
.steps h4{margin:0 0 6px; font-family:'Instrument Serif',serif; font-weight:400; font-size:19px; color:var(--field-ink);}
.steps p{font-size:13.5px; color:#4b4636; margin:0; max-width:46ch;}

/* ---------- lifestyle CTA band ---------- */
.life{position:relative; min-height:62vh; display:flex; align-items:center; overflow:hidden;}
.life__bg{position:absolute; inset:0;} .life__bg img{width:100%; height:100%; object-fit:cover;}
.life__scrim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,12,7,.92) 12%,rgba(10,12,7,.5) 55%,rgba(10,12,7,.2));}
.life__body{position:relative; z-index:2; padding-block:80px; max-width:560px;}
.life__body h2{font-size:clamp(30px,4.2vw,52px); color:var(--paper); margin:14px 0 18px;}

/* ---------- first-order offer ---------- */
.offer{background:var(--amber); color:var(--ink); text-align:center; padding:clamp(40px,7vw,72px) 20px;}
.offer h2{font-size:clamp(28px,4vw,44px); margin:0 0 14px; color:var(--ink);}
.offer p{color:#3a2f18; margin:0 auto 24px; max-width:52ch;}
.offer .btn{border-color:var(--ink); color:var(--ink);}
.offer .btn:hover{background:var(--ink); color:var(--amber);}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__q{width:100%; text-align:left; background:none; border:0; color:var(--paper); font-family:'Instrument Serif',serif; font-size:clamp(18px,2.2vw,24px); padding:22px 40px 22px 0; cursor:pointer; position:relative;}
.faq__q::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:'Space Mono',monospace; color:var(--amber); transition:transform .3s ease;}
.faq__item.open .faq__q::after{transform:translateY(-50%) rotate(45deg);}
.faq__a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq__a p{color:var(--paper-dim); font-size:14px; padding:0 0 22px; margin:0;}

/* ---------- dark text on cream (--field) sections ---------- */
.section--field .faq__q{color:var(--field-ink);}
.section--field .faq__item,.section--field .faq__item:last-child{border-color:var(--field-line);}
.section--field .faq__q::after{color:var(--amber-dim);}
.section--field .faq__a p{color:#4b4636;}
.section--field .button,.section--field a.button,.section--field .btn{color:var(--field-ink); border-color:var(--amber-dim);}
.section--field .button:hover,.section--field a.button:hover,.section--field .btn:hover{background:var(--amber); color:var(--ink); border-color:var(--amber);}
.section--field .btn--ghost{color:#5a5443;}
.section--field .price,.section--field .price ins{color:var(--field-ink);}
.section--field .price del{color:#8a8574;}
.section--field .section-head .lnk{color:var(--field-ink);}
.section--field .cat{color:#6b6553;}
.section--field h2,.section--field h3,.section--field h4{color:var(--field-ink);}

/* ---------- single product ---------- */
.woocommerce div.product{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; position:relative;}
/* WooCommerce's core CSS gives the gallery and summary width:48% + float
   for its own float layout. Inside our grid that 48% applied to each
   grid COLUMN, leaving a tiny photo and a big empty gap in the middle. */
.woocommerce div.product div.images,.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,.woocommerce-page div.product div.summary{width:100% !important; float:none !important; margin:0;}
/* Tabs, related and upsell products span the whole row, not one column. */
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related,.woocommerce div.product .upsells,.woocommerce div.product .up-sells{grid-column:1 / -1;}
.woocommerce div.product .related,.woocommerce div.product .up-sells{margin-top:40px;}
.woocommerce div.product .related > h2,.woocommerce div.product .up-sells > h2{font-size:clamp(26px,3vw,36px); margin:0 0 24px; color:var(--paper);}
.woocommerce div.product > .badge{top:14px; left:14px; z-index:3;}
.woocommerce div.product .stock{font-family:'Space Mono',monospace; font-size:12px; color:var(--moss); margin:0 0 6px;}
.preorder-note{margin:18px 0 0; padding:12px 14px; border:1px solid var(--moss-dim); border-radius:2px; font-size:14px; color:var(--paper); max-width:46ch;}
.woocommerce div.product .product_meta{margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:12px; color:var(--paper-dim); display:grid; gap:6px;}
.woocommerce div.product .product_meta > span{display:block;}
.woocommerce div.product .product_meta a{color:var(--paper);}
.woocommerce div.product .woocommerce-product-gallery{margin:0;}
.woocommerce div.product .woocommerce-product-gallery__image{border-radius:var(--radius-jar); overflow:hidden; border:1px solid var(--line);}
.woocommerce div.product .product_title{font-size:clamp(28px,3.4vw,44px); color:var(--paper); margin:6px 0 14px;}
.woocommerce div.product p.price{font-size:24px; margin:18px 0 22px;}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--paper-dim); font-size:14.5px;}
.woocommerce div.product form.cart{margin-top:24px; display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;}
.woocommerce div.product form.cart::before,.woocommerce div.product form.cart::after{content:none !important;}
.woocommerce div.product form.cart .quantity{margin:0 !important; float:none !important; display:flex;}
.woocommerce div.product form.cart .button{float:none; margin:0; min-height:48px;}
.woocommerce div.product form.cart .quantity input{width:64px; height:100%; min-height:48px; text-align:center; background:var(--ink-2); border:1px solid var(--line); color:var(--paper); padding:12px; border-radius:2px; font-family:'Space Mono',monospace;}
.woocommerce div.product .woocommerce-tabs{grid-column:1 / -1; margin-top:26px;}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 18px; border-bottom:1px solid var(--line); display:flex; gap:6px; list-style:none;}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:none; border:0; padding:0;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim); padding:10px 14px; display:block;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--paper); border-bottom:1px solid var(--amber);}
.mto-note{margin-top:14px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--warn); text-transform:uppercase;}
.wa-enquire{margin-top:14px;}
.woocommerce div.product .summary .mto-note + .wa-enquire,.woocommerce div.product .summary .preorder-note + .wa-enquire{margin-top:12px;}

/* ---------- shop layout ---------- */
.shop-head{padding:44px 0 8px;}
.shop-head h1{font-size:clamp(30px,4vw,50px); color:var(--paper); margin:10px 0 0;}
.woocommerce .woocommerce-result-count{font-family:'Space Mono',monospace; font-size:11px; color:var(--paper-dim); letter-spacing:.04em;}
.woocommerce .woocommerce-ordering select{background:var(--ink-2); color:var(--paper); border:1px solid var(--line); padding:9px 12px; font-family:'Space Mono',monospace; font-size:11px; border-radius:2px;}
.woocommerce-ordering{position:relative;}
/* A native <select> always opens as the OS's own full-screen picker on
   mobile, however it's styled — theme.js replaces it with this in-page
   dropdown built from the same <option>s, and keeps the real select
   around (visually hidden, not display:none) as what actually submits
   the sort. */
select.sort-select__native{position:absolute; inset:0; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;}
.sort-select{position:relative;}
.sort-select__trigger{
  display:flex; align-items:center; gap:10px; background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line); padding:9px 12px; font-family:'Space Mono',monospace; font-size:11px;
  border-radius:2px; cursor:pointer; white-space:nowrap;
}
.sort-select__trigger svg{flex:none; color:var(--paper-dim); transition:transform .2s ease;}
.sort-select.open .sort-select__trigger svg{transform:rotate(180deg);}
.sort-select__trigger:hover{border-color:var(--amber-dim);}
.sort-select__menu{
  list-style:none; margin:0; padding:0; position:absolute; top:calc(100% + 8px); right:0; z-index:20;
  min-width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.sort-select__menu li{
  padding:10px 14px; font-family:'Space Mono',monospace; font-size:11px; color:var(--paper-dim);
  white-space:nowrap; cursor:pointer; border-top:1px solid var(--line);
}
.sort-select__menu li:first-child{border-top:0;}
.sort-select__menu li:hover{background:rgba(214,162,74,.1); color:var(--paper);}
.sort-select__menu li.active{color:var(--amber);}
.woocommerce nav.woocommerce-pagination ul{border:0; display:flex; gap:6px;}
.woocommerce nav.woocommerce-pagination ul li{border:0;}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line); border-radius:2px; color:var(--paper-dim); font-family:'Space Mono',monospace; padding:8px 12px;}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--amber); color:var(--ink); border-color:var(--amber);}
.cat-chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 34px;}
.cat-chips a{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:8px 13px; border:1px solid var(--line); border-radius:2px; color:var(--paper-dim);}
.cat-chips a:hover,.cat-chips a.current{background:var(--ink-3); color:var(--paper); border-color:var(--moss-dim);}
.woo-breadcrumb{font-family:'Space Mono',monospace; font-size:11px; color:var(--paper-dim); letter-spacing:.05em; margin-bottom:22px;}

/* ---------- cart / checkout ---------- */
.woocommerce-cart .site-main,.woocommerce-checkout .site-main{padding-bottom:60px;}
.woocommerce table.shop_table{border:1px solid var(--line); border-radius:4px;}
.woocommerce table.shop_table th{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--moss);}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-top:1px solid var(--line); color:var(--paper);}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{background:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:22px;}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce-checkout select,.select2-container--default .select2-selection--single{background:var(--ink-2) !important; border:1px solid var(--line) !important; color:var(--paper) !important; border-radius:2px; padding:12px !important; min-height:auto;}
.woocommerce form .form-row label{font-size:12px; color:var(--paper-dim);}
.woocommerce-checkout #payment{background:var(--ink-2); border:1px solid var(--line); border-radius:6px;}
/* The rules above target the classic shortcode checkout's markup
   (.form-row, input.input-text) — this site actually renders the
   WooCommerce Blocks checkout, a completely different DOM (wc-block-
   components-*), so none of it applied: text inputs kept native white
   boxes, and their label doubles as a placeholder-style caption sitting
   INSIDE the field — which our site-wide light text color then
   rendered near-invisible against that white background. The select
   variant's label is positioned differently again (a static caption
   meant to sit above the value) but the value showed through the same
   white container behind it, reading as overlapping text. Rather than
   reverse-engineer each field type's own state-driven positioning,
   make every one of these labels a plain static caption above its
   field (no floating/overlapping possible), and reskin the fields
   themselves to match the site instead of native white boxes. */
.wc-block-components-text-input label,
.wc-blocks-components-select__label{
  position:static; display:block; transform:none;
  font-size:12px; letter-spacing:.03em; color:var(--paper-dim);
  margin:0 0 6px; padding:0; max-width:none;
}
.wc-block-components-text-input input,
.wc-blocks-components-select__container{
  background:var(--ink-2) !important; border:1px solid var(--line) !important; color:var(--paper) !important;
  border-radius:2px;
}
.wc-blocks-components-select__select{color:var(--paper);}
/* District (and any other Blocks dropdown): the generic checkout select
   rule above forces 12px padding all round, which removed the top space
   WooCommerce reserves for the field's label, so "District" sat on top
   of the selected value. Restore room for the label above the value. */
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select{padding:24px 40px 6px 12px !important; height:auto !important; min-height:54px; line-height:1.4;}
.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label{left:13px;}
.wc-blocks-components-select__expand{fill:var(--paper-dim) !important;}
/* WooCommerce prints "Available on backorder" for pre-order terrariums in the
   cart and checkout; the Pre-order line from the theme already says it better. */
.wc-block-components-product-backorder-badge{display:none;}

/* Text inputs/textareas default to a browser intrinsic width (the old
   HTML `size` attribute behaviour) rather than filling their container —
   harmless on a wide desktop column but a guaranteed horizontal-overflow
   source on mobile (hit this on the review form specifically). Applies
   site-wide since nothing about it is desktop-only content. */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],input[type="search"],input[type="number"],textarea{max-width:100%; box-sizing:border-box;}
#commentform textarea,#commentform input[type="text"],#commentform input[type="email"],#commentform input[type="url"]{width:100%; background:var(--ink-2); border:1px solid var(--line); color:var(--paper); border-radius:2px; padding:12px;}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-top-color:var(--amber); background:var(--ink-2); color:var(--paper);}

/* ---------- reveal ---------- */
[data-reveal]{opacity:1;}
[data-reveal].pre{opacity:0; transform:translateY(26px);}
[data-reveal].in{opacity:1; transform:translateY(0); transition:opacity .85s cubic-bezier(.16,.8,.24,1),transform .85s cubic-bezier(.16,.8,.24,1);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); overflow:hidden;}
.foot-vine{width:100%; height:60px; opacity:.5; margin-bottom:6px;}
.foot-cta{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; padding:54px 0 60px; border-bottom:1px solid var(--line);}
.foot-cta h2{font-size:clamp(26px,3.6vw,44px); margin:0; color:var(--paper); max-width:22ch;}
.foot-top{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:44px; padding:60px 0;}
.foot-brand p{font-size:13px; color:var(--paper-dim); margin-top:16px; max-width:34ch;}
.foot-social{display:flex; gap:12px; margin-top:22px;}
.foot-social a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--paper-dim); transition:border-color .25s ease,color .25s ease,background .25s ease;}
.foot-social a:hover{border-color:var(--amber-dim); color:var(--amber); background:var(--ink-3);}
.site-footer h5{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); margin:0 0 16px;}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.site-footer a{font-size:13px; color:var(--paper-dim);}
.site-footer a:hover{color:var(--paper);}
.foot-bottom{display:flex; justify-content:space-between; padding:22px 0; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:11px; color:var(--paper-dim); flex-wrap:wrap; gap:10px;}

/* ---------- section variants (replace former inline styles) ---------- */
.section--flush{padding:0;}
.section--tight-top{padding-top:0;}
.section-head--center{justify-content:center; text-align:center;}

/* ---------- order assurances ---------- */
.assure{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.assure__item{background:var(--ink-2); padding:28px 24px;}
.assure__item h3{font-size:19px; margin:0 0 8px; color:var(--paper);}
.assure__item p{font-size:13.5px; color:var(--paper-dim); margin:0;}

/* ---------- shop extras ---------- */
.shop-head__desc{color:var(--paper-dim); max-width:56ch; margin:12px 0 0;}
.shop-toolbar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.shop-toolbar .woocommerce-result-count,.shop-toolbar .woocommerce-ordering{margin:0; float:none;}
.woo-wrap,.archive .site-main > .wrap{padding-bottom:clamp(56px,8vw,96px);}
/* WooCommerce pages already sit below the measured header offset; the full
   section top padding on top of that left an empty band above the breadcrumb. */
.woo-wrap.section{padding-top:clamp(20px,3vw,36px);}
/* The Description tab repeats its own name as a heading inside the panel. */
.woocommerce-Tabs-panel--description > h2:first-child{display:none;}
.shop-empty{padding:40px 0 20px; max-width:56ch;}
.shop-empty h2{font-size:clamp(26px,3.4vw,38px); margin:0 0 12px; color:var(--paper);}
.shop-empty p{color:var(--paper-dim); margin:0 0 24px;}
.shop-empty__cta,.not-found__cta{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- generic pages ---------- */
.page-content{max-width:820px;}
.page-content--wide{max-width:var(--wrap);}
.page-head{margin-bottom:32px;}
.page-head h1{font-size:clamp(30px,4vw,50px); margin:0; color:var(--paper);}
.entry{color:var(--paper-dim); font-size:15.5px;}
.entry > * + *{margin-top:1em;}
.entry h2,.entry h3,.entry h4{color:var(--paper); margin-top:1.6em; margin-bottom:.4em;}
.entry h2{font-size:clamp(24px,3vw,32px);} .entry h3{font-size:22px;}
.entry a{color:var(--amber); text-decoration:underline; text-underline-offset:3px;}
.entry ul,.entry ol{padding-left:1.3em;}
.entry li + li{margin-top:.4em;}
.entry strong{color:var(--paper);}

/* ---------- search form (404, search pages) ---------- */
.search-form:not(.search-form--compact){display:flex; gap:8px; width:100%; max-width:460px;}
.search-form:not(.search-form--compact) .search-field{flex:1; min-width:0; background:var(--ink-2); border:1px solid var(--line); color:var(--paper); padding:12px 14px; border-radius:2px; font:inherit; font-size:15px;}
.search-form:not(.search-form--compact) .search-field::placeholder{color:var(--paper-dim);}
.not-found{min-height:60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px;}
.not-found h1{font-size:clamp(32px,5vw,56px); margin:0; color:var(--paper);}
.not-found p{color:var(--paper-dim); margin:0;}

/* ---------- responsive ---------- */
/* Header switches to the hamburger earlier (1280px) than the other
   sections' own 1000px breakpoint below: with 8 nav links including
   "Livestock & Cleanup Crew" plus a search field, cart and CTA, the
   full row's minimum content width is ~1150px+ — anything under that
   overflows the viewport, so this needs its own, wider threshold. */
@media (max-width:1279px){
  .nav-main{display:none;} .nav-toggle{display:flex;} .header-actions .btn{display:none;}
  .search-form--compact{max-width:240px;}
}
@media (max-width:1000px){
  .trust{grid-template-columns:repeat(2,1fr);} .trust__item:nth-child(3){border-left:none;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  ul.products,.product-grid{grid-template-columns:repeat(3,1fr);}
  .flagship{grid-template-columns:1fr; gap:36px;} .flagship__frame img{height:420px;}
  .craft{grid-template-columns:1fr; gap:36px;} .craft__img img{height:360px;}
  .value-grid{grid-template-columns:1fr;}
  .assure{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr 1fr; gap:32px;}
  /* Single product page: image | details side-by-side had no mobile
     override at all, squeezing both into narrow columns and pushing
     the SKU/enquire button/review form past the edge. */
  .woocommerce div.product{grid-template-columns:1fr; gap:28px;}
  /* Two action buttons only have safe room to sit side by side in the
     spacious 4-column desktop layout (>1000px, cards >=211px). At 3, 2
     and 1 columns (this breakpoint and narrower) cards run as low as
     ~174px, under the ~190-200px combined min-content width of "Add to
     Cart" + "Buy Now" — stack instead so each button gets the full card
     width. Reuses this existing 1000px breakpoint (already the grid's
     own 4-col/3-col boundary) rather than a new, more fragile number. */
  .product-card__actions{flex-direction:column;}
  ul.products li.product .product-card__actions .button,
  .product-card .product-card__actions .button{
    flex:none; width:100%;
  }
  /* Made-to-order cards only ever render one button (Buy Now is hidden
     for them), so their actions block was naturally ~42px tall while a
     two-button neighbor's was ~91px (42+8 gap+42) — same card height
     either way, but the lone button sat pinned to the bottom with an
     empty gap above it, looking unbalanced next to a full two-button
     card in the same row. Reserve the two-button height always and
     center within it, so a single button sits centered in that same
     slot instead of bottom-anchored with dead space above. */
  .product-card__actions{min-height:92px; justify-content:center;}
}
@media (max-width:680px){
  .section{padding-block:56px;}
  .search-form--compact{padding-block:4px;}
  .search-form--compact .search-field{min-height:32px; font-size:16px;}
  .section-head .lnk{padding-top:12px;}
  ul.products,.product-grid{grid-template-columns:1fr 1fr; gap:16px;}
  .cat-grid{grid-template-columns:1fr;}
  .hero{min-height:88vh;} .hero__scroll{display:none;}
  .flagship__frame img{height:320px;} .craft__img img{height:280px;}
  .value-card{padding:32px;}
  .section-head{gap:12px;}
  .foot-cta{flex-direction:column; align-items:flex-start;}
  .foot-top{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;}
  .assure{grid-template-columns:1fr;}
  /* Safety net for the smallest phones: if brand + search + cart +
     hamburger can't all fit on one line, let the search field wrap to
     its own full-width row rather than squeezing to unreadable width. */
  .site-header .wrap{flex-wrap:wrap; row-gap:10px;}
  .search-form--compact{order:3; flex:1 1 100%; max-width:none;}
}
@media (max-width:339px){ ul.products,.product-grid{grid-template-columns:1fr;} }