/* ============================================================
   EE Shorts Store — Redesign
   Direction: Minimal Editorial
   Layout handles: header transparent->solid on scroll,
   split hero (text|photo), alternating product sizes,
   caption-over-photo cards, split-scroll product (sticky gallery),
   alternating section backgrounds, sharp-corner accents, hover-only motion.
   Pure static CSS, mobile-first. No frameworks, no CDN.
   ============================================================ */

:root{
  /* Palette — light editorial paper, near-black ink, product colors pop */
  --paper:#f7f5f1;
  --surface:#ffffff;
  --ink:#16140f;
  --ink-2:#3b362d;
  --muted:#6f685d;
  --line:#ddd7cc;
  --line-strong:#16140f;
  --accent:#16140f;          /* editorial uses near-black as primary accent */
  --accent-soft:#efe9dd;

  /* Brand product hues (for tags / pops) */
  --yellow:#f2c200;
  --yucca:#7d8a3f;
  --cactus:#4f6b3a;
  --grey:#8b8d8f;

  --ok:#2e7d32;

  /* Type — zero-request fonts */
  --serif: "Iowan Old Style","Palatino Linotype","Palatino","Georgia","Times New Roman",serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Scale */
  --container:1240px;
  --s1:.4rem; --s2:.8rem; --s3:1.2rem; --s4:1.8rem;
  --s5:2.6rem; --s6:3.6rem; --s7:5rem;
}

/* ---------- Reset / globals ---------- */
*{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Editorial type rhythm */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,6vw,4rem);margin:0 0 var(--s3)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin:var(--s5) 0 var(--s3)}
h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:var(--s4) 0 var(--s2)}
h4{font-size:1.05rem;margin:var(--s3) 0 var(--s1)}
p{margin:0 0 var(--s3)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* Editorial kicker / eyebrow */
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 var(--s2)}

/* ---------- Buttons (sharp corners) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  padding:.85rem 1.5rem;font-size:.82rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border-radius:0;min-height:48px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--sm{padding:.55rem 1rem;min-height:40px;font-size:.72rem}
.btn--lg{padding:1rem 2rem;min-height:54px}
.btn--block{width:100%}

/* Amber/outline aliases reused from original markup classes */
.amber-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:.85rem 1.5rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:0;min-height:48px;transition:.18s}
.amber-btn:hover{background:#fff;color:var(--ink)}
.amber-btn.small,.amber-btn.big,.amber-btn.large,.amber-btn.wide{}
.amber-btn.small{padding:.5rem 1rem;min-height:40px;font-size:.72rem}
.amber-btn.big,.amber-btn.large{padding:1rem 1.8rem;min-height:54px}
.amber-btn.wide{width:100%}
.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:.85rem 1.5rem;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:0;min-height:48px;transition:.18s}
.outline-btn:hover{background:var(--ink);color:#fff}
.outline-btn.big,.outline-btn.large{padding:1rem 1.8rem;min-height:54px}
.outline-btn.wide{width:100%}
.ghost{background:transparent;border:none;color:var(--ink);padding:.6rem .4rem;font-size:.95rem;letter-spacing:.02em}
.ghost:hover{color:var(--muted)}
.text-link{background:none;border:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:.4rem 0;font-size:.9rem}

/* ---------- Header ---------- */
.announce{
  background:var(--ink);color:var(--paper);
  text-align:center;padding:.5rem 1rem;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.plume-header{position:relative;z-index:40}

.nav-shell{
  position:sticky;top:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1.1rem,4vw,2.5rem);
  max-width:var(--container);margin-inline:auto;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
/* solid state toggled by JS (scrolled) or forced on inner pages via body class */
.nav-shell.is-solid,
body.solid-header .nav-shell{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
/* When header has no hero behind it, keep it solid from the start */
.plume-header.no-hero .nav-shell{background:var(--surface);border-bottom:1px solid var(--line)}

.brand,.brand-mini{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:.02em;font-size:1.05rem;color:var(--ink)}
.ee-mark{
  display:inline-grid;place-items:center;width:34px;height:34px;
  background:var(--ink);color:var(--paper);font-family:var(--serif);
  font-weight:700;font-size:.95rem;border-radius:0;letter-spacing:.02em;
}
.brand-text{font-family:var(--serif);font-weight:600}

.burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:none;padding:.5rem;order:-1}
.burger span{display:block;width:24px;height:2px;background:var(--ink);transition:.2s}

.plume-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.4rem}
.plume-nav .drop-toggle{background:none;border:none;color:var(--ink);font-size:.95rem;padding:.6rem .5rem;font-weight:500}
.has-drop{position:relative}
.dropdown{position:absolute;top:calc(100% + .4rem);left:0;background:var(--surface);border:1px solid var(--line);padding:1rem;min-width:260px;display:none;box-shadow:0 18px 40px rgba(20,18,12,.1);z-index:50}
.dropdown.open{display:block}
.drop-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);padding:.45rem .85rem;font-size:.8rem;letter-spacing:.04em;border-radius:0;transition:.15s}
.chip:hover,.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

