/* ═══════════════════════════════════════════════════════════════════════════════
   PAYMENT BROWSER STOREFRONT - קאליו
   calio-app.com/b/{browserId}
   Modes: Store (products grid + cart) | Free (custom amount)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1. CSS VARIABLES & RESET
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Main Calio Green: RGB(100, 187, 115) → #64BB73 */
  --accent: #64BB73;
  --accent-dark: #4FA362;
  --accent-soft: rgba(100, 187, 115, 0.12);
  --accent-softer: rgba(100, 187, 115, 0.06);
  --accent-glow: rgba(100, 187, 115, 0.25);

  --bg-primary: #FAFBFC;
  --bg-card: #FFFFFF;
  --bg-input: #F4F6F8;
  --bg-input-focus: #EEF1F4;

  --text-primary: #1A2233;
  --text-secondary: #4A5568;
  --text-muted: #718096;
  --text-on-accent: #FFFFFF;

  --border: rgba(26, 34, 51, 0.08);
  --border-hover: rgba(26, 34, 51, 0.15);
  --border-focus: rgba(100, 187, 115, 0.5);

  --error: #E53E3E;
  --error-bg: rgba(229, 62, 62, 0.08);
  --error-border: rgba(229, 62, 62, 0.25);

  --success: #38A169;
  --success-bg: rgba(56, 161, 105, 0.1);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 50px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 4px 20px var(--accent-glow);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);

  --transition-fast: 0.15s ease;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Browser-specific variables */
  --hero-height: 200px;
  --fab-size: 56px;
  --drawer-max-width: 420px;
  --product-card-radius: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background-color: #FFFFFF;
}

body {
  font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 0%, var(--accent-softer) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(100, 187, 115, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   2. LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.page-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-bottom: 80px;
}

.browser-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 100px;
}

body.browser-type-free .browser-container {
  max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════════
   3. STATE VIEWS - Loading / Error / Not-Found / Success
   ═══════════════════════════════════════════════════════════════════ */
.state-view {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 20px 40px;
}

.state-view.active {
  display: flex;
}

.state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.state-icon svg {
  width: 40px;
  height: 40px;
}

.state-icon.loading-icon {
  background: var(--accent-soft);
}

.state-icon.success-icon {
  background: var(--success-bg);
}

.state-icon.success-icon svg {
  fill: var(--success);
}

.state-icon.error-icon {
  background: var(--error-bg);
}

.state-icon.error-icon svg {
  fill: var(--error);
}

.state-icon.not-found-icon {
  background: rgba(237, 137, 54, 0.12);
}

.state-icon.not-found-icon svg {
  fill: #DD6B20;
}

.state-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.state-message {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 300px;
}

.new-order-btn {
  margin-top: 24px;
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 10px 24px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}

.new-order-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-softer);
}

/* Loading spinner in state view */
.state-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Success checkmark animation */
.checkmark-circle {
  stroke: var(--success);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkmark-circle 0.6s ease-in-out forwards;
}

.checkmark-check {
  stroke: var(--success);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark-check 0.3s 0.4s ease-in-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   4. HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */
.hero-section {
  width: 100%;
  height: calc(var(--hero-height) + env(safe-area-inset-top, 0px));
  position: relative;
  overflow: hidden;
  margin-bottom: -40px;
}

/* Web view doubles the hero height so the carousel reads as a proper banner
   instead of a thin strip. The mobile (default) height stays as-is. */
@media (min-width: 768px) {
  .hero-section {
    height: calc(var(--hero-height) * 2 + env(safe-area-inset-top, 0px));
  }
}

/* Carousel track — slides hold absolute-positioned images that fade between
   each other via opacity (no horizontal scrolling, simpler than transforms). */
.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Legacy single-image case: when only #hero-image is in the track, mark it
   active so it shows without JS opt-in. */
.hero-section .hero-image {
  opacity: 1;
}

.hero-section .hero-image.hero-slide:not(.active) {
  opacity: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  bottom: calc(40px + 12px); /* offset so dots clear the negative-margin overlap */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  pointer-events: auto;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.hero-dot.active {
  width: 24px;
  border-radius: 4px;
  background: #fff;
}

.hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Branding off — hide logo + name pair on the storefront. Description stays
   visible since it may carry standalone copy. */
body.hide-branding .browser-logo,
body.hide-branding .browser-name {
  display: none !important;
}

/* Branding off + store nav header present — the sticky header has no scroll
   threshold to "reveal" it (the page top no longer carries logo + name), so
   we pin it open from the start. Padding on #main-view pushes the hero (or
   whatever the first element is) down so it isn't hidden behind the pinned
   header. */
body.has-store-nav.hide-branding .store-sticky-header {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.has-store-nav.hide-branding #main-view {
  padding-top: calc(70px + env(safe-area-inset-top, 0px));
}

/* ═══════════════════════════════════════════════════════════════════
   5. BROWSER HEADER
   ═══════════════════════════════════════════════════════════════════ */
.browser-header {
  text-align: center;
  padding: 24px 16px 16px;
  position: relative;
}

.browser-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-card);
  box-shadow: var(--shadow-md);
  margin: 0 auto 12px;
  display: block;
}

.browser-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.browser-description {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

.header-divider {
  height: 1px;
  background: var(--border);
  margin: 16px -16px 0;
}

/* Hero overlap adjustments */
.has-hero .browser-header {
  margin-top: -32px;
}

.has-hero .browser-logo {
  border-width: 2px;
}

/* Compact header for catalog review step: the user has progressed past the
   browsing stage, so collapse the marketing chrome (hero, big logo, description).
   Selectors target body so they win over `.has-hero` overrides via specificity. */
body.has-catalog-review #hero-section {
  display: none;
}

body.has-catalog-review .browser-header {
  margin-top: 0;
  padding: 12px 16px 8px;
}

body.has-catalog-review .browser-logo {
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
}

body.has-catalog-review .browser-name {
  font-size: 16px;
  margin-bottom: 0;
}

body.has-catalog-review .browser-description {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   6. CATEGORY TABS
   ═══════════════════════════════════════════════════════════════════ */
.category-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: 'Heebo', sans-serif;
}

.category-tab.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.category-tab:hover:not(.selected) {
  border-color: var(--border-hover);
  background: var(--bg-card);
}

/* Product search (store browsers) — in-memory client-side filter. */
.store-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color var(--transition), background var(--transition);
}

.store-search:focus-within {
  background: var(--bg-input-focus);
  border-color: var(--border-focus);
}

.store-search-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
}

.store-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 0;
  font-size: 15px;
  font-family: 'Heebo', sans-serif;
  color: var(--text-primary);
}

