/* ============================================================
   Sweet Wholesale — design tokens
   Extracted from the reference build so the visual language matches,
   then extended with the states the reference never defined.
   ============================================================ */
/* Palette taken from the B Berry Bakery logo:
   deep cocoa brown, burgundy, gold, and its cream ground. */
:root {
  --background: oklch(97.5% 0.014 85);   /* the logo's cream */
  --foreground: oklch(26% 0.045 50);     /* cocoa brown of the wordmark */
  --primary: oklch(40% 0.145 20);        /* the burgundy of "BAKERY" */
  --primary-hover: oklch(35% 0.145 20);
  --primary-foreground: oklch(97.5% 0.014 85);
  --gold: oklch(70% 0.115 82);           /* berry sprig, whisk, croissant */
  --gold-soft: oklch(90% 0.05 84);
  --muted: oklch(94% 0.022 84);
  --muted-foreground: oklch(52% 0.045 55);
  --border: oklch(88% 0.03 80);
  --card: oklch(100% 0 0);
  --accent: oklch(55% 0.1 145);          /* semantic success only, not brand */
  --secondary: oklch(95% 0.03 84);
  --ring: oklch(40% 0.145 20);
  --danger: oklch(45% 0.17 25);
  --radius: 0.75rem;

  --shadow-sm: 0 1px 2px oklch(22% 0.04 30 / 0.05);
  --shadow-md: 0 4px 16px oklch(22% 0.04 30 / 0.08);
  --shadow-lg: 0 12px 40px oklch(22% 0.04 30 / 0.14);

  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --maxw: 1120px;
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Skip link (reference had none) ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--primary); color: var(--primary-foreground);
  padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  background: oklch(98% 0.01 80 / 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); font-weight: 600; font-size: 17px; }
.brand svg { color: var(--primary); }

/* The round badge. Clipped to a circle so the square cream corners of the
   JPEG never show against the header, whatever shade the ground is. */
.logo {
  height: 62px; width: 62px; display: block; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  /* the artwork sits marginally inside its own frame — nudge in so the
     burgundy ring meets the crop cleanly */
  transform: scale(1.04);
}
/* The badge carries the name, but not legibly at 46px — so the wordmark
   does the reading and the badge does the recognising. */
/* Two lines: the name people say, then the legal entity underneath.
   Stacking keeps the header narrow enough for the cart and account link. */
.wordmark {
  display: flex; flex-direction: column; line-height: 1.12;
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--foreground); white-space: nowrap;
}
.wordmark-sub {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-foreground); margin-top: 3px;
}
@media (max-width: 560px) {
  :root { --header-h: 72px; }
  .logo { height: 50px; width: 50px; }
  .wordmark { font-size: 17px; }
  .wordmark-sub { font-size: 10px; letter-spacing: 0.07em; }
}
@media (max-width: 380px) { .wordmark { display: none; } }
.logo-fallback { display: inline-flex; align-items: center; gap: 10px; }
.logo-fallback[hidden] { display: none; }

.head-actions { display: flex; align-items: center; gap: 6px; }
.acct-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  color: var(--muted-foreground); transition: background 0.15s ease, color 0.15s ease;
}
.acct-link:hover { background: var(--muted); color: var(--foreground); }
.acct-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* The label stays on a phone. A lone silhouette icon reads as decoration —
   customers were never finding their account. Room is made by shrinking the
   link and, on the narrowest screens, dropping the wordmark to the badge. */
@media (max-width: 560px) {
  .acct-link { padding: 7px 11px; font-size: 13.5px; gap: 5px; }
}
@media (max-width: 430px) {
  .acct-link { padding: 6px 9px; font-size: 13px; }
  .wordmark { display: none; }
}

.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: transparent; color: var(--foreground); cursor: pointer;
  transition: background 0.15s ease;
}
.cart-btn:hover { background: var(--muted); }
.cart-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.cart-count {
  position: absolute; top: 2px; right: 0;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }
.cart-count.bump { animation: bump 0.42s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.42); }
  100% { transform: scale(1); }
}

/* Mobile: keep the order total and the next step permanently in reach. */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: oklch(98% 0.01 80 / 0.94); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px oklch(22% 0.04 30 / 0.09);
  transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.order-bar.show { transform: translateY(0); }
