/* Customer Storefront Specific Styles */

/* ─── Motion tokens [Phase 7 ✅] ───────────────────────────────────────────
   This was a THIRD independent motion scale — after common.css and
   tailwind.input.css — with its own names and its own numbers (260ms here vs
   250ms there, and an --ease-standard that quietly overrode the one in
   common.css for the entire storefront). Three scales meant the Motion
   Personality could not reach the cart drawer, the cards or the tag chips.

   The `--dur-*` names stay because 77 rules use them; they are aliases onto
   the single scale now. Do not add new uses — reach for --motion-* directly. */
:root {
  --dur-instant:     var(--motion-instant);
  --dur-fast:        var(--motion-fast);
  --dur-standard:    var(--motion-base);
  --dur-emphasized:  var(--motion-emphasis);
}

.shop-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ───── Header ───── */
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: var(--border-thin) solid var(--card-border);
  margin-bottom: 2rem;
  position: relative;
}

/* Thin accent stripe across top of header */
.shop-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--theme-accent), transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* Brand area */
.shop-brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.shop-brand-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.shop-brand-icon {
  width: 34px;
  height: 34px;
  color: var(--theme-accent);
  flex-shrink: 0;
  opacity: 0.92;
}

.shop-brand h1 {
  font-size: 2rem;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--theme-text) 50%, var(--theme-accent) 130%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.cart-trigger {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  background: var(--accent-color);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.cart-count.bounce {
  transform: scale(1.3);
}

/* ───── Back-to-portal link ───── */
.shop-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--theme-text);
  opacity: 0.45;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity var(--transition-fast), gap var(--transition-fast);
  margin-bottom: 0.3rem;
  width: fit-content;
}

.shop-portal-link:hover {
  opacity: 0.9;
  gap: 0.5rem;
}

.shop-portal-link svg {
  transition: transform var(--transition-fast);
}

.shop-portal-link:hover svg {
  transform: translateX(-3px);
}

/* ───── Header nav controls ───── */
.shop-header-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Currency wrapper — custom-styled to replace ugly native select */
.currency-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-wrapper::after {
  content: '';
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--theme-text);
  opacity: 0.4;
  pointer-events: none;
}

#currency-switcher {
  appearance: none;
  -webkit-appearance: none;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border: 1.5px solid var(--card-border) !important;
  border-radius: var(--radius-full) !important;
  padding: 0.45rem 1.8rem 0.45rem 0.9rem !important;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

#currency-switcher:hover,
#currency-switcher:focus {
  border-color: var(--theme-accent) !important;
  outline: none;
}

/* ───── Filters & Search ───── */
.shop-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .shop-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.search-wrapper {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-wrapper:focus-within {
  max-width: 480px;
}

.search-wrapper svg {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-text);
  opacity: 0.35;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.search-wrapper:focus-within svg {
  opacity: 0.9;
  color: var(--theme-accent);
}

.search-wrapper .form-input {
  width: 100%;
  padding-inline-start: 2.75rem;
  padding-inline-end: 1rem;
  border-radius: var(--radius-full) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-wrapper .form-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.12) !important;
}

/* Autocomplete Search Dropdown - Liquid Glass Refraction */
.search-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card-bg, color-mix(in srgb, var(--color-surface) 85%, transparent));
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: var(--border-thin) solid var(--card-border, color-mix(in srgb, var(--color-border-strong) 10%, transparent));
  border-radius: var(--radius-md, 8px);
  margin-top: 0.5rem;
  z-index: 100;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: var(--border-thin) solid var(--card-border, color-mix(in srgb, var(--color-border-strong) 5%, transparent));
  transition: background-color 0.2s ease;
  color: var(--text-color, var(--color-foreground));
  text-decoration: none;
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-dropdown-item:hover,
.search-dropdown-item.highlighted {
  background-color: var(--bg-hover, color-mix(in srgb, var(--color-foreground) 8%, transparent));
  outline: none;
}

.search-dropdown-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  border: var(--border-thin) solid var(--card-border, color-mix(in srgb, var(--color-border-strong) 10%, transparent));
  flex-shrink: 0;
}

.search-dropdown-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.search-dropdown-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-main, var(--color-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-dropdown-price {
  font-size: 0.8rem;
  color: var(--accent-color, var(--color-accent));
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

.search-dropdown-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted, var(--color-text-subtle));
  font-size: 0.9rem;
}

.filter-tags {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-accent, var(--accent-color)) transparent;
}

.filter-tags::-webkit-scrollbar {
  height: 4px;
}

.filter-tags::-webkit-scrollbar-track {
  background: transparent;
}

.filter-tags::-webkit-scrollbar-thumb {
  background: var(--color-brand-accent, var(--accent-color));
  border-radius: 999px;
}

.filter-tags::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-brand-accent, var(--accent-color)) 85%, white 15%);
}

@keyframes tag-btn-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 0.6; transform: none; }
}

