/* Shared shop + checkout chrome. Matches homepage cream / tablet-dark tokens. */

:root{
  --bg:#FBF7EF;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#EFE8D8;
  --cream:#FBF7EF;
  --cream-2:#EFE8D8;
  --lime:#93C754;
  --lime-lift:#A8D66A;
  --lime-text:#3F6B12;
  --blue:#00A6ED;
  --blue-soft:#5CC4F5;
  --gold:#FFD76B;
  --error:#fa1f77;
  --text:#353027;
  --text-soft:#5C5348;
  --text-faint:#7A7166;
  --ink:#353027;
  --ink-soft:#5C5348;
  --line:rgba(53,48,39,.14);
  --grid:rgba(53,48,39,.05);
  --r:16px; --r-lg:22px; --pill:999px;
  --shadow:7px 7px 0 rgba(53,48,39,.14);
  --shadow-sm:4px 4px 0 rgba(53,48,39,.12);
  --pad:26px;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.72,.28,1);
  --sec:72px;
}

@media (max-width:834px){
  :root{
    --bg:#0C0B0A;
    --surface:#181714;
    --surface-2:#1C1A16;
    --surface-3:#24211C;
    --cream:#F9F4E4;
    --cream-2:#2A2722;
    --lime:#93C754;
    --lime-lift:#A8D66A;
    --lime-text:#93C754;
    --blue:#00A6ED;
    --blue-soft:#5CC4F5;
    --gold:#FFD76B;
    --error:#fa1f77;
    --text:#F9F4E4;
    --text-soft:#C4BBA8;
    --text-faint:#8F8778;
    --ink:#F9F4E4;
    --ink-soft:#C4BBA8;
    --line:rgba(249,244,228,.14);
    --grid:rgba(249,244,228,.05);
    --shadow:7px 7px 0 rgba(0,0,0,.45);
    --shadow-sm:4px 4px 0 rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; max-width:100%}
body,
.shop-storefront{
  margin:0;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(1250px 900px at 90%  0%, rgba(255,215,107,.22), transparent 58%),
    radial-gradient(1100px 920px at -8% 20%, rgba(255,215,107,.14), transparent 56%),
    radial-gradient(1200px 880px at 72% 58%, rgba(147,199,84,.12), transparent 58%),
    radial-gradient(1000px 860px at 10% 96%, rgba(255,215,107,.14), transparent 55%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:var(--font-plus-jakarta),"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.shop-storefront{width:100%}
body.cart-open{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px; border-radius:6px}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); min-width:0; box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.06; letter-spacing:-.03em}
.display{text-transform:uppercase; letter-spacing:-.02em}
h1{font-size:clamp(32px,5vw,52px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:20px; letter-spacing:-.02em}
.tagline{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin:0 0 16px;
}
.lede{font-size:clamp(16px,1.5vw,18.5px); color:var(--text-soft); max-width:60ch; margin:18px 0 0}
.card-cat{
  margin:0; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
}
.card-body .card-cat,
.card-body .price-label{flex:0 0 auto}
.price-label{font-size:15px; font-weight:800; color:var(--ink)}
.card-kicker{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin:0 0 8px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:2px solid transparent; border-radius:var(--pill);
  /* Slightly more bottom padding — all-caps + tracking sits optically low otherwise */
  padding:12px 28px 15px; font-size:13.5px; font-weight:800; line-height:1;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  cursor:pointer;
  will-change:transform, box-shadow;
  transition:transform .2s var(--ease), background .2s var(--ease),
             border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary{background:var(--lime); color:#14120F; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--lime-lift); color:#14120F; transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(53,48,39,.14)}
.btn-primary:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(53,48,39,.14); color:#14120F; transition-duration:.1s}
.btn-outline{background:var(--surface); color:var(--text); border-color:var(--lime)}
.btn-outline:hover{
  background:var(--lime-lift); border-color:var(--lime-lift); color:#14120F;
  transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(53,48,39,.14);
}
.btn-outline:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(53,48,39,.14); transition-duration:.1s}
.btn-sm{padding:8px 18px 11px; font-size:12px}
.btn-dark{background:var(--ink); color:#fff}
.link-arrow{font-weight:800; text-decoration:none}
.link-arrow:hover{color:var(--lime)}

/* ---------- Ticker ---------- */
.ticker{background:var(--gold); color:#14120F; overflow:hidden; padding:9px 0}
.ticker-track{display:flex; width:max-content; animation:slide 40s linear infinite}
.ticker-group{display:flex; flex-shrink:0}
.ticker span{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:0; white-space:nowrap;
  display:inline-flex; align-items:center;
}
.ticker span::after{
  content:"★"; margin:0 22px; opacity:.55;
}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

.site-header{
  position:sticky; top:0; z-index:70;
  background:rgba(251,247,239,0); border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.stuck{
  background:rgba(251,247,239,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--line);
}
.site-header .wrap{max-width:1560px; min-width:0}
.nav{display:flex; align-items:center; gap:22px; height:92px; min-width:0; max-width:100%}
.nav-links a:not(.btn){white-space:nowrap}
.brand{display:flex; align-items:center; text-decoration:none; flex:0 1 auto; min-width:0; max-width:min(220px,42vw)}
.brand picture{display:block; max-width:100%}
.brand img{height:72px; width:auto; max-width:100%; object-fit:contain}
.brand-logo-cream{display:none}
@media (max-width:834px){
  .brand-logo-ink{display:none}
  .brand-logo-cream{display:block}
}
.nav-links{display:none; gap:2px; margin-left:8px}
.nav-burger{
  display:none; position:relative; z-index:2;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:42px; height:42px; margin:0; padding:0; flex:0 0 auto;
  border:0; border-radius:10px; background:transparent; color:var(--text-soft); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-burger:hover{color:var(--lime)}
.nav-burger:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.nav-burger-bar{
  display:block; width:20px; height:2px; border-radius:1px; background:currentColor;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
  transform-origin:center;
}
.site-header.nav-open .nav-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-burger-bar:nth-child(2){opacity:0}
.site-header.nav-open .nav-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer-cta{display:none}
@media (min-width:1080px){
  .nav-links{display:flex}
  .nav-drawer-cta{display:none !important}
}
@media (max-width:1079px){
  .site-header .wrap.nav{position:relative; flex-wrap:nowrap}
  .nav-burger{display:inline-flex}
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%; z-index:80;
    flex-direction:column; align-items:stretch; gap:2px;
    width:auto; margin:0; padding:10px 0 18px;
    background:rgba(251,247,239,.98);
    border:0; border-radius:0;
    box-shadow:var(--shadow-sm);
  }
  .site-header.nav-open{
    background:rgba(251,247,239,.96);
    border-bottom-color:transparent;
  }
  .site-header.nav-open .nav-links{display:flex}
  .nav-links a:not(.btn){
    width:100%; justify-content:center; text-align:center;
    padding:14px 12px; border-bottom-width:2px;
  }
  /* Tablet/phone: Sign In lives in the drawer. Book a Class never does: it stays
     in the bar, to the left of the cart. */
  .nav-actions .nav-account{display:none !important}
  .nav-actions .nav-book{order:-1}
  .nav-drawer-cta{
    display:inline-flex; align-self:center; justify-content:center;
    width:calc(100% - 32px); max-width:280px; margin:10px 16px 4px;
    text-align:center;
  }
}
@media (max-width:834px){
  :root{--pad:20px}
  .nav{gap:10px; height:78px}
  .brand{max-width:min(168px,36vw)}
  .brand img{height:52px}
  .nav-actions{gap:4px}
  .nav-text{padding:8px 6px}
  .nav-actions .btn{padding:10px 14px; font-size:11px; letter-spacing:.04em}
  .site-header{background:rgba(12,11,10,0)}
  .site-header.stuck{background:rgba(12,11,10,.92)}
  .site-header.nav-open{background:rgba(12,11,10,.96)}
  .site-header.nav-open .nav-links{background:rgba(12,11,10,.98)}
  .cart-count{color:#14120F}
}
.nav-links a:not(.btn), .nav-text{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft);
  padding:10px 8px 4px; background:transparent; border:0; border-bottom:3px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:not(.btn):hover, .nav-text:hover{color:var(--lime); border-bottom-color:var(--lime)}
.nav-links a[aria-current="page"]{color:var(--lime-text); border-bottom-color:var(--lime)}
.nav-actions{display:flex; align-items:center; gap:9px; margin-left:auto; flex:0 1 auto; min-width:0}
.cart-count{
  background:var(--gold); color:#14120F; border-radius:var(--pill);
  min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; padding:0 5px;
}
.nav-cart-ic{
  display:inline-flex; width:16px; height:16px; flex:0 0 16px;
  color:currentColor;
}
.nav-cart-ic svg{width:100%; height:100%; display:block}
.nav-actions .btn{padding:11px 20px; font-size:12px; flex:0 1 auto; min-width:0}
@media (max-width:560px){
  .nav-text .label{display:none}
}
@media (max-width:400px){
  :root{--pad:14px}
  .nav{gap:6px} .nav-actions{gap:3px}
  .brand{max-width:min(132px,34vw)}
  .brand img{height:44px}
  .nav-text{padding:8px 5px}
  .nav-actions .btn{padding:9px 11px; font-size:10.5px}
}
@media (max-width:340px){
  .nav{gap:4px} .nav-actions{gap:2px}
  .brand{max-width:min(112px,32vw)}
  .brand img{height:40px}
  .nav-actions .btn{padding:8px 9px; font-size:10px; letter-spacing:.03em}
  .cart-count{min-width:17px;height:17px;font-size:10px}
}
@media (max-width:300px){
  .nav{gap:3px} .nav-actions{gap:2px}
  .brand{max-width:96px}
  .brand img{height:36px}
  .nav-text{padding:7px 4px}
  .nav-actions .btn{padding:7px 8px; font-size:9.5px; letter-spacing:.02em}
}
.shop-main{flex:1; padding:48px 0 var(--sec)}
.shop-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:0 0 28px; font-size:13px; color:var(--text-faint);
}
.shop-crumb-back{
  display:none; align-items:center; gap:6px;
  font-weight:700; text-decoration:none; color:var(--text-soft);
}
.shop-crumb-back:hover{color:var(--lime)}
.shop-crumb-trail{
  display:flex; flex-wrap:wrap; align-items:center;
  list-style:none; margin:0; padding:0; min-width:0; max-width:100%;
}
.shop-crumb-trail li{
  display:inline-flex; align-items:center; min-width:0; max-width:100%;
}
.shop-crumb-trail li:not(:last-child)::after{
  content:"›"; margin:0 8px; opacity:.55; flex:0 0 auto;
}
.shop-crumb-trail a{text-decoration:none; color:inherit}
.shop-crumb-trail a:hover{color:var(--lime)}
.shop-crumb-trail [aria-current="page"]{
  color:var(--text-soft); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(28ch,55vw);
}
@media (max-width:700px){
  .shop-crumb-back{display:inline-flex}
  .shop-crumb-trail{display:none}
}
.sec-head{margin-bottom:36px}
.sec-row{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:28px}
.shop-all-row{display:flex; justify-content:flex-end; margin-top:28px}

.grid{display:grid; gap:22px}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media (min-width:700px){ .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1020px){ .g3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{transform:translate(-2px,-2px); box-shadow:var(--shadow); border-color:var(--lime-lift)}
.card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-body h3{font-size:18px}
.card-body h3 a{text-decoration:none}
.card-body h3 a:hover{color:var(--lime)}
.card-body p{margin:0; color:var(--text-soft); font-size:14.5px}
.card-actions{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:10px}
.media{aspect-ratio:4/3; overflow:hidden; background:var(--surface-3)}
.media img{width:100%; height:100%; object-fit:cover}
/* Cutout product shots sit on white — keep the whole frame white in dark mode too. */
.media.product{background:#fff}
.media.product img{object-fit:contain; padding:16px; box-sizing:border-box}
.spec{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.spec li{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--pill); background:var(--surface-3); color:var(--text-soft);
}
.price-label{font-size:15px; font-weight:800; color:var(--ink)}

.cat-tile .media{aspect-ratio:16/10}
.cat-tile .card-body{gap:8px}

/* Category: products + Yamaha order card in the rightmost column */
.cat-layout{
  display:grid; gap:22px; align-items:start;
}
.cat-layout .cat-products{display:grid; gap:22px; grid-template-columns:1fr}
@media (min-width:700px){
  .cat-layout .cat-products{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .cat-layout{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
  .cat-layout .cat-order{position:sticky; top:96px}
}
.milestone{
  background:#353027; color:#fff; border:3px solid var(--cream);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:24px 22px;
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.milestone .ic{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; flex:0 0 54px;
  border-radius:14px; background:var(--cream);
}
.milestone .ic img{width:34px; height:34px; display:block; object-fit:contain}
.milestone p{margin:0; font-size:14.5px; color:rgba(255,255,255,.88); line-height:1.55}
.milestone strong{display:block; font-size:17px; margin-bottom:6px; letter-spacing:-.01em; color:#fff}
.milestone .btn{align-self:stretch; justify-content:center; text-align:center}

.pdp{display:grid; gap:36px}
@media (min-width:900px){ .pdp{grid-template-columns:1.05fr .95fr; gap:56px; align-items:start} }
.pdp-gallery{
  display:flex; flex-direction:column; gap:12px;
  min-width:0; background:transparent; border:0; border-radius:0; overflow:visible;
}
.pdp-gallery-frame{
  background:#fff; border:2px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.pdp-gallery-frame .media{aspect-ratio:1; border-radius:0}
.pdp-gallery-frame .media.product{background:#fff}
.pdp-gallery-frame .media.product img{padding:16px; box-sizing:border-box}
.pdp-thumbs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px;
  padding:0; border:0; background:transparent;
}
.pdp-thumb{
  aspect-ratio:1; border:2px solid var(--line); border-radius:12px; padding:0;
  overflow:hidden; background:#fff; cursor:pointer;
}
.pdp-thumb img{width:100%; height:100%; object-fit:contain; display:block; padding:4px}
.pdp-thumb.is-active,
.pdp-thumb:hover{border-color:var(--lime)}
.pdp-title{font-size:clamp(28px,4vw,40px); margin:0}
.pdp-series{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 0;
  font-size:13px; font-weight:700; line-height:1.3; color:var(--text-soft);
}
.pdp-series-sep{color:var(--text-faint); font-weight:700; line-height:1.3}
.pdp-sku{
  letter-spacing:.04em; text-transform:uppercase; font-size:13px; font-weight:700;
  line-height:1.3; color:var(--text-faint);
}
.pdp-meta .price-label{font-size:22px; margin:14px 0 18px}
.pdp-meta .lede{margin-top:0}
.pdp-highlights{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.pdp-highlights li{
  position:relative; padding-left:18px; font-size:14.5px; color:var(--text-soft); line-height:1.45;
}
.pdp-highlights li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--lime);
}
.pdp-spec-row{margin-top:20px}
.pdp-actions{
  --control-h:52px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px;
}
.pdp-actions .btn{
  height:var(--control-h); box-sizing:border-box;
  padding-top:0; padding-bottom:0;
}
.pdp-actions .qty{
  display:grid; grid-template-columns:48px 56px 48px; align-items:stretch;
  height:var(--control-h); box-sizing:border-box;
  border:2px solid var(--line); border-radius:var(--pill);
  overflow:hidden; background:var(--surface);
}
.pdp-actions .qty-btn{
  width:auto; height:auto; margin:0; padding:0; border:0; background:transparent;
  display:grid; place-items:center; color:inherit; cursor:pointer;
}
.pdp-actions .qty-field{
  position:relative; display:grid; place-items:center;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.pdp-actions .qty-num{
  font-size:15px; font-weight:700; line-height:1; color:var(--ink);
  pointer-events:none; user-select:none;
}
.pdp-actions .qty-input{
  position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box;
  margin:0; padding:0; border:0; opacity:0; cursor:text;
  text-align:center; font-size:15px; font-weight:700;
  -moz-appearance:textfield; appearance:textfield;
}
.pdp-actions .qty-input::-webkit-outer-spin-button,
.pdp-actions .qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.pdp-actions .qty-input:focus{opacity:1; background:var(--surface); z-index:1}
.pdp-actions .qty-field:has(.qty-input:focus) .qty-num{visibility:hidden}
.qty-ico{
  display:block; width:14px; height:14px; color:currentColor; flex:0 0 auto;
}
.pdp-pickup{margin-top:22px}
.fact{
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px;
}
.fact-ic{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin:0 0 14px;
  border-radius:14px; background:var(--surface-3);
}
.fact-ic img{width:34px; height:34px; object-fit:contain; display:block}
.fact .card-kicker{margin:0 0 8px}
.fact p{margin:0; font-size:14px; color:var(--text-soft); line-height:1.6}
/* Pickup: icon beside copy, matching homepage Yamaha / hero trust. */
.pdp-pickup{
  display:flex; gap:16px; align-items:center;
}
.pdp-pickup .fact-ic{
  width:48px; height:48px; margin:0; flex:0 0 48px;
}
.pdp-pickup .fact-copy{flex:1 1 auto; min-width:0}
.pdp-pickup .card-kicker{margin:0 0 4px}
.pdp-detail{margin-top:64px}
.pdp-detail-grid{display:grid; gap:28px; align-items:start}
@media (min-width:880px){ .pdp-detail-grid{grid-template-columns:1.35fr .85fr; gap:40px} }
.pdp-overview p{margin:0; color:var(--text-soft); font-size:15px; line-height:1.7; max-width:62ch}
.pdp-panel{
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px;
}
.pdp-panel p{margin:0; color:var(--text-soft); font-size:15px; line-height:1.7}
.pdp-section-title{font-size:clamp(22px,3vw,30px); margin:0 0 16px}
.pdp-list, .pdp-notes{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.pdp-list li, .pdp-notes li{
  padding-left:16px; position:relative; color:var(--text-soft); font-size:14.5px; line-height:1.5;
}
.pdp-list li::before, .pdp-notes li::before{
  content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--lime);
}
.pdp-features{margin-top:48px}
.pdp-feature-list{border-top:1px solid var(--line)}
.pdp-feature{
  display:grid; gap:8px 32px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .pdp-feature{grid-template-columns:minmax(200px,.38fr) 1fr; align-items:start}
}
.pdp-feature h3{font-size:17px; margin:0; line-height:1.25}
.pdp-feature p{margin:0; color:var(--text-soft); font-size:14.5px; line-height:1.65}
.pdp-specs{margin-top:56px}
.pdp-spec-mobile{display:none}
.pdp-spec-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg);
}
@media (max-width:719px){
  .pdp-spec-desktop{display:none}
  .pdp-spec-mobile{
    display:flex; flex-direction:column;
    background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden;
  }
  .pdp-spec-mobile-row{
    padding:10px 14px; border-bottom:1px solid var(--line);
  }
  .pdp-spec-mobile-row:last-child{border-bottom:0}
  .pdp-spec-mobile-label{
    margin:0 0 4px; font-size:11px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:var(--ink); line-height:1.3;
  }
  .pdp-spec-mobile-value{
    margin:0; font-size:14px; font-weight:500; color:var(--text-soft); line-height:1.4;
  }
}
.pdp-spec-table{
  width:100%; min-width:640px; border-collapse:collapse;
  font-size:14px; line-height:1.45;
}
.pdp-spec-table tr{border-bottom:1px solid var(--line)}
.pdp-spec-table tr:last-child{border-bottom:0}
.pdp-spec-table th,
.pdp-spec-table td{
  padding:12px 16px; text-align:left; vertical-align:middle;
  border-right:1px solid var(--line);
}
.pdp-spec-table th:last-child,
.pdp-spec-table td:last-child{border-right:0}
/* Mobile: drop min-width + rowspan stretch so rows hug their text. */
@media (max-width:719px){
  .pdp-spec-table{min-width:0; font-size:13px; line-height:1.35}
  .pdp-spec-table th,
  .pdp-spec-table td{padding:8px 12px; vertical-align:middle}
  .pdp-spec-cat,
  .pdp-spec-group{width:auto}
}
.pdp-spec-cat{
  width:18%; font-size:12px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); background:var(--surface-3);
}
.pdp-spec-group{
  width:16%; font-weight:700; color:var(--text-soft); background:color-mix(in srgb, var(--surface-3) 55%, var(--surface));
}
.pdp-spec-label{width:22%; font-weight:600; color:var(--ink)}
.pdp-spec-value{color:var(--text-soft); font-weight:500}
.pdp-spec-note{margin:12px 0 0; font-size:12px; color:var(--text-faint)}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pdp-related{margin-top:64px; padding-top:12px}
.qty{
  display:inline-grid; grid-template-columns:40px 48px 40px; align-items:stretch;
  height:40px; box-sizing:border-box;
  border:2px solid var(--line); border-radius:var(--pill);
  overflow:hidden; background:var(--surface);
}
.qty-btn{
  margin:0; padding:0; border:0; background:transparent; color:inherit; cursor:pointer;
  display:grid; place-items:center;
}
.qty-input{
  width:100%; height:100%; box-sizing:border-box; margin:0; padding:0;
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  text-align:center; background:transparent; color:var(--ink); font-weight:700;
  font-size:14px; line-height:36px;
  -moz-appearance:textfield; appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.shop-empty{
  padding:48px 28px; text-align:center; background:var(--surface);
  border:2px dashed var(--line); border-radius:var(--r-lg);
}
.shop-empty p{margin:0 0 20px; color:var(--text-soft)}

/* Checkout */
.checkout-grid{display:grid; gap:28px}
@media (min-width:960px){ .checkout-grid{grid-template-columns:1.15fr .85fr; gap:64px; align-items:start} }
@media (min-width:960px){ .confirm-grid{grid-template-columns:2fr 3fr; gap:64px} }
.confirm-grid > .checkout-card{min-width:0}
.checkout-card{
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
}
.checkout-card h2{font-size:22px; margin-bottom:18px}
.checkout-card-title{
  display:inline-flex; align-items:center; gap:12px;
  font-size:22px; margin:0 0 18px; font-weight:800;
}
.checkout-card-ic{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:0 0 48px;
  border-radius:14px; background:var(--surface-3);
  overflow:hidden;
}
.checkout-card-ic img{
  width:34px; height:34px; object-fit:contain; display:block;
}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field > label:not(.file-picker),
.field > span[id]{
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.field label .opt{font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--text-faint)}
.field input::placeholder, .field textarea::placeholder{
  color:color-mix(in srgb, var(--text-soft) 50%, transparent);
}
.field input, .field textarea, .field select{
  border:2px solid var(--line); border-radius:12px; padding:12px 14px;
  background:var(--surface-2); color:var(--ink); font:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(147,199,84,.30);
}
.field textarea{min-height:90px; resize:vertical}
.field-row{display:grid; gap:14px}
@media (min-width:560px){ .field-row{grid-template-columns:1fr 1fr} }
.checkout-account{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding:14px 16px; border:2px solid var(--line); border-radius:var(--r);
  background:var(--surface);
}
.checkout-account p{margin:0; font-size:14px; color:var(--text-soft); max-width:52ch; line-height:1.45}
.checkout-account strong{color:var(--ink)}
.checkout-account .btn{flex:0 0 auto}
.pay-options{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.pay-option{
  display:flex; gap:12px; align-items:flex-start;
  border:2px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer;
  background:var(--surface-2);
}
.pay-option:has(input:checked){border-color:var(--lime); background:var(--surface)}
.pay-option input{margin-top:3px}
.pay-option strong{display:block; font-size:14px}
.pay-option span{display:block; font-size:13px; color:var(--text-soft); margin-top:2px}
.pay-panel{display:none; margin-top:8px; padding-top:8px}
.pay-panel.is-active{display:block}
.pay-note{font-size:13.5px; color:var(--text-soft); margin:0 0 14px}
.card-number-wrap{position:relative}
.card-number-wrap input{width:100%; padding-right:58px; box-sizing:border-box}
.card-brand{
  position:absolute; top:50%; right:12px; transform:translateY(-50%);
  width:40px; height:26px; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.card-brand[hidden]{display:none}
.card-brand svg{width:40px; height:26px; display:block}
.qr-block{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:18px; border:2px dashed var(--line); border-radius:14px; margin-bottom:16px;
  background:var(--bg);
}
.qr-block img{width:100%; max-width:100%; height:auto; background:#fff; padding:8px; border-radius:12px}
.qr-block p{margin:0; font-size:13px; text-align:center; color:var(--text-soft)}
.file-input{
  position:relative;
  display:flex; flex-direction:column; gap:8px;
}
.file-input .file-picker{
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:48px; padding:12px 14px; box-sizing:border-box;
  border:2px solid var(--line); border-radius:12px; background:var(--surface);
  cursor:pointer; font-size:14px;
}
.file-input .file-picker svg{width:16px; height:16px; flex:0 0 auto; opacity:.45}
.file-input .file-picker .file-name{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:color-mix(in srgb, var(--text-soft) 55%, transparent);
}
.file-input .file-picker .file-name.has-file{color:var(--ink); opacity:1}
.file-input .file-picker .file-choose{flex:0 0 auto; font-weight:700; font-size:13px; color:var(--ink)}
.file-input input[type=file]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.checkout-error{
  display:none; margin:0 0 14px; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); font-size:14px; font-weight:600;
}
.checkout-error.is-visible{display:block}
@media (max-width:834px){
  .checkout-error{background:color-mix(in srgb, var(--error) 18%, transparent); color:#ff8ab8}
}
.order-summary-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.order-summary-list > li:not(.order-summary-line){
  display:flex; justify-content:space-between; gap:12px; font-size:14px;
}
.order-summary-list.confirm-details > li{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr); column-gap:16px;
  align-items:start; font-size:14px;
}
.order-summary-list.confirm-details > li > .muted{
  text-align:left; line-height:1.45;
}
.order-summary-list.confirm-details > li > span:last-child{
  display:block; min-width:0; max-width:100%;
  text-align:left; font-weight:600; color:var(--ink); line-height:1.45;
  overflow-wrap:anywhere; word-break:break-word;
}
.order-summary-line{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center;
  font-size:14px; min-width:0;
}
.order-summary-thumb{
  display:block; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
}
.order-summary-thumb img{width:100%; height:100%; object-fit:contain; padding:4px; display:block}
.order-summary-copy{display:flex; flex-direction:column; gap:2px; min-width:0}
.order-summary-name{
  font-weight:700; line-height:1.3;
  overflow-wrap:anywhere; word-break:break-word;
}
.order-summary-price{font-weight:700; white-space:nowrap; align-self:start}
.order-summary-list .muted{color:var(--text-soft); font-size:13px}
.order-summary-total{
  margin-top:18px; padding-top:16px; border-top:2px solid var(--line);
  display:flex; justify-content:space-between; font-weight:800; font-size:16px;
}

.confirm-hero{text-align:center; max-width:40rem; margin:0 auto 36px}
.confirm-order-number{margin-top:22px}
.confirm-order-label{
  margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft);
}
.confirm-id{
  display:inline-block; margin:0; padding:8px 14px; border-radius:var(--pill);
  background:var(--surface); border:2px solid var(--line); font-weight:800; letter-spacing:.04em;
}
.confirm-next{margin-top:24px; color:var(--text-soft)}

.site-footer{background:var(--surface); border-top:2px solid var(--line); padding:70px 0 30px; margin-top:auto}
@media (max-width:760px){ .site-footer{padding-top:48px} }
.foot-grid{display:grid; gap:38px}
.foot-brand-top,
.foot-maps,
.foot-hours,
.foot-contact,
.foot-classes,
.foot-studio{min-width:0}
.site-footer img.logo{height:70px; width:auto; margin-bottom:18px}
.site-footer .brand-logo-cream{display:none}
@media (max-width:834px){
  .site-footer .brand-logo-ink{display:none}
  .site-footer .brand-logo-cream{display:block}
}
.site-footer h4{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 15px}
.site-footer p,.site-footer li{font-size:13.5px; color:var(--text-soft); line-height:1.7; margin:0}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--lime)}
.foot-text-link{
  display:flex; align-items:center;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft);
  padding:0 0 4px;
  border-bottom:3px solid transparent;
  line-height:1.2;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.foot-text-link:hover{color:var(--lime); border-bottom-color:var(--lime)}
.foot-maps{margin:0; display:flex; flex-direction:column; align-items:flex-start}
.foot-contact{margin:18px 0 0}
.foot-contact a{display:flex; align-items:flex-start; gap:10px}
.foot-contact svg{width:16px; height:16px; flex:0 0 auto; margin-top:4px; fill:currentColor}
@media (min-width:880px){
  .foot-grid{
    grid-template-columns:1.45fr .9fr 1.4fr .85fr; gap:0 38px;
    grid-template-areas:
      "top hours classes studio"
      "maps hours classes studio"
      "contact hours classes studio";
  }
  .foot-brand-top{grid-area:top}
  .foot-maps{grid-area:maps; margin-top:13px}
  .foot-hours{grid-area:hours}
  .foot-contact{grid-area:contact; margin-top:36px}
  .foot-classes{grid-area:classes}
  .foot-studio{grid-area:studio}
  .foot-classes ul{
    display:grid; grid-template-columns:1fr 1fr; gap:12px 18px;
  }
}
@media (min-width:400px) and (max-width:879px){
  .foot-grid{
    grid-template-columns:1fr 1fr; gap:12px 32px;
    grid-template-areas:
      "top top"
      "maps hours"
      "contact hours"
      "classes classes"
      "studio studio";
  }
  .foot-brand-top{grid-area:top}
  .site-footer img.logo{margin-bottom:10px}
  .foot-maps,
  .foot-hours{align-self:start; margin-top:0; padding-top:8px}
  .foot-maps{grid-area:maps}
  .foot-hours{grid-area:hours}
  .foot-hours h4{margin:0 0 12px; line-height:1.2}
  .foot-contact{grid-area:contact; margin-top:4px}
  .foot-classes{
    grid-area:classes;
    display:grid; grid-template-columns:subgrid;
    margin-top:36px;
  }
  .foot-studio{
    grid-area:studio;
    display:grid; grid-template-columns:subgrid;
    margin-top:28px;
  }
  .foot-classes h4,
  .foot-studio h4{grid-column:1 / -1; margin:0 0 16px}
  .foot-classes ul,
  .foot-studio ul{
    grid-column:1 / -1;
    display:grid; grid-template-columns:subgrid;
    row-gap:20px; column-gap:unset;
  }
}
@media (max-width:399px){
  .foot-grid{gap:6px}
  .site-footer img.logo{margin-bottom:8px}
  .foot-maps{margin-top:0}
  .foot-contact{margin-top:12px}
  .foot-hours{margin-top:18px}
  .foot-classes{margin-top:24px}
  .foot-studio{margin-top:16px}
  .foot-classes h4,
  .foot-studio h4{margin:0 0 16px}
  .foot-classes ul,
  .foot-studio ul{
    display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;
  }
}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:2px solid var(--line); display:flex; flex-wrap:wrap; gap:13px; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-faint)}
.foot-copy{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; min-width:0}
.foot-credit-link{
  display:inline-flex; align-items:center; gap:5px; vertical-align:middle;
  color:inherit; text-decoration:underline; text-underline-offset:2px;
}
.foot-credit-link:hover{color:var(--lime)}
.foot-credit-ic{
  width:14px; height:14px; flex:0 0 auto; display:block;
  margin-left:3px; border-radius:50%; object-fit:cover;
}
.socials{display:flex; gap:10px}
.socials a{
  width:38px; height:38px; border:2px solid var(--line); border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.socials a svg{width:17px; height:17px; fill:currentColor; display:block}
.socials a:hover{border-color:var(--lime); color:var(--lime)}

@media (max-width:834px){
  body,
  .shop-storefront{
    background-attachment:scroll;
    background-image:
      radial-gradient(1250px 900px at 90%  0%, rgba(255,215,107,.12), transparent 58%),
      radial-gradient(1100px 920px at -8% 20%, rgba(255,215,107,.08), transparent 56%),
      radial-gradient(1200px 880px at 72% 58%, rgba(147,199,84,.08), transparent 58%),
      radial-gradient(1000px 860px at 10% 96%, rgba(255,215,107,.08), transparent 55%);
  }
  .btn-primary{color:#14120F}
}