.order-bar-info { font-size: 13px; color: var(--muted-foreground); line-height: 1.3; }
.order-bar-total { font-size: 18px; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .order-bar { display: flex; } body.has-order { padding-bottom: 84px; } }

/* ---------- Hero ----------
   Full-bleed editorial hero. The reference uses a flat muted band;
   this puts the product on screen in the first viewport. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-bottom: 1px solid var(--border);
  min-height: min(660px, 82vh);
  display: grid; align-items: center;
  padding: 96px 0 104px;
  text-align: center;
  color: oklch(97% 0.012 80);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Warm espresso scrim — keeps the pastry readable and the type crisp. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    /* vignette keeps the edges anchored without flattening the centre */
    radial-gradient(120% 90% at 50% 45%,
      transparent 0%,
      oklch(16% 0.03 40 / 0.35) 62%,
      oklch(14% 0.03 40 / 0.7) 100%),
    linear-gradient(to bottom,
      oklch(18% 0.035 40 / 0.72) 0%,
      oklch(18% 0.035 40 / 0.44) 42%,
      oklch(16% 0.032 40 / 0.82) 100%);
}
/* Fine grain so the flat scrim doesn't read as a plastic overlay. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; pointer-events: none;
}
.hero .wrap { position: relative; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: 999px;
  background: oklch(100% 0 0 / 0.12); border: 1px solid oklch(100% 0 0 / 0.28);
  backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(97% 0.012 80); margin-bottom: 26px;
}
.pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--gold); box-shadow: 0 0 0 3px oklch(70% 0.115 82 / 0.35);
}
.hero h1 {
  font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 16ch; margin: 0 auto 22px; color: inherit;
  text-wrap: balance; text-shadow: 0 2px 24px oklch(18% 0.035 40 / 0.4);
}
.hero h1 em { font-style: italic; color: oklch(88% 0.085 84); }
.hero .sub {
  max-width: 54ch; margin: 0 auto; font-size: clamp(16px, 1.6vw, 18.5px);
  color: oklch(94% 0.014 80 / 0.88); text-wrap: pretty;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.btn-onDark { background: oklch(97% 0.012 80); color: oklch(22% 0.04 30); }
.btn-onDark:hover { background: #fff; }
.btn-outline { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.35); color: oklch(97% 0.012 80); backdrop-filter: blur(8px); }
.btn-outline:hover { background: oklch(100% 0 0 / 0.16); }

.chips {
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center;
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid oklch(100% 0 0 / 0.18);
}
.chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: oklch(94% 0.014 80 / 0.85); }
.chip svg { color: var(--gold); flex: 0 0 auto; }

/* Cutoff banner — the reference states the deadline but never enforces it */
.cutoff {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; font-size: 14px; font-weight: 500; text-align: center;
  background: color-mix(in oklch, var(--accent) 12%, var(--background));
  color: color-mix(in oklch, var(--accent) 72%, var(--foreground));
  border-bottom: 1px solid var(--border);
}
.cutoff.closed {
  background: color-mix(in oklch, var(--danger) 10%, var(--background));
  color: color-mix(in oklch, var(--danger) 78%, var(--foreground));
}
.cutoff svg { flex: 0 0 auto; }

/* ---------- Menu ---------- */
.section { padding: 88px 0; }
.section-head { margin-bottom: 44px; max-width: 60ch; }
.eyebrow {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(55% 0.09 70); margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; letter-spacing: -0.03em; }
.section-head p { color: var(--muted-foreground); font-size: 16.5px; }