.store-search-input::placeholder {
  color: var(--text-muted);
}

/* Hide the native clear control — we provide our own RTL-friendly button. */
.store-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.store-search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition);
}

.store-search-clear:hover {
  background: var(--border-hover);
}

.store-search-clear svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.store-search-count {
  margin: 0 16px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* While a search is active, the category navigation is irrelevant — hide it
   so results read as a single flat list across the whole catalog. */
body.store-search-active #category-tabs,
body.store-search-active .category-circles,
body.store-search-active #categories-grid,
body.store-search-active #category-back-bar {
  display: none !important;
}

/* Search entrance animations — a soft, staggered reveal instead of a hard pop.
   Card delays are set inline by JS (capped, so big result sets stay snappy). */
@keyframes storeSearchCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes storeSearchSoftIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes storeSearchClearIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.product-card.search-in {
  animation: storeSearchCardIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.store-search-count.anim-in {
  animation: storeSearchSoftIn 0.3s ease-out both;
}

#store-section .empty-state.anim-in {
  animation: storeSearchSoftIn 0.3s ease-out both;
}

.store-search-clear.anim-in {
  animation: storeSearchClearIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .product-card.search-in,
  .store-search-count.anim-in,
  #store-section .empty-state.anim-in,
  .store-search-clear.anim-in {
    animation: none;
  }
}

/* Category Circles (when showCategoryImages = true) */
.category-circles {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}

.category-circles::-webkit-scrollbar {
  display: none;
}

.category-circle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-family: 'Heebo', sans-serif;
  transition: transform var(--transition);
}

.category-circle:hover {
  transform: translateY(-2px);
}

.category-circle-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: all var(--transition);
  background: var(--bg-input);
}

.category-circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-circle-letter {
  color: white;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.category-circle.selected .category-circle-image {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.category-circle-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 80px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-circle.selected .category-circle-name {
  color: var(--accent-dark);
  font-weight: 600;
}

@media (min-width: 768px) {
  .category-circle-image {
    width: 80px;
    height: 80px;
  }
  .category-circle-letter {
    font-size: 32px;
  }
  .category-circle-name {
    font-size: 13px;
    max-width: 96px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   7. PRODUCTS GRID
   ═══════════════════════════════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   8. PRODUCTS LIST (alternative display mode)
   ═══════════════════════════════════════════════════════════════════ */
.products-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}

.products-list .product-card {
  flex-direction: row;
}

.products-list .product-image-wrapper {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.products-list .product-info {
  padding: 12px 16px;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   9. PRODUCT CARDS
   ═══════════════════════════════════════════════════════════════════ */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--product-card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  animation: fadeInUp 0.4s ease-out both;
}

.product-card:nth-child(1) { animation-delay: 0s; }
.product-card:nth-child(2) { animation-delay: 0.04s; }
.product-card:nth-child(3) { animation-delay: 0.08s; }
.product-card:nth-child(4) { animation-delay: 0.12s; }
.product-card:nth-child(5) { animation-delay: 0.16s; }
.product-card:nth-child(6) { animation-delay: 0.2s; }
.product-card:nth-child(7) { animation-delay: 0.24s; }
.product-card:nth-child(8) { animation-delay: 0.28s; }
.product-card:nth-child(n+9) { animation-delay: 0.32s; }

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.product-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-input);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 32px;
}

.product-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: auto;
}

.product-original-price {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Feature 5א: percent off chip next to the price */
.product-discount-pct {
  display: inline-block;
  padding: 2px 6px;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* Feature 5א/ב: cart per-line savings + almost-there hint */
.cart-item-savings {
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.cart-item-almost-hint {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.cart-item-almost-hint--soft {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
}

/* Feature 5א: percent-off chip inside the product modal price section */
.product-modal-discount-pct {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: var(--error-bg);
  color: var(--error);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* Feature 5: savings line below the price (works for any active discount) */
.product-modal-savings {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(56, 161, 105, 0.1);
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Feature 5ב: tier-activated toast — slides down when a new tier is reached */
.product-modal-tier-toast {
  background: linear-gradient(135deg, var(--success), var(--accent-dark));
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px;
  margin: 0;
  transform: translateY(-4px);
  transition: max-height 0.3s ease, opacity 0.3s ease,
              padding 0.3s ease, margin 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(56, 161, 105, 0.25);
}

.product-modal-tier-toast.show {
  max-height: 80px;
  opacity: 1;
  padding: 12px 16px;
  margin: 12px 0;
  transform: translateY(0);
  animation: tier-toast-pop 0.4s ease;
}

@keyframes tier-toast-pop {
  0%   { transform: translateY(-4px) scale(0.96); }
  60%  { transform: translateY(0)    scale(1.02); }
  100% { transform: translateY(0)    scale(1);    }
}

/* Feature 5ב: price pulse — runs once when a tier is activated */
.product-modal-price.pulse {
  animation: modal-price-pulse 0.7s ease-out;
}

@keyframes modal-price-pulse {
  0%   { transform: scale(1);    color: inherit; }
  35%  { transform: scale(1.12); color: var(--success); }
  100% { transform: scale(1);    color: inherit; }
}

/* Per-product customer note — textarea inside the product modal */
.product-modal-customer-note-wrap {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-modal-customer-note-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.product-modal-customer-note {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  resize: vertical;
  transition: all var(--transition);
  box-sizing: border-box;
}
.product-modal-customer-note:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
}
.product-modal-customer-note::placeholder {
  color: var(--text-muted);
}

/* Customer note line inside cart items */
.cart-item-note {
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.08);
  color: #92400E;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border-right: 3px solid rgba(245, 158, 11, 0.4);
  word-break: break-word;
  line-height: 1.4;
}

/* Feature 5ב: quantity tier table inside the product modal */
.quantity-tier-section {
  margin: 12px 0;
  padding: 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}
.quantity-tier-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent-dark);
}
.quantity-tier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quantity-tier-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}
.quantity-tier-row.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.quantity-tier-row.active .tier-per-unit {
  color: rgba(255, 255, 255, 0.85);
}
.tier-per-unit {
  color: var(--text-secondary);
  font-size: 12px;
}

.product-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.product-badge.sale {
  background: var(--error);
  color: white;
}

.product-badge.out-of-stock {
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

/* Custom free-text tags (e.g. kashrut) — gray, pinned bottom-right, stacked. */
.product-custom-tags {
  position: absolute;
  bottom: 8px;
  right: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}

.product-badge.custom-tag {
  position: static;
  top: auto;
  right: auto;
  background: #4A5568;
  color: white;
  max-width: 100%;
}

.product-card.out-of-stock {
  opacity: 0.5;
}

/* Modal "out of stock" banner — appears in place of the stock count */
#product-modal-stock.out-of-stock-banner {
  color: #B91C1C;
  background: #FEE2E2;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   10. CART FAB (Floating Action Button)
   ═══════════════════════════════════════════════════════════════════ */
.cart-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 50;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--accent-glow), var(--shadow-lg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.cart-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--accent-glow), var(--shadow-lg);
}

.cart-fab-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-fab-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: white;
  color: var(--accent-dark);
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  transition: transform 0.2s ease;
}

.cart-fab-badge.bounce {
  animation: badgeBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-fab-total {
  display: none;
}

.cart-fab-total.updating {
  animation: totalPulse 0.4s ease-out;
}

.cart-fab-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════
   11. CART DRAWER (Bottom sheet mobile, side drawer desktop)
   ═══════════════════════════════════════════════════════════════════ */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 60;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.cart-overlay.active {
  display: block;
}

.cart-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 61;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  transform: translateY(0);
}

.cart-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.cart-drawer-title {
  font-size: 18px;
  font-weight: 700;
}

.cart-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.cart-drawer-close:hover {
  background: var(--bg-input-focus);
}

.cart-drawer-close svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.cart-drawer-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   12. CART ITEMS
   ═══════════════════════════════════════════════════════════════════ */
.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  animation: cartItemEnter 0.3s ease-out both;
  overflow: hidden;
}