.tag-btn {
  background: transparent;
  border: 1.5px solid var(--card-border);
  color: var(--theme-text);
  opacity: 0.6;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: all var(--transition-fast);
  animation: tag-btn-in 260ms var(--ease-emphasized) both;
}
/* stagger: each tag slides in 28ms after the previous */
.tag-btn:nth-child(1) { animation-delay:   0ms; }
.tag-btn:nth-child(2) { animation-delay:  28ms; }
.tag-btn:nth-child(3) { animation-delay:  56ms; }
.tag-btn:nth-child(4) { animation-delay:  84ms; }
.tag-btn:nth-child(5) { animation-delay: 112ms; }
.tag-btn:nth-child(6) { animation-delay: 140ms; }
.tag-btn:nth-child(7) { animation-delay: 168ms; }
.tag-btn:nth-child(8) { animation-delay: 196ms; }
.tag-btn:nth-child(n+9) { animation-delay: 220ms; }

.tag-btn:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
  opacity: 1;
  background: rgba(var(--accent-color-rgb), 0.06);
}

.tag-btn.active {
  background: var(--theme-accent) !important;
  color: var(--color-on-accent) !important;
  border-color: var(--theme-accent) !important;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(var(--accent-color-rgb), 0.3);
  transform: none;
}

/* Products Container & Layouts */
.products-wrapper {
  min-height: 400px;
}

/* Configurable Grid Layouts */
.products-container {
  display: grid;
  gap: 1.5rem;
  transition: all var(--transition-normal);
}

.products-container.layout-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.products-container.layout-compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* [Phase 8 ✅] Compact is a DENSITY, not just a narrower track — and on a phone
   it was neither. `auto-fill minmax(200px, 1fr)` needs 400px+ of content width
   for two tracks; at 390px the shop has ~334px, so compact silently collapsed
   to ONE column with a full 4:5 image and the whole info block. Measured at
   390px it produced 334×705 cards, while plain `grid` (which does have a phone
   override) gave 159×621 — the "compact" option was the least compact layout
   in the product.

   It is now the dense option it claims to be: two tracks, a square crop
   instead of 4:5, tighter padding, and the description folded away. The tags
   and price stay — those are what a shopper scans a dense grid for. */
@media (max-width: 639.98px) {
  /* Each of Compact's opinions is scoped to the `auto` state of the matching
     control, so it behaves as a DEFAULT rather than a rule the merchant cannot
     override. Without this, "Show description" was inert on Compact. */
  .products-container.layout-compact[data-mobile-cols="auto"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .products-container.layout-compact[data-mobile-density="comfortable"] {
    gap: 0.625rem;
  }
  .products-container.layout-compact[data-mobile-aspect="auto"] .product-img-wrapper {
    aspect-ratio: 1 / 1;
  }
  .products-container.layout-compact[data-mobile-density="comfortable"] .product-info {
    padding: 0.625rem 0.75rem 0.75rem;
  }
  /* Content priority (task 6): the description is the first thing to go when
     the merchant has chosen density — unless they said otherwise. */
  .products-container.layout-compact[data-mobile-desc="auto"] .product-desc {
    display: none;
  }
  .products-container.layout-compact[data-mobile-tags="auto"] .product-tags {
    max-height: 1.75rem;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT CONTROLS [Phase 8 ✅] — PLAN Phase 8 task 3
   ══════════════════════════════════════════════════════════════════════════
   Driven by the data-attributes `applyMobileDensity()` writes on the grid.
   Attributes rather than classes so they COMPOSE — any layout × any column
   count × any crop × any density — instead of multiplying into 3×3×5 classes.

   Everything here is inside the phone breakpoint on purpose: the same
   attributes sit on the element at desktop width and simply never match, so
   resizing a window is correct without re-rendering.

   `auto` on either axis means "whatever the chosen layout already did", which
   is why a tenant with none of these keys stored sees no change. */
@media (max-width: 767.98px) {
  /* ── Column count ────────────────────────────────────────────────────── */
  .products-container[data-mobile-cols="1"] { grid-template-columns: minmax(0, 1fr); }
  .products-container[data-mobile-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* `list` is one row per product by definition; forcing two columns onto it
     produces a cramped hybrid that is neither. The override is ignored there. */
  .products-container.layout-list[data-mobile-cols="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── Image crop ──────────────────────────────────────────────────────── */
  .products-container[data-mobile-aspect="1-1"]  .product-img-wrapper { aspect-ratio: 1 / 1; }
  .products-container[data-mobile-aspect="4-5"]  .product-img-wrapper { aspect-ratio: 4 / 5; }
  .products-container[data-mobile-aspect="3-4"]  .product-img-wrapper { aspect-ratio: 3 / 4; }
  .products-container[data-mobile-aspect="16-9"] .product-img-wrapper { aspect-ratio: 16 / 9; }

  /* ── Card density ────────────────────────────────────────────────────── */
  .products-container[data-mobile-density="compact"] { gap: 0.625rem; }
  .products-container[data-mobile-density="compact"] .product-info {
    padding: 0.625rem 0.75rem 0.75rem;
  }
  .products-container[data-mobile-density="comfortable"] .product-info {
    padding: 1.1rem 1.25rem 1.25rem;
  }

  /* ── Content priority (task 6) ─────────────────────────────────────────
     `off` hides. `on` FORCES visible, which is what overrides a layout's own
     default — it needs the extra attribute to outrank the .layout-compact
     rule above at equal specificity. */
  .products-container[data-mobile-desc="off"] .product-desc { display: none; }
  .products-container[data-mobile-tags="off"] .product-tags { display: none; }
  .products-container[data-mobile-desc="on"] .product-desc {
    display: block;
  }
  .products-container[data-mobile-tags="on"] .product-tags {
    display: flex;
    max-height: none;
    overflow: visible;
  }
}

.products-container.layout-list {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

/* ───── Product Card — Premium ───── */
.product-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  background: var(--card-bg);
  border: var(--border-thin) solid var(--card-border);
  position: relative;
  /* [Phase 10 ✅] `animation: card-enter 340ms both` REMOVED — it was breaking
     the hover system it sat next to.

     A CSS animation applies at a HIGHER cascade origin than normal author
     declarations, and `fill-mode: both` holds the final keyframe forever. That
     keyframe is `transform: none`, so it permanently outranked every
     `.hover-*:hover { transform: ... }` rule in common.css. Measured: lift,
     scale and tilt never moved the card at all — only their box-shadow and
     border-color got through, which is why three of the seven hover options
     looked nearly identical.

     It was also a SECOND entrance animation. The configurable one is the
     Phase 7 `.load-*` + `.loaded` system, which is staggered in JS, capped at
     12 items, respects reduced-motion, and can be switched off by the
     merchant — `card-enter` ran regardless, so "Load animation: None (Instant
     Render)" never actually rendered instantly. */
}
/* [Phase 10 ✅] The nth-child `animation-delay` ladder went with `card-enter`:
   it delayed only that animation, and it was a second, uncapped stagger
   competing with the JS one in shop.js (`MOTION_STAGGER_CAP`). */

/* Subtle inner glow that becomes visible on hover */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), 0);
  transition: box-shadow 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.product-card:hover::after {
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-color-rgb), 0.25);
}

.product-img-wrapper {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background: var(--bg-secondary);
  /* [Phase 8 ✅] THE empty-band defect (PLAN Operating Rule 4).
     `.product-card` is a flex column. A flex item defaults to `flex: 0 1 auto`
     — shrinkable — and this one carries an aspect-ratio. The card's row height
     is computed from the wrapper's *intrinsic* 4:5 height (415px at 334px
     wide), but at layout time the wrapper was allowed to SHRINK to 256px while
     `.product-info` (flex-grow: 1) expanded to fill what was left. The card
     stayed the same height either way, so the difference showed up as ~160px
     of dead space inside every card, which `justify-content: space-between`
     then spread into a visible band between the description and the price.

     Measured before: img 256 / info 448 (content 288).
     Measured after:  img 415 / info 288 — same card height, no dead space,
     and the shopper gets the product photograph instead of a gap. */
  flex: 0 0 auto;
}

/* Gloss sheen on product images */
.product-img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.08) 100%
  );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* [Phase 10 ✅] REMOVED: `.product-card:hover .product-img { transform: scale(1.05) }`
   Three separate bugs in one rule.
   1. It tied on specificity (0,2,0) with `.hover-lift:hover .product-img` in
      common.css and loaded later, so it ALWAYS won — the per-option image
      zooms (1.03 / 1.06) were dead code and every option zoomed identically.
   2. It was not inside `@media (hover: hover)`, so a tap on a phone latched it
      and the image stayed zoomed — the exact bug the guard next to it exists
      to prevent.
   3. It fired even when the merchant had chosen hover "Disabled (Static)".
   The zoom is now declared per option as `--hv-img` in common.css, applied by
   the guarded storefront applier and by the admin preview applier alike. */

