/* 19Fairways storefront theme — LIGHT retail.
   Cody 2026-09-13: "our current site for apparel is ok but I want it to look more
   professional… I want our store to be like this (golfyellowhammer.com). the
   mobile version is laid out very nicely and looks very clean and professional."

   What actually makes that reference look professional, and what we take:
     · a WHITE page. Apparel renders sit on light backgrounds, so a dark page
       fights every product photo. The brand green moves to the header, buttons
       and footer, where it reads as intent rather than noise.
     · one confident display face in heavy uppercase for section headings, a
       quiet grotesk for everything else. No third voice.
     · product first: big image plate, centred name, centred price, nothing else
       on the card. Badges only when they mean something.
     · air. Sections breathe; the grid gutter is small so products feel like a
       collection rather than scattered cards.
   This file is SELF-CONTAINED — shop pages deliberately do not load
   features.css or site-nav.css, so nothing dark leaks in. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --paper:#ffffff;
  --plate:#f3f4f1;          /* product image bed */
  --plate-2:#eceee8;
  --ink:#14241b;            /* near-black, warmed green */
  --ink-soft:#5d6d62;
  --line:#e4e7e1;
  --line-2:#d6dad2;
  --brand:#16321e;          /* the green, now a signal colour */
  --brand-hi:#1f4a2c;
  --gold:#9c7c16;           /* legible gold on white */
  --gold-hi:#f2d06b;        /* gold for dark surfaces only */
  --sale:#b3341a;
  --radius:12px;
  --radius-lg:16px;
  --head:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --shadow:0 1px 2px rgba(20,36,27,.04),0 8px 24px rgba(20,36,27,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.st-wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media(min-width:900px){ .st-wrap{padding:0 32px} }

/* ---------- type ---------- */
.st-h1,.st-h2,.st-h3{font-family:var(--head);font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;line-height:1.02;margin:0;color:var(--ink)}
.st-h1{font-size:clamp(30px,8.4vw,58px)}
.st-h2{font-size:clamp(25px,6.6vw,38px)}
.st-h3{font-size:clamp(17px,4.2vw,21px);letter-spacing:.6px}
.st-eyebrow{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.st-lead{color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin:10px 0 0}

/* ---------- buttons ---------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--head);font-weight:700;font-size:14.5px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  border-radius:8px;padding:14px 26px;transition:background .15s,border-color .15s,color .15s}
.st-btn:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.st-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.st-btn.ghost:hover{background:var(--plate);border-color:var(--ink)}
.st-btn.light{background:#fff;color:var(--brand);border-color:#fff}
.st-btn.block{width:100%}
.st-btn[disabled]{opacity:.45;cursor:default}
.st-link{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);
  padding-bottom:2px;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer}

/* ---------- store header ---------- */
.st-head{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
/* ⚠ iOS WKWebView in Capacitor can report env(safe-area-inset-top) as 0, so the
   inset is FLOORED here or the header lands under the Dynamic Island (Cody
   2026-09-12). html.in-native-app comes from /assets/store-native.js. */
html.in-native-app .st-head{padding-top:max(env(safe-area-inset-top),59px)}
html.in-native-app body::before{content:'';position:fixed;top:0;left:0;right:0;z-index:61;
  pointer-events:none;height:max(env(safe-area-inset-top),59px);background:var(--paper)}
.st-headin{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:8px;height:60px;max-width:1180px;margin:0 auto;padding:0 10px}
@media(min-width:900px){ .st-headin{padding:0 24px;height:72px} }
.st-icon{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:none;background:none;color:var(--ink);cursor:pointer;
  border-radius:9px;padding:0;text-decoration:none}
.st-icon:hover{background:var(--plate)}
.st-headl{display:flex;align-items:center;gap:2px}
.st-headr{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.st-mark{display:flex;align-items:center;gap:8px;text-decoration:none;justify-self:center}
.st-mark .wm{font-family:var(--head);font-weight:800;font-size:17px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap}
@media(max-width:400px){ .st-mark .wm{font-size:15px;letter-spacing:.08em} }
.st-bagc{position:absolute;transform:translate(11px,-11px);min-width:17px;height:17px;
  border-radius:999px;background:var(--brand);color:#fff;font-family:var(--body);
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.st-bagwrap{position:relative;display:inline-flex}

/* header search field slides open under the bar */
.st-search{display:none;border-bottom:1px solid var(--line);background:var(--paper)}
.st-search.open{display:block}
.st-searchin{max-width:1180px;margin:0 auto;padding:10px 16px 14px;display:flex;align-items:center;gap:10px}
.st-searchin input{flex:1;min-width:0;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--plate);border:1px solid var(--line);border-radius:10px;padding:13px 14px;outline:none}
.st-searchin input::placeholder{color:var(--ink-soft)}
.st-searchin input:focus{border-color:var(--ink)}

/* ---------- slide-in menu ---------- */
.st-scrim{position:fixed;inset:0;z-index:70;background:rgba(10,22,15,.5);
  opacity:0;pointer-events:none;transition:opacity .2s}
.st-scrim.open{opacity:1;pointer-events:auto}
.st-menu{position:fixed;top:0;bottom:0;left:0;width:min(380px,86vw);z-index:71;
  background:var(--paper);transform:translateX(-100%);transition:transform .24s ease;
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);box-shadow:0 0 40px rgba(10,22,15,.18)}
html.in-native-app .st-menu{padding-top:max(env(safe-area-inset-top),59px)}
.st-menu.open{transform:translateX(0)}
.st-menuh{display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 10px 0 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.st-menuh span{font-family:var(--head);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;font-size:12px;color:var(--ink-soft)}
.st-menub{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:10px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.st-menub .grp{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);padding:20px 18px 8px}
.st-menub .grp:first-child{padding-top:8px}
.st-mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  padding:14px 18px;font-family:var(--head);font-weight:600;font-size:16px;color:var(--ink);
  text-decoration:none;letter-spacing:.01em}
.st-mrow:hover{background:var(--plate)}
.st-mrow.on{color:var(--brand)}
.st-mrow.on .ct{color:var(--brand)}
.st-mrow .ct{font-family:var(--body);font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.st-mrow.sub{font-size:14.5px;font-weight:500;padding-top:12px;padding-bottom:12px}

/* ---------- hero ---------- */
/* Cody 2026-09-13: "make the hero image a little less dark so you can see the
   apparel, and embellish the logo on the polos so it stands out."
   So: the renders run at FULL opacity with a mild print-pop filter, the dim
   moves entirely into a BOTTOM-WEIGHTED scrim, and the copy drops to the lower
   third — the garments stay bright up top where the eye lands, the type sits on
   the dark base where it stays readable. */
.st-hero{position:relative;background:var(--brand);overflow:hidden;isolation:isolate}
.st-heroin{position:relative;display:grid;align-items:end;justify-items:center;
  min-height:clamp(430px,74vw,620px);padding:36px 18px 30px}
.st-hero .bgart{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);
  opacity:1;filter:saturate(1.05) contrast(1.07) brightness(1.05)}
@media(min-width:760px){ .st-hero .bgart{grid-template-columns:repeat(3,1fr)} }
.st-hero .hz{position:relative;overflow:hidden}
/* Cropped to the CHEST, and pushed in, so the 19 mark printed on the placket is
   large enough to actually read — that is the "logo on the polos". */
/* The panels are tall and narrow, so `cover` keeps only a thin vertical strip:
   pull the crop to ~62% across, which is where the 19 mark sits on the placket,
   and the crest lands in the middle of the panel instead of being cropped off. */
.st-hero .hz img{width:100%;height:100%;object-fit:cover;object-position:62% 26%}
/* A gold radial "glow" used to sit over the crest here to lift it off the
   all-over print. On a phone it read as a yellow smear across the shirt rather
   than a highlight, so it's gone — Cody 2026-09-13: "your highlight/yellow light
   is not working. We can remove that." Don't reintroduce it: mix-blend-mode
   screen over a busy print brightens the pattern, not the mark. */
.st-hero .hz:nth-child(3){display:none}
@media(min-width:760px){ .st-hero .hz:nth-child(3){display:block} }
.st-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,22,13,.34) 0%,
    rgba(8,22,13,.20) 30%,
    rgba(8,22,13,.58) 66%,
    rgba(8,22,13,.90) 100%)}