.cart-item.removing {
  animation: cartItemExit 0.3s ease-out forwards;
  pointer-events: none;
}

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

.cart-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-input);
}

.cart-item-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-muted);
}

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

.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-variant {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.cart-item-line-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}

.cart-item-unit-detail {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: auto;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition);
  font-family: 'Heebo', sans-serif;
}

.qty-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.qty-btn.at-limit {
  opacity: 0.4;
  cursor: not-allowed;
}

.qty-value {
  font-size: 15px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
  transition: transform 0.15s ease;
}

.qty-value.pop {
  animation: qtyPop 0.25s ease-out;
}

.cart-item-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.4;
  transition: all var(--transition);
}

.cart-item-remove:hover {
  opacity: 1;
  background: var(--error-bg);
}

.cart-item-remove svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
}

.cart-item-remove:hover svg {
  fill: var(--error);
}

/* ═══════════════════════════════════════════════════════════════════
   13. COUPON INPUT
   ═══════════════════════════════════════════════════════════════════ */
.coupon-section {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.coupon-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-size: 14px;
  font-family: 'Heebo', sans-serif;
  direction: ltr;
  text-align: left;
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.coupon-input:focus {
  border-color: var(--accent);
  outline: none;
}

.coupon-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: white;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}

.coupon-btn:hover {
  background: var(--accent-dark);
}

.coupon-btn.loading {
  pointer-events: none;
  min-width: 60px;
}

.coupon-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

.coupon-spinner.small {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: var(--text-muted);
}

.coupon-status {
  font-size: 13px;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.coupon-status.success {
  color: var(--success);
  animation: couponSuccess 0.3s ease-out;
}

.coupon-status.error {
  color: var(--error);
  animation: shake 0.4s ease-out;
}

.coupon-status:empty {
  display: none;
}

.applied-coupons-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.applied-coupons-list:empty {
  display: none;
}

.applied-coupon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--success-bg);
  border: 1px solid rgba(56, 161, 105, 0.2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  animation: couponSuccess 0.3s ease-out both;
}

.applied-coupon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.applied-coupon-code {
  font-weight: 600;
  color: var(--text-primary);
}

.applied-coupon-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.applied-coupon-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.applied-coupon-remove:hover {
  color: var(--error);
  background: var(--error-bg);
}

.coupon-stacking-notice {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 8px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

.coupon-remove {
  background: none;
  border: none;
  color: var(--error);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  margin-right: 8px;
  font-family: 'Heebo', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════
   14. CART SUMMARY
   ═══════════════════════════════════════════════════════════════════ */
.cart-summary {
  margin-top: 8px;
}

.cart-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 8px 0;
  animation: summaryLineEnter 0.25s ease-out both;
}

.cart-summary-line.discount {
  color: var(--success);
}

.cart-summary-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  transition: all 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   15. CHECKOUT DRAWER (side panel / bottom sheet, mirrors cart drawer)
   ═══════════════════════════════════════════════════════════════════ */
.checkout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 70;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.checkout-overlay.active {
  display: block;
}

.checkout-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 71;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.checkout-drawer.open {
  transform: translateY(0);
}

.checkout-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
}

.checkout-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.checkout-drawer-title {
  font-size: 18px;
  font-weight: 700;
}

.checkout-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.checkout-drawer-footer {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  flex-shrink: 0;
}

.checkout-drawer-footer .order-summary-card {
  margin-bottom: 12px;
}