.product-info {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0;
}

/* Product tag chips — refined */
.product-tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.prod-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-color-rgb), 0.1);
  color: var(--theme-accent);
  border: var(--border-thin) solid rgba(var(--accent-color-rgb), 0.2);
  line-height: 1.4;
}

.product-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--theme-text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.product-title:hover {
  color: var(--theme-accent);
}

.product-desc {
  font-size: 0.83rem;
  color: var(--theme-text);
  opacity: 0.55;
  margin-bottom: 0.9rem;
  line-height: 1.55;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}

/* Wishlist button — refined */
.wishlist-btn {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-fast);
}

.wishlist-btn:hover {
  transform: scale(1.15);
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.35);
}

.wishlist-btn.active svg {
  fill: var(--color-destructive);
  stroke: var(--color-destructive);
}

/* ───── Product Card Footer — restructured ───── */
/* Primary row: price + add-to-cart */
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: var(--border-thin) solid var(--card-border);
}

.product-price {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--theme-accent);
  letter-spacing: -0.02em;
}

.add-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--theme-accent);
  color: var(--color-on-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  box-shadow: 0 3px 10px rgba(var(--accent-color-rgb), 0.3);
  flex-shrink: 0;
}

.add-cart-btn:hover {
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 5px 16px rgba(var(--accent-color-rgb), 0.45);
  filter: brightness(1.1);
}

.add-cart-btn:active {
  transform: scale(0.95);
}

/* Secondary row: compare + details actions */
.product-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
  gap: 0.5rem;
}

.details-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  color: var(--theme-text) !important;
  opacity: 0.45;
  cursor: pointer;
  /* [Phase 7] `!important` removed — shop.css loads after common.css, so an
     important transition here outranked the prefers-reduced-motion backstop
     and this button kept animating for users who asked it not to. */
  transition: opacity var(--transition-fast);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: none !important;
}

.details-btn:hover {
  opacity: 1 !important;
  color: var(--theme-accent) !important;
}

.details-btn svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* Layout list variations */
.products-container.layout-list .product-card {
  flex-direction: row;
  height: auto;
  align-items: center;
  padding: 1rem;
}

