/* ════════════════════════════════════════════════════
   style.css — Sunny Sky Records Merch Shop
   All visual styles: tokens, layout, components
   ════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────────── */
:root, [data-theme="light"] {
  --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec; --color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5; --color-border:#d4d1ca;
  --color-text:#28251d; --color-text-muted:#7a7974;
  --color-text-faint:#bab9b4; --color-text-inverse:#f9f8f4;
  --color-primary:#01696f; --color-primary-hover:#0c4e54;
  --color-primary-active:#0f3638; --color-primary-highlight:#cedcd8;
  --color-success:#437a22; --color-error:#a12c7b; --color-warning:#964219;
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
  --radius-xl:1rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/.12);
  --ease:180ms cubic-bezier(.16,1,.3,1);
  --font-d:'Instrument Serif',Georgia,serif;
  --font-b:'Work Sans','Helvetica Neue',sans-serif;
  --xs:clamp(.75rem,.7rem + .25vw,.875rem); --sm:clamp(.875rem,.8rem + .35vw,1rem);
  --base:clamp(1rem,.95rem + .25vw,1.125rem); --lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem); --2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --sp1:.25rem;--sp2:.5rem;--sp3:.75rem;--sp4:1rem;--sp5:1.25rem;--sp6:1.5rem;
  --sp8:2rem;--sp10:2.5rem;--sp12:3rem;--sp16:4rem;--sp20:5rem;
  --w:1100px;
}
[data-theme="dark"] {
  --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a; --color-surface-dynamic:#2d2c2a;
  --color-divider:#262523; --color-border:#393836;
  --color-text:#cdccca; --color-text-muted:#797876;
  --color-text-faint:#5a5957; --color-text-inverse:#2b2a28;
  --color-primary:#4f98a3; --color-primary-hover:#227f8b;
  --color-primary-active:#1a626b; --color-primary-highlight:#313b3b;
  --color-success:#6daa45; --color-error:#d163a7; --color-warning:#bb653b;
  --shadow-sm:0 1px 2px oklch(0 0 0/.2);
  --shadow-md:0 4px 12px oklch(0 0 0/.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/.4);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;
  --color-text-faint:#5a5957;--color-text-inverse:#2b2a28;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-active:#1a626b;--color-primary-highlight:#313b3b;
  --color-success:#6daa45;--color-error:#d163a7;--color-warning:#bb653b;
  --shadow-sm:0 1px 2px oklch(0 0 0/.2);--shadow-md:0 4px 12px oklch(0 0 0/.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/.4);
}}

/* ─── BASE ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-b);font-size:var(--base);
  color:var(--color-text);background:var(--color-bg);line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select{font:inherit;color:inherit}
::selection{background:oklch(from var(--color-primary) l c h/.2)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,[role="button"],input,select{transition:color var(--ease),background var(--ease),border-color var(--ease),box-shadow var(--ease),opacity var(--ease),transform var(--ease)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ─── HEADER ─────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklch,var(--color-bg) 92%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid oklch(from var(--color-text) l c h/.08);
}
.header-inner{
  max-width:var(--w);margin-inline:auto;
  padding:var(--sp4) var(--sp6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
}
.site-logo{display:flex;align-items:center;gap:var(--sp3);text-decoration:none;color:var(--color-text)}
.logo-mark{width:36px;height:36px;flex-shrink:0}
.logo-text{font-family:var(--font-d);font-size:var(--lg);line-height:1.1}
.logo-sub{font-size:var(--xs);color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.header-actions{display:flex;align-items:center;gap:var(--sp3)}
.btn-icon{
  width:40px;height:40px;border-radius:var(--radius-full);
  display:grid;place-items:center;color:var(--color-text-muted);
  border:1px solid oklch(from var(--color-text) l c h/.1);
  background:var(--color-surface);
}
.btn-icon:hover{color:var(--color-text);background:var(--color-surface-offset);border-color:oklch(from var(--color-text) l c h/.18)}
.cart-btn{position:relative}
.cart-count{
  position:absolute;top:-4px;right:-4px;
  width:18px;height:18px;border-radius:var(--radius-full);
  background:var(--color-primary);color:var(--color-text-inverse);
  font-size:10px;font-weight:700;display:none;place-items:center;
}
.cart-count.visible{display:grid}


.site-logo-img { width: auto; }

/* Light mode default */
.logo-light { display: block; }
.logo-dark  { display: none;  }