/* Collapsible order summary */
.summary-collapsible {
  margin-bottom: 12px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.summary-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.summary-collapsed-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.summary-toggle-arrow {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.summary-collapsible.open .summary-toggle-arrow {
  transform: rotate(180deg);
}

.summary-collapsible-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.summary-collapsible.open .summary-collapsible-body {
  max-height: 300px;
}

.summary-collapsible-body .order-summary-card {
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.checkout-drawer-footer .submit-btn {
  margin-bottom: 0;
}

.checkout-drawer-footer .security-badge {
  margin-top: 12px;
}

.checkout-section {
  margin-bottom: 24px;
  animation: fadeInUp 0.35s ease-out both;
}

.checkout-drawer-body .checkout-section:nth-child(1) { animation-delay: 0.05s; }
.checkout-drawer-body .checkout-section:nth-child(2) { animation-delay: 0.1s; }
.checkout-drawer-body .checkout-section:nth-child(3) { animation-delay: 0.15s; }
.checkout-drawer-body .checkout-section:nth-child(4) { animation-delay: 0.2s; }
.checkout-drawer-body .checkout-section:nth-child(5) { animation-delay: 0.25s; }
.checkout-drawer-body .checkout-section:nth-child(n+6) { animation-delay: 0.3s; }

.checkout-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-section-title svg {
  width: 18px;
  height: 18px;
  fill: var(--accent);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   16. CUSTOMER FIELDS (form elements)
   ═══════════════════════════════════════════════════════════════════ */
.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  margin-bottom: 16px;
}

.form-group.half {
  flex: 1;
  margin-bottom: 0;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.customer-field-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 6px;
  vertical-align: middle;
}

.customer-field-badge.is-optional {
  color: #d32f2f;
  background-color: #ffebee;
}

.customer-field-badge.is-required {
  color: #2e7d32;
  background-color: #e8f5e9;
}

.form-control {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-input);
  font-size: 16px;
  color: var(--text-primary);
  transition: all var(--transition);
  display: flex;
  align-items: center;
  font-family: 'Heebo', sans-serif;
}

.form-control:focus,
.form-control:focus-within {
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.form-group.has-error .form-control {
  border-color: var(--error-border);
  background-color: var(--error-bg);
}

.error-message {
  display: none;
  font-size: 12px;
  color: var(--error);
  margin-top: 6px;
  padding-right: 2px;
}

.form-group.has-error .error-message {
  display: block;
}

.zipcode-lookup-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  margin-top: 4px;
  display: block;
}

.field-hint {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Global error */
.global-error {
  display: none;
  background-color: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 12px;
  margin-bottom: 16px;
  color: var(--error);
  font-size: 14px;
  text-align: center;
  animation: shake 0.4s ease-out;
}

.global-error.visible {
  display: block;
}

.shipping-hint {
  background-color: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #f57f17;
  font-size: 13px;
  text-align: center;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   17. SHIPPING RADIO CARDS
   ═══════════════════════════════════════════════════════════════════ */
.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shipping-option {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
}

.shipping-option:hover {
  border-color: var(--border-hover);
  background: var(--bg-card);
}

.shipping-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.shipping-option-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  margin-left: 12px;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--transition);
}

.shipping-option.selected .shipping-option-radio {
  border-color: var(--accent);
}

.shipping-option.selected .shipping-option-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}

.shipping-option-info {
  flex: 1;
}

.shipping-option-name {
  font-size: 15px;
  font-weight: 600;
}

.shipping-option-detail {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.shipping-option-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-dark);
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   17b. FUTURE DELIVERY DATE
   ═══════════════════════════════════════════════════════════════════ */

.future-date-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.future-date-block .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.future-date-block label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.future-date-block input[type="text"],
.future-date-block input[type="date"] {
  padding: 12px 14px;
  border: 1px solid var(--border, #E0E0E0);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  background: #fff;
  cursor: pointer;
}

.future-date-block .time-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.future-date-block .time-slot-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border, #E0E0E0);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  transition: background-color 0.15s ease;
}

.future-date-block .time-slot-radio:hover {
  background: #f7f7f7;
}

.future-date-block .time-slot-radio input[type="radio"] {
  margin: 0;
  accent-color: var(--accent-dark, #0099CC);
}

.future-date-block .error-text {
  color: #c00;
  font-size: 12px;
  margin-top: 4px;
  min-height: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   18. TIP SECTION
   ═══════════════════════════════════════════════════════════════════ */
.tip-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tip-btn {
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}

.tip-btn.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.tip-btn:hover:not(.selected) {
  border-color: var(--border-hover);
}

.tip-custom-input {
  width: 100px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-size: 14px;
  text-align: center;
  font-family: 'Heebo', sans-serif;
  direction: ltr;
  color: var(--text-primary);
  transition: border-color var(--transition);
}

.tip-custom-input:focus {
  border-color: var(--accent);
  outline: none;
}

.tip-custom-wrap {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   19. PAYMENT METHODS
   ═══════════════════════════════════════════════════════════════════ */
.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-method-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.payment-method-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.payment-method-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-card);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.payment-method-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.payment-method-btn:active:not(:disabled) {
  transform: translateY(0);
}

.payment-method-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.method-selection-indicator {
  font-size: 13px;
  color: var(--accent);
  text-align: center;
  padding: 8px 0 4px;
  font-weight: 500;
}

.payment-method-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.payment-method-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.payment-method-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: right;
}

.payment-method-arrow {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  margin-right: auto;
  position: relative;
  z-index: 1;
  transition: transform var(--transition);
}

.payment-method-btn:hover:not(:disabled) .payment-method-arrow {
  transform: translateX(3px);
  fill: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   19b. CASH ON DELIVERY CONFIRMATION DIALOG
   ═══════════════════════════════════════════════════════════════════ */
.cod-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: overlayFadeIn 0.25s ease-out;
}

.cod-dialog {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  direction: rtl;
}

.cod-dialog h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.cod-dialog p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cod-dialog-actions {
  display: flex;
  gap: 12px;
}

.cod-dialog-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.cod-dialog-confirm {
  background: var(--accent);
  color: #fff;
}

.cod-dialog-cancel {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.cod-dialog-btn:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   20. CREDIT CARD FORM (PayMe hosted fields)
   ═══════════════════════════════════════════════════════════════════ */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.form-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.back-btn:hover {
  background: var(--bg-card);
  border-color: var(--border-hover);
  transform: translateX(2px);
}

.back-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
}

.form-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.form-title svg {
  width: 18px;
  height: 18px;
  fill: var(--accent);
  flex-shrink: 0;
}

/* PayMe hosted fields iframe */
.form-control iframe {
  height: 100% !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   21. INSTALLMENTS
   ═══════════════════════════════════════════════════════════════════ */
.installments-section {
  margin-bottom: 20px;
}

.installments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.installment-option {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 4px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.installment-option:hover {
  border-color: var(--border-hover);
  background: var(--bg-card);
}

.installment-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.installment-option .number {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.installment-option.selected .number {
  color: var(--accent-dark);
}

.installment-option .label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.installment-option.selected .label {
  color: var(--accent-dark);
}

.installment-info {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 12px;
  min-height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   22. SUBMIT BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.submit-btn {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-full);
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-glow), var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.submit-btn:hover:not(:disabled):not(.disabled)::before {
  opacity: 1;
}

.submit-btn:hover:not(:disabled):not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow), var(--shadow-lg);
}

.submit-btn:active:not(:disabled):not(.disabled) {
  transform: translateY(0) scale(0.98);
}

.submit-btn:disabled,
.submit-btn.disabled {
  background: #A0AEC0;
  color: #FFFFFF;
  cursor: not-allowed;
  box-shadow: none;
}

.submit-btn:disabled::before,
.submit-btn.disabled::before {
  display: none;
}

.submit-btn .btn-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  object-fit: contain;
  border-radius: 4px;
}

.spinner {
  display: none;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--text-on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.submit-btn.loading .spinner {
  display: block;
}

.submit-btn.loading .btn-text,
.submit-btn.loading .btn-icon {
  display: none;
}

/* Security badge */
.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.security-badge svg {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   23. PRODUCT MODAL (full-screen slide-up)
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   FREE AMOUNT ("פריט כללי") — card + entry modal
   ═══════════════════════════════════════════════════════════════════ */

/* Free-amount card is a normal catalog product tile. The ₪ sits in a gray,
   rounded-corner square inset a touch from the card edges (card background
   shows behind it, so all four corners read as rounded). */
.free-amount-card .product-image-wrapper {
  background: var(--bg-card);
  padding: 10px;
  box-sizing: border-box;
}

.free-amount-card .free-amount-icon {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 44px;
  font-weight: 700;
}

.fa-remove-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--error);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.fa-remove-btn:hover {
  text-decoration: underline;
}

.fa-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.fa-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.fa-modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  padding: 24px 20px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.fa-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
  text-align: right;
}

.fa-modal-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
  text-align: right;
}

.fa-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  text-align: right;
}