.st-herotx{position:relative;z-index:2;text-align:center;max-width:620px;
  text-shadow:0 2px 18px rgba(6,18,11,.55)}
.st-herotx .st-eyebrow{color:var(--gold-hi);display:block;margin-bottom:14px}
.st-herotx h1{font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;line-height:.94;margin:0;color:#fff;font-size:clamp(38px,11vw,74px)}
.st-herotx h1 em{font-style:normal;color:var(--gold-hi)}
.st-herotx p{color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.6;margin:16px auto 0;max-width:440px}
.st-herocta{background:var(--paper);padding:22px 16px 6px;text-align:center}
.st-herocta .st-btn{min-width:min(320px,100%)}
.st-herocta .fine{font-family:var(--head);font-weight:600;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin:14px 0 0}

/* ---------- sections ---------- */
.st-sec{padding:44px 0 8px}
.st-sec.tight{padding-top:28px}
.st-sech{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.st-sech .st-link{flex:0 0 auto}

/* ---------- collection tiles ---------- */
.st-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:640px){ .st-tiles{gap:16px} }
@media(min-width:1000px){ .st-tiles{grid-template-columns:repeat(4,1fr);gap:18px} }
@media(max-width:520px){
  .st-tile .im{aspect-ratio:1/1}
  .st-tile .bar{padding:11px 12px;flex-direction:column;align-items:flex-start;gap:2px}
  .st-tile .bar b{font-size:13.5px;line-height:1.2}
  .st-tile .bar .n{font-size:11.5px}
}
.st-tile{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--plate);border-radius:var(--radius-lg);overflow:hidden;text-align:left}
.st-tile .im{display:block;position:relative;aspect-ratio:1/.78;background:var(--plate);overflow:hidden}
.st-tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
/* Unifies white-backdrop renders (the hoodies) with studio-backdrop ones. */
.st-tile .im::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,36,27,.02),rgba(20,36,27,.085));
  box-shadow:inset 0 0 0 1px rgba(20,36,27,.08)}
