/* ============================================================================
   Kool Kicks — storefront styles
   Ported verbatim from the mFlow design system tokens shared in Claude Design:
   _ds/mflow-design-system-.../tokens/{colors,semantic,spacing,typography}.css
   Component styles reconstructed from Shoe Store.dc.html.
   ========================================================================== */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---- Color tokens (colors.css) ---- */
:root{
  --mf-electric-blue:#2563FF; --mf-deep-navy:#0A1A3A; --mf-white:#FFFFFF;
  --mf-soft-gray:#F2F4F7; --mf-midnight:#0B1220;

  --blue-50:#EEF3FF; --blue-100:#DCE6FF; --blue-200:#B9CDFF; --blue-300:#8FAEFF;
  --blue-400:#5A88FF; --blue-500:#2563FF; --blue-600:#1B4FE0; --blue-700:#163FB8;
  --blue-800:#12318F; --blue-900:#0F2A75;

  --navy-500:#2F4B85; --navy-600:#26417A; --navy-700:#1B3161; --navy-800:#12244A;
  --navy-900:#0A1A3A; --navy-950:#0B1220;

  --gray-25:#FAFBFC; --gray-50:#F2F4F7; --gray-100:#E7EAF0; --gray-200:#D6DBE5;
  --gray-300:#BAC2D0; --gray-400:#94A0B4; --gray-500:#6B7A94; --gray-600:#4E5C74;
  --gray-700:#3A465B; --gray-800:#26303F; --gray-900:#131A26;

  --success-50:#ECFDF3; --success-100:#D3F8DF; --success-500:#16A34A; --success-700:#15803D;
  --danger-50:#FEF3F2; --danger-500:#DC2626; --danger-700:#B42318;
  --warning-50:#FFFAEB; --warning-100:#FEF0C7; --warning-500:#F59E0B; --warning-700:#B54708;

  /* ---- Semantic (semantic.css) ---- */
  --text-primary:var(--navy-900); --text-secondary:var(--gray-600); --text-muted:var(--gray-500);
  --text-subtle:var(--gray-400); --text-inverse:var(--mf-white); --text-accent:var(--blue-500);
  --text-link:var(--blue-500); --text-link-hover:var(--blue-700);
  --surface-page:var(--mf-white); --surface-subtle:var(--mf-soft-gray); --surface-card:var(--mf-white);
  --surface-sunken:var(--gray-25); --surface-accent:var(--blue-500); --surface-accent-subtle:var(--blue-50);
  --surface-hover:var(--gray-50);
  --border-subtle:var(--gray-100); --border-default:var(--gray-200); --border-strong:var(--gray-300);
  --divider:var(--gray-100);

  /* ---- Spacing / radius (spacing.css) ---- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
  --page-max:1200px;

  /* ---- Typography (typography.css) ---- */
  --font-display:"Satoshi","Satoshi Variable","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* ---- Elevation (elevation.css, verbatim — cool-tinted, short-throw) ---- */
  --shadow-xs:0 1px 2px rgba(10,26,58,.06);
  --shadow-sm:0 1px 2px rgba(10,26,58,.06),0 1px 3px rgba(10,26,58,.05);
  --shadow-md:0 2px 4px rgba(10,26,58,.05),0 6px 16px rgba(10,26,58,.08);
  --shadow-lg:0 4px 8px rgba(10,26,58,.05),0 16px 32px rgba(10,26,58,.10);
  --shadow-xl:0 8px 16px rgba(10,26,58,.06),0 32px 64px rgba(10,26,58,.14);
  --shadow-glow-blue:0 8px 32px rgba(37,99,255,.32);
  --shadow-dark-md:0 8px 24px rgba(4,10,24,.48);
  --ring-focus:0 0 0 3px rgba(37,99,255,.32);
  --ring-focus-dark:0 0 0 3px rgba(90,136,255,.42);
  --scrim:rgba(10,26,58,.48);

  /* ---- Motion (motion.css, verbatim) ---- */
  --dur-fast:150ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-forward:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --lift-hover:-1px; --press-scale:.985;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface-page); color:var(--text-primary);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;color:var(--text-primary);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color .15s var(--ease-forward)}