.fa-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 16px;
  text-align: right;
  margin-bottom: 14px;
}

.fa-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-input-focus);
}

.fa-input.fa-amount {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.fa-modal-error {
  color: var(--error);
  font-size: 13px;
  min-height: 18px;
  margin: -6px 0 10px;
  text-align: right;
}

.fa-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.fa-btn {
  flex: 1;
  padding: 13px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.fa-btn-primary {
  background: var(--accent);
  color: #fff;
}

.fa-btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
}

.product-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 80;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.product-modal-overlay.active {
  display: block;
}

.product-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 81;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-modal.open {
  transform: translateY(0);
}

.product-modal-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.product-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.product-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.product-modal-close svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.product-modal-gallery {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.gallery-track {
  display: flex;
  direction: ltr;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.gallery-track.dragging {
  transition: none;
}

.gallery-track img {
  min-width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-input);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--transition);
}

.gallery-dot.active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.product-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.product-modal-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.product-modal-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.product-modal-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 16px;
}

.product-modal-original-price {
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   24. VARIANT SELECTORS
   ═══════════════════════════════════════════════════════════════════ */
.variant-group {
  margin-bottom: 16px;
}

.variant-group-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-chip {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Heebo', sans-serif;
  color: var(--text-secondary);
}

.variant-chip.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.variant-chip:hover:not(.selected) {
  border-color: var(--border-hover);
}

/* Multiple-selection variant groups (Checkboxes) */
.variant-group-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-right: 4px;
}

.variant-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
}

.variant-checkbox-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.variant-checkbox-row:hover:not(.selected) {
  border-color: var(--border-hover);
}

.variant-checkbox-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.variant-checkbox-label {
  flex: 1;
}

/* Cart variant rows (one line per group) */
.cart-item-variants {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cart-variant-row {
  display: block;
}

.cart-variant-group {
  font-weight: 600;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   25. QUANTITY SELECTOR (in product modal)
   ═══════════════════════════════════════════════════════════════════ */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.quantity-selector .qty-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.quantity-selector .qty-value {
  font-size: 20px;
  font-weight: 700;
  min-width: 40px;
}

/* Quantity limit error messages */
.qty-limit-error {
  font-size: 13px;
  color: var(--error);
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--error-bg);
  border-radius: var(--radius-sm);
  text-align: center;
  animation: fadeIn 0.2s ease-out;
}

.cart-item-error {
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   26. PRODUCT MODAL ADD-TO-CART BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.product-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.add-to-cart-btn {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-full);
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-glow), var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.add-to-cart-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.add-to-cart-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.add-to-cart-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--accent-glow), var(--shadow-lg);
}

.add-to-cart-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.add-to-cart-btn:disabled {
  background: #A0AEC0;
  color: #FFFFFF;
  cursor: not-allowed;
  box-shadow: none;
}

/* Variant selection error */
.variant-selection-error {
  font-size: 13px;
  color: var(--error);
  text-align: center;
  margin-bottom: 10px;
  animation: fadeShake 0.3s ease;
}

@keyframes fadeShake {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: 1; transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { opacity: 1; transform: translateX(0); }
}

.add-to-cart-btn.added {
  background: var(--success) !important;
  animation: addedFlash 0.6s ease-out;
}

/* ADD-TO-CART CONFIRMATION OVERLAY */
.add-to-cart-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.add-to-cart-confirm-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.add-to-cart-confirm-content {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
  transition: transform 0.25s ease-out;
}
.add-to-cart-confirm-overlay.active .add-to-cart-confirm-content {
  transform: scale(1);
}
.add-to-cart-confirm-icon {
  margin-bottom: 12px;
}
.add-to-cart-confirm-text {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
}

/* ═══════════════════════════════════════════════════════════════════
   27. FREE BROWSER SECTION
   ═══════════════════════════════════════════════════════════════════ */
.free-section {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 16px;
}

.free-amount-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.free-amount-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.free-amount-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.free-amount-input {
  width: 100%;
  height: 60px;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'Heebo', sans-serif;
  direction: ltr;
  transition: all var(--transition);
}