/* Dark mode override */
[data-theme="dark"] .logo-light { display: none;  }
[data-theme="dark"] .logo-dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-light { display: none;  }
  :root:not([data-theme]) .logo-dark  { display: block; }
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero{
  max-width:var(--w);margin-inline:auto;
  padding:var(--sp16) var(--sp6) var(--sp10);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp12);align-items:center;
}
.hero-eyebrow{font-size:var(--xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--sp3)}
.hero-title{font-family:var(--font-d);font-size:var(--2xl);line-height:1.1;margin-bottom:var(--sp4)}
.hero-title em{font-style:italic;color:var(--color-primary)}
.hero-body{font-size:var(--base);color:var(--color-text-muted);max-width:44ch;line-height:1.7}
.hero-image-wrap{
  aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--color-surface-offset);box-shadow:var(--shadow-lg);
  display:grid;place-items:center;position:relative;
}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-slide.active{opacity:1;}

/* ─── SHOP ───────────────────────────────────────────────────── */
.shop-section{max-width:var(--w);margin-inline:auto;padding:var(--sp8) var(--sp6) var(--sp20)}
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp8);gap:var(--sp4)}
.section-title{font-family:var(--font-d);font-size:var(--xl)}
.section-count{font-size:var(--sm);color:var(--color-text-muted)}

/* filter tabs */
.filter-tabs{display:flex;gap:var(--sp2);margin-bottom:var(--sp6);flex-wrap:wrap}
.filter-tab{
  padding:var(--sp1) var(--sp4);border-radius:var(--radius-full);
  font-size:var(--sm);font-weight:500;border:1.5px solid var(--color-border);
  background:transparent;
}
.filter-tab:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}

/* ─── PRODUCT GRID ───────────────────────────────────────────── */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:var(--sp6);
}
.product-card{
  background:var(--color-surface);border-radius:var(--radius-xl);
  border:1px solid oklch(from var(--color-text) l c h/.07);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.product-image{aspect-ratio:1;background:var(--color-surface-offset);display:grid;place-items:center;position:relative;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-image-placeholder{opacity:.18;color:var(--color-text)}
.product-badge{
  position:absolute;top:var(--sp3);left:var(--sp3);
  background:var(--color-primary);color:var(--color-text-inverse);
  font-size:var(--xs);font-weight:600;letter-spacing:.04em;
  padding:2px var(--sp2);border-radius:var(--radius-full);
}
.product-info{padding:var(--sp4) var(--sp5) var(--sp5);flex:1;display:flex;flex-direction:column;gap:var(--sp2)}
.product-name{font-weight:600;font-size:var(--base);line-height:1.3}
.product-description{font-size:var(--sm);color:var(--color-text-muted);line-height:1.5;flex:1}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp3);gap:var(--sp2)}
.product-price{font-weight:700;font-size:var(--base);color:var(--color-text)}
.product-variants-hint{font-size:var(--xs);color:var(--color-text-faint)}
.btn-view{
  display:inline-flex;align-items:center;gap:var(--sp1);
  background:var(--color-primary);color:var(--color-text-inverse);
  padding:var(--sp2) var(--sp4);border-radius:var(--radius-full);
  font-size:var(--sm);font-weight:600;min-height:36px;
}
.btn-view:hover{background:var(--color-primary-hover)}
.btn-view:active{background:var(--color-primary-active)}

