/* =========================================================
   WhatsApp Storefront — Global Baseline (Phase 1)
   Pure CSS. No frameworks. Mobile-only.
   Squircle corners everywhere. Zero shadows. Ever.
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* Suppress double-tap zoom and 300ms tap delay (pinch-zoom blocked via
     meta viewport user-scalable=no in the route head). */
  touch-action: manipulation;
}

/* ---------- Base palette (fixed; never affected by accent) ---------- */
:root {
  --bg: #f4f4f3;            /* neutral surface tone — Home / Cart / Checkout */
  --bg-product: #ffffff;     /* Product screen surface (used from Phase 4) */
  --surface: #ffffff;        /* white cards, search bar, home cart icon bg,
                                inactive category chip bg, cart/checkout back-icon bg */
  --text: #111111;
  --text-muted: #6b6b6b;
  --border: #ececec;
  --icon-bg: #ffffff;        /* Home cart icon background = white (V3.0) */
  --icon-surface: #f0efed;   /* V4: one step darker than pure white, sitting
                                between #ffffff and the home neutral surface.
                                Used for Product-screen cart icon bg and
                                inactive variant chip bg. Subtle, never heavy. */
  --skeleton: #e6e6e6;
  --skeleton-shine: #efefef;
  --positive-green: #1f7a3a;  /* single shared green token: FREE label,
                                 Discount row, Coupon row, Delivery "Free"
                                 — cart and checkout. Identical everywhere. */
  /* --accent-color is intentionally NOT set here.
     It is set on :root by app.js ONLY after Settings load
     AND PrimaryColor passes the hex regex. */
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Global disables (per skill) ---------- */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

img {
  -webkit-touch-callout: none;
  pointer-events: none;
  user-drag: none;
  -webkit-user-drag: none;
}

/* Disable browser context menu on long-press for images */
img,
[data-no-context] {
  -webkit-touch-callout: none;
}

/* ---------- Animation baseline ---------- */
* {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out */
}

/* ---------- Squircle approach (ContinuousRectangleBorder approximation) ----------
   We approximate iOS-style continuous-curvature squircles using a proportional
   border-radius derived from container size: Radius = round(Size × ratio), with
   ratio in the 16–20% range for the product image family. CSS border-radius
   renders a quadratic curve that, at these magnitudes, is visually
   indistinguishable from a true superellipse on mobile. Cards, image containers,
   inputs, and popup surfaces all use this approach. Chips and action buttons
   use full pill radius (999px). Icon backgrounds use a circle (50%).
   Nested radius rule (always enforced): Outer = Inner + Padding. */
.sq      { border-radius: 28% / 28%; }   /* generic squircle-ish utility */
.sq-sm   { border-radius: 14px; }
.sq-md   { border-radius: 20px; }
.sq-lg   { border-radius: 28px; }
.sq-xl   { border-radius: 36px; }
.sq-pill { border-radius: 999px; }

/* ---------- App mount ---------- */
#app {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- Phase 1: Skeleton loader ----------
   Mirrors the upcoming 2-column product grid. */
.skeleton-screen {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skeleton-search {
  flex: 1;
  height: 44px;
  background: var(--skeleton);
  border-radius: 22px;
  animation: shine 1.4s ease-in-out infinite;
}

.skeleton-cart-icon {
  width: 44px;
  height: 44px;
  background: var(--skeleton);
  border-radius: 50%;
  animation: shine 1.4s ease-in-out infinite;
}

.skeleton-chips {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.skeleton-chip {
  height: 36px;
  width: 88px;
  flex-shrink: 0;
  background: var(--skeleton);
  border-radius: 18px;
  animation: shine 1.4s ease-in-out infinite;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-image {
  aspect-ratio: 1 / 1;
  background: var(--skeleton);
  border-radius: 24px;
  animation: shine 1.4s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
  background: var(--skeleton);
  border-radius: 6px;
  animation: shine 1.4s ease-in-out infinite;
}
.skeleton-line.short { width: 50%; }
.skeleton-line.medium { width: 80%; }

@keyframes shine {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* =========================================================
   Phase 2 — Home Screen
   ========================================================= */

/* ---------- Home shell ---------- */
.home {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;          /* fill #app so brand sits at natural page bottom */
  min-height: 100vh;       /* fallback for browsers without dvh support */
  min-height: 100dvh;      /* dynamic viewport — excludes mobile URL bar so brand sits at true visible bottom */
  padding: 14px 16px 16px;
  background: var(--bg);
}

/* ---------- Row 1: Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  background: transparent; /* no header bar bg */
}

.search-wrap {
  position: relative;
  flex: 1;
  height: 44px;
}

.search-wrap .ph {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-wrap .search-clear {
  position: absolute;
  /* V6: comfortable right inner spacing matching the coupon applicator
     input's right inner padding — X no longer hugs the inner edge. */
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;                 /* matches coupon .coupon-remove hit area (30×30) */
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;     /* bare icon, no circular bg */
  color: var(--text-muted);
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.search-wrap .search-clear .ph { font-size: 18px; line-height: 1; }
.search-wrap.has-text .search-clear { display: flex; }

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 40px;
  border: 0;
  outline: 0;             /* no focus ring */
  background: #ffffff;
  border-radius: 22px;    /* squircle pill */
  font: inherit;
  color: var(--text);
}
.search-input::placeholder { color: var(--text-muted); }
/* Explicitly suppress any focus accent */
.search-input:focus,
.search-input:focus-visible { outline: none; box-shadow: none; }

.cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--icon-bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.cart-btn .ph { font-size: 22px; }

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-badge.visible { display: flex; }

/* ---------- Row 2: Category chips ---------- */
.chips-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  padding-bottom: 2px;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row.hidden { display: none; }

.chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;       /* squircle pill */
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color 160ms, color 160ms;
}
.chip.active {
  background: var(--accent-color, #111111);
  color: #ffffff;
}

/* ---------- Row 3: Product grid (V3.0 squircle cards) ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* V4 card: white squircle, image → 2-line-reserved title → price → full-width
   Add to Cart pill at the bottom. NO plus button. Grid uniformity is
   guaranteed by reserving min-height for the 2-line title so 1-line and
   2-line products produce identical card heights. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  background: var(--surface);    /* white */
  border: 0;
  padding: 8px 8px 8px;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 24px;           /* squircle outer */
  overflow: hidden;
}

.card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;            /* 1:1 product image */
  border-radius: 16px;            /* inner = outer(24) − padding(8) */
  overflow: hidden;
  background: #efefef;
}
.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.card-image-wrap img.loaded { opacity: 1; }

/* OOS uses disabled visual only — NO grayscale. */
.card.oos .card-image-wrap img,
.card.oos .card-name,
.card.oos .card-price { opacity: 0.45; }

.oos-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(17, 17, 17, 0.78);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

.card-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  padding: 0 2px;
  margin-top: 2px;

  /* 2-line clamp WITH reserved height: 1-line and 2-line titles produce
     identical card heights → perfectly uniform grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(14px * 1.3 * 2);     /* exactly 2 lines reserved */
}

.card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  padding: 0 2px;
}
.price-now { font-weight: 600; color: var(--text); }
.price-was {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* V4: full-width pill Add to Cart at the very bottom of every card. */
.card-cta {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 0;
  padding: 0 12px;
  border-radius: 999px;            /* pill */
  background: var(--accent-color, #111111);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.card-cta:active { transform: scale(0.98); opacity: 0.92; }
.card-cta[disabled],
.card-cta[aria-disabled="true"] {
  background: var(--icon-surface);
  color: var(--text-muted);
  opacity: 1;
  pointer-events: none;
  cursor: default;
}

/* ---------- Empty state ---------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  text-align: center;
  color: var(--text-muted);
  gap: 10px;
}
.empty .ph { font-size: 36px; color: var(--text-muted); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.empty-msg { font-size: 13px; color: var(--text-muted); }

/* ---------- Branding (HOME ONLY) ----------
   V3.0: NOT fixed/floating. Sits in natural document flow as the last child
   of .home, pushed to natural page bottom by margin-top:auto. Never overlaps
   content. Never rises with the mobile keyboard. Uniform single weight —
   no bold on any word. */
.brand {
  margin-top: auto;        /* push to natural page bottom inside flex .home */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  /* V6: increased top spacing so the line breathes away from preceding content,
     and a subtle font-size step down (12 → 11px). */
  padding: 28px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;        /* uniform across the whole line — V5: no bold, no emphasis on "Zapio" */
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  border: 0;
}
/* V5: the line is a single <span> with uniform type — every word looks identical.
   No icon, no .brand-name accent, no size shift. */
.brand > span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* =========================================================
   Phase 4 — Product Screen (full-screen, replaces the old popup)
   Pure white surface. No header bar. No footer bar. No shadows.
   Squircle gallery + thumbs. Pill chips/CTA. Circle icon backgrounds.
   Open animation expands from the originating Home card's bounding rect;
   close animation shrinks back into the same origin.
   ========================================================= */

.product-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-product, #ffffff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* V5 §9: no expand/minimise animation on open or close. */
}

/* Lock body scroll while the product screen is up */
body.product-screen-open { overflow: hidden; touch-action: none; }

/* V6: header scrolls with content. Back top-LEFT, Cart top-RIGHT, same
   row. Spacing matches Home topbar exactly (14px top, 16px sides). */
.ps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* back left, cart right */
  gap: 10px;
  padding: 14px 16px 0;
  background: transparent;
}
.ps-icon-btn {
  position: relative;
  width: 44px;                     /* match Home .cart-btn exactly */
  height: 44px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  background: var(--bg);           /* V5 §10: same neutral tone as page bg */
}
.ps-icon-back,
.ps-icon-cart { background: var(--bg); }
.ps-icon-btn .ph { font-size: 22px; line-height: 1; }
.ps-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  display: none;
}
.ps-cart-badge.visible { display: inline-block; }

/* ---------- Scrollable body ---------- */
.ps-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}