.free-amount-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.free-amount-range {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   28. PROCESSING OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
.processing-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(250, 251, 252, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.processing-overlay.active {
  display: flex;
}

.processing-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.processing-text {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
}

.processing-subtext {
  font-size: 13px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   29. POWERED BY FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.powered-by-footer {
  margin-top: auto;
  padding-top: 32px;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.powered-by-footer img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.powered-by-footer span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   29b. CALIO ACQUISITION CTA — color hard-coded so it stays Calio green
   even when the browser overrides --accent with the business color.
   ═══════════════════════════════════════════════════════════════════ */
.calio-cta-link {
  display: block;
  margin: 0 auto;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #64BB73;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

.calio-cta-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   30. TYPE TOGGLES (show/hide sections based on browser type)
   ═══════════════════════════════════════════════════════════════════ */
body:not(.browser-type-free) #free-section {
  display: none;
}

body:not(.browser-type-store) #store-section {
  display: none;
}

body:not(.browser-type-catalog) #catalog-section {
  display: none;
}

body:not(.browser-type-store) .cart-fab {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   31. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 15px;
}

.cart-empty {
  text-align: center;
  padding: 40px 20px;
}

.cart-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.cart-empty-text {
  font-size: 15px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   32. ORDER SUMMARY (in checkout)
   ═══════════════════════════════════════════════════════════════════ */
.order-summary-card {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.order-summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  color: var(--text-secondary);
}

.order-summary-item .item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-summary-item .item-qty {
  color: var(--text-muted);
  margin: 0 8px;
  flex-shrink: 0;
}

.order-summary-item .item-price {
  flex-shrink: 0;
  font-weight: 500;
}

.order-summary-item.discount {
  color: var(--success);
}

.order-summary-item.total {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   33. CANCELLATION POLICY
   ═══════════════════════════════════════════════════════════════════ */
.cancellation-policy {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

.store-policies {
  margin-top: 32px;
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.cart-policies {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 10px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   34. LTR OVERRIDE (English mode)
   ═══════════════════════════════════════════════════════════════════ */
body.lang-en {
  direction: ltr;
}

body.lang-en .payment-method-icon {
  margin-left: 0;
  margin-right: 16px;
}

body.lang-en .payment-method-arrow {
  transform: rotate(0deg);
}

body.lang-en .payment-method-btn:hover:not(:disabled) .payment-method-arrow {
  transform: rotate(0deg) translateX(3px);
}

body.lang-en .cart-item-remove {
  margin-right: 0;
  margin-left: auto;
}

body.lang-en .shipping-option-radio {
  margin-left: 0;
  margin-right: 12px;
}

body.lang-en .shipping-option-price {
  margin-right: 0;
  margin-left: auto;
}

body.lang-en .error-message {
  padding-right: 0;
  padding-left: 2px;
}

body.lang-en .coupon-remove {
  margin-right: 0;
  margin-left: 8px;
}

body.lang-en .product-badge {
  right: auto;
  left: 8px;
}

body.lang-en .back-btn:hover {
  transform: translateX(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   35. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes checkmark-circle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmark-check {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

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

@keyframes cartItemExit {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 120px;
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
  }
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes addedFlash {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: none; }
}

@keyframes qtyPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes badgeBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes totalPulse {
  0% { color: var(--accent-dark); }
  50% { color: var(--accent); transform: scale(1.05); }
  100% { color: var(--accent-dark); transform: scale(1); }
}

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

@keyframes couponSuccess {
  0% { opacity: 0; transform: translateY(-4px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-in {
  animation: fadeInUp 0.5s ease-out both;
}

.animate-delay-1 { animation-delay: 0.08s; }
.animate-delay-2 { animation-delay: 0.16s; }
.animate-delay-3 { animation-delay: 0.24s; }
.animate-delay-4 { animation-delay: 0.32s; }

/* Credit card form states */
.payment-methods-card {
  display: block;
}

.form-card {
  display: none;
}

.credit-card-active .payment-methods-card {
  display: none;
}

.credit-card-active .form-card {
  display: block;
  animation: slideInRight 0.35s ease-out;
}

.payment-methods-active .payment-methods-card {
  animation: slideInLeft 0.35s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════
   36. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════ */

/* Compact phones */
@media (max-width: 380px) {
  .browser-container {
    padding: 0 12px 80px;
  }

  .browser-name {
    font-size: 20px;
  }

  .products-grid {
    gap: 8px;
    padding: 0 12px;
  }

  .product-info {
    padding: 10px;
  }

  .product-name {
    font-size: 13px;
  }

  .product-price {
    font-size: 14px;
  }

  .cart-fab {
    width: 52px;
    height: 52px;
    bottom: 16px;
    left: 16px;
  }

  .cart-fab-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .category-tabs {
    padding: 8px 12px;
  }

  .category-tab {
    padding: 6px 14px;
    font-size: 13px;
  }

  .free-amount-input {
    height: 52px;
    font-size: 28px;
  }

  .free-amount-card {
    padding: 24px 16px;
  }

  .product-modal-image {
    height: 220px;
  }

  .product-modal-name {
    font-size: 20px;
  }

  .product-modal-price {
    font-size: 20px;
  }

  .form-card,
  .payment-methods-card {
    padding: 20px 16px;
  }

  .installments-grid {
    gap: 6px;
  }

  .payment-method-btn {
    padding: 14px 16px;
  }

  .payment-method-icon {
    width: 28px;
    height: 28px;
    margin-left: 12px;
  }
}

/* Tablets and above */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .cart-drawer {
    right: 0;
    left: auto;
    width: var(--drawer-max-width);
    border-radius: var(--radius-xl) 0 0 0;
    top: 0;
    bottom: 0;
    max-height: 100vh;
  }

  .cart-drawer.open {
    transform: translateX(0);
  }

  .cart-drawer:not(.open) {
    transform: translateX(100%);
  }

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

  .hero-section {
    --hero-height: 260px;
  }

  .browser-header {
    padding: 32px 16px 20px;
  }

  .browser-logo {
    width: 88px;
    height: 88px;
  }

  .browser-name {
    font-size: 28px;
  }

  .product-modal {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 420px;
    max-width: none;
    max-height: none;
    height: 100vh;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    transform: translateX(-100%);
  }

  .product-modal.open {
    transform: translateX(0);
  }

  .product-modal-handle {
    display: none;
  }


  .checkout-drawer {
    right: 0;
    left: auto;
    width: var(--drawer-max-width);
    border-radius: var(--radius-xl) 0 0 0;
    top: 0;
    bottom: 0;
    max-height: 100vh;
  }

  .checkout-drawer.open {
    transform: translateX(0);
  }

  .checkout-drawer:not(.open) {
    transform: translateX(100%);
  }

  .checkout-drawer-handle {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .browser-container {
    max-width: 960px;
  }

  body.browser-type-free .browser-container {
    max-width: 400px;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MULTI CHECKOUT BOTTOM SHEET                                       */
/* ═══════════════════════════════════════════════════════════════════ */

.mc-btn-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.mc-payment-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: transparent;
  padding: 3px;
  border-radius: 6px;
  box-sizing: border-box;
}

.mc-payment-icon[alt="Bit"],
.mc-payment-icon[alt="Google Pay"] {
  width: 24px;
  height: 24px;
}

.mc-payment-icon[alt="\u05D0\u05E9\u05E8\u05D0\u05D9"] {
  width: 30px;
  height: 30px;
}

/* ═══════════════════════════════════════════════════════════════════ */

.multi-checkout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}

.multi-checkout-overlay.active {
  display: block;
}

.multi-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: mcFadeIn 0.3s ease;
}

.multi-checkout-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 85vh;
  min-height: 500px;
  max-height: 90vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  flex-direction: column;
  animation: mcSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.multi-checkout-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.multi-checkout-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.multi-checkout-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
}

.multi-checkout-close:hover {
  background: var(--bg-card);
  border-color: var(--border-hover);
}

.multi-checkout-iframe {
  flex: 1;
  width: 100%;
  border: none;
}

@media (max-width: 480px) {
  .multi-checkout-sheet {
    height: 90vh;
    max-height: 92vh;
  }
}

@keyframes mcSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

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

/* ═══════════════════════════════════════════════════════════════════
   33. CATALOG BROWSER TYPE
   Hybrid: products grid (like store) + inline payment (like free).
   No cart drawer, no shipping — sticky bottom bar with total + actions.
   ═══════════════════════════════════════════════════════════════════ */

.catalog-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 80px; /* gap to powered-by; sticky reservation lives on .powered-by-footer */
}

/* Review step: sticky-bottom is hidden, action elements live inline — no need to
   reserve the bottom padding for the sticky bar. */
.catalog-section.flow-review {
  padding-bottom: 24px;
}

/* CSS-driven hide for the sticky bar in review step. Class-based hide beats inline
   style — single source of truth, immune to other code mutating style.display. */
.catalog-section.flow-review #catalog-sticky-bottom {
  display: none;
}

/* Belt-and-suspenders hide for #catalog-submit-btn in review step:
   - .flow-review on #catalog-section (also matches when btn is inside body-actions)
   - [hidden] attribute set by JS
   - !important kept intentionally — multi-checkout flow may otherwise re-show it
     via inline style; this rule wins regardless. */
.catalog-section.flow-review #catalog-submit-btn,
.flow-review #catalog-submit-btn,
#catalog-submit-btn[hidden] {
  display: none !important;
}

/* Body wrapper that hosts payment methods + submit + global-error in review step.
   Mirrors the spacing of the sticky-bottom container so transitions feel stable. */
.catalog-body-actions {
  margin-top: 8px;
}

/* ─── Improvement 5: pure white background for catalog (drop the global tint
   + accent gradient overlay so cards blend with the page surface). ─── */
body.browser-type-catalog {
  background: #FFFFFF;
}
body.browser-type-catalog::before {
  display: none;
}

/* ─── Improvement 3: collapse stacked horizontal padding for catalog. The default
   stack is browser-container(16) + catalog-section(16) + products-grid(16) = 48px.
   Catalog wants cards close to the edge — 8px from the page edge, all containers
   below contribute 0. ─── */
body.browser-type-catalog .browser-container {
  padding-left: 8px;
  padding-right: 8px;
}
body.browser-type-catalog .browser-header {
  padding-left: 8px;
  padding-right: 8px;
}
body.browser-type-catalog .catalog-section {
  padding-left: 0;
  padding-right: 0;
}
body.browser-type-catalog .products-grid,
body.browser-type-catalog .products-list,
body.browser-type-catalog #catalog-category-tabs {
  padding-left: 0;
  padding-right: 0;
}

/* ─── Improvement 1: tighter vertical rhythm in the catalog header (select step
   only — review step already collapses further via `.has-catalog-review`). ─── */
body.browser-type-catalog:not(.has-catalog-review) .browser-header {
  padding-top: 16px;
  padding-bottom: 8px;
}
body.browser-type-catalog:not(.has-catalog-review) .browser-logo {
  margin-bottom: 8px;
}
body.browser-type-catalog:not(.has-catalog-review) .browser-name {
  margin-bottom: 2px;
}
body.browser-type-catalog:not(.has-catalog-review) #catalog-category-tabs {
  margin-bottom: 8px;
}

/* ─── Improvement 2 (latest): .powered-by-footer is relocated into
   #catalog-sticky-bottom by browser-catalog.js, so it lives in the sticky bar
   itself. No bottom-margin reservation needed — the previous 260px hack is gone. ─── */
#catalog-sticky-bottom .powered-by-footer {
  margin-top: 8px;
  padding-top: 0;
  padding-bottom: 0;
}

/* When the CTA is relocated into the catalog sticky bar, don't reserve the
   extra 80px scroll cushion — the sticky bar pins to the viewport bottom. */
#catalog-sticky-bottom .calio-cta-link {
  margin-bottom: 8px;
}

.catalog-section .customer-fields-container {
  margin-bottom: 24px;
}

/* Sticky bottom bar */
.catalog-sticky-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.catalog-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.catalog-total-amount {
  color: var(--accent);
  font-size: 22px;
}

/* Catalog product card — selected state */
.catalog-section .product-card.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

/* Improvement 3: catalog cards stay flat unless selected. The default hover
   lift+shadow is meant for desktop browsing, but catalog is touch-first and
   leaves a sticky :hover after tap → reads as "this card is special" when it
   isn't. Only the selected card gets a shadow. */
body.browser-type-catalog .product-card:hover:not(.is-selected) {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

/* In-card footer: quantity selector or blocked-by-other hint */
.catalog-section .product-card .catalog-card-footer {
  margin-top: 12px;
  padding: 12px 16px 0;
}

.catalog-section .catalog-quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.catalog-section .catalog-qty-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--bg-card);
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.catalog-section .catalog-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.catalog-section .catalog-qty-btn:hover:not(:disabled) {
  background: var(--accent-soft);
}

.catalog-section .catalog-qty-value {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}

/* "Add" button when quantity is 0 */
.catalog-section .catalog-add-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--accent);
  background: var(--bg-card);
  color: var(--accent);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.catalog-section .catalog-add-btn:hover:not(:disabled) {
  background: var(--accent-soft);
}

.catalog-section .catalog-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.catalog-section .catalog-add-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ─── Improvement 2: cell = card + sibling actions row. The cell is the grid/list
   item; the actions row appears below the card only when qty > 0, with no
   border/shadow so it reads as a separate control rather than card chrome. ─── */
.catalog-product-cell {
  display: flex;
  flex-direction: column;
}

.catalog-product-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Clickable card (whole card adds the product when qty=0). */
.catalog-section .product-card.clickable {
  cursor: pointer;
}

/* Locked card: variants unsupported or another item already selected (allowMultiple=false). */
.catalog-section .product-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.catalog-section .product-card.is-locked:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Compact summary card (review step). DOM order is [editBtn, info]; with `flex-start`
   in RTL the arrow anchors to the right edge and the info hugs it on the left. */
.catalog-compact-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}

.catalog-compact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-primary);
}