/* ─── PRODUCT PAGE OVERLAY ───────────────────────────────────── */
.page-overlay{
  position:fixed;inset:0;z-index:200;
  background:oklch(.15 .01 80/.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity 280ms ease;
}
.page-overlay.open{opacity:1;pointer-events:all}

.product-page{
  position:fixed;inset:0;z-index:201;
  background:var(--color-bg);overflow-y:auto;
  transform:translateX(100%);
  transition:transform 340ms cubic-bezier(.16,1,.3,1);
}
.product-page.open{transform:translateX(0)}

/* product page inner */
.pp-header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in oklch,var(--color-bg) 92%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid oklch(from var(--color-text) l c h/.08);
}
.pp-header-inner{
  max-width:var(--w);margin-inline:auto;
  padding:var(--sp4) var(--sp6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
}
.btn-back{
  display:inline-flex;align-items:center;gap:var(--sp2);
  font-size:var(--sm);font-weight:600;color:var(--color-text-muted);
}
.btn-back:hover{color:var(--color-primary)}
.pp-breadcrumb{font-size:var(--sm);color:var(--color-text-faint)}
.pp-breadcrumb span{color:var(--color-text);font-weight:500}

.pp-body{
  max-width:var(--w);margin-inline:auto;
  padding:var(--sp10) var(--sp6) var(--sp20);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp12);align-items:start;
}

/* image gallery */
.pp-gallery{display:flex;flex-direction:column;gap:var(--sp3);position:sticky;top:80px}
.pp-main-image{
  aspect-ratio:1;background:var(--color-surface-offset);border-radius:var(--radius-xl);
  overflow:hidden;display:grid;place-items:center;
  border:1px solid oklch(from var(--color-text) l c h/.07);
}
.pp-main-image img{width:100%;height:100%;object-fit:cover}
.pp-main-image svg{opacity:.18}

/* product details */
.pp-details{display:flex;flex-direction:column;gap:var(--sp5)}
.pp-category{font-size:var(--xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary)}
.pp-name{font-family:var(--font-d);font-size:var(--xl);line-height:1.15}
.pp-price{font-family:var(--font-d);font-size:var(--lg);color:var(--color-text)}
.pp-divider{height:1px;background:var(--color-divider);margin-block:var(--sp2)}
.pp-desc{font-size:var(--sm);color:var(--color-text-muted);line-height:1.7;max-width:52ch}