.products-container.layout-list .product-img-wrapper {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.products-container.layout-list .product-info {
  padding: 0 1.5rem;
}

.products-container.layout-compact .product-title {
  font-size: 1rem;
}
.products-container.layout-compact .product-price {
  font-size: 1.1rem;
}

/* ───── Stock status badge — refined dot style ───── */
.stock-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin-bottom: 0.65rem;
  width: fit-content;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stock-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stock-status.available {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  color: var(--color-success);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 22%, transparent);
}

.stock-status.available::before {
  background: var(--color-success);
  box-shadow: 0 0 5px #10b981;
}

.stock-status.out-of-stock {
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  color: var(--color-destructive);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 22%, transparent);
}

.stock-status.out-of-stock::before {
  background: var(--color-destructive);
}

/* Category Filter Grid Transitions */
.products-container {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.products-container.filtering {
  opacity: 0.1;
  transform: scale(0.985) translateY(4px);
}

/* Unified Load Animation */
.product-card-animate {
  animation: unifiedCardLoad 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes unifiedCardLoad {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Configurable Load Animations */
.load-fade {
  animation: fadeIn 0.6s ease forwards;
}

.load-slide {
  animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ───── [Phase 5] Cart Drawer ───── */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 1005;
  background: rgba(2, 6, 23, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-standard) var(--ease-standard), visibility 0s var(--dur-standard);
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-standard) var(--ease-standard), visibility 0s 0s;
}

.cart-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 1010;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border-inline-start: var(--border-thin) solid var(--color-border-default);
  box-shadow: var(--shadow-4);
  transform: translateX(100%);
  /* Off-screen drawers still paint their shadow back across the viewport edge —
     visibility stops the closed drawer compositing at all. */
  visibility: hidden;
  transition: transform var(--dur-emphasized) var(--ease-emphasized), visibility 0s linear var(--dur-emphasized);
}

html[dir="rtl"] .cart-drawer { transform: translateX(-100%); }
/* explicit active overrides for both directions — beats the RTL specificity (0,2,1) */
html .cart-drawer.active,
html[dir="rtl"] .cart-drawer.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-emphasized) var(--ease-emphasized), visibility 0s;
}

.cart-sheet-handle { display: none; }

.cart-drawer-header {
  min-height: 72px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  flex-shrink: 0;
}

.cart-drawer-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-brand-accent);
}

.cart-drawer-heading h2 {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
}

.cart-drawer-heading p {
  margin: 0.1rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.cart-close-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.cart-close-btn:hover { background: var(--color-background); border-color: var(--color-border-strong); }
.cart-close-btn:focus-visible,
.qty-btn:focus-visible,
.checkout-btn:focus-visible,
.cart-empty-browse:focus-visible,
.cart-view-link:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.cart-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  animation: cartItemEnter var(--dur-standard) var(--ease-decel) both;
}

@keyframes cartItemEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.cart-item-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-background);
  border: var(--border-thin) solid var(--color-border-subtle);
}

.cart-item-detail { min-width: 0; }

.cart-item-title {
  margin: 0 0 0.35rem;
  color: var(--color-foreground);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.35;
}

.cart-item-price {
  color: var(--color-brand-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
}

.cart-item-controls {
  display: grid;
  grid-template-columns: 44px 32px 44px;
  align-items: center;
  gap: 0.25rem;
}

.qty-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-default);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}

.qty-btn:hover { background: var(--color-background); border-color: var(--color-border-strong); }
.qty-btn:active { transform: scale(0.95); }

.cart-item-quantity {
  color: var(--color-text-default);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.cart-breakdown {
  margin-top: auto;
  padding: 0.75rem 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.cart-drawer-footer {
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-thin) solid var(--color-border-default);
  background: var(--color-surface-raised);
  flex-shrink: 0;
}

.cart-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.cart-total-price {
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
}

.checkout-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}

.checkout-btn:hover { opacity: 0.9; }
.checkout-btn:active { transform: scale(0.99); }