.catalog-compact-count {
  font-weight: 600;
}

.catalog-compact-separator {
  opacity: 0.4;
}

.catalog-compact-total {
  font-weight: 700;
  color: var(--accent);
}

.catalog-compact-edit {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm, 6px);
  transition: background var(--transition-fast);
}

.catalog-compact-edit svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.catalog-compact-edit:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Mobile adjustments — bottom bar grows due to wrapped buttons */
@media (max-width: 600px) {
  .catalog-section {
    padding-bottom: 80px; /* same as desktop — sticky reservation now on powered-by */
  }
  .catalog-section.flow-review {
    padding-bottom: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Tokenization checkout (deferred-charge flow)
 * Shown only when browserData.paymentConfig.paymentMode === 'tokenization'.
 * ═══════════════════════════════════════════════════════════════════════════ */
.tokenization-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.tokenization-note {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.tokenization-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.4;
}

.tokenization-consent input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CREDIT CARD DIALOG (Approach 3 — bottom sheet hosting moved CC form) */
/* z-index 90/91: above checkout-drawer (70/71), below processing-overlay (100). */
/* ═══════════════════════════════════════════════════════════════════ */

.cc-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.cc-dialog-overlay.active {
  display: block;
}

.cc-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 91;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cc-dialog.open {
  transform: translateY(0);
}

.cc-dialog-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}

.cc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  flex-shrink: 0;
}