/* ---------- category filters ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
}
.filter {
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card);
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--muted-foreground);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.filter:hover { background: var(--muted); color: var(--foreground); }
.filter:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter[aria-selected="true"] {
  background: var(--primary); border-color: var(--primary);
  color: var(--primary-foreground); font-weight: 600;
}
.filter .n { opacity: 0.6; font-variant-numeric: tabular-nums; margin-left: 5px; font-size: 13px; }
.filter[aria-selected="true"] .n { opacity: 0.75; }

.no-match { color: var(--muted-foreground); padding: 40px 0; }

/* Cards fade in when a filter changes, so the grid doesn't just snap. */
.card.hidden { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .card { animation: cardIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }

.card {
  display: flex; flex-direction: column; position: relative;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px oklch(22% 0.04 30 / 0.04);
  transition: box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.28s ease;
}
.card:hover {
  box-shadow: 0 18px 44px oklch(22% 0.04 30 / 0.13);
  transform: translateY(-4px);
  border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
}
/* Square. His photos arrive both portrait and landscape, and 1:1 takes the
   smallest bite out of either — plus every card ends up the same height,
   so the grid stays even whatever he uploads. */
.card-media { aspect-ratio: 1 / 1; background: var(--muted); position: relative; overflow: hidden; }
/* ---------- "alive" without video ----------
   A very slow drift, staggered per card so they never move in sync —
   synchronised motion is what makes an effect read as fake. Scaled
   slightly past 1 throughout so no edge is ever exposed. */
/* No drifting on product shots. These are catalogue photos — the item is
   centred with margin around it, so any pan or zoom walks the product out
   of the frame and leaves the customer looking at white background.
   Motion belongs on the hero, not on a spec photo. */
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), filter 0.4s ease;
}
/* A restrained lift on hover — enough to feel alive, too small to displace. */
.card:hover .card-media img {
  transform: scale(1.035);
  filter: saturate(1.05) brightness(1.02);
}

/* A slow gloss travelling across the surface, the way shop light moves
   over anything glazed or buttery. Hover only, so it stays a reward. */
.card-media::before {
  content: ''; position: absolute; inset: -40% -60%; z-index: 1;
  background: linear-gradient(105deg,
    transparent 38%,
    oklch(100% 0 0 / 0.30) 47%,
    oklch(100% 0 0 / 0.48) 50%,
    oklch(100% 0 0 / 0.30) 53%,
    transparent 62%);
  transform: translateX(-115%);
  pointer-events: none; opacity: 0;
  /* Runs on its own every 9s — the sweep is what reads as "live".
     Staggered per card so the row never flashes in unison. */
  animation: sheen 9s ease-in-out infinite;
}
.card:nth-child(6n+2) .card-media::before { animation-delay: 1.5s; }
.card:nth-child(6n+3) .card-media::before { animation-delay: 3s; }
.card:nth-child(6n+4) .card-media::before { animation-delay: 4.5s; }
.card:nth-child(6n+5) .card-media::before { animation-delay: 6s; }
.card:nth-child(6n+6) .card-media::before { animation-delay: 7.5s; }

/* Hover brings it immediately rather than waiting for the cycle. */
.card:hover .card-media::before {
  animation: sheen-now 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sheen {
  0%   { transform: translateX(-115%); opacity: 0; }
  4%   { opacity: 1; }
  16%  { transform: translateX(115%); opacity: 1; }
  17%  { transform: translateX(115%); opacity: 0; }
  100% { transform: translateX(115%); opacity: 0; }
}
@keyframes sheen-now {
  0%   { transform: translateX(-115%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card-media img { transform: none; }
  .card-media::before, .card:hover .card-media::before { animation: none; opacity: 0; }
}
/* Placeholder for products with no photo yet: the house badge sits behind
   at low opacity for warmth, the product's own name in front so every card
   still reads as a different thing. */
.no-photo {
  position: relative; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 24px;
  background: linear-gradient(140deg, var(--muted), var(--secondary));
}
.no-photo::before {
  content: ''; position: absolute; inset: 0;
  background: url("/images/badge.png") center 42% / 72% auto no-repeat;
  opacity: 0.16;
}
.no-photo span {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: color-mix(in oklch, var(--foreground) 62%, transparent);
  text-align: center; line-height: 1.25; text-wrap: balance;
  /* a soft plate so the name stays legible over the badge artwork */
  background: color-mix(in oklch, var(--muted) 78%, transparent);
  backdrop-filter: blur(2px);
  padding: 10px 16px; border-radius: 10px;
}
/* (hover behaviour for the image lives with the drift animation above —
   a transform here would fight the keyframes and kill the motion) */
.cat {
  position: absolute; top: 13px; left: 13px;
  padding: 6px 13px; border-radius: 999px;
  background: oklch(100% 0 0 / 0.9); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 2px 10px oklch(22% 0.04 30 / 0.14);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--foreground);
}
/* Soft base so white cards don't clip hard against the photo. */
.card-media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, oklch(100% 0 0 / 0.22), transparent);
  pointer-events: none;
}
.card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-top h3 { font-size: 21px; letter-spacing: -0.02em; }
.price {
  font-weight: 700; font-size: 18px; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--primary);
}
.desc { color: var(--muted-foreground); font-size: 14.5px; margin-top: 9px; flex: 1; line-height: 1.6; }
.min {
  font-size: 12.5px; font-weight: 600; color: var(--muted-foreground);
  margin-top: 16px; display: inline-flex; align-items: center; gap: 7px;
  background: var(--muted); padding: 6px 11px; border-radius: 999px; align-self: flex-start;
}