.st-tile:hover .im img{transform:scale(1.03)}
.st-tile .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px;background:var(--brand);color:#fff}
.st-tile .bar b{font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:.02em}
.st-tile .bar .n{font-family:var(--body);font-size:12.5px;color:rgba(255,255,255,.7)}

/* ---------- product grid ---------- */
.sh-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 10px}
@media(min-width:640px){ .sh-row{grid-template-columns:repeat(3,1fr);gap:16px} }
@media(min-width:1000px){ .sh-row{grid-template-columns:repeat(4,1fr);gap:20px} }
.sh-card{position:relative;background:none;border:0;border-radius:0;cursor:pointer;overflow:visible}
.sh-ph{position:relative;background:var(--plate);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1/1.16;margin-bottom:12px}
/* Same treatment as the tiles: the hoodie/tee renders are on white, so without
   a panel tone + hairline they float on the page while the polos sit on their
   studio backdrop. z-index keeps it under the badge and share button. */
.sh-ph::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,36,27,.015),rgba(20,36,27,.07));
  box-shadow:inset 0 0 0 1px rgba(20,36,27,.07)}
.sh-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sh-card:hover .sh-ph img:not(.sh-crestov){transform:scale(1.035)}
.sh-badge{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--head);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.sh-badge.new{background:var(--ink);color:#fff}
.sh-badge.soon{background:rgba(255,255,255,.92);color:var(--ink)}
.sh-cardshare{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.sh-card:hover .sh-cardshare,.sh-card:focus-within .sh-cardshare{opacity:1}
@media(hover:none){ .sh-cardshare{display:none} }
.sh-qadd{display:none}
.sh-cardbody{text-align:center;padding:0 4px}
.sh-cardbody h3{font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.01em;
  margin:0 0 4px;color:var(--ink);line-height:1.25}
.sh-cardbody .sub{display:none}
.sh-price{font-family:var(--body);font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.sh-price s{color:var(--ink-soft);opacity:.7;margin-right:6px}
.sh-swatches{display:flex;gap:5px;justify-content:center;margin-top:8px}
.sh-sw{width:12px;height:12px;border-radius:50%;border:1px solid var(--line-2)}
.sh-crestov{position:absolute;pointer-events:none;transform:translate(-50%,-50%);z-index:2}
@media(min-width:640px){
  .sh-cardbody h3{font-size:16px}
  .sh-price{font-size:15px}
}

/* section wrapper the renderer emits */
.sh-coll{padding:8px 0 30px}
.sh-collhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sh-collhead h2{font-family:var(--head);font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  font-size:clamp(25px,6.6vw,38px);line-height:1.02;margin:0}
.sh-viewall{font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--ink);
  padding:0 0 2px;cursor:pointer;flex:0 0 auto}
.sh-vacard{display:none}

/* filter + count toolbar above a collection listing */
.st-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:22px}
.st-bar button{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:15px;color:var(--ink);padding:0}
.st-bar .cnt{font-family:var(--body);font-size:14px;color:var(--ink-soft)}
.st-back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:22px 0 0}
.st-back:hover{color:var(--ink)}
.sh-backbrowse{display:none}
.sh-empty{color:var(--ink-soft);font-size:15px;line-height:1.6;padding:30px 0}