.cc-dialog-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
}

.cc-dialog-close {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-dialog-close:hover {
  background: var(--bg-elevated, rgba(0, 0, 0, 0.04));
}

.cc-dialog-close svg {
  width: 22px;
  height: 22px;
  fill: var(--text-secondary);
}

.cc-dialog-body {
  padding: 8px 16px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
}

.cc-dialog-form-slot {
  display: block;
}

.cc-dialog-footer {
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}

.cc-dialog-footer .global-error {
  margin-bottom: 8px;
}

.cc-dialog-footer .submit-btn {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   STORE STICKY HEADER + NAV DRAWER + CONTACT SHEET
   Applied only to store-type browsers via body.has-store-nav.
   ═══════════════════════════════════════════════════════════════════ */
.store-sticky-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--bg-card);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 6px 24px rgba(26, 34, 51, 0.08), 0 2px 6px rgba(26, 34, 51, 0.04);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
  pointer-events: none;
}

body.has-store-nav .store-sticky-header {
  display: flex;
}

body.has-store-nav .store-sticky-header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.store-sticky-icon-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--transition);
  font-family: 'Heebo', sans-serif;
}

.store-sticky-icon-btn:hover {
  background: var(--bg-input-focus);
}

.store-sticky-icon-btn:active {
  transform: scale(0.94);
}

.store-sticky-icon-btn svg {
  width: 22px;
  height: 22px;
  fill: var(--text-primary);
}

.store-sticky-cart-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  background: var(--accent);
  color: #fff;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border: 2px solid var(--bg-card);
  box-sizing: content-box;
  transition: transform 0.2s ease;
}

.store-sticky-cart-badge.bounce {
  animation: badgeBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.store-sticky-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.store-sticky-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-card);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.store-sticky-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Nav drawer (categories + contact) — slides in from the right edge,
   matching the visual position of the hamburger button in RTL. */
.store-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 70;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.store-nav-overlay.active {
  display: block;
}

.store-nav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(86vw, 360px);
  background: var(--bg-card);
  z-index: 71;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.store-nav-drawer.open {
  transform: translateX(0);
}

.store-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.store-nav-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.store-nav-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.store-nav-close:hover {
  background: var(--bg-input-focus);
}

.store-nav-close svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
}

.store-nav-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
}

.store-nav-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px 8px;
}

.store-nav-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-nav-category {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: right;
  transition: background var(--transition);
}

.store-nav-category:hover {
  background: var(--bg-input);
}

.store-nav-category.selected {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.store-nav-category-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-input);
  flex-shrink: 0;
}

.store-nav-category-letter {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.store-nav-footer {
  border-top: 1px solid var(--border);
  padding: 12px 16px max(16px, env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

.store-nav-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition);
}

.store-nav-contact-btn:hover {
  border-color: var(--accent);
  background: var(--accent-softer);
  color: var(--accent-dark);
}

.store-nav-contact-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Contact sheet — bottom sheet styled like cart drawer. */
.store-contact-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 80;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: overlayFadeIn 0.25s ease-out;
}

.store-contact-overlay.active {
  display: block;
}

.store-contact-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 81;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-contact-sheet.open {
  transform: translateY(0);
}

.store-contact-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

.store-contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.store-contact-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.store-contact-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.store-contact-close:hover {
  background: var(--bg-input-focus);
}

.store-contact-close svg {
  width: 18px;
  height: 18px;
  fill: var(--text-secondary);
}

.store-contact-body {
  padding: 20px;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.store-contact-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'Heebo', sans-serif;
  transition: all var(--transition);
}

.store-contact-action:hover {
  border-color: var(--accent);
  background: var(--accent-softer);
}

.store-contact-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-contact-action-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--accent-dark);
}

.store-contact-action-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-contact-action-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.store-contact-action-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
  unicode-bidi: plaintext;
}

.store-contact-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-muted);
  font-size: 14px;
}

/* When the sticky header is showing, nudge the cart FAB up slightly so
   the fixed bottom-left FAB doesn't overlap iOS home indicator regions. */
body.has-store-nav.store-sticky-active {
  /* hook for future use; no current scroll-padding needed since header is fixed at top */
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORIES-FIRST LAYOUT
   Grid of rounded category tiles shown as the storefront landing when
   browser.categoriesFirstLayout === true and there are 2+ categories.
   ═══════════════════════════════════════════════════════════════════ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 4px 16px 16px;
}

@media (min-width: 600px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.categories-grid-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  padding: 0;
  text-align: right;
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
  animation: fadeInUp 0.4s ease-out both;
}

.categories-grid-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.categories-grid-tile:active {
  transform: translateY(0);
}

.categories-grid-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-input);
  overflow: hidden;
}

.categories-grid-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.categories-grid-tile-letter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.categories-grid-tile-name {
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stagger entry animation across the grid for a less synchronous feel. */
.categories-grid-tile:nth-child(1) { animation-delay: 0s; }
.categories-grid-tile:nth-child(2) { animation-delay: 0.04s; }
.categories-grid-tile:nth-child(3) { animation-delay: 0.08s; }
.categories-grid-tile:nth-child(4) { animation-delay: 0.12s; }
.categories-grid-tile:nth-child(5) { animation-delay: 0.16s; }
.categories-grid-tile:nth-child(6) { animation-delay: 0.20s; }
.categories-grid-tile:nth-child(n+7) { animation-delay: 0.24s; }

/* Back-to-grid bar — shown inside a category in categoriesFirstLayout mode.
   Styled as a pill on the right side of the page so it reads as a return
   affordance, not as a header. */
.category-back-bar {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 4px 16px 12px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.category-back-bar:hover {
  border-color: var(--border-hover);
  background: var(--bg-input);
}

.category-back-bar svg {
  width: 18px;
  height: 18px;
  fill: var(--text-primary);
}

.category-back-bar-name {
  color: var(--text-muted);
  font-weight: 500;
}

.category-back-bar-name::before {
  content: '\00B7';
  margin: 0 6px;
  color: var(--text-muted);
}

/* When the layout is active, expose the back bar via a body class so JS only
   has to toggle one thing. */
body.categories-first-active .category-back-bar {
  display: inline-flex;
}