/* variant section */
.pp-variant-section{display:flex;flex-direction:column;gap:var(--sp2)}
.pp-variant-label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--sm);font-weight:600;
}
.pp-variant-label .selected-val{font-weight:400;color:var(--color-text-muted)}
.variant-options{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.variant-btn{
  padding:var(--sp2) var(--sp4);
  border:1.5px solid var(--color-border);border-radius:var(--radius-full);
  font-size:var(--sm);font-weight:500;background:transparent;cursor:pointer;
}
.variant-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.variant-btn.selected{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
.variant-btn.unavailable{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* color swatches */
.color-swatch{
  width:32px;height:32px;border-radius:var(--radius-full);
  border:2.5px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px oklch(from var(--color-text) l c h/.15);
  display:grid;place-items:center;
}
.color-swatch.selected{border-color:var(--color-primary)}
.color-swatch:hover{transform:scale(1.1)}

/* add to cart row */
.pp-add-row{display:flex;align-items:stretch;gap:var(--sp3);margin-top:var(--sp2)}
.qty-control{
  display:flex;align-items:center;gap:var(--sp2);
  border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  padding:0 var(--sp3);min-height:52px;
}
.qty-btn-ctrl{
  width:28px;height:28px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);
  display:grid;place-items:center;font-size:var(--sm);
  color:var(--color-text-muted);
}
.qty-btn-ctrl:hover{background:var(--color-surface-dynamic);color:var(--color-text)}
.qty-num{font-size:var(--base);font-weight:700;min-width:28px;text-align:center}
.btn-add-to-cart{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp2);
  background:var(--color-primary);color:var(--color-text-inverse);
  border-radius:var(--radius-md);font-weight:700;font-size:var(--base);
  min-height:52px;padding-inline:var(--sp6);
}
.btn-add-to-cart:hover{background:var(--color-primary-hover)}
.btn-add-to-cart:active{background:var(--color-primary-active)}
.btn-add-to-cart:disabled{opacity:.4;cursor:not-allowed}

/* shipping teaser */
.pp-shipping-teaser{
  background:var(--color-surface);border-radius:var(--radius-lg);
  border:1px solid oklch(from var(--color-text) l c h/.07);
  padding:var(--sp4) var(--sp5);display:flex;flex-direction:column;gap:var(--sp3);
}
.pp-shipping-row{display:flex;align-items:center;gap:var(--sp3);font-size:var(--sm)}
.pp-shipping-row svg{flex-shrink:0;color:var(--color-primary)}
.pp-shipping-row strong{color:var(--color-text)}
.pp-shipping-row span{color:var(--color-text-muted)}

.pp-spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp2);
  padding: 0;
}
.pp-spec-list li {
  font-size: var(--sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: baseline;
  gap: var(--sp2);
}
.pp-spec-list li::before {
  content: '—';
  color: var(--color-primary);
  flex-shrink: 0;
  font-weight: 600;
}
.pp-footer {
  border-top: 1px solid var(--color-divider);
  padding: var(--sp8) var(--sp6);
  max-width: var(--w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp6);
  flex-wrap: wrap;
}

/* ─── CART DRAWER ────────────────────────────────────────────── */
.cart-overlay{
  position:fixed;inset:0;z-index:300;
  background:oklch(.15 .01 80/.5);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity 280ms ease;
}
.cart-overlay.open{opacity:1;pointer-events:all}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:301;
  width:min(440px,100vw);background:var(--color-surface);
  border-left:1px solid oklch(from var(--color-text) l c h/.08);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.16,1,.3,1);
  box-shadow:var(--shadow-lg);
}
.cart-drawer.open{transform:translateX(0)}
.cart-header{
  padding:var(--sp5) var(--sp6);border-bottom:1px solid var(--color-divider);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.cart-title{font-family:var(--font-d);font-size:var(--lg)}
.cart-body{overflow-y:auto;padding:var(--sp4) 0;flex:1;position:relative}
.cart-body::after{
  content:'';
  position:sticky;bottom:0;
  display:block;height:40px;
  background:linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events:none;
}
.cart-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:var(--sp16) var(--sp8);
  color:var(--color-text-muted);
}
.cart-empty-icon{width:48px;height:48px;margin-bottom:var(--sp4);opacity:.35}
.cart-empty h3{font-size:var(--base);font-weight:600;color:var(--color-text);margin-bottom:var(--sp2)}
.cart-item{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:var(--sp3);align-items:start;
  padding:var(--sp3);background:var(--color-surface-offset);
  border-radius:var(--radius-lg);
}
.cart-item-thumb{
  width:64px;height:64px;border-radius:var(--radius-md);
  background:var(--color-surface-dynamic);overflow:hidden;
  display:grid;place-items:center;flex-shrink:0;
}
.cart-item-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item-thumb svg{opacity:.25}
.cart-item-name{font-weight:600;font-size:var(--sm);line-height:1.3;margin-bottom:var(--sp1)}
.cart-item-variant{font-size:var(--xs);color:var(--color-text-muted);margin-bottom:var(--sp2)}
.cart-item-qty{display:flex;align-items:center;gap:var(--sp2)}
.qty-btn-sm{
  width:24px;height:24px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);display:grid;place-items:center;
  font-size:var(--sm);color:var(--color-text-muted);
}
.qty-btn-sm:hover{background:var(--color-surface-dynamic);color:var(--color-text)}
.qty-num-sm{font-size:var(--sm);font-weight:600;min-width:20px;text-align:center}
.cart-item-price{font-weight:700;font-size:var(--sm);white-space:nowrap;color:var(--color-text)}
.cart-item-remove{display:grid;place-items:center;color:var(--color-text-faint);padding:var(--sp1)}
.cart-item-remove:hover{color:var(--color-error)}
.cart-footer{padding:var(--sp5) var(--sp6);border-top:1px solid var(--color-divider);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp4)}
.cart-shipping-row{display:flex;flex-direction:column;gap:var(--sp2)}
.cart-shipping-row label{font-size:var(--sm);font-weight:600;color:var(--color-text-muted)}
.shipping-select{
  width:100%;padding:var(--sp2) var(--sp3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);font-size:var(--sm);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237a7974' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:var(--sp8);cursor:pointer;
}
.shipping-select:focus{outline:2px solid var(--color-primary);outline-offset:0;border-color:var(--color-primary)}
.shipping-info{font-size:var(--xs);color:var(--color-text-muted);font-style:italic}
.cart-totals{display:flex;flex-direction:column;gap:var(--sp2)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--sm)}
.cart-total-row.grand{font-weight:700;font-size:var(--base);border-top:1px solid var(--color-divider);padding-top:var(--sp2);margin-top:var(--sp1)}
.btn-checkout{
  display:flex;align-items:center;justify-content:center;gap:var(--sp2);
  width:100%;padding:var(--sp4);border-radius:var(--radius-lg);
  background:var(--color-primary);color:var(--color-text-inverse);
  font-weight:700;font-size:var(--base);min-height:52px;letter-spacing:.02em;
}
.btn-checkout:hover{background:var(--color-primary-hover)}
.btn-checkout:disabled{opacity:.45;cursor:not-allowed}
.stripe-note{text-align:center;font-size:var(--xs);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;gap:var(--sp2)}