/* garment pills */
.sh-gpills{display:flex;flex-wrap:wrap;gap:8px}
.sh-gpills button{font-family:var(--head);font-weight:600;font-size:13.5px;letter-spacing:.02em;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
  border-radius:999px;padding:10px 16px;cursor:pointer}
.sh-gpills button:hover{border-color:var(--ink)}
.sh-gpills button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.sh-gpills button .n{font-family:var(--body);font-size:11.5px;color:var(--ink-soft);margin-left:6px}
.sh-gpills button.on .n{color:rgba(255,255,255,.72)}

/* ---------- trust strip + band ---------- */
.st-trust{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
@media(min-width:760px){ .st-trust{grid-template-columns:repeat(4,1fr)} }
.st-trust div{background:var(--paper);padding:20px 16px;text-align:center}
.st-trust b{display:block;font-family:var(--head);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.st-trust span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:4px}

/* ---------- footer ---------- */
.st-foot{background:var(--brand);color:rgba(255,255,255,.76);margin-top:56px;
  padding:44px 0 calc(34px + env(safe-area-inset-bottom,0px))}
.st-foot a{color:rgba(255,255,255,.76);text-decoration:none}
.st-foot a:hover{color:#fff}
.st-footin{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:760px){ .st-footin{grid-template-columns:1.4fr 1fr 1fr} }
.st-foot .wm{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:10px}
.st-foot h4{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-hi);margin:0 0 12px}
.st-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
.st-foot .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;
  font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* ---------- product detail modal (kept: the quick path from the grid) ---------- */
.sh-overlay{position:fixed;inset:0;background:rgba(12,24,17,.55);backdrop-filter:blur(2px);z-index:80;
  display:none;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:calc(20px + env(safe-area-inset-top,0px)) 12px calc(24px + env(safe-area-inset-bottom,0px))}
html.in-native-app .sh-overlay{padding-top:calc(max(env(safe-area-inset-top),59px) + 14px)}
.sh-overlay.open{display:flex}
html.sh-locked{overflow:hidden !important}
html.sh-locked body{position:fixed !important;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
.sh-modal{width:100%;max-width:980px;background:var(--paper);border-radius:var(--radius-lg);
  padding:18px;display:grid;grid-template-columns:1fr;gap:22px;margin:auto;box-shadow:var(--shadow)}
@media(min-width:760px){ .sh-modal{grid-template-columns:1.05fr .95fr;padding:24px;gap:30px} }
.sh-modal .close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.sh-gallery{display:flex;flex-direction:column;gap:10px}
.sh-photo{background:var(--plate);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1.1;
  position:relative;cursor:zoom-in}
.sh-photo img{width:100%;height:100%;object-fit:cover}
.sh-zoomhint{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.9);color:var(--ink);
  font-size:11px;font-weight:500;padding:5px 10px;border-radius:999px}
.sh-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.sh-thumbs::-webkit-scrollbar{display:none}
.sh-thumb{flex:0 0 auto;width:62px;height:70px;border-radius:9px;overflow:hidden;background:var(--plate);
  border:1.5px solid transparent;cursor:pointer;padding:0}
.sh-thumb.sel{border-color:var(--ink)}
.sh-thumb img{width:100%;height:100%;object-fit:cover}
.sh-modal h2{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(24px,6vw,34px);line-height:1.04;margin:0 0 8px}
.mprice{font-family:var(--body);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:14px}
.mprice s{color:var(--ink-soft);opacity:.7;margin-right:8px;font-weight:400}
.sh-modal .desc{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 18px}
.sh-lbl{font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:16px 0 8px}
.sh-colors{display:flex;flex-wrap:wrap;gap:8px}
.sh-coloropt{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);cursor:pointer;padding:0}
.sh-coloropt.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,36,27,.08)}
.sh-size{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:9px;padding:13px 12px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6d62' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.sh-qty{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.sh-qty button{width:42px;height:42px;background:var(--paper);border:0;color:var(--ink);font-size:17px;cursor:pointer}
.sh-qty button:hover{background:var(--plate)}
.sh-add{width:100%;margin-top:18px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--brand);color:#fff;border:0;border-radius:9px;padding:16px;cursor:pointer}
.sh-add:hover{background:var(--brand-hi)}
.sh-add:disabled{background:var(--plate-2);color:var(--ink-soft);cursor:default}
.sh-shareBtn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:none;border:0;
  color:var(--ink-soft);font-family:var(--body);font-size:13.5px;cursor:pointer;padding:4px 0}