.card-actions { display: flex; gap: 10px; margin-top: 18px; }

/* ---------- Stepper ---------- */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.stepper button {
  width: 38px; border: 0; background: transparent; color: var(--muted-foreground);
  font-size: 18px; cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.stepper button:hover:not(:disabled) { background: var(--muted); color: var(--foreground); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.stepper input {
  width: 56px; border: 0; text-align: center; font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums; background: transparent; color: var(--foreground);
  -moz-appearance: textfield; padding: 9px 0;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); flex: 1; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--foreground); }
.btn-ghost:hover { background: var(--muted); }
.btn-lg { padding: 14px 24px; font-size: 16px; width: 100%; }

.btn.added { background: var(--accent); }

/* ---------- Cart drawer ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: oklch(22% 0.04 30 / 0.4); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100vw);
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.drawer-head h2 { font-size: 20px; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--muted-foreground);
}
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { flex: 0 0 auto; padding: 20px 22px; border-top: 1px solid var(--border); background: var(--card); }

.line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.line:last-child { border-bottom: 0; }
.line-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--muted); flex: 0 0 auto; }
.line-main { flex: 1; min-width: 0; }
.line-name { font-weight: 600; font-size: 15px; }
.line-unit { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; }
.line-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.line-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.line-remove { background: 0; border: 0; padding: 4px; color: var(--muted-foreground); cursor: pointer; border-radius: 6px; }
.line-remove:hover { color: var(--danger); background: var(--muted); }

.totals { display: flex; align-items: center; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.totals.grand { font-size: 18px; font-weight: 700; }
.totals span:last-child { font-variant-numeric: tabular-nums; }
.note { font-size: 13px; color: var(--muted-foreground); margin: 12px 0 16px; }

.empty { text-align: center; padding: 56px 20px; color: var(--muted-foreground); }
.empty svg { color: var(--border); margin-bottom: 14px; }


/* ---------- Forms (checkout) ---------- */
.layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.panel h2 { font-size: 21px; margin-bottom: 6px; }
.panel .lede { color: var(--muted-foreground); font-size: 14.5px; margin-bottom: 26px; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.req { color: var(--danger); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--foreground);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.err { display: none; color: var(--danger); font-size: 13px; margin-top: 6px; }
.err.show { display: block; }
.hint { font-size: 13px; color: var(--muted-foreground); margin-top: 6px; }

.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.radio:hover { background: var(--muted); }
.radio input { accent-color: var(--primary); width: 17px; height: 17px; }
.radio:has(input:checked) { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 6%, transparent); }
.radio span { font-weight: 500; font-size: 15px; }

.summary { position: sticky; top: calc(var(--header-h) + 24px); }
.summary-line { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.summary-line:last-of-type { border-bottom: 0; }
.summary-line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

.disclaimer {
  display: flex; gap: 10px; padding: 14px; margin: 20px 0;
  background: var(--muted); border-radius: 10px;
  font-size: 13.5px; color: var(--muted-foreground);
}
.disclaimer svg { flex: 0 0 auto; margin-top: 2px; }

/* ---------- Toast ---------- */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 150; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--foreground); color: var(--background);
  font-size: 14.5px; font-weight: 500; box-shadow: var(--shadow-lg);
  animation: pop 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.toast.err { background: var(--danger); color: #fff; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--border); padding: 32px 0; margin-top: 40px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
footer.site p { font-size: 14px; color: var(--muted-foreground); }

.spinner {
  width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .hero { padding: 52px 0 58px; }
  .section { padding: 52px 0; }
  .grid { grid-template-columns: 1fr; }
  .chips { gap: 16px 22px; }
  .radios { grid-template-columns: 1fr; }
  .panel { padding: 20px; }
}