.quick-cta{display:flex;align-items:center;gap:.5rem}
.cart-btn{position:relative;background:none;border:1px solid var(--line);padding:.45rem .55rem;color:var(--ink);border-radius:0;display:inline-flex}
.nav-shell:not(.is-solid) .cart-btn{border-color:rgba(255,255,255,.5);color:#fff}
.plume-header.over-light .nav-shell:not(.is-solid) .cart-btn{border-color:var(--line);color:var(--ink)}
.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--ink);color:#fff;font-size:.66rem;padding:.05rem .35rem;border-radius:0;min-width:16px;text-align:center}

/* When over a dark hero, nav text is white until solid */
.plume-header.over-hero .nav-shell:not(.is-solid) .brand,
.plume-header.over-hero .nav-shell:not(.is-solid) .brand-text,
.plume-header.over-hero .nav-shell:not(.is-solid) .drop-toggle,
.plume-header.over-hero .nav-shell:not(.is-solid) .ghost{color:#fff}
.plume-header.over-hero .nav-shell:not(.is-solid) .burger span{background:#fff}
.plume-header.over-hero .nav-shell:not(.is-solid) .ee-mark{background:#fff;color:var(--ink)}
.plume-header.over-hero .nav-shell:not(.is-solid) .amber-btn{border-color:#fff;background:#fff;color:var(--ink)}
.plume-header.over-hero .nav-shell:not(.is-solid) .cart-btn{border-color:rgba(255,255,255,.55);color:#fff}

/* Mobile nav drawer */
@media (max-width:899px){
  .plume-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--surface);
    transform:translateX(100%);transition:transform .28s ease;z-index:60;
    padding:5rem 1.5rem 2rem;box-shadow:-20px 0 50px rgba(0,0,0,.15);overflow:auto;
  }
  .plume-nav.open{transform:translateX(0)}
  .plume-nav ul{flex-direction:column;align-items:stretch;gap:.4rem}
  .plume-nav li{width:100%}
  .plume-nav .drop-toggle,.plume-nav .ghost{width:100%;text-align:left;border-bottom:1px solid var(--line);padding:.8rem .2rem;color:var(--ink)}
  .dropdown{position:static;border:none;box-shadow:none;padding:.5rem 0;min-width:0;display:block}
  .quick-cta .amber-btn{display:none}
}
@media (min-width:900px){
  .burger{display:none}
  .plume-nav ul{gap:1.1rem}
}

/* ---------- Hero (split: text | photo) ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero .hero-img{
  width:100%;height:46vh;min-height:320px;object-fit:cover;
  filter:grayscale(.15) contrast(1.04);opacity:.92;
}
.hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.6rem;padding:clamp(1.2rem,5vw,3.5rem);
  background:linear-gradient(180deg,rgba(20,18,12,.15),rgba(20,18,12,.82));
}
.hero-overlay h1{color:#fff;margin:0;font-size:clamp(2.4rem,7vw,4.6rem)}
.hero-overlay .sub{color:rgba(255,255,255,.86);max-width:46ch;margin:0;font-size:1.05rem}
.ticker{font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;margin:0;opacity:.85}
.hero-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.hero-ctas .amber-btn{background:#fff;border-color:#fff;color:var(--ink)}
.hero-ctas .amber-btn:hover{background:transparent;color:#fff}
.hero-ctas .outline-btn{border-color:#fff;color:#fff}
.hero-ctas .outline-btn:hover{background:#fff;color:var(--ink)}
.countdown{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:.4rem}

/* Split hero on desktop */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:72vh}
  .hero .hero-img{height:100%;min-height:72vh;order:2}
  .hero-overlay{position:static;background:var(--paper);color:var(--ink);justify-content:center;padding:clamp(2rem,5vw,4.5rem)}
  .hero-overlay h1{color:var(--ink)}
  .hero-overlay .sub{color:var(--muted)}
  .ticker{color:var(--muted)}
  .hero-ctas .amber-btn{background:var(--ink);border-color:var(--ink);color:#fff}
  .hero-ctas .amber-btn:hover{background:transparent;color:var(--ink)}
  .hero-ctas .outline-btn{border-color:var(--ink);color:var(--ink)}
  .hero-ctas .outline-btn:hover{background:var(--ink);color:#fff}
  .countdown{color:var(--muted)}
}

/* ---------- Intro / pills ---------- */
.intro{padding-block:var(--s5) var(--s3)}
.pill-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s3)}
.pill{border:1px solid var(--line);padding:.4rem .85rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.4;color:var(--ink);max-width:34ch;margin:0}

/* ---------- Catalog toolbar ---------- */
.catalog{padding-block:var(--s4) var(--s6)}
.toolbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.left-tools{display:flex;flex-wrap:wrap;gap:.5rem}
.right-tools{display:flex;align-items:center;gap:.5rem}
.sorter{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sort-select{border:1px solid var(--line);background:var(--surface);padding:.5rem .7rem;border-radius:0;color:var(--ink);font-size:.85rem}

/* ---------- Product grid (alternating big + small / editorial) ---------- */
.coco-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:620px){.coco-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
@media (min-width:1000px){
  .coco-grid{grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:1.8rem}
  /* alternating: first card spans wide+tall, others fill */
  .coco-grid .product:nth-child(1){grid-column:span 4;grid-row:span 2}
  .coco-grid .product:nth-child(2){grid-column:span 2}
  .coco-grid .product:nth-child(3){grid-column:span 2}
  .coco-grid .product:nth-child(4){grid-column:span 6}
  @media (min-width:1000px){
    .coco-grid .product:nth-child(4){grid-column:span 6;grid-template-columns:none}
  }
}

.card.product{position:relative;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.card-link{display:flex;flex-direction:column;flex:1 1 auto}
.image-wrap{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--accent-soft)}
.coco-grid .product:nth-child(1) .image-wrap{aspect-ratio:auto;height:100%;min-height:340px}
.card .img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease,transform .5s ease}
.card .img.secondary{position:absolute;inset:0;opacity:0}
.card:hover .img.primary{opacity:0}
.card:hover .img.secondary{opacity:1}
.card:hover .img{transform:scale(1.03)}
.flag{position:absolute;top:0;left:0;background:var(--ink);color:#fff;padding:.35rem .7rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.flag.alt{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}

/* caption over photo */
.card .prod-title{
  font-family:var(--serif);font-size:1.15rem;margin:0;color:#fff;
  position:absolute;left:0;right:0;bottom:0;padding:1rem;
  background:linear-gradient(180deg,transparent,rgba(20,18,12,.78));
}
.card-link{position:relative}
.meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1rem 1.1rem;border-top:1px solid var(--line)}
.price{font-family:var(--serif);font-weight:600;font-size:1.1rem}
.cart-add{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:.5rem .9rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;border-radius:0;transition:.18s}
.cart-add:hover{background:var(--ink);color:#fff}

/* ---------- Editorial sections (alternating bg) ---------- */
.section{padding-block:var(--s6)}
.section--tint{background:var(--surface);border-block:1px solid var(--line)}
.about-brand{padding-block:var(--s6)}
.about-brand>p{font-size:1.1rem;max-width:70ch;color:var(--ink-2)}
.author-card{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);padding:1rem 1.2rem;margin-top:var(--s4);max-width:560px;background:var(--surface)}
.author-avatar{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--serif);font-weight:600}
.author-card a{text-decoration:underline;text-underline-offset:3px}