.cart-view-link {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.cart-view-link:hover { color: var(--color-text-default); text-decoration: underline; }

.cart-empty-state {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
}

.cart-empty-state svg { color: var(--color-brand-accent); }
.cart-empty-state h3 { margin: 0.25rem 0 0; color: var(--color-foreground); font-family: var(--font-heading); font-size: 1.0625rem; }
.cart-empty-state p { max-width: 260px; margin: 0; font-size: 0.875rem; line-height: 1.5; }
.cart-empty-browse {
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0 1.125rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 639px) {
  .cart-drawer {
    inset-block: auto 0;
    inset-inline: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  html[dir="rtl"] .cart-drawer { transform: translateY(100%); }
  html .cart-drawer.active,
  html[dir="rtl"] .cart-drawer.active { transform: translateY(0); }
  .cart-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0.75rem auto 0;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    flex-shrink: 0;
  }
  .cart-drawer-header { min-height: 64px; padding-block: 0.75rem; }
  .cart-items { padding: 0.5rem 1rem; }
  .cart-drawer-footer { padding-inline: 1rem; }
  .cart-item { grid-template-columns: 64px minmax(0, 1fr); gap: 0.75rem; }
  .cart-item-img { width: 64px; height: 64px; }
  .cart-item-controls { grid-column: 2; justify-self: start; margin-top: -0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-overlay,
  .cart-drawer,
  .qty-btn,
  .checkout-btn,
  .cart-item,
  .product-card,
  .tag-btn { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* Checkout Form specifics */
.contact-platform-selector {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.platform-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--theme-border);
  background: rgba(var(--accent-color-rgb), 0.03);
  color: var(--theme-text);
  font-family: var(--font-primary) !important;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.platform-btn:hover {
  background: rgba(var(--accent-color-rgb), 0.08);
  border-color: var(--theme-accent);
}

.platform-btn.active[data-platform="telegram"] {
  background: rgba(36, 161, 222, 0.15) !important;
  border-color: #24A1DE !important;
  color: #24A1DE !important;
}

.platform-btn.active[data-platform="instagram"] {
  background: rgba(225, 48, 108, 0.15) !important;
  border-color: #E1306C !important;
  color: #E1306C !important;
}

.phone-input-wrapper {
  display: flex;
  align-items: stretch;
  background: rgba(var(--accent-color-rgb), 0.05);
  border: 1.5px solid var(--theme-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-top: 0.25rem;
}

.phone-input-wrapper:focus-within {
  background: var(--theme-surface);
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15);
}

.phone-input-prefix {
  background: rgba(var(--accent-color-rgb), 0.08);
  color: var(--theme-text);
  padding: 0.8rem 1rem;
  font-weight: 600;
  border-inline-end: 1.5px solid var(--theme-border);
  display: flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: 0.95rem;
}

.phone-input-wrapper .form-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline-start: 0.75rem !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

.form-error-msg {
  font-size: 0.75rem;
  color: var(--color-destructive);
  margin-top: 0.25rem;
  display: none;
}

.form-input.invalid {
  border-color: var(--color-destructive);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* Pulsing Low Stock Urgency Indicator */
.low-stock-pulse {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: var(--border-thin) solid var(--color-warning);
  color: var(--color-warning);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  animation: pulseLowStock 2s infinite ease-in-out;
  margin-top: 0.5rem;
  width: fit-content;
}

@keyframes pulseLowStock {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Comparison Table Layout styles */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.compare-table th, .compare-table td {
  padding: 1rem;
  border-bottom: var(--border-thin) solid var(--card-border);
  vertical-align: middle;
}

.compare-table th {
  font-weight: 700;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--color-foreground) 2%, transparent);
  width: 20%;
}

.compare-table td {
  color: var(--color-foreground);
  width: calc(80% / 3);
}

.compare-product-header {
  text-align: center;
}

.compare-product-header img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--card-border);
  margin-bottom: 0.5rem;
}

/* FAQ Accordion Styling */
.faq-accordion-item {
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-foreground) 1%, transparent);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-accordion-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-foreground);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-accordion-header::after {
  content: '+';
  font-size: 1.1rem;
  color: var(--accent-color);
  transition: transform 0.2s ease;
}

.faq-accordion-item.active .faq-accordion-header::after {
  content: '-';
  transform: rotate(180deg);
}

.faq-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  padding: 0 1rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}

.faq-accordion-item.active .faq-accordion-content {
  max-height: 500px;
  padding: 0.5rem 1rem 1rem 1rem;
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 3%, transparent);
}

/* Recommendations & Quick Upsell Components */
.rec-card {
  flex: 0 0 160px;
  background: color-mix(in srgb, var(--color-foreground) 2%, transparent);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
  transition: border-color 0.25s ease;
}

.rec-card:hover {
  border-color: var(--accent-color);
}

.rec-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
}

.rec-card h5 {
  font-size: 0.8rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-foreground);
}

.rec-card span {
  font-size: 0.8rem;
  color: var(--accent-color);
  font-weight: 600;
}

.upsell-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--color-foreground) 2%, transparent);
  border: var(--border-thin) solid var(--card-border);
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
}

.upsell-row:hover {
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  border-color: var(--accent-color);
}

.upsell-row img {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  border: var(--border-thin) solid var(--card-border);
}

.upsell-info {
  flex: 1;
  margin-inline-start: 0.75rem;
}

.upsell-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-foreground);
  margin-bottom: 0.15rem;
}

.upsell-price {
  font-size: 0.8rem;
  color: var(--accent-color);
  font-weight: 500;
}

/* ───── Compare label — inline ghost style ───── */
.compare-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--theme-text);
  opacity: 0.4;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.01em;
  transition: opacity var(--transition-fast);
}

.compare-label:hover {
  opacity: 0.85;
}

.compare-label input {
  margin: 0;
  width: 13px;
  height: 13px;
  cursor: pointer;
  accent-color: var(--theme-accent);
}