.addr-country-display{
  padding:var(--sp2) var(--sp3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-offset);font-size:var(--sm);
  color:var(--color-text-muted);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--color-divider);padding:var(--sp10) var(--sp6);
  max-width:var(--w);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp6);flex-wrap:wrap;
}
.footer-note{font-size:var(--xs);color:var(--color-text-muted)}
.footer-stripe{display:flex;align-items:center;gap:var(--sp2);font-size:var(--xs);color:var(--color-text-muted)}

/* ─── TOAST ─────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:var(--sp6);left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--color-text);color:var(--color-text-inverse);
  padding:var(--sp3) var(--sp5);border-radius:var(--radius-full);
  font-size:var(--sm);font-weight:500;z-index:500;
  opacity:0;transition:all 300ms cubic-bezier(.16,1,.3,1);pointer-events:none;
  white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:768px){
  .hero{grid-template-columns:1fr;padding:var(--sp10) var(--sp4) var(--sp8)}
  .hero-image-wrap{display:none}
  .shop-section{padding:var(--sp6) var(--sp4) var(--sp16)}
  .pp-body{grid-template-columns:1fr;padding:var(--sp6) var(--sp4) var(--sp16)}
  .pp-gallery{position:static}
  .header-inner,.pp-header-inner{padding:var(--sp3) var(--sp4)}
}
@media(max-width:480px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp3)}
  .product-info{padding:var(--sp3)}
}

/* ─── FOOTER LEGAL LINK ──────────────────────────────────── */
.footer-right{display:flex;align-items:center;gap:var(--sp6);flex-wrap:wrap}
.footer-legal{font-size:var(--xs);color:var(--color-text-muted)}
.footer-legal:hover{color:var(--color-primary)}

