/*
Theme Name: Mancave
Theme URI: https://www.ultimatemancave.co.nz
Author: The Ultimate Mancave
Description: Custom theme for The Ultimate Mancave. Replaces Elessi + Elementor. Built from the approved 2026 mockups: brass-and-slate palette drawn from the tables, Archivo + Newsreader, ink/bone section alternation, the brass diamond rail. No page builder, no framework, no build step.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: mancave
Tags: woocommerce, ecommerce, custom
*/

/* ---------- fonts ----------
   The theme's own copies of Archivo and Newsreader (Google Fonts, SIL Open
   Font Licence), variable: one file per style covers every weight and width.
   latin, then latin-ext for the macrons in Māori place names; a browser only
   fetches a file when the page has a character in its range. Why they aren't
   loaded from Google: inc/performance.php. */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:300 900; font-stretch:75% 125%; font-display:swap; src:url(assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:300 900; font-stretch:75% 125%; font-display:swap; src:url(assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:300 600; font-display:swap; src:url(assets/fonts/newsreader-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:300 600; font-display:swap; src:url(assets/fonts/newsreader-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap; src:url(assets/fonts/newsreader-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:300 700; font-display:swap; src:url(assets/fonts/newsreader-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================================
   Base = the shared design system, lifted verbatim from the approved
   homepage mockup. Page-specific rules live in assets/pages/*.css and are
   enqueued only where they're needed.
   ========================================================================= */
/* ============================================================
   THE ULTIMATE MANCAVE — homepage concept
   Palette drawn from the table itself: slate bed, baize cloth,
   brass pocket fittings, chalk, ivory.
   ============================================================ */
:root{
  --ink:      #0C0F11;   /* the room with the lights down */
  --ink-2:    #14181B;
  --slate:    #1C2226;   /* the bed under the cloth */
  --baize:    #123D2B;   /* championship green */
  --baize-lo: #0C2A1E;
  --brass:    #C9A96B;   /* pocket fittings, cue ferrules */
  --brass-lo: #8A7444;
  --chalk:    #7FA8C6;   /* the cube in your pocket */
  --bone:     #EFEBE4;   /* the cue ball */
  --bone-2:   #E2DCD1;
  --dim:      rgba(239,235,228,.60);
  --dimmer:   rgba(239,235,228,.40);
  --line:     rgba(239,235,228,.13);
  --line-ink: rgba(12,15,17,.14);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Newsreader', Georgia, serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ins{ text-decoration:none; }   /* WooCommerce wraps sale prices in <ins>; it is not a link */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--chalk); outline-offset:3px; }

/* ---------- type roles ---------- */
.eyebrow{
  font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass);
  margin:0 0 1.1rem;
}
.eyebrow--ink{ color:var(--brass-lo); }
h1,h2,h3,.h{
  font-family:var(--display); font-variation-settings:'wdth' 108;
  text-transform:uppercase; margin:0; line-height:.96;
  letter-spacing:-.015em; font-weight:800;
}
h1{ font-size:clamp(2.35rem,1.5rem + 3.2vw,4.15rem); line-height:.94; text-wrap:balance; }
h2{ font-size:clamp(1.85rem,1.2rem + 2.4vw,3.1rem); }
h3{ font-size:clamp(1.1rem,1rem + .5vw,1.4rem); letter-spacing:0; }
.lead{ font-size:clamp(1.1rem,1rem + .55vw,1.35rem); color:var(--dim); max-width:56ch; line-height:1.6; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sec{ padding-block:clamp(3.25rem,5.5vw,5.5rem); position:relative; }
.sec--bone{ background:var(--bone); color:var(--ink); }
/* --dim is bone at 60%, which vanishes on bone. Same slate as the FAQ copy. */
.sec--bone .lead{ color:#41505a; }
.sec--baize{ background:var(--baize-lo); }
.sec--tight{ padding-block:clamp(2rem,3.2vw,3rem); }
.sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem 2.5rem; margin-bottom:clamp(1.75rem,3vw,3rem); }
.sec-head > div{ flex:1 1 22rem; }
.sec-head > .lead{ flex:0 1 42ch; margin:0; }
.sec-head > .btn{ flex:none; }
/* Eyebrow stacked over the heading, both centred. The eyebrow's own margin
   does the spacing, as it does inside the default head's column. */
.sec-head--center{ flex-direction:column; align-items:center; row-gap:0; text-align:center; }
/* Stacked, the side-by-side sizes above would turn into heights (42ch of lead
   became a 440px gap), so the children take their natural size here. */
.sec-head.sec-head--center > *{ flex:none; }
.sec-head.sec-head--center > .lead{ max-width:52ch; margin-top:.9rem; }

/* ---------- the rail: brass diamonds on a table rail ----------
   Diamonds on a real table mark position. Here they do the same
   job — they mark position in the range. This is the page's
   one recurring signature.                                     */
.rail{
  --rail-h: 78px;
  position:relative; z-index:3;
  background:linear-gradient(180deg,#20160F 0%,#150E09 45%,#0E0906 100%);
  border-top:1px solid rgba(201,169,107,.45);
  border-bottom:1px solid rgba(0,0,0,.9);
  box-shadow:0 -18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.rail-inner{
  display:grid; grid-template-columns:repeat(6,1fr);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}
.rail-item{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:1.15rem .4rem 1.05rem; position:relative;
  transition:background .25s ease;
}
.rail-item + .rail-item::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%;
  width:1px; background:rgba(201,169,107,.16);
}
.diamond{
  display:block; width:11px; height:11px; transform:rotate(45deg);
  border:1px solid var(--brass); background:transparent;
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rail-item span{
  font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--dim);
  text-align:center; transition:color .25s ease;
}
.rail-item:hover{ background:rgba(201,169,107,.05); }
.rail-item:hover .diamond{ background:var(--brass); box-shadow:0 0 14px rgba(201,169,107,.55); transform:rotate(45deg) scale(1.15); }
.rail-item:hover span{ color:var(--bone); }

/* divider: the same diamonds, resting */
.rule{ display:flex; align-items:center; gap:.7rem; justify-content:center; margin-block:clamp(2.5rem,5vw,4rem); }
.rule::before,.rule::after{ content:''; height:1px; flex:1; background:var(--line); }
.rule i{ display:block; width:7px; height:7px; flex:none; transform:rotate(45deg); border:1px solid var(--brass-lo); }
.sec--bone .rule::before,.sec--bone .rule::after{ background:var(--line-ink); }

/* ---------- utility bar + header ---------- */
.util{
  background:#080A0B; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.util .wrap{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; padding-block:.6rem; }
.util b{ color:var(--brass); font-weight:600; }

/* mobile menu */
.burger{ display:none; background:transparent; border:1px solid var(--line); padding:.55rem .7rem; cursor:pointer; line-height:0; }
.burger svg{ width:20px; height:20px; }
.mobnav{ display:none; border-top:1px solid var(--line); background:var(--ink); }
.mobnav[data-open="true"]{ display:block; }
.mobnav ul{ list-style:none; margin:0; padding:.5rem var(--pad) 1.25rem; display:grid; gap:.1rem; }
.mobnav a{ display:block; padding:.85rem 0; border-bottom:1px solid var(--line); font-family:var(--display); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.mobnav a:hover{ color:var(--bone); }

.site-head{ position:sticky; top:0; z-index:50; background:rgba(12,15,17,.68); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; gap:2rem; padding-block:.75rem; }
/* The logo is wide (about 3.6 to 1), so it is sized by height and left to
   find its own width. Tall enough that "The Ultimate" above the wordmark
   still reads. */
.logo{ display:inline-flex; align-items:center; flex:none; }
/* The class is there for weight: on shop, product and cart pages WooCommerce
   sets every image to height:auto and loads after this file, and would
   otherwise blow the logo up to its full drawn size. */
.logo img.mancave-logo{ display:block; height:52px; width:auto; max-width:none; }
/* The nav stretches to the header's full height so the Shop hover target runs
   right down to the header edge — no dead gap between it and the panel. */
.mainnav{ display:flex; gap:1.6rem; margin-left:auto; align-self:stretch; align-items:center; }
.mainnav a{
  font-family:var(--display); font-size:.74rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--dim);
  padding-block:.35rem; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.mainnav a:hover{ color:var(--bone); border-color:var(--brass); }
/* Top-level items stay on one line; the mega menu's tiles may wrap. */
.mainnav > a,
.mega-menu-trigger > a{ white-space:nowrap; }
/* Padding + matching negative margin grows the hover box down to the header's
   edge without moving anything, so the pointer never crosses a gap on its way
   from Shop into the panel (which would close it mid-travel). */
.mega-menu-trigger{ display:flex; align-items:center; align-self:stretch; padding-block:1rem; margin-block:-1rem; }
/* Anchored to .site-head (sticky, so it is the containing block) rather than to
   the Shop link, so the panel spans the header instead of hanging off the right
   edge and forcing the whole page into horizontal scroll. */
/* 90% + blur, not the old 98%: that alpha let the hero headline ghost straight
   through with no blur to soften it. This stays glassy without it reading. */
.mega-menu{ position:absolute; top:100%; left:0; right:0; background:rgba(12,15,17,.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(0,0,0,.45);
  padding:2rem var(--pad) 2.25rem; max-height:calc(100vh - 7rem); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s, transform .3s, visibility .3s; }
.mega-menu-trigger:hover .mega-menu,
.mega-menu-trigger:focus-within .mega-menu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.mega-menu-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1.25rem;
  max-width:var(--maxw); margin-inline:auto; }
.mega-item{ display:flex; flex-direction:column; align-items:center; gap:.8rem; text-decoration:none;
  padding:.8rem; border-radius:4px; transition:background .2s, color .2s; }
.mega-item:hover{ background:rgba(201,169,107,.1); }
/* height:auto matters. Without it the img's height="300" attribute counts as a
   specified dimension, aspect-ratio is ignored, and the thumbnails render tall. */
.mega-item img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:3px; }
.mega-item span{ font-family:var(--display); font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone); text-align:center; }
.mega-item-all{ grid-column:1 / -1; justify-content:center; }
.mega-item-all span{ font-size:.8rem; padding:.8rem 1.5rem; border:1px solid var(--brass); border-radius:4px; }
.head-tools{ display:flex; gap:1rem; align-items:center; color:var(--dim); }
/* Every icon link the same 19px box. Left as blocks around an inline SVG, the
   search and account links were a line tall with the icon at the top, so the
   cart (a flex box) sat 6px lower than them. */
.head-tools > a{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.head-tools svg{ display:block; width:19px; height:19px; }
.head-tools a:hover{ color:var(--brass); }
/* How many things are in the cart, pinned to the icon's shoulder. */
.head-tools .cart-link{ position:relative; display:inline-flex; }
.cart-count{
  position:absolute; top:-.5rem; right:-.65rem; min-width:1.1rem; height:1.1rem; padding:0 .28rem; border-radius:999px;
  background:var(--brass); color:#100C05; font-family:var(--display); font-size:.6rem; font-weight:800; line-height:1.1rem; text-align:center;
}
.cart-count[hidden]{ display:none; }

/* ---------- hero ---------- */
/* Hero height tracks the photo's own 2.07:1 ratio, so the shot is shown close
   to as composed instead of being cropped to a letterbox. */
.hero{ position:relative; min-height:clamp(500px,48vw,700px); display:flex; align-items:center; overflow:hidden; }
/* Single layer. CSS downloads every background-image in the stack even when the
   top one covers, so the old hero.png / live-site fallbacks were a guaranteed
   404 plus a wasted remote fetch on every load. */
.hero-bg{
  position:absolute; inset:0;
  background-image:url('hero.jpg');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* The photo's left third is already near-black, so the scrim only needs to
   guarantee text contrast — anything heavier flattens the room out. */
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(6,8,9,.86) 0%, rgba(6,8,9,.70) 30%, rgba(6,8,9,.22) 58%, rgba(6,8,9,0) 76%),
    linear-gradient(180deg, rgba(6,8,9,.55) 0%, transparent 26%, transparent 72%, rgba(6,8,9,.55) 100%);
}
.hero .wrap{ position:relative; z-index:2; padding-block:clamp(3rem,7vw,5rem); }

/* ---------- page-load sequence ----------
   A slow push-in on the photo, the copy rising under it, then the rail
   diamonds lighting left to right like a table coming on. One orchestrated
   moment, then the page sits still. */
@keyframes heroPush{ from{ transform:scale(1.085); } to{ transform:scale(1); } }
@keyframes heroLift{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes diamondOn{
  0%{ opacity:0; transform:rotate(45deg) scale(.3); }
  55%{ opacity:1; box-shadow:0 0 18px rgba(201,169,107,.75); }
  100%{ opacity:1; transform:rotate(45deg) scale(1); box-shadow:0 0 0 rgba(201,169,107,0); }
}
.hero-bg{ animation:heroPush 2400ms cubic-bezier(.16,.72,.2,1) backwards; }
.hero-copy > *{ animation:heroLift 850ms cubic-bezier(.2,.7,.2,1) backwards; }
.hero-copy > *:nth-child(1){ animation-delay:.18s; }
.hero-copy > *:nth-child(2){ animation-delay:.34s; }
.hero-copy > *:nth-child(3){ animation-delay:.48s; }
.hero-copy > *:nth-child(4){ animation-delay:.60s; }
.rail-item .diamond{ animation:diamondOn 720ms ease backwards; }
.rail-item:nth-child(1) .diamond{ animation-delay:.80s; }
.rail-item:nth-child(2) .diamond{ animation-delay:.89s; }
.rail-item:nth-child(3) .diamond{ animation-delay:.98s; }
.rail-item:nth-child(4) .diamond{ animation-delay:1.07s; }
.rail-item:nth-child(5) .diamond{ animation-delay:1.16s; }
.rail-item:nth-child(6) .diamond{ animation-delay:1.25s; }
.hero-copy{ max-width:min(100%,790px); }
.hero .lead{ max-width:52ch; }
.hero h1{ margin-bottom:1.4rem; }
.hero h1 em{ font-style:normal; color:var(--brass); }
.hero .lead{ margin:0 0 2rem; color:rgba(239,235,228,.78); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.25rem; }
.btn{
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--display); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border:1px solid var(--brass); background:var(--brass); color:#100C05;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.btn:hover{ background:#DCBE7E; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--bone); border-color:rgba(239,235,228,.35); }
.btn--ghost:hover{ background:rgba(239,235,228,.09); color:var(--bone); border-color:var(--bone); }
.btn--ink{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn--ink:hover{ background:#22292d; }

.trustline{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; font-size:.95rem; color:var(--dim); }
.stars{ color:var(--brass); letter-spacing:.12em; font-size:.95rem; }
.trustline b{ color:var(--bone); font-weight:600; }

/* ---------- category tiles ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.2vw,1rem); }
.cat{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--slate);
  border:1px solid var(--line); display:flex; align-items:flex-end;
}
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.74); transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(8,10,11,.92) 100%); }
.cat-body{ position:relative; z-index:2; padding:1.35rem 1.25rem; width:100%; }
.cat h3{ margin-bottom:0; }
.cat:hover img{ transform:scale(1.07); filter:saturate(1) brightness(.85); }
.cat:hover{ border-color:rgba(201,169,107,.5); }

/* ---------- product cards ---------- */
.prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.9rem,1.6vw,1.5rem); }
.prod{ background:var(--ink-2); border:1px solid var(--line); display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease; }
.prod:hover{ border-color:rgba(201,169,107,.45); transform:translateY(-4px); }
.prod-img{ position:relative; aspect-ratio:1; overflow:hidden; background:#0f1315; }
.prod-img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.prod:hover .prod-img img{ transform:scale(1.05); }
.tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-family:var(--display); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.35rem .6rem; background:var(--brass); color:#100C05;
}
.tag--quiet{ background:rgba(8,10,11,.8); color:var(--bone); border:1px solid var(--line); }
.prod-body{ padding:1.1rem 1.15rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.prod-body h3{ font-size:1.02rem; letter-spacing:0; font-variation-settings:'wdth' 100; }
.rate{ font-family:var(--display); font-size:.72rem; letter-spacing:.06em; color:var(--dim); display:flex; gap:.45rem; align-items:center; }
.rate .stars{ font-size:.8rem; }
.price{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-top:auto; display:flex; align-items:baseline; gap:.6rem; }
.was{ font-size:.9rem; font-weight:600; color:var(--dim); text-decoration:line-through; text-decoration-thickness:1.5px; }
.swatches{ display:flex; gap:.4rem; align-items:center; }
.sw{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(239,235,228,.35); }
.ship{ font-family:var(--display); font-size:.63rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk); }

/* ---------- editorial features ---------- */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(1.5rem,4vw,4.5rem); }
.feature--flip .feature-media{ order:2; }
.feature-media{ position:relative; }
.feature-media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.feature-media--square img{ aspect-ratio:1; }   /* a tall arcade cabinet needs the height */
/* The slate section: the big photo with two more of the range under it. */
.feature-media--stack{ display:grid; gap:.75rem; }
.feature-shot, .feature-thumb figure{ position:relative; margin:0; overflow:hidden; }
.feature-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
/* Proportions picked so the column comes out about as tall as the text beside
   it at laptop widths: a slightly taller main photo, square ones under it. */
.feature-shot img{ aspect-ratio:5/4; }
.feature-thumb img{ aspect-ratio:1; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.feature-thumb:hover img{ transform:scale(1.04); }
.feature-thumb figcaption{ padding:.5rem .75rem; font-size:.58rem; }
.feature-thumb:hover figcaption{ color:var(--bone); }
.feature-media figcaption{
  position:absolute; bottom:0; left:0; right:0; padding:.7rem 1rem;
  background:#0A0C0D;   /* solid: a see-through band turns grey over a bright photo */
  font-family:var(--display); font-size:.63rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.spec-list{ list-style:none; margin:1.75rem 0 2rem; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.spec-list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.spec-list dt,.spec-k{ font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); min-width:8.5rem; }
.spec-v{ color:var(--dim); font-size:.98rem; }

/* ---------- will it fit (the drafting sheet) ---------- */
.fit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(1.75rem,4vw,4rem); align-items:start; }
.fit-controls label{ display:block; font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#5c6a72; margin-bottom:.5rem; }
.fit-field{ margin-bottom:1.6rem; }
.fit-val{ font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink); }
.fit-val small{ font-size:1rem; font-weight:500; color:#5c6a72; margin-left:.2rem; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:rgba(12,15,17,.22); margin-top:1rem; cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; background:var(--ink); border:3px solid var(--bone); box-shadow:0 0 0 1px var(--ink); transform:rotate(45deg); cursor:grab; }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; background:var(--ink); border:3px solid var(--bone); box-shadow:0 0 0 1px var(--ink); transform:rotate(45deg); cursor:grab; }
.cue-toggle{ display:flex; gap:0; border:1px solid var(--line-ink); width:fit-content; margin-bottom:1.75rem; }
.cue-toggle button{ background:transparent; border:0; padding:.7rem 1.1rem; cursor:pointer; font-family:var(--display); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#5c6a72; transition:background .2s,color .2s; }
.cue-toggle button[aria-pressed=true]{ background:var(--ink); color:var(--bone); }
.fit-results{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-ink); }
.fit-results li{ display:flex; align-items:center; gap:.85rem; padding:.72rem 0; border-bottom:1px solid var(--line-ink); cursor:pointer; transition:opacity .2s; }
.fit-results li[data-active=true]{ font-weight:600; }
.fit-results li[data-active=true] .fit-name{ color:var(--ink); }
.fit-name{ font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; color:#5c6a72; flex:1; }
.fit-dim{ font-family:var(--display); font-size:.72rem; letter-spacing:.06em; color:#8b969c; font-variant-numeric:tabular-nums; }
.mark{ width:20px; height:20px; flex:none; display:grid; place-items:center; font-size:.7rem; font-weight:700; }
.mark--y{ background:#16543C; color:var(--bone); }
.mark--n{ background:rgba(12,15,17,.1); color:#8b969c; }
.plan{ background:#F7F5F1; border:1px solid var(--line-ink); padding:clamp(1rem,2.5vw,1.75rem); }
.plan svg{ width:100%; height:auto; display:block; }
.plan-note{ font-size:.88rem; color:#5c6a72; margin:1rem 0 0; }
.verdict{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,1rem + .8vw,1.6rem); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 .4rem; }

/* ---------- faq ---------- */
.faq{ max-width:80ch; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line-ink); }
.faq summary{ cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative; font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; position:absolute; right:.4rem; top:50%; width:9px; height:9px; border-right:1.5px solid var(--brass-lo); border-bottom:1.5px solid var(--brass-lo); transform:translateY(-70%) rotate(45deg); transition:transform .25s ease; }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq p{ margin:0 0 1.3rem; color:#41505a; max-width:70ch; }
.faq p a{ color:#6f5a2c; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.faq p a:hover{ color:var(--ink); }

/* ---------- reviews ---------- */
.rev-head{ text-align:center; margin-bottom:clamp(2rem,4vw,3rem); }
.rev-score{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,2rem + 4vw,5.5rem); line-height:1; letter-spacing:-.03em; color:var(--brass); }
.revs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(.9rem,1.6vw,1.4rem); }
.rev{ border:1px solid var(--line); padding:1.5rem 1.4rem; background:var(--ink-2); display:flex; flex-direction:column; gap:.85rem; }
.rev blockquote{ margin:0; font-size:1.02rem; line-height:1.6; color:var(--bone); }
.rev footer{ font-family:var(--display); font-size:.66rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--dimmer); margin-top:auto; }
.rev footer b{ color:var(--dim); font-weight:600; }

/* ---------- delivery strip ---------- */
.strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0; border:1px solid var(--line); }
.strip > div{ padding:clamp(1.5rem,2.5vw,2.25rem); border-right:1px solid var(--line); }
.strip > div:last-child{ border-right:0; }
.strip h3{ font-size:.95rem; letter-spacing:.1em; margin-bottom:.7rem; color:var(--brass); font-variation-settings:'wdth' 100; }
.strip p{ margin:0; color:var(--dim); font-size:.98rem; }

/* ---------- seo copy ---------- */
/* Centred under the centred diamond rule; left-aligned, the block sat to one
   side of the page with an empty column beside it. */
.strip p a{ color:var(--brass); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.strip p a:hover{ color:var(--bone); }
.copyblock{ columns:2; column-gap:clamp(2rem,5vw,4.5rem); max-width:100ch; margin-inline:auto; }
.copyblock-head{ text-align:center; margin-bottom:1.75rem; }
.copyblock p{ margin:0 0 1.15rem; color:var(--dim); break-inside:avoid; }
.copyblock p:first-child{ color:var(--bone); font-size:1.15rem; }

/* ---------- footer ---------- */
.site-foot{ background:#080A0B; border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(1.5rem,3vw,3rem); }
.foot-grid h3{ font-size:.7rem; letter-spacing:.2em; color:var(--brass); margin-bottom:1.1rem; font-variation-settings:'wdth' 100; }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.foot-grid a{ color:var(--dim); font-size:.95rem; }
.foot-grid a:hover{ color:var(--bone); }
.foot-grid img.mancave-logo{ display:block; height:66px; width:auto; max-width:100%; margin-bottom:1.35rem; }
.foot-grid p{ color:var(--dim); font-size:.92rem; margin:0; }
.foot-base{ border-top:1px solid var(--line); margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color:var(--dimmer); }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .feature{ grid-template-columns:1fr; }
  .feature--flip .feature-media{ order:0; }
  .feature-thumbs{ display:none; }   /* stacked on a phone or tablet, the big photo is enough */
  .fit{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .copyblock{ columns:1; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .prods{ grid-template-columns:repeat(2,1fr); }
}
/* Six across gets cramped before the nav itself does, so the mega grid drops to
   three on its own breakpoint rather than riding the layout one. */
@media (max-width:1140px){
  .mega-menu-grid{ grid-template-columns:repeat(3,1fr); }
}
/* The logo is wide, so the full menu needs about 900px. Below that the
   menu goes behind the burger rather than wrapping "Pool Table Delivery"
   onto three lines; between 900 and 1100 the logo steps down a size. */
@media (max-width:1100px){
  .logo img.mancave-logo{ height:46px; }
}
@media (max-width:900px){
  /* Burger has to appear at the same breakpoint the desktop nav disappears,
     or there is a band of widths left with no navigation at all. */
  .mainnav{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .head-tools{ margin-left:0; }
}
@media (max-width:640px){
  .rail-inner{ grid-template-columns:repeat(3,1fr); }
  .rail-item:nth-child(3n+1)::before{ display:none; }
  .rail-item:nth-child(n+4){ border-top:1px solid rgba(201,169,107,.16); }
  /* A 2:1 photo inside a tall phone viewport crops to a useless sliver and
     puts type on the bright steel. Show it as a band above the copy instead. */
  .hero{ --band:80vw; min-height:auto; align-items:flex-start; }
  .hero-bg{
    background-size:165% auto;
    background-position:62% top;
  }
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(6,8,9,.28) 0%,
      rgba(6,8,9,.30) calc(var(--band) * .55),
      rgba(6,8,9,.86) calc(var(--band) * .88),
      #0C0F11 var(--band));
  }
  .hero .wrap{ padding-top:calc(var(--band) + 1.5rem); padding-bottom:2.75rem; }
  .util .wrap{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:1.1rem; font-size:.6rem; scrollbar-width:none; }
  .util .wrap > span{ white-space:nowrap; }
  .util .wrap::-webkit-scrollbar{ display:none; }
  .head-tools{ gap:.75rem; }
  .site-head .wrap{ gap:.9rem; }
  .logo img.mancave-logo{ height:40px; }
  .cats{ grid-template-columns:1fr; }
  .prods{ grid-template-columns:1fr; }
  .cta-row .btn{ flex:1 1 100%; justify-content:center; }
  .fit-results li{ flex-wrap:wrap; row-gap:.2rem; }
  .fit-name{ flex:1 1 auto; }
  .fit-dim{ flex:1 1 100%; padding-left:calc(20px + .85rem); }
  .strip > div{ border-right:0; border-bottom:1px solid var(--line); }
  .strip > div:last-child{ border-bottom:0; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero{ min-height:auto; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* -------------------------------------------------------------------------
   Migration guard.
   Elementor's global "kit" stylesheet paints body #FFFEFA, and LiteSpeed
   combines every stylesheet into one bundle so source order can't be relied
   on. Higher specificity (0,1,2 vs Elementor's 0,1,1) settles it without
   !important. Delete this block once Elementor is uninstalled.
   ---------------------------------------------------------------------- */
html body.theme-mancave{ background:var(--ink); color:var(--bone); }
html body.theme-mancave .sec--bone{ background:var(--bone); color:var(--ink); }


/* ---------- long-form text: guides and policy pages ----------
   Plain HTML from the editor (p, h2, h3, lists, tables, hr), set for reading. */
.prose{ max-width:68ch; color:var(--dim); font-size:clamp(1.02rem,.98rem + .25vw,1.12rem); line-height:1.72; }
.prose > :first-child{ margin-top:0; }
.prose p{ margin:0 0 1.25rem; }
.prose h2{ font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem); line-height:1.08; color:var(--bone); margin:2.6rem 0 1rem; }
.prose h3{ font-size:clamp(1.05rem,1rem + .4vw,1.25rem); color:var(--bone); margin:2rem 0 .8rem; }
.prose h4{ font-family:var(--display); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); margin:1.6rem 0 .6rem; }
.prose strong, .prose b{ color:var(--bone); font-weight:600; }
.prose a{ color:var(--brass); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover{ color:#DCBE7E; }
.prose ul, .prose ol{ margin:0 0 1.35rem; padding-left:1.25rem; }
.prose li{ margin:0 0 .5rem; padding-left:.25rem; }
.prose ul li::marker{ color:var(--brass); }
.prose hr{ border:0; height:1px; background:var(--line); margin:2.4rem 0; }
.prose blockquote{ margin:1.6rem 0; padding:.2rem 0 .2rem 1.2rem; border-left:2px solid var(--brass); color:var(--bone); font-style:italic; }
.prose img{ height:auto; margin:1.5rem 0; border:1px solid var(--line); }
.prose .table-scroll{ margin:1.5rem 0 1.75rem; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); }
.prose table{ width:100%; min-width:32rem; border-collapse:collapse; font-size:.95rem; line-height:1.45; background:var(--ink-2); }
.prose th, .prose td{ padding:.75rem .9rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.prose thead th{ font-family:var(--display); font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); background:#0F1315; }
.prose tbody tr:last-child td{ border-bottom:0; }
.prose td{ color:var(--bone); }

/* ---------- a guide ---------- */
.post-head{ padding-bottom:clamp(1.5rem,3vw,2.25rem); }
.post-head .wrap{ max-width:calc(68ch + var(--pad) * 2); }
.post-head .eyebrow a:hover{ color:var(--bone); }
.post-head h1{ font-size:clamp(1.9rem,1.25rem + 2.6vw,3.3rem); line-height:1; }
.post-meta{ margin:1.1rem 0 0; color:var(--dimmer); font-size:.95rem; }
.post-hero{ max-width:calc(960px + var(--pad) * 2); margin:0 auto; }
.post-hero img{ width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border:1px solid var(--line); }
.post-body{ padding-top:clamp(2rem,4vw,3rem); }
.post-body .wrap{ max-width:calc(68ch + var(--pad) * 2); }
.post-more{ border-top:1px solid var(--line); }
.post-cards .prod-img{ aspect-ratio:16 / 10; }
.post-cards .prod-body p{ margin:0; color:var(--dim); font-size:.95rem; line-height:1.55; }
.page-numbers{ list-style:none; display:flex; gap:.4rem; padding:0; margin:2rem 0 0; }
.page-numbers li a, .page-numbers li span{ display:grid; place-items:center; min-width:2.5rem; height:2.5rem; padding:0 .6rem; border:1px solid var(--line); font-family:var(--display); font-size:.8rem; }
.page-numbers li .current{ border-color:var(--brass); color:var(--brass); }

/* ---------- the slide-in cart ----------
   Adding to cart is AJAX, so the page never moves. This shows what went in
   without sending anyone away from the shop. Contents are WooCommerce's own
   mini cart, refreshed by Woo's fragment mechanism. */
.drawer-scrim{
  position:fixed; inset:0; z-index:80; background:rgba(6,8,9,.66);
  backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease;
}
.drawer-scrim[data-open="true"]{ opacity:1; }
.drawer-scrim[hidden]{ display:none; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:81;
  width:min(100%,26rem); display:flex; flex-direction:column;
  background:var(--ink-2); border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.7,.2,1);
  visibility:hidden;
}
.drawer[data-open="true"]{ transform:none; visibility:visible; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem var(--pad-drawer,1.5rem); border-bottom:1px solid var(--line); flex:none;
}
.drawer-head .eyebrow{ margin:0; }
.drawer-close{
  background:none; border:0; color:var(--dim); cursor:pointer; padding:.35rem;
  display:flex; transition:color .2s ease;
}
.drawer-close:hover{ color:var(--brass); }
.drawer-close svg{ width:22px; height:22px; }

.drawer-contents{ flex:1 1 auto; overflow-y:auto; min-height:0; }
.drawer-body{ padding:1.25rem var(--pad-drawer,1.5rem); }
.drawer-empty{ text-align:center; padding:2.5rem 0; }
.drawer-empty p{ color:var(--dim); margin-bottom:1.25rem; }

/* The mini cart (woocommerce/cart/mini-cart.php): photo, name with quantity
   and price under it, remove. The weight in these selectors is there to beat
   WooCommerce's widget CSS on shop pages, which floats the photo right at 32px
   and indents every line for a remove button it puts on the left. */
.drawer ul.woocommerce-mini-cart{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; column-gap:.95rem; align-items:start;
  margin:0; padding:0 0 1rem; border-bottom:1px solid var(--line); position:relative; list-style:none;
}
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:last-child{ border-bottom:0; padding-bottom:0; }
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::before,
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item::after{ display:none; }
.drawer ul.woocommerce-mini-cart .mc-thumb a{ display:block; }
.drawer ul.woocommerce-mini-cart .mc-thumb img{
  display:block; float:none; width:64px; height:64px; margin:0; object-fit:cover;
  border:1px solid var(--line); background:#0A0D0F; box-shadow:none;
}
.drawer ul.woocommerce-mini-cart .mc-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; padding-top:.1rem; }
.drawer ul.woocommerce-mini-cart .mc-name{
  display:block; color:var(--bone); font-family:var(--display); font-size:.86rem;
  font-weight:700; letter-spacing:.02em; line-height:1.35;
}
.drawer ul.woocommerce-mini-cart a.mc-name:hover{ color:var(--brass); }
.drawer ul.woocommerce-mini-cart .mc-body .quantity{ display:block; color:var(--dim); font-size:.95rem; font-family:var(--body); }
.drawer ul.woocommerce-mini-cart .mc-body .quantity .amount{ color:var(--bone); }
.drawer ul.woocommerce-mini-cart dl.variation{ margin:0; font-size:.85rem; color:var(--dimmer); }
.drawer ul.woocommerce-mini-cart dl.variation dt,
.drawer ul.woocommerce-mini-cart dl.variation dd{ display:inline; margin:0; padding:0; float:none; }
.drawer ul.woocommerce-mini-cart dl.variation dd p{ display:inline; margin:0; }
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove{
  position:static; display:grid; place-items:center; width:1.75rem; height:1.75rem; margin:-.2rem -.3rem 0 0;
  border-radius:0; color:var(--dimmer) !important; background:none !important;
  font-size:1.3rem; font-weight:400; line-height:1; text-decoration:none;
}
.drawer ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove:hover{ color:#E0907F !important; }
.drawer .woocommerce-mini-cart__total{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  margin:1.25rem 0 0; padding-top:1.15rem; border-top:1px solid var(--line);
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.drawer .woocommerce-mini-cart__total strong{ font-weight:700; }
.drawer .woocommerce-mini-cart__total .amount{
  font-size:1.25rem; letter-spacing:-.01em; color:var(--bone); text-transform:none;
}
/* Woo prints its own buttons in the mini cart; the drawer has its own footer. */
.drawer .woocommerce-mini-cart__buttons{ display:none; }

.drawer-foot{
  flex:none; padding:1.25rem var(--pad-drawer,1.5rem);
  border-top:1px solid var(--line); background:#0F1315; display:grid; gap:.6rem;
}
/* Brighter than --dimmer, which the owner found too faint to read here. */
.drawer-note{ margin:0 0 .3rem; font-size:.88rem; color:rgba(239,235,228,.78); }
.drawer-foot .btn{ width:100%; justify-content:center; }

@media (max-width:420px){
  .drawer{ width:100%; }
  .drawer-head, .drawer-body, .drawer-foot{ --pad-drawer:1.15rem; }
}

/* ---------- chips ----------
   Filter buttons on the shop, quick links in the search overlay. */
.chip{
  display:inline-block; font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  padding:.62rem 1.05rem; background:transparent; color:var(--dim);
  border:1px solid var(--line); cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.chip:hover{ color:var(--bone); border-color:rgba(201,169,107,.5); }
.chip[aria-pressed="true"]{ background:var(--brass); border-color:var(--brass); color:#100C05; }

/* ---------- search overlay ----------
   A sheet that drops from the top. Results filter in the browser from one small
   index, so they appear as fast as you can type. */
.srch{
  position:fixed; inset:0; z-index:90; background:rgba(6,8,9,.72);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease;
  overflow-y:auto; overscroll-behavior:contain;
}
.srch[hidden]{ display:none; }
.srch[data-open="true"]{ opacity:1; }
.srch-panel{
  background:var(--ink-2); border-bottom:1px solid rgba(201,169,107,.35);
  box-shadow:0 30px 60px rgba(0,0,0,.55);
  padding-block:clamp(1.5rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.25rem);
  transform:translateY(-16px); transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.srch[data-open="true"] .srch-panel{ transform:none; }
.srch-form .eyebrow{ display:block; margin-bottom:.9rem; }
.srch-row{
  display:flex; align-items:center; gap:.9rem;
  border-bottom:1px solid var(--line); padding-bottom:.85rem; transition:border-color .2s ease;
}
.srch-row:focus-within{ border-bottom-color:var(--brass); }
.srch-icon{ width:24px; height:24px; flex:none; color:var(--brass); }
.srch-input{
  flex:1 1 auto; min-width:0; background:none; border:0; outline:none; color:var(--bone);
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.25rem,1rem + 1.4vw,2.1rem); padding:.2rem 0;
}
.srch-input::placeholder{ color:var(--dimmer); font-weight:500; }
.srch-input::-webkit-search-cancel-button{ display:none; }
.srch-close{
  flex:none; display:grid; place-items:center; width:42px; height:42px; padding:0;
  background:none; border:1px solid var(--line); color:var(--dim); cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.srch-close:hover{ color:var(--brass); border-color:rgba(201,169,107,.6); }
.srch-close svg{ width:20px; height:20px; }

.srch-status{
  margin:1.1rem 0 0; min-height:1em; font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);
}
.srch-results{
  list-style:none; margin:.9rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem;
}
.srch-results:empty{ display:none; }
.srch-hit a{
  display:grid; grid-template-columns:60px 1fr auto; gap:.9rem; align-items:center;
  padding:.55rem .9rem .55rem .55rem; border:1px solid var(--line); background:#0F1315;
  color:var(--bone); text-decoration:none; transition:border-color .2s ease, background .2s ease;
}
.srch-hit a:hover, .srch-hit a:focus-visible{ border-color:rgba(201,169,107,.6); background:#161B1F; outline:none; }
.srch-hit img{ width:60px; height:60px; object-fit:cover; display:block; background:var(--ink); }
.srch-hit-name{ display:block; font-family:var(--display); font-weight:700; font-size:.84rem; letter-spacing:.03em; line-height:1.3; }
.srch-hit-name mark{ background:none; color:var(--brass); }
.srch-hit-meta{ display:block; margin-top:.2rem; font-family:var(--display); font-size:.58rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); }
.srch-hit-price{ font-family:var(--display); font-weight:800; font-size:.95rem; white-space:nowrap; text-align:right; }
.srch-hit-price s{ display:block; font-weight:500; font-size:.72rem; color:var(--dimmer); }
.srch-all{ grid-column:1 / -1; margin-top:.4rem; }
.srch-all a{
  display:inline-block; font-family:var(--display); font-size:.68rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--brass); border-bottom:1px solid rgba(201,169,107,.4); padding-bottom:.2rem;
}
.srch-all a:hover{ color:var(--bone); border-color:var(--bone); }

.srch-popular{ margin-top:1.6rem; }
.srch-popular[hidden]{ display:none; }
.srch-popular-label{
  margin:0 0 .7rem; font-family:var(--display); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer);
}
.srch-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }

@media (max-width:760px){
  .srch-results{ grid-template-columns:1fr; }
  .srch-hit a{ grid-template-columns:52px 1fr auto; gap:.7rem; }
  .srch-hit img{ width:52px; height:52px; }
}

/* ---------- Google's store-rating badge ----------
   Merchant Center's widget (WPCode snippet 14326) pins itself 20px from the
   bottom right, on top of everything, with inline !important positions. So it
   is moved with a transform instead: above the product page's sticky buy bar
   while that is up (on a desktop), and out of sight while the menu, cart
   drawer, lightbox or an overlay is open, or someone is typing in a form. */
#google-merchantwidget-iframe-wrapper{ transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
body:has(#buybar[data-show="true"]) #google-merchantwidget-iframe-wrapper{ transform:translateY(-76px); }
body:has([data-open="true"]) #google-merchantwidget-iframe-wrapper{ opacity:0; visibility:hidden; }
body:has(:is(input, select, textarea):focus) #google-merchantwidget-iframe-wrapper{ opacity:0; visibility:hidden; }
/* On a phone it opens into a wide pill over the page's own buttons, so there
   it steps aside while the buy bar is up, and on the cart and checkout. */
@media (max-width:760px){
  body:has(#buybar[data-show="true"]) #google-merchantwidget-iframe-wrapper,
  body.woocommerce-cart #google-merchantwidget-iframe-wrapper,
  body.woocommerce-checkout #google-merchantwidget-iframe-wrapper{ opacity:0; visibility:hidden; }
}