/* Muskoka Parcel · Lake Catalog shop — stamp colours carried through */
/* font-face moved to /assets/fonts/fonts.css (linked site-wide) */
:root{
  --paper:#f3ead8;
  --paper-deep:#F7F1E6; --stamp-paper:#f3ead8; /* kraft→cream handoff */ --navy:#14233A; --stamp-navy:#1d2b45;
  --ink:#1a120d; --muted:#5a4a38; --teal:#2A6F7A; --gold:#c9a467; --amber:#E9A23B;
  --line:#e0d4c0; --card:#fffdf8; --focus:#c9a467; --price:var(--navy);
  --btn:#14233A; --btn-ink:#F7F1E6; --ease:cubic-bezier(.25,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}
body{margin:0;font:400 1rem/1.55 Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:"EB Garamond",Garamond,Georgia,serif;font-weight:600;line-height:1.15;margin:0 0 .4em;color:var(--navy)}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.5rem 1rem;z-index:100}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1120px,92vw);margin:0 auto}
.narrow{width:min(640px,92vw);margin:0 auto}
.eyebrow{font:600 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 .55rem}
.lede{font-size:1.08rem;max-width:36em;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--btn);color:var(--btn-ink);border:0;border-radius:4px;padding:.85rem 1.3rem;font:600 .9rem/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,35,58,.2)}
.btn--gold{background:transparent;color:var(--navy);border:1.5px solid var(--gold)} /* gold = accent only */
.btn--accent{color:var(--gold)} /* text accent */
.btn--ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn:focus-visible,a:focus-visible,button:focus-visible,.pcard:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 0}
.link{font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--navy)}

/* Utility bar — tip: shipping + CAD reassurance */
.util{background:var(--navy);color:var(--stamp-paper);font:600 .78rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-align:center;padding:.55rem 1rem}
.util span{opacity:.55;margin:0 .55rem}

/* Header — simple nav + stamp mark */
.site-hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.site-hdr__in{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font:600 1.05rem/1 "EB Garamond",Garamond,serif;color:var(--navy)}
.brand img{width:36px;height:auto}
.nav{display:flex;gap:1.15rem;margin-left:auto;font:600 .85rem/1 Inter,system-ui,sans-serif}
.nav a{text-decoration:none;color:var(--navy);opacity:.85}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.cart-n{display:inline-flex;min-width:1.15em;margin-left:.3em;padding:0 .35em;border-radius:999px;background:var(--gold);color:var(--navy);font-size:.75em}
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;margin-left:auto}
.menu-btn span{display:block;height:2px;background:var(--navy);border-radius:1px}
@media (max-width:760px){
  .menu-btn{display:flex}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;padding:1rem 4vw 1.25rem;background:var(--paper);border-bottom:1px solid var(--line)}
  .nav.is-open{display:flex}
}

/* Hero — map art + Find your lake; NO cabin illustration */
.hero{padding:2.5rem 0 2rem;background:linear-gradient(180deg,var(--stamp-paper),var(--paper));position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-40px;top:10%;width:160px;height:160px;border:2px solid rgba(20,35,58,.08);border-radius:50%;pointer-events:none}
.hero__grid{display:grid;gap:1.75rem;align-items:center}
@media (min-width:880px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:2.5rem}}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);color:var(--navy);max-width:12ch}
.hero__art{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1rem;box-shadow:0 18px 40px rgba(20,35,58,.08)}
.hero__art img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.hero__badge{position:absolute;left:1rem;bottom:1rem;right:auto;max-width:calc(100% - 2rem);background:var(--navy);color:var(--stamp-paper);font:600 .7rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:none;padding:.5rem .75rem;font-variant-numeric:tabular-nums;border-radius:3px;white-space:nowrap}

/* Photo placeholder — tip: lifestyle wall shot Kyle must take */
.photo-slot{display:grid;place-items:center;text-align:center;min-height:280px;padding:2rem 1.25rem;border:2px dashed color-mix(in srgb,var(--navy) 28%,transparent);border-radius:8px;background:
  linear-gradient(135deg,rgba(243,234,216,.9),rgba(247,241,230,.95));color:var(--navy)}