/* ─── SUCCESS MODAL ──────────────────────────────────────── */
.success-modal-overlay{
  position:fixed;inset:0;z-index:600;
  background:oklch(.15 .01 80/.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp6);
  opacity:0;pointer-events:none;
  transition:opacity 400ms ease;
}
.success-modal-overlay.show{opacity:1;pointer-events:all}
.success-modal{
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  border:1px solid oklch(from var(--color-text) l c h/.08);
  box-shadow:var(--shadow-lg);
  padding:var(--sp10) var(--sp12);
  max-width:480px;width:100%;
  text-align:center;
  transform:translateY(16px);
  transition:transform 400ms cubic-bezier(.16,1,.3,1);
}
.success-modal-overlay.show .success-modal{transform:translateY(0)}
.success-modal-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--color-primary);color:var(--color-text-inverse);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--sp5);
}
.success-modal-title{
  font-family:var(--font-d);font-size:var(--xl);
  margin-bottom:var(--sp3);
}
.success-modal-body{
  font-size:var(--sm);color:var(--color-text-muted);
  line-height:1.7;margin-bottom:var(--sp6);
}
.success-modal-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sp3) var(--sp8);
  background:var(--color-primary);color:var(--color-text-inverse);
  border-radius:var(--radius-full);font-weight:600;
  font-size:var(--sm);border:none;cursor:pointer;
  transition:background var(--ease);
}
.success-modal-btn:hover{background:var(--color-primary-hover)}
/* ─── CART COUNTRY SELECTOR & SHIPPING GROUPS ───────────── */
.cart-country-row{display:flex;flex-direction:column;gap:var(--sp2);padding-bottom:var(--sp3)}
.cart-country-row label{font-size:var(--xs);font-weight:600;color:var(--color-text-muted)}
.shipping-group{
  border-top:1px solid var(--color-divider);
  padding:var(--sp4) 0;
}
.shipping-group:first-child{border-top:none;padding-top:0}
.shipping-group-label{
  font-size:var(--xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-text-muted);
  margin-bottom:var(--sp3);
}
.sg-count{font-weight:400;text-transform:none;letter-spacing:0}
.shipping-opts{display:flex;flex-direction:column;gap:var(--sp2)}
.shipping-opt{
  display:flex;align-items:center;gap:var(--sp3);
  padding:var(--sp2) var(--sp3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);cursor:pointer;
  transition:border-color var(--ease),background var(--ease);
}
.shipping-opt:has(input:checked){
  border-color:var(--color-primary);
  background:color-mix(in oklch,var(--color-primary) 6%,var(--color-surface));
}
.shipping-opt input[type="radio"]{
  accent-color:var(--color-primary);flex-shrink:0;
  width:16px;height:16px;
}
.so-name{flex:1;font-size:var(--sm)}
.so-rate{font-weight:600;font-size:var(--sm);white-space:nowrap}
.shipping-auto-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--sm);color:var(--color-text-muted);
  padding:var(--sp2) 0;
}

/* ─── CART UNIFIED SCROLL ────────────────────────────────── */
.cart-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.cart-body{flex:none;overflow-y:visible}
.cart-footer{overflow-y:visible;flex-shrink:0}
/* Remove the old fade hint since whole drawer now scrolls */
.cart-body::after{display:none}

/* ─── COMPACT SHIPPING OPTIONS IN CART ──────────────────── */
.cart-footer .shipping-group{padding:var(--sp2) 0}
.cart-footer .shipping-group-label{
  font-size:10px;margin-bottom:var(--sp2);
}
.cart-footer .shipping-opts{gap:var(--sp1)}
.cart-footer .shipping-opt{padding:var(--sp1) var(--sp2)}
.cart-footer .so-name,.cart-footer .so-rate{font-size:var(--xs)}
.cart-footer .shipping-auto-row{padding:var(--sp1) 0;font-size:var(--xs)}

/* ─── COMPACT TOTALS IN CART ─────────────────────────────── */
.cart-totals{padding:var(--sp3) 0;gap:var(--sp1)}
.cart-total-row{font-size:var(--xs)}
.cart-total-row.grand{font-size:var(--sm);padding-top:var(--sp2)}
.stripe-note{font-size:var(--xs);margin-top:var(--sp2)}

/* ─── CART FORM FIELD ALIGNMENT FIX ─────────────────────── */
.cart-address-form .address-field{
  display:flex;flex-direction:column;gap:2px;width:100%;
}
.cart-address-form .address-field label{
  font-size:var(--xs);font-weight:500;color:var(--color-text-muted);
}
.cart-address-form .address-field input,
.cart-address-form .address-field select{
  width:100%;
  padding:var(--sp1) var(--sp3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);font-size:var(--xs);color:var(--color-text);
}
.cart-address-form .address-field input:focus,
.cart-address-form .address-field select:focus{
  outline:2px solid var(--color-primary);outline-offset:0;border-color:var(--color-primary);
}
.cart-address-form .address-two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);
}