.sh-shareBtn:hover{color:var(--ink)}
.sh-note{color:var(--ink-soft);font-size:12.5px;line-height:1.55;margin:14px 0 0}
.sh-note a{color:var(--gold);font-weight:500}

/* zoom lightbox */
.sh-zoom{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.98);display:none;
  align-items:center;justify-content:center;padding:20px}
.sh-zoom.open{display:flex}
.sh-zoom img{max-width:100%;max-height:86vh;object-fit:contain}
.sh-zoom .zclose{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:16px;cursor:pointer}

/* ---------- bag drawer ---------- */
.sh-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:85;background:var(--paper);
  transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(10,22,15,.18);
  padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px))}
html.in-native-app .sh-drawer{padding-top:calc(max(env(safe-area-inset-top),59px) + 14px)}
.sh-drawer.open{transform:translateX(0)}
.sh-drawer h3{font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  font-size:19px;margin:0}
.sh-items{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.sh-item{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.sh-swipewrap{position:relative;z-index:1;display:flex;gap:12px;align-items:center;
  padding:12px 0;background:var(--paper)}
.sh-swipebg{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:flex-end;
  padding-right:18px;background:var(--sale);color:#fff;font-size:13px;font-weight:600;
  opacity:0;transition:opacity .15s;pointer-events:none}
.sh-item img{width:60px;height:66px;border-radius:9px;object-fit:cover;background:var(--plate);flex:0 0 auto}
.sh-item .meta{flex:1;min-width:0}
.sh-item .meta .t{font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.3}
.sh-item .meta .d{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
.sh-item .rm{color:var(--ink-soft);font-size:12.5px;cursor:pointer;margin-top:4px}
.sh-item .rm:hover{color:var(--sale)}
.sh-total{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  padding:14px 0;border-top:1px solid var(--line)}
.sh-total span:last-child{font-family:var(--body);font-size:20px;font-weight:500;letter-spacing:0;text-transform:none}
.sh-checkout{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brand);color:#fff;border:0;border-radius:9px;padding:16px;cursor:pointer}
.sh-checkout:hover{background:var(--brand-hi)}
.sh-bagbtn.sh-bump{animation:stBump .3s ease}
@keyframes stBump{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Leftovers from features.css, which shop pages no longer load. */
.fx-btn-line{background:none;border:1px solid var(--line-2);color:var(--ink-soft);border-radius:8px;
  font-size:14px;cursor:pointer;padding:6px 11px;line-height:1}
.fx-btn-line:hover{border-color:var(--ink);color:var(--ink)}
:root{--border:var(--line);--border-soft:var(--line);--card:var(--paper);--card-2:var(--plate);
  --muted:var(--ink-soft);--text:var(--ink);--bg:var(--paper);--green:#1a5c2e;--on-gold:#fff}

/* ---------- misc ---------- */
.sh-banner{background:rgba(31,74,44,.07);border:1px solid rgba(31,74,44,.22);border-radius:var(--radius);
  padding:14px 16px;font-size:14px;color:var(--ink);margin:18px 0}
.sh-banner a{color:var(--brand);font-weight:700}
#shopSaleBar{font-family:var(--head)!important;font-weight:700!important;letter-spacing:.08em!important;
  text-transform:uppercase!important;font-size:12.5px!important;background:var(--ink)!important;color:#fff!important}