/* ─────[Phase 4] Compare Checkbox (top-inline-start, hover-reveal) ─── */
.compare-top-check {
  position: absolute;
  top: 0.65rem;
  inset-inline-start: 0.65rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  /* [Phase 13 ✅] No disc behind the box. The blurred dark circle read as a
     grey blob over a light product photo — the thing that made this look like
     a broken-image placeholder. The drawn checkbox carries its own contrast
     via a shadow instead, so it stays legible on a white studio shot and on a
     dark one without painting a plate over the product. */
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
/* [Phase 13 ✅] The control was a bare 14px native checkbox sitting on a dark
   circle over every product photo — it read as a broken image placeholder, not
   as "compare". It is now a drawn box: `appearance: none` on the real input, so
   the element stays a genuine checkbox for assistive tech and the keyboard
   while the visual is ours. Border is 2px per the thickness mandate; the tick
   is a stroked mask, not a glyph, so it inherits the ink colour. */
.compare-top-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
  border: var(--border-strong) solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.compare-top-check input[type="checkbox"]::after {
  content: '';
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform var(--transition-fast);
  background: var(--color-on-accent);
  /* Lucide `check`, stroke 3 — a mask so it takes the ink colour above. */
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.compare-top-check input[type="checkbox"]:checked {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
}
.compare-top-check input[type="checkbox"]:checked::after { transform: scale(1); }
.compare-top-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Desktop: subdued until the card is hovered — but ALSO revealed on keyboard
   focus, or the control is unreachable without a mouse. */
@media (hover: hover) and (pointer: fine) {
  .compare-top-check {
    opacity: 0;
  }
  .product-card:hover .compare-top-check,
  .compare-top-check:focus-within {
    opacity: 1;
  }
  .compare-top-check:hover { transform: scale(1.1); }
  .compare-top-check:hover input[type="checkbox"] {
    border-color: #fff;
    background: rgba(0, 0, 0, 0.65);
  }
}

/* Touch: always visible. The previous rule here was `display: none`, which lost
   on specificity to `label.compare-top-check { display: flex }` in common.css
   and had therefore done nothing since the touch-target pass — so the control
   was showing on phones anyway, just unstyled. Hiding it was also the wrong
   intent: ~99% of shoppers are on a phone, and PLAN §13 forbids hover-only
   affordances. It stays, visibly, with a 44px hit area. */
@media (hover: none) {
  .compare-top-check { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   [Phase 9 ✅] Bundles carousel + Social feed masonry
   ═══════════════════════════════════════════════════════════════ */

/* Section frame shared by bundles + social feed */
.section-v2 { margin: 32px 0; }
.section-v2-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.section-v2-head-copy { min-width: 0; }
.section-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6562rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-color);
}
.section-v2-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.section-v2-title {
  font-family: var(--font-heading);
  font-size: 1.375rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.section-v2-sub {
  font-size: 0.8438rem; font-weight: 500; color: var(--text-secondary);
  margin: 4px 0 0; line-height: 1.5;
}

/* ─── Bundles carousel ─── */
.bundles-wrapper-v2 {
  --bundle-card-w: 300px;
  --bundle-gap: 16px;
}
.bundles-nav {
  display: flex; gap: 8px;
}
.bundles-arrow {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--bg-secondary);
  border: var(--border-thin) solid var(--card-border);
  color: var(--text-primary);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bundles-arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.bundles-arrow:disabled { opacity: 0.4; cursor: default; }
.bundles-arrow svg { width: 18px; height: 18px; }
[dir="rtl"] .bundles-arrow svg { transform: scaleX(-1); }

.bundles-track {
  display: flex;
  gap: var(--bundle-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.bundles-track::-webkit-scrollbar { display: none; }

/* Card overrides for scroll-snap layout */
.bundle-card {
  flex: 0 0 var(--bundle-card-w);
  scroll-snap-align: start;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent-color) 10%, transparent) 0%,
      color-mix(in srgb, var(--accent-color) 2%, transparent) 55%,
      transparent 100%),
    var(--bg-secondary);
  border: var(--border-thin) solid var(--card-border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms ease,
              box-shadow 180ms ease;
  min-height: 220px;
}
.bundle-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-color) 60%, var(--card-border));
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.bundle-name {
  font-family: var(--font-heading);
  font-size: 0.9688rem; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.bundle-discount-badge {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 30%, transparent);
  padding: 3px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.06em;
  width: fit-content;
}
.bundle-items {
  font-size: 0.7969rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Phone: 1.2 cards visible, peek pattern */
@media (max-width: 767.98px) {
  .bundles-wrapper-v2 {
    --bundle-card-w: min(78vw, 300px);
    --bundle-gap: 12px;
  }
  .bundles-nav { display: none; }
  .bundles-track {
    padding-inline-start: 4px;
    padding-inline-end: 20px;
    scroll-padding-inline-start: 4px;
  }
}

/* Desktop: 3–4 cards visible, still snap-scrolls if more */
@media (min-width: 1024px) {
  .bundles-wrapper-v2 { --bundle-card-w: clamp(280px, 30%, 340px); }
}

/* ─── Social feed masonry ─── */
.social-feed-v2 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: var(--border-thin) solid var(--card-border);
}
.social-feed-masonry {
  column-count: 3;
  column-gap: 20px;
}
@media (max-width: 1023.98px) {
  .social-feed-masonry { column-count: 2; column-gap: 16px; }
}
@media (max-width: 639.98px) {
  .social-feed-masonry { column-count: 1; column-gap: 0; }
}
.social-feed-masonry > * {
  break-inside: avoid;
  margin-bottom: 20px;
  display: block;
}
.social-feed-card {
  background: var(--bg-secondary) !important;
  border: var(--border-thin) solid var(--card-border) !important;
  border-radius: 18px !important;
  overflow: hidden;
  padding: 0 !important;
  min-height: unset !important;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms ease,
              box-shadow 180ms ease;
}
/* [Phase 8 ✅] Fills the card while a third-party embed is still loading, so
   the space between the grid and the footer reads as "loading" rather than as
   a hole in the page. Uses the Phase 7 `.skeleton` primitive, so it follows
   the theme and disappears under prefers-reduced-motion. */
.social-feed-skeleton {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* The generic .skeleton tint (8%) is calibrated for small strips; filling a
     450px card it reads as nothing at all, which is the hole we are trying to
     remove. Deeper tint here so the block clearly says "loading". */
  background: color-mix(in srgb, var(--color-foreground) 14%, transparent);
}
.social-feed-card.is-embed-pending { position: relative; }
/* An embed that fails leaves a link-sized card, not a 450px one. The inline
   min-height:450px is the provider's placeholder allowance, so it is dropped
   the moment we know there is no provider content to hold space for. */
.social-feed-card:not(.is-embed-pending) {
  min-height: 0 !important;
}
/* Once the embed lands the skeleton is removed by JS; belt-and-braces here in
   case a provider injects its iframe before the observer attaches. */
.social-feed-card:not(.is-embed-pending) .social-feed-skeleton { display: none; }

.social-feed-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color) 50%, var(--card-border)) !important;
  box-shadow: 0 18px 40px -22px rgba(2, 6, 23, 0.5);
}
@media (max-width: 639.98px) {
  /* [Phase 8] Scoped to the PENDING state. Previously every card was forced to
     380px, so a failed embed that had degraded to a one-line "View post" link
     still reserved 380px of emptiness above the footer. */
  .social-feed-card.is-embed-pending {
    min-height: 380px !important;
  }
}