/* long-form SEO body block */
.seo-block{margin-top:var(--s5);max-width:74ch}
.seo-block h2{border-left:3px solid var(--ink);padding-left:.9rem}
.seo-block h3{color:var(--ink)}
.seo-block p{color:var(--ink-2)}
.seo-block table,.seo-block .seo-tbl{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:.92rem}
.seo-block th,.seo-block td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
.seo-block thead th{background:var(--accent-soft);font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.seo-block a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Size guide table ---------- */
.size-guide{padding-block:var(--s5)}
.table-wrap{overflow:auto;border:1px solid var(--line)}
table.tbl,.size-guide table{width:100%;border-collapse:collapse}
.size-guide thead th{background:var(--ink);color:#fff;text-align:left;padding:.8rem;font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.size-guide tbody td{padding:.7rem .8rem;border-top:1px solid var(--line)}
.size-guide tbody tr:nth-child(even){background:var(--surface)}

/* ---------- FAQ accordion ---------- */
.faq{padding-block:var(--s5)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;text-align:left;background:none;border:none;padding:1.1rem .2rem;font-family:var(--serif);font-size:1.1rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc-head::after{content:"+";font-family:var(--sans);font-weight:400;color:var(--muted);transition:transform .2s}
.acc-head[aria-expanded="true"]::after{content:"\2212"}
.acc-panel{padding:0 .2rem 1.2rem}
.acc-panel p{margin:0;color:var(--ink-2)}

/* ---------- Contact strip ---------- */
.contact-strip{padding-block:var(--s5);display:grid;gap:var(--s4)}
@media (min-width:760px){.contact-strip{grid-template-columns:1.2fr 1fr 1fr}}
.contact-box h3{margin:0 0 .5rem}
.contact-box p{color:var(--ink-2);margin:0}
.contact-box a{text-decoration:underline;text-underline-offset:3px}
.pay-logos{display:flex;gap:.8rem;align-items:center;margin-top:.4rem}
.pay-logos img{height:26px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.8}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink);color:var(--paper);margin-top:var(--s6)}
.foot-grid{display:grid;gap:var(--s4);padding:var(--s6) clamp(1.1rem,4vw,2.5rem) var(--s4);max-width:var(--container);margin-inline:auto}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr .8fr 1.1fr}}
.foot-copy{color:rgba(247,245,241,.7);max-width:42ch;font-size:.95rem}
.site-foot .ee-mark{background:#fff;color:var(--ink)}
.site-foot .brand-text{color:#fff}
.site-foot h3{color:#fff;font-size:1.05rem;margin:0 0 var(--s2)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-links a{color:rgba(247,245,241,.78);font-size:.95rem}
.foot-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sub-form{display:flex;flex-wrap:wrap;gap:.5rem}
.sub-form input{flex:1 1 200px;background:transparent;border:1px solid rgba(247,245,241,.35);color:#fff;padding:.7rem .8rem;border-radius:0}
.sub-form input::placeholder{color:rgba(247,245,241,.5)}
.sub-form .amber-btn{background:#fff;border-color:#fff;color:var(--ink)}
.sub-form .amber-btn:hover{background:transparent;color:#fff}
.sub-msg{color:rgba(247,245,241,.85);font-size:.85rem;width:100%;margin-top:.3rem}
.foot-bottom{border-top:1px solid rgba(247,245,241,.18);padding:1.1rem clamp(1.1rem,4vw,2.5rem);text-align:center;color:rgba(247,245,241,.6);font-size:.85rem}

/* ---------- Search dialog ---------- */
.search-panel{position:fixed;inset:0;background:rgba(20,18,12,.55);z-index:80;display:grid;place-items:start center;padding:6vh 1rem}
.search-panel[hidden]{display:none}
.search-in,.search-inner{background:var(--surface);width:min(620px,100%);padding:1.5rem;border:1px solid var(--line)}
.search-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
#searchInput,.search-inner input[type="search"]{width:100%;border:1px solid var(--line);padding:.9rem;border-radius:0;font-size:1rem}
.search-inner form{display:flex;gap:.5rem;flex-wrap:wrap}
.search-inner input{flex:1 1 240px}
.results{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;max-height:50vh;overflow:auto}
.results li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border:1px solid var(--line);padding:.7rem .8rem}
.result-go{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:.4rem .8rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

/* ============================================================
   PRODUCT DETAIL — split-scroll (sticky gallery left, info right)
   ============================================================ */
.breadcrumbs{padding-block:var(--s4) 0;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.breadcrumbs a{color:var(--ink);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:var(--line)}
.breadcrumb{max-width:var(--container);margin-inline:auto;padding:var(--s4) clamp(1.1rem,4vw,2.5rem) 0;display:flex;gap:.4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.breadcrumb a{color:var(--ink);text-decoration:none}

.product-wrap,.product-page,.page,.page-wrap{max-width:var(--container);margin-inline:auto;padding:var(--s4) clamp(1.1rem,4vw,2.5rem) var(--s5)}
.product-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}
/* yucca variant: gallery + info sit directly inside .product-wrap */
.product-wrap:has(> .product-gallery){display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}
@media (min-width:920px){
  .product-grid{grid-template-columns:1.05fr .95fr;gap:var(--s6)}
  .product-wrap:has(> .product-gallery){grid-template-columns:1.05fr .95fr;gap:var(--s6)}
}

/* gallery sticky */
.gallery,.media-side,.product-gallery{position:relative}
@media (min-width:920px){
  .gallery,.media-side,.product-gallery{position:sticky;top:90px;align-self:start}
}
.gal-main,.media-main,.main-media,.main-image{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--accent-soft)}
.gal-main img,.media-main img,.main-media img,.main-image img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
.thumbs{display:flex;gap:.6rem;margin-top:.7rem;flex-wrap:wrap}
.thumb{border:1px solid var(--line);background:var(--surface);padding:0;width:78px;height:78px;overflow:hidden;border-radius:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{outline:2px solid var(--ink);outline-offset:-1px}

.info-side,.details,.product-info,.p-info{min-width:0}
.info-side h1,.details h1,.product-info h1,.p-info h1,.product-title{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 var(--s2)}
.short-desc{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:var(--ink-2);max-width:54ch;margin:0 0 var(--s3)}

.badges,.status-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-block:var(--s2) var(--s3)}
.stock,.auth,.badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);padding:.4rem .8rem;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.stock.in,.badge.in-stock{color:var(--ok);border-color:#cfe6d2;background:#f3faf4}

.price-line,.price-row{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;margin-block:var(--s3);padding-block:var(--s3);border-block:1px solid var(--line)}
.price-line .price,.price-row .price{font-family:var(--serif);font-size:1.9rem;font-weight:600}
.ship-note{color:var(--muted);font-size:.9rem}

/* size pickers */
.buy-form{border:none;padding:0;margin-block:var(--s3)}
.size-field{border:0;margin:0;padding:0}
.size-field legend,.size-picker legend,.size-head{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;display:flex;justify-content:space-between;width:100%}
.size-grid,.size-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
.size-grid input,.size-pills input{position:absolute;opacity:0;width:0;height:0}
.size-grid label,.size-pills label,.pill,.size-chip,.size-opt span{
  display:grid;place-items:center;min-width:50px;min-height:48px;padding:0 .6rem;
  border:1px solid var(--line);background:var(--surface);border-radius:0;cursor:pointer;font-size:.9rem;transition:.15s;
}
.size-grid input:checked+label,.size-pills input:checked+label,.pill.is-selected,
.size-chip[aria-pressed="true"],.size-opt input:checked+span{
  border-color:var(--ink);background:var(--ink);color:#fff;
}
.size-picker{margin-block:var(--s3)}
.size-opt{display:inline-block}
.size-opt input{position:absolute;opacity:0}
.sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.4rem}
.size-chip{font-family:inherit}
.size-msg,.size-help,.size-guide-link{font-size:.85rem;color:var(--muted);margin-top:.4rem;display:inline-block}
.size-help,.size-guide-link{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

.cta-row,.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-block:var(--s3)}
.cart-msg{color:var(--ink-2);font-size:.9rem;margin:.4rem 0 0}

/* tech specs / lists */
.tech,.tech-specs,.measurements{margin-block:var(--s4)}
.tech .h-sub,.tech-specs .h-sm,.h-sm,.h-sub{font-family:var(--serif);font-size:1.2rem;margin:0 0 var(--s2)}
.tech ul,.tech-list,.tech-specs ul,.measure-list,.measurements ul{margin:0;padding-left:1.1rem;color:var(--ink-2)}
.tech li,.tech-specs li,.measurements li{margin-bottom:.3rem}
.tech-list{list-style:none;padding-left:0}
.tech-list li{padding:.5rem 0;border-bottom:1px solid var(--line)}

.assure,.auth-block,.verified-callout{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--ink);padding:1rem 1.2rem;margin-block:var(--s4);background:var(--accent-soft)}
.assure h3,.auth-block strong,.verified-callout h3{margin:0 0 .2rem;display:block;font-family:var(--serif);font-size:1.05rem}
.assure p,.auth-block p,.verified-callout p{margin:0;color:var(--ink-2);font-size:.92rem}
.auth-block .icon,.auth-icon{flex:none;color:var(--ink)}

/* accordions (details) */
.accordion details,.accordions details,.accordion,.accordions{}
.accordion details,.accordions details{border-bottom:1px solid var(--line)}
.accordion summary,.accordions summary{cursor:pointer;list-style:none;padding:1rem .2rem;font-family:var(--serif);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.accordion summary::-webkit-details-marker,.accordions summary::-webkit-details-marker{display:none}
.accordion summary::after,.accordions summary::after{content:"+";color:var(--muted)}
.accordion details[open] summary::after,.accordions details[open] summary::after{content:"\2212"}
.acc-body,.accordion .content,.accordions .content,details .content{padding:0 .2rem 1rem;color:var(--ink-2);font-size:.93rem}
.acc-body ul,.acc-body p{margin:.2rem 0}
.acc-body a,details .content a{text-decoration:underline;text-underline-offset:3px}

/* tags */
.tags{margin-block:var(--s4);font-size:.85rem;color:var(--muted)}
.tags h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;font-family:var(--sans)}
.tags ul,.tag-list{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0 0;padding:0}
.tags li,.tag-list li{border:1px solid var(--line);padding:.3rem .7rem;font-size:.76rem;color:var(--ink-2)}
.tags a{color:var(--ink-2)}
.tags a:hover{color:var(--ink)}

/* product-page size tables (div-based) */
.size-table,.measure-table{border:1px solid var(--line);margin-top:var(--s2)}
.size-table .row,.measure-table .row{display:grid;grid-template-columns:repeat(4,1fr)}
.measure-table .row{grid-template-columns:repeat(5,1fr)}
.size-table .row span,.size-table .row div,.measure-table .row div{padding:.6rem .7rem;border-bottom:1px solid var(--line);font-size:.88rem}
.size-table .row.head,.measure-table .row.head{background:var(--accent-soft);font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.size-table .row:last-child span,.size-table .row:last-child div{border-bottom:none}
.sg-grid,.meas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-top:var(--s2)}
.sg-grid div,.meas-grid div{border:1px solid var(--line);padding:.8rem}
.sg-grid strong{display:block;font-family:var(--serif);font-size:1.1rem}
.sg-grid span{color:var(--muted);font-size:.85rem}
.meas-grid h4{margin:0 0 .2rem}
.meas-grid p{margin:0;font-size:.86rem;color:var(--ink-2)}

/* "more like" placeholders */
.more-like{max-width:var(--container);margin-inline:auto;padding:var(--s5) clamp(1.1rem,4vw,2.5rem)}
.placeholder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.placeholder-grid .card{display:grid;place-items:center;border:1px solid var(--line);min-height:140px;text-align:center;background:var(--surface);position:static}
.ph-img{width:100%;height:80px;background:var(--accent-soft)}
.ph-txt{padding:.6rem;font-family:var(--serif)}

/* ============================================================
   SERVICE / POLICY PAGES (editorial article)
   ============================================================ */
.main-content,.policy-container,.container.policy{max-width:840px;margin-inline:auto;padding:var(--s5) clamp(1.1rem,4vw,2.5rem) var(--s6)}
.page-header{margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.page-header h1{margin:0 0 var(--s2)}
.page-header p{font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.4rem);color:var(--muted);max-width:60ch;margin:0}

.policy-content,.terms-content,.about-content{font-size:1.02rem;color:var(--ink-2)}
.policy-content h2,.terms-content h2{margin-top:var(--s5)}
.policy-content ul,.terms-content ul,.policy-content ol{padding-left:1.2rem;margin:0 0 var(--s3)}
.policy-content li,.terms-content li{margin-bottom:.45rem}
.policy-content a,.terms-content a,.about-content a{text-decoration:underline;text-underline-offset:3px}
.policy-content strong,.terms-content strong{color:var(--ink)}

.last-updated,.highlight-box{border:1px solid var(--ink);background:var(--accent-soft);padding:1rem 1.2rem;margin-block:var(--s3)}
.highlight-box h4{margin:0 0 .4rem}
.highlight-box p{margin:0}
.contact-info,.contact-cta{border:1px solid var(--line);background:var(--surface);padding:1.4rem;margin-top:var(--s5)}
.contact-info h2,.contact-info h3,.contact-cta h3{margin-top:0}
.back-link{display:inline-block;margin-top:var(--s4);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* shipping tables */
.shipping-section{margin-block:var(--s5)}
.shipping-section h2{display:flex;align-items:center;gap:.6rem}
.shipping-section .icon,.icon{width:22px;height:22px;flex:none;color:var(--ink)}
.shipping-table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:.92rem}
.shipping-table th,.shipping-table td{border:1px solid var(--line);padding:.7rem .8rem;text-align:left}
.shipping-table thead th{background:var(--ink);color:#fff;font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.shipping-table tbody tr:nth-child(even){background:var(--surface)}

/* about page */
.about-content{border:1px solid var(--line);background:var(--surface);padding:clamp(1.4rem,4vw,2.6rem);margin-bottom:var(--s4)}
.about-content h2{margin-top:0}
.team-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:var(--s4)}
@media (min-width:700px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.team-card{border:1px solid var(--line);background:var(--surface);padding:1.4rem}
.team-card h3{margin:0 0 .6rem;color:var(--ink)}
.team-card p{margin:0;color:var(--ink-2);font-size:.94rem}

/* contact page */
.contact-hero{background:var(--ink);color:#fff;padding:clamp(2.5rem,7vw,5rem) clamp(1.1rem,4vw,2.5rem);text-align:center}
.contact-hero h1{color:#fff;margin:0 0 var(--s2)}
.contact-hero p{color:rgba(255,255,255,.82);max-width:60ch;margin-inline:auto;font-family:var(--serif);font-size:1.15rem}
.contact-content{max-width:var(--container);margin-inline:auto;padding:var(--s6) clamp(1.1rem,4vw,2.5rem);display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:880px){.contact-content{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.contact-info h2,.contact-form h2{margin-top:0}
.contact-methods{display:grid;gap:1rem}
.contact-method{border:1px solid var(--line);background:var(--surface);padding:1.2rem}
.method-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.method-icon{width:22px;height:22px;color:var(--ink)}
.method-title{margin:0;font-size:1.1rem}
.method-details{color:var(--ink-2);font-size:.94rem}
.method-details a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.contact-form{border:1px solid var(--line);background:var(--surface);padding:clamp(1.4rem,4vw,2.2rem)}
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);padding:.75rem .85rem;border-radius:0;font-size:1rem;font-family:inherit;background:var(--paper)}
.form-group textarea{min-height:130px;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.form-submit{width:100%;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:.95rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border-radius:0;transition:.18s}
.form-submit:hover{background:transparent;color:var(--ink)}
.response-times{background:var(--surface);border-block:1px solid var(--line);padding:var(--s6) clamp(1.1rem,4vw,2.5rem)}
.response-times .container{max-width:840px;margin-inline:auto;text-align:center;padding:0}
.response-times h2{margin-top:0}
.response-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--s4)}
@media (min-width:640px){.response-grid{grid-template-columns:repeat(3,1fr)}}
.response-item{border:1px solid var(--line);background:var(--paper);padding:1.4rem}
.response-time{font-family:var(--serif);font-size:1.6rem;font-weight:600}
.response-type{font-weight:600;margin-block:.3rem}
.response-desc{color:var(--muted);font-size:.88rem}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}