/* ---------- Gallery (largest squircle in the family) ---------- */
.ps-gallery-wrap {
  /* V7 §B: slightly larger gap between the bottom of the back/cart icon row
     and the top of the image gallery — balanced, not tight. */
  padding: 14px 16px 0;
}
.ps-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--icon-surface);
  border-radius: 32px;       /* largest squircle instance */
  overflow: hidden;
  touch-action: pan-y;
}
.ps-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.ps-slide.active { opacity: 1; }
.ps-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ---------- Thumbnails: exactly 5 slots, evenly distributed ---------- */
.ps-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 12px 16px 4px;
}
.ps-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;       /* small squircle instance (slightly higher ratio so curvature reads) */
  overflow: hidden;
  background: var(--icon-surface);
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
}
.ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.ps-thumb.active { border-color: var(--accent-color, #111111); }
.ps-thumb.empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

/* ---------- Content ---------- */
.ps-content {
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.ps-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
}
.ps-price .price-now { font-weight: 600; color: var(--text); }
.ps-price .price-was {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Variant groups */
.variant-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.variant-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.variant-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.variant-chips::-webkit-scrollbar { display: none; }

.variant-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;       /* pill */
  background: var(--bg);      /* V5 §10: inactive chip = page neutral tone */
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms, color 140ms, opacity 140ms;
}
.variant-chip.active {
  background: var(--accent-color, #111111);
  color: #ffffff;
}
.variant-chip.oos {
  opacity: 0.42;
  cursor: not-allowed;
  /* NOTE: no strikethrough on OOS chips (per V3.0 rules) */
}

/* V6 §B: inline action row — qty stepper LEFT + Add to Cart pill RIGHT.
   Stepper height MUST match CTA exactly — top and bottom flush.
   Selectors chain .qty-stepper.ps-qty-stepper so the later .qty-stepper
   rule (cart, 30px) does not override these. */
.ps-action-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding-top: 6px;
}
.qty-stepper.ps-qty-stepper {
  flex: 0 0 auto;
  height: 52px;                 /* exact match with .ps-cta */
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0 4px;
  background: #ffffff;
  display: inline-flex;
  align-items: stretch;         /* inner buttons fill full height */
}
.qty-stepper.ps-qty-stepper .qty-btn {
  width: 44px;
  height: auto;                 /* stretch to stepper height */
  align-self: stretch;
  font-size: 20px;
  color: var(--text);
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.qty-stepper.ps-qty-stepper .qty-btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.qty-stepper.ps-qty-stepper .qty-num {
  min-width: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ps-cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border: 0;
  border-radius: 999px;       /* pill */
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 140ms ease-out;
}
.ps-cta:active { opacity: 0.88; }
.ps-cta:disabled {
  background: var(--icon-surface);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* =========================================================
   Phase 4 — Cart Screen
   ========================================================= */

.cart {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 0 16px;
  overflow: hidden;
}

/* V6: header scrolls with content — no surface bar, no fixed position.
   Top spacing matches Checkout screen (14px). */
.cart-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 14px 0 18px;
  background: transparent;
}
.cart-back {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}
.cart-back .ph { font-size: 18px; }
.cart-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ---------- Items list ---------- */
.cart-items {
  flex: 1 1 auto;
  min-height: 0;                  /* allow shrink inside flex */
  overflow-y: auto;               /* V5 §7: items scroll INDEPENDENTLY behind the fixed panel */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;                      /* gap-only separation; no dividers */
  padding-bottom: 16px;
}

.cart-item {
  background: var(--surface);
  border-radius: 24px;        /* outer squircle (24 = 16 + 8 padding) */
  padding: 8px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  position: relative;
}

.cart-thumb {
  width: 84px;
  height: 84px;
  border-radius: 16px;        /* inner squircle (nested radius) */
  overflow: hidden;
  background: #efefef;
  flex-shrink: 0;
}
.cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0 2px 0;
  min-width: 0;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 28px; /* leave room for trash */
}

.cart-item-variant {
  display: flex;
  align-items: baseline;
  gap: 8px;                       /* CSS gap between variant pairs — NO space char */
  font-size: 12px;
  line-height: 1.25;
  min-height: 15px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cart-item-variant .vpair { white-space: nowrap; }

/* V6 §E/§F: when no variant exists, secondary control (stepper or coupon
   badge) moves up into Line 2 — flush below the title (no blank gap). */
.cart-item-midrow {
  display: flex;
  align-items: center;
  min-height: 15px;
  margin-top: 2px;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
/* V6 §E/§F: price-only bottom row stays right-aligned on its own line so
   the pricing row never moves when the stepper/badge shifts up. */
.cart-item-bottom--price-only { justify-content: flex-end; }

/* Outlined quantity stepper — no fill, no shadow, no accent */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);   /* V5 §6.4: same tone + thickness as Product-screen stepper */
  border-radius: 999px;
  height: 30px;
  overflow: hidden;
  background: #ffffff;
}
.qty-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.qty-btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.qty-num {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cart-item-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}
.cart-item-price .price-now { font-weight: 600; color: var(--text); }
.cart-item-price .price-was {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.cart-trash {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
}
.cart-trash .ph { font-size: 16px; }

/* ---------- Empty cart ---------- */
.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  gap: 10px;
}
.cart-empty .ph { font-size: 44px; color: var(--text-muted); }
.cart-empty-title { font-size: 16px; font-weight: 600; color: var(--text); }
.cart-empty-msg { font-size: 13px; color: var(--text-muted); }
.cart-empty-cta {
  margin-top: 14px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Order Summary Panel ---------- */
/* V5 §7: panel is OUTSIDE the scroll container and pinned to the bottom
   of .cart. Fully opaque white; scrolling items never bleed through. */
.summary-wrap {
  flex: 0 0 auto;
  margin: 0 -16px;
  background: var(--surface);     /* solid white guard so content can't show through */
  border-radius: 24px 24px 0 0;   /* V7: top corners squircle-rounded, flush to side+bottom edges */
  box-shadow: none;
}
.summary-panel {
  background: var(--surface);
  border-radius: 24px 24px 0 0;   /* top corners only; bottom flush */
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
}

/* Coupon row */
.coupon-row {
  display: flex;
  gap: 8px;
}
.coupon-input {
  flex: 1;
  height: 42px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.coupon-input::placeholder {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.coupon-input:focus { outline: none; box-shadow: none; }
.coupon-apply {
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.coupon-apply:disabled { opacity: 0.5; cursor: not-allowed; }

.coupon-msg {
  font-size: 12px;
  line-height: 1.3;
  padding: 0 4px;
}
.coupon-msg.error { color: #c0392b; }
.coupon-msg.ok    { color: var(--positive-green); }

/* Applied coupon pill — replaces the input row while a coupon is active.
   Contains a manual "×" remove affordance that always works. */
.coupon-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
}
.coupon-applied .ph-tag { font-size: 16px; color: var(--accent-color, #1f7a3a); }
.coupon-applied-code {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.coupon-applied-label { color: var(--text-muted); font-size: 13px; }
.coupon-remove {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}
.coupon-remove .ph { font-size: 16px; line-height: 1; }

/* Summary rows */
.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--text);
}
.summary-row .label { color: var(--text-muted); }
.summary-row .value { font-weight: 500; }
.summary-row.discount .value,
.summary-row.coupon .value { color: var(--positive-green); }
.summary-row.total {
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.summary-row.total .label { color: var(--text); font-weight: 700; }
.summary-row.total .value { font-weight: 700; }
.summary-row .value.free { color: var(--positive-green); font-weight: 600; }

/* Min order inline message — single line, never wraps, icon to the left. */
.min-order-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a5a00;
  background: #fff7e6;
  font-size: 12.5px;
  line-height: 1.3;
  border-radius: 14px;
  padding: 9px 12px;
  white-space: nowrap;
  overflow: hidden;
}
.min-order-warn .ph {
  font-size: 16px;
  flex-shrink: 0;
  color: #8a5a00;
}
.min-order-warn span {
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
  flex: 1;
}

/* Place Order button */
.place-order {
  display: block;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-color, #111111);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 140ms ease-out;
  margin-top: 4px;
}
.place-order:active { opacity: 0.85; }
.place-order:disabled {
  background: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}

/* =========================================================================
 * PHASE 5 — Checkout Screen
 * ========================================================================= */
.checkout {
  min-height: 100vh;
  background: var(--bg);
  padding: 14px 16px 32px;
  display: flex;
  flex-direction: column;
}
.checkout-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 18px;
}
.checkout-back {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}
.checkout-back .ph { font-size: 18px; }
.checkout-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* White squircle cards */
.checkout-card {
  background: var(--surface, #ffffff);
  border-radius: 24px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.checkout-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

/* ---------- Placeholder-only outlined squircle inputs (no floating label) ---------- */
.checkout-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.co-field {
  position: relative;
}
.co-field input,
.co-field select,
.co-field textarea {
  width: 100%;
  height: 52px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--border, #e2e2e0);
  border-radius: 14px;
  padding: 0 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease-out;
  box-sizing: border-box;
  line-height: 1.2;
}
.co-field input::placeholder,
.co-field textarea::placeholder {
  color: var(--text-muted, #9a9a96);
  opacity: 1;
}
.co-field textarea {
  height: auto;
  min-height: 88px;
  resize: vertical;
  padding: 14px;
  line-height: 1.4;
}
.co-field select {
  cursor: pointer;
  padding-right: 38px;
}
.co-field.co-select select {
  color: var(--text-muted, #9a9a96);
}
.co-field.co-select.filled select {
  color: var(--text);
}
.co-field input:focus,
.co-field select:focus,
.co-field textarea:focus {
  border-color: var(--text, #111);
}
.co-field.has-error input,
.co-field.has-error select,
.co-field.has-error textarea {
  border-color: #d04545;
  color: #d04545;
}
.co-field.has-error input::placeholder,
.co-field.has-error textarea::placeholder {
  color: #d04545;
}
.co-error {
  margin-top: 6px;
  padding-left: 4px;
  font-size: 12px;
  color: #d04545;
  line-height: 1.3;
}
.co-select-caret {
  position: absolute;
  right: 14px;
  top: 26px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-muted, #888);
  pointer-events: none;
}

/* ---------- Order Summary card ---------- */
/* ---------- Order Summary items (parity with cart) ---------- */
.co-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.co-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.co-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--icon-surface, #f0efed);
}
.co-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.co-item-main { flex: 1; min-width: 0; }
.co-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-item-variant {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted, #888);
}
.co-item-variant .vpair { white-space: nowrap; }
.co-item-qty {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted, #888);
}
.co-item-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.co-item-price .price-now { font-weight: 600; color: var(--text); }
.co-item-price .price-was {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 500;
}
.co-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border, #ececec);
}
.co-summary-rows .summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text);
}
.co-summary-rows .summary-row.discount .value,
.co-summary-rows .summary-row.coupon .value { color: var(--positive-green); }
.co-summary-rows .summary-row .value.free { color: var(--positive-green); font-weight: 600; }
.co-summary-rows .summary-row.total {
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
}
.checkout-card .place-order {
  margin-top: 18px;
  width: 100%;
}

/* =========================================================================
 * Free Gift visuals (V4 — plain white card, FREE label, single green token)
 * ========================================================================= */
.price-free {
  font-weight: 700;
  color: var(--positive-green);
  letter-spacing: 0.02em;
  font-size: 13px;
}

/* =========================================================
   V5 §5 — Discount badge (Home card + Product screen only).
   Pill, tinted accent bg, accent text, compact.
   Position: same row as prices, RIGHT of struck-through original.
   ========================================================= */
.discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* V7 §C: balanced horizontal padding, proportional to font-size. */
  padding: 3px 10px;
  border-radius: 999px;            /* pill */
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--accent-color, #111111);
  /* tinted accent bg — reduced opacity of the accent itself */
  background: color-mix(in srgb, var(--accent-color, #111111) 14%, transparent);
  white-space: nowrap;
}
/* V7 §A/§C: product-screen badge — same weight + uniform sizing across the
   two words ("Save" and "X%" must read at the same size); slightly larger
   font-size than home, balanced horizontal padding. */
.ps-price .discount-badge,
.discount-badge--product {
  font-size: 12px;
  padding: 4px 12px;
  letter-spacing: 0.01em;
}

/* =========================================================
   V5 §14 — Free Gift cart card (single row, FREE left + strike right).
   ========================================================= */
/* V6 §B: FREE + struck-through original price are grouped inline on the
   RIGHT. When a variant exists, the coupon-code badge sits LEFT on the
   same row (space-between). When no variant, the price group stands
   alone right-aligned and the badge has moved up to Line 2. */
.cart-item--gift .cart-item-bottom {
  justify-content: space-between;
  align-items: center;
}
.cart-item--gift .cart-gift-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
}
.cart-item--gift .price-free { font-size: 14px; }
.cart-item--gift .price-was { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }

/* =========================================================
   V5 §8 — Checkout summary: paid items stack price vertically,
   right-aligned. Sale price on top (dominant), strike below (subtle).
   ========================================================= */
.co-item-price--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.co-item-price--stacked .price-now { font-weight: 600; color: var(--text); }
.co-item-price--stacked .price-was {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.co-item-price--gift {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
/* V6 §C: Checkout summary free item — stacked right-aligned price.
   FREE on top (dominant, --positive-green), struck original below. */
.co-item-price--gift-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.co-item-price--gift-stacked .price-free { font-size: 14px; }
.co-item-price--gift-stacked .price-was {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* V6 §D: Coupon-code badge — pill, accent-tinted bg, accent text,
   Phosphor Tag icon + code. Used on free items in cart + checkout. */
.coupon-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--accent-color, #111111);
  background: color-mix(in srgb, var(--accent-color, #111111) 14%, transparent);
  border: 0;
  white-space: nowrap;
}
.coupon-badge .ph { font-size: 12px; line-height: 1; }

/* V6 §D placement 2: checkout free-item badge row, left-aligned. */
.co-item-badge-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

/* V5 §11 — Scroll-to-top FAB (Home only).
   Visible when search bar + category chips are scrolled out of view. */
.fab-top {
  position: fixed;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-color, #111111);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 40;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.fab-top[hidden] { display: none; }
.fab-top .ph { font-size: 22px; line-height: 1; color: #ffffff; }

/* =========================================================
   V6 §B — Add to Cart Toast
   Single instance, top of screen, safe-area aware. Squircle.
   No shadow. Accent color only on the View Cart action.
   ========================================================= */
.atc-toast {
  position: fixed;
  /* V7 fix: anchor to the SAME coordinate system as the Home topbar
     (plain constant, no env()). On many Android browsers/webviews the
     viewport already starts below the status bar while
     env(safe-area-inset-top) STILL reports the status-bar height —
     adding it double-offset the toast ~47px down, below the header.
     The topbar uses a constant 14px and sits correctly on all devices,
     so the toast mirrors it for identical, balanced top spacing. */
  top: 14px;
  left: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 10px;
  background: #ffffff;
  border-radius: 20px;     /* squircle */
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  font: inherit;
  color: var(--text);
}
.atc-toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.atc-toast-thumb {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  overflow: hidden;
  background: #efefef;
}
.atc-toast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.atc-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.atc-toast-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atc-toast-msg {
  font-size: 12px;
  color: var(--text-muted);
}
.atc-toast-view {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent-color, #111111);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 999px;
}
.atc-toast-view:active { opacity: 0.7; }
.atc-toast-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}
.atc-toast-close .ph { font-size: 16px; line-height: 1; }
.atc-toast-close:active { opacity: 0.6; }