.photo-slot strong{display:block;font:600 1.15rem/1.3 "EB Garamond",Garamond,serif;margin-bottom:.35rem}
.photo-slot span{font-size:.92rem;color:var(--muted);max-width:28em}

.sec{padding:3.25rem 0}
.sec--cream{background:var(--stamp-paper)}
.sec--navy{background:var(--navy);color:var(--stamp-paper)}
.sec--navy h2,.sec--navy .eyebrow{color:var(--stamp-paper)}
.sec--navy .lede,.sec--navy p{color:rgba(243,234,216,.82)}
.sec-head{margin-bottom:1.75rem;max-width:40em}

/* Product cards — CAD on card */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.1rem}
.pcard{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.pcard:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,35,58,.1)}
.pcard img{width:100%;aspect-ratio:1;object-fit:cover;background:#e8e0d0}
.pcard--map img{aspect-ratio:4/3}
.pcard__meta{padding:.9rem 1rem 1.1rem}
.pcard__meta b{display:block;font:600 1.05rem/1.25 "EB Garamond",Garamond,serif;color:var(--navy);margin-bottom:.2rem}
.pcard__meta em{font-style:normal;font-weight:700;color:var(--price);font-size:.95rem}
.pcard__meta span{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.rail .pcard{scroll-snap-align:start}

/* Find your lake */
.find{display:grid;gap:1rem}
@media (min-width:720px){.find{grid-template-columns:1.2fr .8fr;align-items:center}}
.find__box{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.4rem}
.find__box label{display:block;font:600 .8rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.find__box input{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;font:1rem/1.2 Inter,system-ui,sans-serif;background:#fff}
.find__box .btns{margin-top:.85rem}

/* Story */
.story{display:grid;gap:1.5rem}
@media (min-width:800px){.story{grid-template-columns:1fr 1fr;align-items:center;gap:2.5rem}}
.story p{color:var(--muted)}

/* Newsletter */
.news__form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.news__form input{flex:1 1 200px;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;font:1rem/1.2 Inter,system-ui,sans-serif}
.status{flex:1 1 100%;min-height:1.2em;font-size:.9rem;color:var(--teal)}

/* Footer */
.foot{padding:2.75rem 0 3rem;background:var(--navy);color:var(--stamp-paper)}
.foot a{color:var(--stamp-paper);text-decoration:none}
.foot__in{display:grid;gap:1.25rem}
@media (min-width:700px){.foot__in{grid-template-columns:1.4fr 1fr 1fr;align-items:start}}
.foot__brand{display:flex;gap:.85rem;align-items:center}
.foot nav{display:flex;flex-direction:column;gap:.55rem;font:600 .9rem/1 Inter,system-ui,sans-serif}
.fine{font-size:.8rem;opacity:.7;margin:0}

/* —— Inner pages: unify legacy markup with cottage chrome —— */
.announce{background:var(--navy);color:var(--stamp-paper);text-align:center;font:600 .78rem/1.4 Inter,system-ui,sans-serif;padding:.55rem 1rem}
.announce span{margin:0 .4rem;opacity:.5}
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1rem;min-height:68px;width:min(1120px,92vw);margin:0 auto}
.hdr .brand span,.hdr .brand{color:var(--navy);font-family:"EB Garamond",Garamond,serif}
.hdr .nav a{color:var(--navy);font-weight:600;text-decoration:none}
.hdr-cart{margin-left:auto;font-weight:600;text-decoration:none}
.pagehead{padding:2.5rem 0 1.5rem;background:var(--stamp-paper)}
.pagehead h1{font-size:clamp(2rem,3.5vw,2.8rem)}
.sec--paper,.sec--cream,.sec--ice{background:var(--paper)}
.sec--cream.knit,.pagehead.knit{background:var(--stamp-paper)}
.window-glow,.frost,#snow,.plaid-band,.night,.stay,.mitten,.hearth{display:none!important}
.pgrid .mini,.grid.pgrid a.mini{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink)}
.pgrid .mini img,.pcard img{background:#e8e0d0}
.pgrid .mini div,.pcard__meta{padding:.85rem 1rem 1rem}
.pgrid .mini b{font-family:"EB Garamond",Garamond,serif;color:var(--navy)}
.pgrid .mini em{font-style:normal;font-weight:700;color:var(--price)}
.btn,a.btn{background:var(--btn);color:var(--btn-ink);border-radius:4px}
.btn--ghost,a.btn--ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
footer.night,footer.foot-legacy{display:none}
/* product detail */
.pdp{background:var(--paper)}
.pdp .wrap,.pdp-grid{width:min(1120px,92vw);margin:0 auto}
[data-price],[data-total],.price{color:var(--price)!important;font-weight:700}
/* cart */
.cart-page,.cart{background:var(--paper)}
body.page{background:var(--paper)}
/* hide interactive cabin leftovers if any */
.cabin,.outside,#outside,#room{display:none!important}

@media (max-width:760px){.stamp-logo{width:52px;top:10px;right:10px} .site-hdr__in{padding-right:56px}}

/* ========== PDP (product detail) ========== */
.crumbs{padding:.85rem 0 0;font:600 .8rem/1.4 Inter,system-ui,sans-serif}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .55rem;margin:0;padding:0;align-items:center;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:.55rem}
.crumbs li:not(:last-child)::after{content:"›";opacity:.55;margin-left:.15rem}
.crumbs a{color:var(--navy);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

.pdp.wrap,.pdp{width:min(1120px,92vw);margin:0 auto;padding:1rem 0 2.5rem;display:grid;gap:1.5rem}
@media (min-width:900px){
  .pdp{grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:start;padding-top:1.5rem}
}
.pdp__gallery{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.pdp__main{margin:0;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pdp__main img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:#e8e0d0}
.pdp__cap{font-size:.8rem;color:var(--muted);padding:.55rem .85rem .7rem;margin:0;border-top:1px solid var(--line)}
.pdp__colnote{font-size:.85rem;color:var(--muted);margin:0}

/* thumbs: horizontal swipe on phone, grid on desktop */
.thumbs{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.thumbs li{list-style:none;flex:0 0 auto;scroll-snap-align:start}
.thumbs::marker,.thumbs li::marker{content:none}
.thumb{display:block;border:2px solid transparent;border-radius:6px;padding:0;background:var(--card);cursor:pointer;overflow:hidden;width:72px;height:72px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb[aria-pressed="true"]{border-color:var(--navy)}
.thumb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (min-width:900px){
  .thumbs{display:grid;grid-template-columns:repeat(5,1fr);overflow:visible}
  .thumb{width:100%;height:auto;aspect-ratio:1}
}

.pdp__info{min-width:0}
.pdp__info h1{font-size:clamp(1.8rem,3vw,2.4rem);margin:.2rem 0 .5rem}
.pdp__info .price{font:700 1.45rem/1.2 Inter,system-ui,sans-serif;color:var(--price);margin:0 0 .75rem}
.pdp__info .price .cad,.pdp__info .cad{font:600 .75rem/1 Inter,system-ui,sans-serif;letter-spacing:.08em;color:var(--muted);margin-left:.25rem}
.pdp__sum{color:var(--muted);margin:0 0 1.25rem;max-width:36em}

.buy{margin:0}
.opt{border:0;margin:0 0 1rem;padding:0}
.opt legend{font:600 .85rem/1.3 Inter,system-ui,sans-serif;color:var(--navy);margin-bottom:.55rem}
.opt__val{font-weight:700;color:var(--ink)}
.opt__row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;cursor:pointer;margin:0}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem .85rem;border:1.5px solid var(--line);border-radius:6px;background:var(--card);font:600 .85rem/1.2 Inter,system-ui,sans-serif;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s}
.chip span small{display:block;width:100%;font:600 .75rem/1.2 Inter,system-ui,sans-serif;color:var(--price);margin-top:.2rem}
.chip input:checked+span{border-color:var(--navy);background:var(--stamp-paper);box-shadow:inset 0 0 0 1px var(--navy)}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.opt__note{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.sw--navy{background:#14233A}.sw--gold{background:#c9a467}.sw--black{background:#1a120d}

.buy__row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-top:1rem}
.qty label{display:block;font:600 .75rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.qty__ctl{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:6px;background:var(--card);overflow:hidden}
.qty__ctl button{width:40px;height:40px;border:0;background:transparent;font-size:1.1rem;cursor:pointer;color:var(--navy)}
.qty__ctl input{width:48px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:600 1rem/1 Inter,system-ui,sans-serif;background:transparent}
.buy__btn{flex:1 1 180px;min-height:48px;background:var(--gold)!important;color:var(--navy)!important;border:0;font-weight:700}
.buy__btn:hover{filter:brightness(1.05)}
.buy__status{min-height:1.2em;font-size:.9rem;color:var(--teal);margin:.6rem 0 0}

.assure{list-style:none;margin:1.25rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.assure li{margin:0 0 .45rem;padding-left:0}
.assure b{color:var(--navy)}
.assure li:nth-child(2){/* keep made-to-order as fulfillment note, not launch */}

.pdp-more{padding-top:2rem}
.pdp-more__grid{display:grid;gap:1.5rem}
@media (min-width:800px){.pdp-more__grid{grid-template-columns:1.3fr .7fr;gap:2rem}}
.ticks,.plain{margin:.5rem 0 0;padding-left:1.1rem;color:var(--muted)}
.ticks li,.plain li{margin:.35rem 0}
.pbox{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;margin-bottom:.75rem}
.pbox h3{font-size:1.15rem;margin:0 0 .4rem}
.pbox p,.pbox li{font-size:.9rem;color:var(--muted)}
.h-sm{font-size:1.4rem;margin:0 0 1rem}

/* phone: keep title/price/buy above fold by stacking gallery compact */
@media (max-width:899px){
  .pdp{display:flex;flex-direction:column;gap:1rem;padding-top:.5rem}
  .pdp__info{order:1}
  .pdp__gallery{order:2}
  .pdp__main img{aspect-ratio:4/3;max-height:38vh;object-fit:contain;background:var(--stamp-paper)}
  .pdp__cap{display:none} /* save vertical space on phone */
  .thumbs{margin-top:.25rem}
  .pdp__sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.85rem}
  .buy__row{position:sticky;bottom:0;background:color-mix(in srgb,var(--paper) 92%,transparent);padding:.65rem 0 calc(.65rem + env(safe-area-inset-bottom));margin-top:.5rem;z-index:5;border-top:1px solid var(--line)}
}

/* ========== Store listing polish ========== */
.grid.pgrid,.pgrid{list-style:none}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.cat-tile{display:flex;flex-direction:column;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;color:var(--ink)}
.cat-tile img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cat-tile__txt{padding:1rem}
.cat-tile__txt b{display:block;font:600 1.15rem/1.25 "EB Garamond",Garamond,serif;color:var(--navy)}
.cat-tile__txt span{display:block;font-size:.88rem;color:var(--muted);margin:.35rem 0}
.cat-tile__txt em{font-style:normal;font-weight:700;color:var(--price)}
.store-note{color:var(--muted)}
.plaid-band{display:none!important}

/* ========== Our story lists ========== */
.facts{list-style:none;margin:1rem 0 0;padding:0}
.facts li{position:relative;padding:.45rem 0 .45rem 1.1rem;color:var(--muted);border-bottom:1px solid var(--line)}
.facts li::before{content:"";position:absolute;left:0;top:.85rem;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.hearth{display:none!important}

/* Header: cart always visible on phone */
.hdr__in{position:relative}
.hdr-cart{margin-left:auto;text-decoration:none;font:600 .85rem/1 Inter,system-ui,sans-serif;color:var(--navy);padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
.hdr .menu-btn{margin-left:.35rem}
@media (max-width:760px){
  .hdr .nav{top:68px}
  .hdr-cart{order:2}
  .hdr .menu-btn{order:3}
  .hdr .brand{order:1;margin-right:auto}
}

/* One stamp mark: hide flying corner logo after open; header brand keeps Logo A */
html.shop-open .stamp-logo,
html.gate-reveal:not(.gate-on) .stamp-logo{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* During gate, stamp-logo still used as fly target but stays invisible until animation — then hide */
html.gate-on.gate-reveal .stamp-logo{opacity:0!important;visibility:hidden!important}

/* Soften interactive night footer on inner pages */
footer.night{background:var(--navy);color:var(--stamp-paper);padding:2.5rem 0;position:relative}
footer.night .night__sky,footer.night #sky,footer.night .stay,footer.night .stay-toggle,footer.night .constellation-note{display:none!important}
footer.night .night__in{position:relative;z-index:1}
footer.night a{color:var(--stamp-paper)}
footer.night .foot-grid,footer.night .foot-grid ul{list-style:none;padding:0;margin:0}
footer.night .foot-grid{display:grid;gap:1.25rem}
@media (min-width:700px){footer.night .foot-grid{grid-template-columns:repeat(3,1fr)}}
footer.night .foot-grid h4{font:600 1rem/1.2 "EB Garamond",Garamond,serif;margin:0 0 .5rem;color:var(--stamp-paper)}
footer.night .foot-grid li{margin:.35rem 0;font-size:.9rem}
footer.night .signup{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
footer.night .signup input{flex:1 1 180px;padding:.75rem 1rem;border-radius:4px;border:0}

.site-hdr .hdr-cart{margin-left:auto;text-decoration:none;font:600 .85rem/1 Inter,system-ui,sans-serif;color:var(--navy);padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
.site-hdr .menu-btn{margin-left:.35rem}
@media (max-width:760px){
  .site-hdr .nav{margin-left:0}
}


/* ===== v3 — refs: Mapiful / Toast / Lakebound / Filson / Roastery / Province ===== */
body{background:var(--paper)}
html.shop-open body,
html.gate-reveal body{background:#f3ead8}

/* Full-width banner slot — navy standby until /images/hero-rosseau.jpg exists.
   Cream type on navy = WCAG AA. When photo loads, heavy navy scrim keeps type legible. */
.banner{
  position:relative; overflow:hidden;
  background:var(--navy);
  color:#f3ead8;
  min-height:min(68vh,620px);
  display:flex; align-items:center;
}
.banner__media{position:absolute; inset:0; pointer-events:none}
.banner__img{width:100%;height:100%;object-fit:cover;object-position:center 45%; display:block}
.banner__scrim{position:absolute;inset:0;background:
  linear-gradient(105deg, rgba(20,35,58,.97) 0%, rgba(20,35,58,.88) 42%, rgba(20,35,58,.55) 70%, rgba(20,35,58,.35) 100%)}
.banner:not(.banner--photo) .banner__scrim{background:transparent}
.banner--photo .banner__scrim{background:
  linear-gradient(105deg, rgba(12,20,36,.92) 0%, rgba(12,20,36,.78) 38%, rgba(12,20,36,.45) 68%, rgba(12,20,36,.28) 100%)}
.banner__in{
  position:relative; z-index:1; width:min(1120px,92vw); margin:0 auto;
  display:grid; gap:2rem; align-items:center;
  padding:3.75rem 0 3.5rem;
}
@media (min-width:900px){
  .banner__in{grid-template-columns:1.15fr .85fr; gap:3rem; padding:3.75rem 0 3.25rem}
}
.banner__copy .eyebrow{color:rgba(247,241,230,.78); margin-bottom:.65rem} /* cream on navy = AA; gold reserved for accents */
.banner h1{
  color:#f7f1e6;
  font-size:clamp(2.6rem,5.8vw,4.2rem);
  letter-spacing:-.015em; line-height:1.05;
  margin:0 0 .75rem; max-width:14ch;
  text-shadow:none; /* contrast from navy/scrim, not glow */
}
.banner .lede{
  color:rgba(247,241,230,.9);
  font:400 1.05rem/1.55 Inter,system-ui,sans-serif;
  max-width:34em; margin:0;
}
.banner .btn{background:#f7f1e6; color:var(--navy); border:1.5px solid #f7f1e6}
.banner .btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.28); transform:translateY(-1px)}
.banner .btn--ghost{background:transparent; color:#f7f1e6; border-color:rgba(247,241,230,.65)}
.banner .btn--ghost:hover{background:rgba(247,241,230,.1)}
.banner__product{margin:0; justify-self:center; width:min(100%,340px)}
.frame-mat--hero{
  border-width:12px; border-color:#2a1c10;
  padding:1.15rem 1.15rem 1.4rem;
  box-shadow:0 22px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(90,60,30,.15);
}
.banner__product figcaption{
  margin-top:.85rem; text-align:center;
  font:600 .8rem/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.04em; color:rgba(247,241,230,.82);
}

/* Prices navy/ink */
.pcard__meta em,
.pdp__info .price,
.pdp__info .price [data-price],
[data-price],[data-total],.price,
.chip span small,
.cat-tile__txt em,
.pgrid .mini em{color:var(--navy)!important}

/* Bestsellers 4-up desktop / 2-up phone — Mapiful/Lakebound merchandising */
.best-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
@media (min-width:900px){.best-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.35rem}}
.sec{padding:3.75rem 0}
.sec-head h2{font-size:clamp(1.85rem,3.2vw,2.55rem)}
.sec-head .lede{font-size:1rem; color:var(--muted)}

/* Framed lifestyle map thumbs on soft wall */
.pcard--framed{background:transparent;border:0;box-shadow:none;overflow:visible}
.pcard--framed:hover{transform:translateY(-3px);box-shadow:none}
.frame-mat{
  background:linear-gradient(180deg,#ebe3d4,#d9cebc);
  border-radius:2px;padding:1.05rem 1.05rem 1.3rem;
  box-shadow:0 14px 28px rgba(20,35,58,.1), inset 0 0 0 1px rgba(90,60,30,.1);
  border:10px solid #3a2918;
  background-clip:padding-box}
.frame-mat__inner{background:#f7f1e6;padding:.55rem;box-shadow:inset 0 0 0 1px rgba(20,35,58,.06)}
.frame-mat__inner img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#eef2f5}
.pcard--framed .pcard__meta{padding:.9rem .1rem 0;background:transparent}

/* Apparel lifestyle frames — Filson/Toast product calm */
.life-frame{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.4),transparent 55%),
    linear-gradient(180deg,#efe6d8,#ddd0bc);
  padding:1.15rem 1.15rem 1.45rem;border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(90,60,30,.08),0 10px 22px rgba(20,35,58,.07)}
.life-frame img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:#ddd3bf;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.life-frame--flat img{object-fit:contain;background:#efe6d6;padding:.5rem}
.pcard--life{border:0;background:transparent;box-shadow:none}
.pcard--life .pcard__meta{padding:.75rem .1rem 0}
.pgrid--wear{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem}
@media (min-width:900px){.pgrid--wear{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem}}

/* Nav denser */
@media (min-width:900px){.nav{gap:.95rem;font-size:.82rem}}

.buy__btn{background:var(--navy)!important;color:#f3ead8!important}
.buy__btn:hover{filter:brightness(1.08)}
.cart-n{background:var(--gold);color:var(--navy)}

html.gate-on .shop,
html.gate-reveal .shop,
.shop{background:#f3ead8}
.sec--cream{background:#efe4d2}
.util{background:var(--navy)}

/* Store / collection — Toast/Mapiful calm white cards on cream */
.store-hero,.cat-hero{padding:2.5rem 0 1.25rem}
.store-hero h1,.cat-hero h1{font-size:clamp(2.1rem,4vw,3rem); max-width:18ch}
.store-hero .lede,.cat-hero .lede{color:var(--muted); font-size:1.02rem}
.pgrid{gap:1.25rem}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard{border-color:color-mix(in srgb,var(--line) 80%,transparent); border-radius:6px}
.pcard img{background:#efe6d6}

/* PDP — Lakebound clarity: white stage, navy type, navy buy */
.pdp{padding:2rem 0 3.5rem}
.pdp__grid{display:grid; gap:2rem; align-items:start}
@media (min-width:880px){.pdp__grid{grid-template-columns:1.05fr .95fr; gap:3rem}}
.pdp__stage{
  background:#fffdf8; border:1px solid var(--line); border-radius:8px;
  padding:1.5rem; box-shadow:0 12px 32px rgba(20,35,58,.06)}
.pdp__stage .frame-mat{margin:0 auto; max-width:420px}
.pdp__info h1{font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:.35rem}
.pdp__info .price{font:700 1.25rem/1.2 Inter,system-ui,sans-serif; color:var(--navy); margin:.5rem 0 1rem}
.pdp__info .lede,.pdp__info p{color:var(--muted); max-width:36em}


/* Store polish — quieter Toast/Mapiful head */
.store-head .window-glow, .plaid-band{display:none!important}
.pagehead.store-head{background:var(--paper)!important; padding:2.75rem 0 1.5rem}
.pagehead.store-head h1{font-size:clamp(2.1rem,4vw,3rem); color:var(--navy)}
.page{background:var(--paper)}
.hdr .brand img{width:36px;height:auto}
.frame-mat--pdp{max-width:440px;margin:0 auto}
.pdp .gallery, .pdp__media, .buy .gallery{background:transparent}

/* PDP gallery — Lakebound/Mapiful white stage */
.pdp{display:grid; gap:2rem; padding:1.5rem 0 3rem}
@media (min-width:900px){
  .pdp{grid-template-columns:1.05fr .95fr; gap:2.75rem; align-items:start}
}
.pdp__gallery{
  background:#fffdf8; border:1px solid var(--line); border-radius:8px;
  padding:1.25rem; box-shadow:0 10px 28px rgba(20,35,58,.06)
}
.pdp__main{margin:0}
.pdp__main img{width:100%; border-radius:4px; background:#efe6d6}
.pdp__cap{font-size:.85rem; color:var(--muted); margin-top:.65rem}
.pdp__info h1{font-size:clamp(1.85rem,3vw,2.5rem)}
.pdp__info .price{font:700 1.2rem/1 Inter,system-ui,sans-serif; color:var(--navy)!important}
.pdp__sum{color:var(--muted); max-width:36em}
.thumbs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; list-style:none; margin:1rem 0 0; padding:0}
.thumbs .thumb{display:block; width:100%; padding:0; border:1.5px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; overflow:hidden}
.thumbs .thumb[aria-pressed="true"]{border-color:var(--navy)}
.thumbs img{width:100%; aspect-ratio:1; object-fit:cover}
.buy__btn, .btn--amber.buy__btn{background:var(--navy)!important; color:#f3ead8!important; border:0}


/* Sketch banner — navy engraving on cream; cream text panel for AA */
.banner--sketch{
  background: #F7F1E6;
  min-height: min(58vh, 520px);
}
.banner--sketch .banner__media{ opacity:1 }
.banner--sketch .banner__img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.banner--sketch .banner__scrim{
  background:
    linear-gradient(90deg, rgba(247,241,230,.92) 0%, rgba(247,241,230,.78) 28%, rgba(247,241,230,.25) 52%, rgba(247,241,230,0) 70%),
    linear-gradient(180deg, rgba(247,241,230,.15) 0%, rgba(247,241,230,0) 35%, rgba(20,35,58,.06) 100%);
}
.banner--sketch .banner__in{
  grid-template-columns: 1fr;
  align-items: center;
  padding: 3.25rem 0 3rem;
  max-width: min(1120px, 92vw);
}
.banner--sketch .banner__panel{
  position: relative; z-index: 2;
  max-width: 34rem;
  background: rgba(247,241,230,.94);
  border: 1px solid rgba(20,35,58,.12);
  border-radius: 6px;
  padding: 1.6rem 1.7rem 1.7rem;
  box-shadow: 0 14px 36px rgba(20,35,58,.10);
}
.banner--sketch .banner__panel .eyebrow{ color: var(--navy); opacity: .72; }
.banner--sketch .banner__panel h1{
  color: var(--navy);
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  max-width: 16ch;
  line-height: 1.08;
  margin: 0 0 .7rem;
  text-shadow: none;
}
.banner--sketch .banner__panel .lede{
  color: color-mix(in srgb, var(--navy) 78%, #5a4a38);
  font: 400 1.02rem/1.55 Inter, system-ui, sans-serif;
}
.banner--sketch .banner__panel .btn{
  background: var(--navy); color: #F7F1E6; border-color: var(--navy);
}
.banner--sketch .banner__panel .btn--ghost{
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.banner--sketch .banner__product{ display:none } /* sketch fills the hero */
@media (max-width: 640px){
  .banner--sketch{ min-height: auto; }
  .banner--sketch .banner__media{ position: relative; height: 220px; }
  .banner--sketch .banner__in{ padding: 0 0 1.5rem; }
  .banner--sketch .banner__panel{
    margin-top: -2.25rem;
    width: 100%;
    max-width: none;
  }
  .banner--sketch .banner__scrim{
    background: linear-gradient(180deg, transparent 40%, rgba(247,241,230,.55) 100%);
  }
}

.banner-credit{
  font: 400 .72rem/1.45 Inter, system-ui, sans-serif;
  color: rgba(243,234,216,.72);
  padding: 0 0 1.75rem;
  margin: -.5rem auto 0;
}
.banner-credit a{ color: rgba(243,234,216,.88); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Night hero — full-bleed art, copy inside ===== */
.banner--night{
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #0E182C;
  color: #F7F1E6;
  overflow: hidden;
  min-height: min(78vh, 760px);
  max-height: 760px;
}
.banner--night .banner__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 0;
}
.banner--night .banner__img{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}
.banner--night .banner__stars{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .8;
  animation: starTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes starTwinkle{
  from{ opacity:.5; filter:brightness(.95) }
  to{ opacity:.95; filter:brightness(1.12) }
}
@media (prefers-reduced-motion: reduce){
  .banner--night .banner__stars{ animation: none; opacity: .7 }
}
.banner--night .banner__scrim,
.banner--night .banner__panel,
.banner--night .banner__in{ display: none !important }

/* Soft left scrim only — no box */
.banner--night::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(10,16,28,.72) 0%,
    rgba(10,16,28,.45) 28%,
    rgba(10,16,28,.12) 48%,
    rgba(10,16,28,0) 62%
  );
  z-index: 1;
}

.banner--night .banner__copy{
  position: absolute;
  z-index: 2;
  left: max(4vw, calc((100% - 1120px) / 2));
  right: auto;
  top: 18%;
  bottom: auto;
  transform: none;
  width: min(34rem, 44vw);
  max-width: 34rem;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.banner--night .banner__copy .eyebrow{
  color: rgba(247,241,230,.78);
  margin: 0 0 .6rem;
}
.banner--night .banner__copy h1{
  color: #F7F1E6;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.06;
  max-width: 14ch;
  margin: 0 0 .7rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.banner--night .banner__copy .lede{
  color: rgba(247,241,230,.9);
  font: 400 1.05rem/1.55 Inter, system-ui, sans-serif;
  max-width: 32em;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.banner--night .banner__copy .btns{ margin-top: 1.2rem }
.banner--night .banner__copy .btn{
  background: #F7F1E6;
  color: #14233A;
  border: 1.5px solid #F7F1E6;
}
.banner--night .banner__copy .btn--ghost{
  background: transparent;
  color: #F7F1E6;
  border-color: rgba(247,241,230,.7);
}

/* Flow into cream bestsellers — no navy gap */
.banner--night + .sec{
  background: var(--paper, #f3ead8);
  margin-top: 0;
  padding-top: 3.25rem;
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1100px){
  .banner--night{
    min-height: min(72vh, 680px);
    max-height: 680px;
  }
  .banner--night .banner__copy{
    width: min(30rem, 52vw);
    left: 5vw;
  }
  .banner--night .banner__copy h1{ font-size: clamp(2rem, 4vw, 2.8rem) }
}

/* Phone: full-width art on top, text below — no cream strip */
@media (max-width: 700px){
  .banner--night{
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    background: #0E182C;
  }
  .banner--night::after{ display: none }
  .banner--night .banner__media{
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .banner--night .banner__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
  .banner--night .banner__stars{ display: none }
  .banner--night .banner__copy{
    position: relative;
    order: 2;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 1.4rem 5vw 1.7rem;
    background: #0E182C;
  }
  .banner--night .banner__copy h1{
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    max-width: 18ch;
    text-shadow: none;
  }
  .banner--night .banner__copy .lede{ text-shadow: none }
  .banner--night .banner__copy .btns{
    flex-direction: column;
    align-items: stretch;
  }
  .banner--night .banner__copy .btn{ width: 100%; justify-content: center }
}