/* ───── Personalized Greeting Banner — slim strip ───── */
#personalized-greeting-banner {
  display: none;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 1.75rem;
  border: var(--border-thin) solid var(--card-border) !important;
  background: var(--theme-surface) !important;
  animation: fadeIn 0.4s ease;
  align-items: center;
  gap: 0;
  overflow: hidden;
  position: relative;
}

/* Accent left stripe on greeting */
#personalized-greeting-banner::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--theme-accent);
  border-radius: 0 2px 2px 0;
}

#personalized-greeting-text {
  font-size: 0.95rem !important;
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--theme-text) !important;
  padding-inline-start: 1rem;
}

#personalized-greeting-sub {
  font-size: 0.78rem !important;
  margin: 0.15rem 0 0 !important;
  color: var(--theme-text) !important;
  opacity: 0.5;
  padding-inline-start: 1rem;
}

#personalized-greeting-icon {
  font-size: 1.3rem !important;
}

/* ───── Section headers (Social Updates, Bundles) ───── */
.shop-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--theme-text);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.shop-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background: var(--theme-accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.shop-section-subtitle {
  font-size: 0.83rem;
  color: var(--theme-text);
  opacity: 0.45;
  margin-bottom: 1.25rem;
  font-weight: 800;
}

/* ───── Newsletter popup — refined ───── */
.newsletter-popup {
  max-width: 420px !important;
  padding: 2rem !important;
  border-radius: var(--radius-lg) !important;
}

.newsletter-popup h3 {
  font-size: 1.4rem !important;
  letter-spacing: -0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   [Phase 8 ✅] Newsletter dialog + Cookie banner v2
   Applies to both shop.html and product.html.
   IDs preserved so shop.js keeps working unchanged.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Newsletter overlay ─── */
.nl-overlay {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(0);
  visibility: hidden; opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 220ms,
              backdrop-filter 220ms ease;
}
.nl-overlay.active {
  visibility: visible; opacity: 1;
  backdrop-filter: blur(12px) saturate(1.05);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s,
              backdrop-filter 320ms ease;
}

.nl-dialog {
  position: relative;
  width: min(460px, 100%);
  background: var(--bg-secondary);
  border: var(--border-thin) solid var(--card-border);
  border-radius: 24px;
  padding: 34px 30px 28px;
  box-shadow: 0 30px 80px -30px rgba(2, 6, 23, 0.7),
              0 10px 30px -10px rgba(2, 6, 23, 0.35);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nl-overlay.active .nl-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nl-close-btn {
  position: absolute; top: 16px; inset-inline-end: 16px;
  background: transparent; border: var(--border-thin) solid transparent;
  color: var(--text-muted); cursor: pointer;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nl-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--card-border);
}
.nl-close-btn svg { width: 16px; height: 16px; }

.nl-glyph-wrap {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  transition: background 150ms ease, color 150ms ease;
}
.nl-glyph-wrap.success {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}
.nl-glyph-wrap svg { width: 30px; height: 30px; }

.nl-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.nl-desc {
  text-align: center;
  font-size: 0.8594rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 360px;
}

.nl-form {
  display: flex; flex-direction: column; gap: 10px;
}
.nl-email-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-tertiary);
  border: var(--border-thin) solid var(--card-border);
  color: var(--text-primary);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.9062rem; font-weight: 500;
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.nl-email-input::placeholder { color: var(--text-muted); font-weight: 500; }
.nl-email-input:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.nl-submit {
  width: 100%;
  background: var(--accent-color); color: var(--color-on-accent);
  border: none;
  padding: 14px 18px; border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.9062rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent-color) 75%, transparent);
}
.nl-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.nl-submit:active { transform: translateY(0); }
.nl-submit svg { width: 15px; height: 15px; }