a:hover{color:var(--text-link-hover)}
button{font-family:inherit}
img{max-width:100%;display:block}
.tnum{font-variant-numeric:tabular-nums}
.display{font-family:var(--font-display)}

/* ---- Keyframes (from Shoe Store.dc.html) ---- */
@keyframes mfRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes mfCard{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mfPop{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes mfTick{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes mfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mfDrift{from{transform:translate(22%,-8%) scale(1)}to{transform:translate(27%,-2%) scale(1.06)}}
@keyframes mfDrawer{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
@keyframes mfToast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================ COMPONENTS ============================ */

/* Button (MFlowDesignSystem.Button) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:var(--radius-md);border:1px solid transparent;font-size:14px;font-weight:600;letter-spacing:-.005em;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-forward),border-color var(--dur-fast) var(--ease-forward),box-shadow var(--dur-fast) var(--ease-forward),transform var(--dur-fast) var(--ease-forward);white-space:nowrap}
.btn:active{transform:scale(var(--press-scale))}
.btn:focus-visible,.chip:focus-visible,.size:focus-visible,.input:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.btn--lg{height:48px;padding:0 24px;font-size:15px}
.btn--sm{height:32px;padding:0 12px;font-size:13px}
.btn--block{width:100%}
.btn--primary{background:var(--blue-500);color:#fff}
.btn--primary:hover{background:var(--blue-600);color:#fff}
.btn--secondary{background:#fff;color:var(--navy-900);border-color:var(--gray-200)}
.btn--secondary:hover{background:var(--gray-50)}
.btn--ghost{background:transparent;color:var(--gray-600)}
.btn--ghost:hover{background:var(--gray-50)}
.btn--ondark-secondary{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.16)}
.btn--ondark-secondary:hover{background:rgba(255,255,255,.14);color:#fff}

/* Badge (components.css .mf-badge — subtle tones, 22px pill) */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.badge--accent{background:var(--surface-accent-subtle);color:var(--blue-700)}
.badge--neutral{background:var(--surface-subtle);color:var(--text-secondary)}
.badge--success{background:var(--success-50);color:var(--success-700)}
.badge--warning{background:var(--warning-50);color:var(--warning-700)}
.badge--solid{background:var(--surface-accent);color:#fff}

/* Status pill */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;background:var(--success-50);color:var(--success-700)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--pulse .pill__dot{animation:mfPop 1.6s var(--ease-forward) infinite}

/* Input */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.field__hint{font-size:12.5px;color:var(--text-muted)}
.field__err{font-size:12.5px;color:var(--danger-700)}
.input{height:40px;padding:0 12px;border:1px solid var(--gray-200);border-radius:var(--radius-md);
  font-family:inherit;font-size:14px;color:var(--text-primary);background:#fff;transition:border-color .15s,box-shadow .15s;width:100%}
.input:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px var(--blue-a16,rgba(37,99,255,.16))}
.input--icon{padding-left:38px}
.input-wrap{position:relative}
.input-wrap .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none}

/* Card */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-xs)}

/* ============================ LAYOUT / SECTIONS ============================ */
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 24px}

/* Announcement bar */
.announce{background:var(--mf-midnight);color:rgba(255,255,255,.78);font-size:12.5px;font-weight:500;
  text-align:center;padding:8px 16px;letter-spacing:.02em;overflow:hidden}
.announce span{display:inline-block;animation:mfTick .35s var(--ease-forward) both}

/* Nav */
.nav{position:sticky;top:0;z-index:400;background:rgba(10,26,58,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__row{height:64px;display:flex;align-items:center;gap:34px}
.wordmark{display:flex;align-items:baseline;cursor:pointer}
.wordmark b{font-family:var(--font-display);font-size:22px;font-weight:900;letter-spacing:-.02em;color:#fff}
.wordmark i{font-family:var(--font-display);font-size:22px;font-weight:900;font-style:normal;color:var(--blue-400)}
.nav__links{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:500}
.nav__links a{color:rgba(255,255,255,.72)}
.nav__links a.is-active,.nav__links a:hover{color:#fff}
.nav__cart{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.nav__cart:hover{background:rgba(255,255,255,.14)}
.nav__count{min-width:19px;height:19px;padding:0 5px;border-radius:var(--radius-pill);background:var(--blue-500);
  color:#fff;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  animation:mfPop .35s var(--ease-forward) both}
.nav__menu{display:none}
@media(max-width:760px){
  .nav__links{display:none}
  .nav__menu{display:inline-flex;height:38px;padding:0 13px;align-items:center;border-radius:var(--radius-md);
    border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:14px;cursor:pointer}
}

/* Hero */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 78% 42%,#17307A 0%,#0C1D45 42%,#0A1A3A 68%,#0B1220 100%)}
.hero__glow{position:absolute;inset:0;opacity:.55;transform:translate(22%,-8%);
  background:radial-gradient(60% 60% at 50% 50%,rgba(37,99,255,.5) 0%,rgba(37,99,255,0) 100%);
  animation:mfDrift 16s ease-in-out infinite alternate}
.hero__dots{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px}
.hero__grid{position:relative;max-width:var(--page-max);margin:0 auto;
  padding:clamp(48px,7vw,76px) 24px clamp(52px,7vw,84px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,90vw),1fr));gap:clamp(32px,5vw,56px);align-items:center}
.eyebrow{display:block;font-size:12px;line-height:1.1;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--blue-300)}
.hero h1{margin:18px 0 0;font-size:clamp(40px,6.4vw,68px);line-height:1.03;letter-spacing:-.032em;color:#fff}
.hero h1 .fall{color:var(--blue-400)}
.hero__sub{margin:22px 0 0;font-size:clamp(16px,2vw,18px);line-height:1.6;color:rgba(255,255,255,.72);max-width:46ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero__trust{display:flex;align-items:center;gap:18px;row-gap:10px;flex-wrap:wrap;margin-top:34px;
  font-size:13px;color:rgba(255,255,255,.6)}
.hero__trust span{display:inline-flex;align-items:center;gap:7px}
.hero__trust .ico{color:var(--blue-300)}
.glass{position:relative;padding:clamp(14px,2vw,20px);border-radius:var(--radius-xl);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(4,10,24,.48)}
.glass__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.glass__lot{margin-left:auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600}
.glass__img{height:clamp(200px,30vw,264px);border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:radial-gradient(120% 100% at 30% 15%,#22346b 0%,#101c3d 62%)}
.glass__pricetag{position:absolute;bottom:12px;right:12px;display:flex;align-items:baseline;gap:8px;
  padding:7px 12px;border-radius:var(--radius-md);background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.glass__pricetag b{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff}
.glass__pricetag s{font-size:12.5px;color:rgba(255,255,255,.55)}
.glass__cd{margin-top:14px;padding:16px;border-radius:var(--radius-lg);background:rgba(11,18,32,.55);border:1px solid rgba(255,255,255,.10)}
.glass__cd .lab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.cd-row{display:flex;gap:8px;margin-top:10px}
.cd-cell{flex:1;padding:9px 4px;border-radius:var(--radius-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-align:center}
.cd-cell.is-sec{background:rgba(37,99,255,.18);border-color:rgba(90,136,255,.35)}
.cd-cell b{display:block;font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);font-weight:700;color:#fff}
.cd-cell span{margin-top:2px;display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
.progress{margin-top:12px;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);overflow:hidden}
.progress i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--blue-500);transition:width 1.4s var(--ease-forward)}
.glass__meta{display:flex;margin-top:8px;font-size:11px;color:rgba(255,255,255,.5)}

/* Marquee */
.marquee{border-bottom:1px solid var(--border-subtle);background:#fff;overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:mfMarquee 30s linear infinite;padding:15px 0}
.marquee__grp{display:flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--gray-500);white-space:nowrap}
.marquee__grp .dot{width:5px;height:5px;border-radius:50%;background:var(--blue-500)}
.marquee__grp .hl{color:var(--blue-600)}

/* Section header */
.sec{padding:clamp(36px,5vw,56px) 0 clamp(52px,6vw,80px)}
.sec__head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;color:var(--blue-500)}
.kicker::before{content:"";width:24px;height:1px;background:currentColor;opacity:.4}
.sec h2{margin:12px 0 0;font-size:clamp(29px,4vw,38px);line-height:1.08;letter-spacing:-.026em}
.sec__count{margin-left:auto;font-size:13.5px;color:var(--text-muted)}

/* Search + chips */
.searchbar{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.searchbar .grow{flex:1;min-width:min(340px,100%);max-width:640px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--gray-200);background:#fff;
  font-size:13px;font-weight:600;color:var(--gray-600);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--gray-300)}
.chip.is-active{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(255px,42vw),1fr));gap:clamp(10px,1.6vw,16px);margin-top:28px}
.pcard{cursor:pointer;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow .2s,transform .2s,border-color .2s;animation:mfCard .55s var(--ease-forward) both}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
.pcard__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.pcard__img .fill{position:absolute;inset:0;transition:transform .35s var(--ease-forward);display:flex;align-items:center;justify-content:center}
.pcard:hover .pcard__img .fill{transform:scale(1.06)}
.pcard__badge{position:absolute;top:10px;left:10px;z-index:2}
.pcard__delta{position:absolute;top:10px;right:10px;z-index:2;padding:4px 9px;border-radius:var(--radius-pill);
  background:var(--success-500);color:#fff;font-size:12px;font-weight:700}
.pcard__body{padding:clamp(10px,1.4vw,14px) clamp(12px,1.5vw,16px) clamp(12px,1.5vw,16px)}
.pcard__kicker{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.pcard__name{margin-top:4px;font-family:var(--font-display);font-size:clamp(15.5px,1.5vw,18px);font-weight:600;letter-spacing:-.012em;color:var(--text-primary)}
.pcard__price{display:flex;align-items:baseline;gap:8px;margin-top:8px;flex-wrap:wrap}
.pcard__price b{font-family:var(--font-display);font-size:clamp(16.5px,1.6vw,19px);font-weight:700}
.pcard__price s{font-size:13px;color:var(--gray-400)}
.pcard__meta{margin-top:8px;font-size:12.5px;color:var(--text-muted)}
.pcard__next{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--blue-600)}
.pcard__scarce{margin-top:5px;font-size:12px;font-weight:600;color:var(--warning-700)}

/* image placeholder shoe glyph */
.shoe-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--blue-300);opacity:.5}
.tile-grad{background:radial-gradient(120% 100% at 30% 15%,#EEF3FF 0%,#F7F8FB 62%)}

/* Grading strip */
.grading{background:var(--surface-subtle);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.grading__wrap{padding:clamp(48px,6vw,72px) 24px}
.grading__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:36px}
.grading__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,88vw),1fr));gap:16px}
.gcard-ico{width:38px;height:38px;border-radius:50%;background:var(--blue-50);color:var(--blue-500);display:flex;align-items:center;justify-content:center}
.gcard h4{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.012em}
.gcard p{font-size:14px;line-height:1.6;color:var(--text-secondary)}

/* Product detail */
.pdp{padding:22px 24px 72px;max-width:var(--page-max);margin:0 auto;animation:mfRise .45s var(--ease-forward) both}
.pdp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,90vw),1fr));gap:clamp(24px,4vw,52px);margin-top:16px;align-items:start}
.pdp__hero{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  background:radial-gradient(120% 100% at 30% 15%,#EEF3FF 0%,#F7F8FB 62%);box-shadow:0 24px 48px rgba(37,99,255,.10);
  aspect-ratio:4/3;overflow:hidden;position:relative}
.pdp__thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pdp__thumb{height:clamp(96px,14vw,130px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-sunken)}
.pdp h1{margin:6px 0 0;font-size:clamp(29px,4.5vw,40px);line-height:1.06;letter-spacing:-.026em}
.pdp__cw{margin-top:8px;font-size:15px;color:var(--text-muted)}
.pdp__price{display:flex;align-items:baseline;gap:12px;margin-top:16px;flex-wrap:wrap}
.pdp__price b{font-family:var(--font-display);font-size:clamp(28px,4vw,34px);font-weight:700;letter-spacing:-.02em}
.pdp__price s{font-size:17px;color:var(--gray-400)}
.steps{margin-top:18px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px 18px}
.steps__row{display:flex;gap:8px;margin-top:14px}
.steps__cell{flex:1;display:flex;flex-direction:column;gap:7px}
.steps__bar{height:6px;border-radius:var(--radius-pill);background:var(--gray-200)}
.steps__bar.is-now{background:var(--blue-500)}
.steps__bar.is-past{background:var(--gray-300)}
.steps__pr{font-size:13px;font-weight:700}
.steps__pr.is-now{color:var(--blue-600)}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-top:10px}
.size{height:44px;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.size:hover{border-color:var(--gray-400)}
.size.is-sel{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.size[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.panel{margin-top:12px;background:var(--surface-subtle);border-radius:var(--radius-lg);padding:16px 18px}
.panel .lab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.panel .grid2{display:grid;grid-template-columns:110px 1fr;gap:10px 12px;margin-top:12px;font-size:14.5px;line-height:1.5}
.panel .grid2 .k{color:var(--text-muted)}

/* Checkout */
.checkout{padding:26px 24px 72px;max-width:var(--page-max);margin:0 auto;animation:mfRise .45s var(--ease-forward) both}
.co__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:clamp(24px,3vw,44px);margin-top:22px;align-items:start}
@media(max-width:820px){.co__grid{grid-template-columns:1fr}}
.co__step{margin-bottom:26px}
.co__steplab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.co__box{margin-top:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px;display:grid;gap:14px}
.ship-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.ship-opt.is-sel{border-color:var(--blue-500);background:var(--blue-50)}
.ship-opt b{margin-left:auto;font-size:14px;font-weight:700}
.summary{position:sticky;top:84px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;background:var(--surface-sunken)}
.summary__line{display:flex;justify-content:space-between;font-size:14px;margin-top:10px;color:var(--text-secondary)}
.summary__total{display:flex;justify-content:space-between;font-size:18px;font-weight:700;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-default);color:var(--text-primary);font-family:var(--font-display)}
.summary__item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.summary__item .th{width:54px;height:54px;border-radius:var(--radius-md);overflow:hidden;flex:none;background:var(--surface-subtle)}
.stripe-mock{border:1px dashed var(--blue-300);border-radius:var(--radius-md);padding:14px;background:var(--blue-50);
  font-size:13px;color:var(--blue-700);display:flex;gap:10px;align-items:flex-start}

/* Cart drawer */
.scrim{position:fixed;inset:0;background:rgba(10,18,40,.5);backdrop-filter:blur(2px);z-index:600;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#fff;z-index:601;
  transform:translateX(100%);transition:transform .28s var(--ease-forward);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(4,10,24,.28)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;padding:20px;border-bottom:1px solid var(--border-subtle)}
.drawer__head h3{font-size:20px}
.drawer__x{margin-left:auto;width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--gray-200);background:#fff;cursor:pointer;font-size:16px;color:var(--gray-600)}
.drawer__body{flex:1;overflow:auto;padding:8px 20px}
.drawer__foot{padding:20px;border-top:1px solid var(--border-subtle)}
.citem{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.citem__th{width:64px;height:64px;border-radius:var(--radius-md);overflow:hidden;flex:none;background:var(--surface-subtle)}
.citem__rm{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.qty{display:inline-flex;align-items:center;border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden}
.qty button{width:28px;height:28px;border:none;background:#fff;cursor:pointer;font-size:15px;color:var(--gray-700)}
.qty span{min-width:28px;text-align:center;font-size:14px;font-weight:600}
.empty{padding:40px 0;color:var(--text-muted);font-size:15px}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:700;background:var(--navy-900);color:#fff;
  padding:12px 18px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);animation:mfToast .3s var(--ease-forward) both}

/* Footer */
.foot{border-top:1px solid var(--border-subtle);background:var(--surface-sunken)}
.foot__wrap{padding:40px 24px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--text-muted)}
.foot .mor{max-width:60ch;line-height:1.6}