.nl-no-thanks {
  margin: 10px auto 0;
  display: block;
  background: none; border: none;
  color: var(--text-muted);
  font-size: 0.7812rem; font-weight: 600;
  cursor: pointer; padding: 8px 12px;
  border-radius: 8px;
  transition: color 150ms ease, background 150ms ease;
}
.nl-no-thanks:hover { color: var(--text-primary); background: var(--bg-tertiary); }

/* Voucher (success view) */
.nl-voucher {
  position: relative;
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 35%, transparent);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  text-align: center;
}
.nl-voucher-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6562rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-success) 85%, var(--text-primary));
  display: block; margin-bottom: 6px;
}
.nl-voucher-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.375rem; font-weight: 700;
  color: var(--color-success);
  letter-spacing: 0.12em;
  word-break: break-all; display: block;
}
.nl-voucher-copy {
  position: absolute; top: 10px; inset-inline-end: 10px;
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 30%, transparent);
  color: var(--color-success);
  padding: 6px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.nl-voucher-copy:hover { background: color-mix(in srgb, var(--color-success) 25%, transparent); transform: translateY(-1px); }
.nl-voucher-copy svg { width: 14px; height: 14px; }

/* Mobile: newsletter → bottom sheet */
@media (max-width: 639.98px) {
  .nl-overlay { align-items: flex-end; padding: 0; }
  .nl-dialog {
    width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  .nl-overlay.active .nl-dialog { transform: translateY(0); }
  .nl-dialog::before {
    content: '';
    display: block;
    width: 44px; height: 4px; border-radius: 999px;
    background: var(--card-border);
    margin: -10px auto 16px;
  }
  .nl-close-btn { top: 20px; }
  .nl-glyph-wrap { width: 58px; height: 58px; margin-bottom: 14px; }
  .nl-glyph-wrap svg { width: 26px; height: 26px; }
  .nl-title { font-size: 1.25rem; }
  .nl-desc { font-size: 0.8438rem; margin-bottom: 20px; }
}

/* ─── Cookie consent banner v2 ─── */
.cookie-v2 {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  inset-inline-start: 24px;
  width: min(380px, calc(100vw - 48px));
  background: var(--bg-secondary);
  border: var(--border-thin) solid var(--card-border);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 22px 48px -22px rgba(2, 6, 23, 0.55),
              0 6px 16px -6px rgba(2, 6, 23, 0.3);
  display: none;
  z-index: 1600;
  opacity: 0;
  transform: translateY(16px);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-v2.visible { display: block; opacity: 1; transform: translateY(0); }

.cookie-v2-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.cookie-v2-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cookie-v2-icon svg { width: 17px; height: 17px; }
.cookie-v2-title {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 0.8594rem;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.cookie-v2-body {
  font-size: 0.7969rem; font-weight: 500; line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.cookie-v2-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.cookie-v2-btn {
  padding: 8px 14px; border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.7969rem;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, filter 120ms ease;
  border: var(--border-thin) solid var(--card-border);
  background: transparent;
  color: var(--text-primary);
}
.cookie-v2-btn.decline:hover { background: var(--bg-tertiary); transform: translateY(-1px); }
.cookie-v2-btn.accept {
  background: var(--accent-color); color: var(--color-on-accent); border-color: transparent;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent-color) 70%, transparent);
}
.cookie-v2-btn.accept:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Mobile cookie banner — lifts above bottom nav */
@media (max-width: 639.98px) {
  .cookie-v2 {
    inset-inline-start: 12px; inset-inline-end: 12px;
    width: auto;
    bottom: calc(var(--bottom-nav-h, 64px) + 12px + env(safe-area-inset-bottom));
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nl-overlay, .nl-dialog, .cookie-v2 { transition-duration: 0ms !important; }
}

/* ───── Empty state refinement ───── */
.empty-state-icon {
  opacity: 0.25;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Touch-target floor — 44×44, measured not assumed
   The cookie banner is the first thing a shopper touches and both of its
   buttons measured 37px tall in English (41px in Arabic — Arabic runs
   taller, so English is always the failing case here). `min-height` grows
   the border box, so the padding above stays the visual rhythm.
   ══════════════════════════════════════════════════════════════════════ */
.cookie-v2-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* [Phase 13 ✅] Same third-party minimum as product.css: Instagram and TikTok
   hardcode min-width 325–326px on the embed they inject, which does not fit a
   card on a 375px phone once gutters are taken. Let them reflow. */
.social-feed-card .instagram-media,
.social-feed-card .tiktok-embed,
.social-feed-card iframe {
  min-width: 0 !important;
  max-width: 100% !important;
}
.social-feed-card { max-width: 100%; }

/* [Phase 13 ✅] "Details" is a button, not an inline text link, so the WCAG
   2.5.8 inline exception does not cover it — and at 19px tall it was the
   smallest control on the storefront with a mouse.

   The `(pointer: fine)` guard is not decoration. shop.css loads AFTER
   common.css, so an unguarded `min-height: 32px` here beat the 44px
   coarse-pointer floor there and knocked the phone back to 32px — the touch
   sweep went from 0 offenders to 10 on the strength of one line meant only
   for desktop. Any desktop-density rule in a page stylesheet needs this
   guard, for the same reason. */
@media (pointer: fine) {
  .details-btn { min-height: 32px; }
}