/*
 * Product detail page styles.
 * Externalised 2026-06-17 from the inline <style> block in
 * application/views/homePage/product_details.php (verbatim move; no rule changes).
 * Loaded only on product detail pages via ListingDetail page_extra_css.
 */
/* ═══════════════════════════════════════════════════════════════
   BDStall — pages/product.css
   Product details page layout & components.
   • Image gallery (responsive picture, srcset)
   • Product summary (title, rating, price, hybrid CTAs)
   • Seller list (boosted slot + tiered visibility + compact mode)
   • Sticky bottom price bar (mobile)
   • Spec table, overview, FAQ
   • Loaded only on /product/* pages
   ═══════════════════════════════════════════════════════════════ */

/* ─── PAGE LAYOUT ────────────────────────────── */
.product-main {
  padding: 0;
  background: #ECECE6;
}
@media (min-width: 1024px) {
  .product-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .product-gallery-col { position: sticky; top: 76px; align-self: start; }
}


/* ─── IMAGE GALLERY ──────────────────────────── */
.product-gallery {
  background: white;
  padding: 12px;
}
.product-gallery-main {
  position: relative;
  aspect-ratio: 1;
  background: #FAFBF7;
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-gallery-main picture,
.product-gallery-main img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.product-gallery-badges-left {
  position: absolute;
  top: 12px; left: 12px;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.product-gallery-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.2px;
  color: #fff; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.product-gallery-badge.discount { background: #e8380d; box-shadow: 0 2px 6px rgba(232,56,13,.35); }
.product-gallery-badge.hot { background: #6366f1; font-size: 0.625rem; }
.product-gallery-badge.hot svg { stroke: #fff; flex-shrink: 0; }
.product-gallery-badge.popular { background: #6366f1; font-size: 0.625rem; }
.product-gallery-badge.popular svg { stroke: #fff; flex-shrink: 0; }
.product-gallery-fav {
  position: absolute;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  color: var(--color-text-tertiary);
}
.product-gallery-fav:hover { transform: scale(1.05); border-color: var(--orange); color: var(--orange-dark); }
.product-gallery-fav.active { color: var(--orange); border-color: var(--orange); }
.product-gallery-fav svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; }

.product-gallery-thumbs {
  display: flex; gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-gallery-thumbs::-webkit-scrollbar { display: none; }
.product-gallery-thumb {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border: 2px solid var(--color-border-tertiary);
  border-radius: 6px;
  background: #FAFBF7;
  cursor: pointer;
  padding: 0; overflow: hidden;
  transition: border-color 0.15s;
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-gallery-thumb.active { border-color: var(--green); }
.product-gallery-thumb:hover { border-color: var(--green); }
@media (min-width: 1024px) {
  .product-gallery {
    border-radius: 12px;
    border: 1px solid var(--color-border-tertiary);
  }
  .product-gallery-thumb { width: 70px; height: 70px; }
}

/* ── Magnifying zoom (desktop only) ─────────────────────────── */
.gallery-zoom-lens {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  box-sizing: border-box;
  z-index: 10;
}
.gallery-zoom-result {
  position: fixed;
  display: none;
  background: #fff no-repeat;
  border: 1px solid var(--color-border-secondary);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}

/* ─── PRODUCT SUMMARY (title block) ──────────── */
.product-summary {
  background: white;
  padding: 14px 16px 18px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
@media (min-width: 1024px) {
  .product-summary {
    background: transparent;
    padding: 0;
    border-bottom: none;
  }
}
.product-tags {
  display: flex; gap: 6px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.product-tag {
  background: var(--green-light);
  color: var(--green-dark);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.product-tag.new { background: var(--green); color: white; }
.product-h1 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
@media (min-width: 600px) {
  .product-h1 { font-size: 1.4375rem; }
}
@media (min-width: 1024px) {
  .product-h1 { font-size: 1.625rem; }
}
.product-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.product-meta .stars {
  color: #F5A623; letter-spacing: -1px;
}
.product-meta .review-count {
  color: var(--color-text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.product-meta .sep { color: var(--color-border-secondary); }
.product-meta .stock-in { color: var(--green-dark); font-weight: 600; }
.product-meta .id { color: var(--color-text-tertiary); }
.product-meta .listing-last-updated {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-text-tertiary);
  font-size: .75rem;
  cursor: default;
}

/* ─── PRICE SUMMARY ──────────────────────────── */
/* Flat layout (no inner box) — typography + brand color do the work. */
.product-price-summary {
  margin: 14px 0 10px;
  padding: 10px 14px;
  background: var(--green-light);
  border: 1px solid #BFE0CC;
  border-radius: 10px;
  display: block;
}
.product-price-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-dark);
  font-weight: 700;
  margin-bottom: 4px;
}
.product-price-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.product-price-from {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.product-price-low {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .product-price-low { font-size: 2.625rem; }
}
/* Taka mark - sized down relative to the number it sits beside, so the
   currency sign never competes with the price. Reused on the large prices
   (main price + sticky bar); em units keep it proportional at any size. */
.product-price-taka {
  font-size: 0.6em;
  font-weight: 700;
  margin-right: 0.12em;
  letter-spacing: normal;
}
.product-price-sep {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-weight: 400;
}
.product-price-high {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .product-price-high { font-size: 1.625rem; }
}
.product-price-range {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  align-self: center;
}
.product-price-range strong {
  color: var(--color-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.product-price-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}
.product-price-context {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 560px;
}
.product-reward-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #eaf7ec, #d4efd9);
  color: #1f7a37;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
}
.product-reward-points span { font-weight: 800; }

/* ─── QUICK ACTIONS (under price) ────────────── */
.product-quick-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}
.product-quick-btn {
  flex: 1;
  padding: 10px 14px;
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px;
  transition: border-color 0.15s, color 0.15s;
}
.product-quick-btn:hover { border-color: var(--green); color: var(--green-dark); }
.product-quick-btn .icon { display: inline-flex; align-items: center; }
.product-quick-btn.notify-btn-active {
  border-color: #149A49; color: #149A49; background: #f0fdf4;
}
.product-quick-btn.notify-btn-active:hover { background: #dcfce7; }
.notify-btn-check { display: inline-flex; align-items: center; color: #149A49; flex-shrink: 0; }
.notify-btn-price { font-weight: 700; }
.notify-remove-btn {
  padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px;
  background: #ef4444; color: #fff; border: none; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.notify-remove-btn:hover { background: #dc2626; }
.notify-remove-btn:disabled { opacity: .6; cursor: default; }

/* ─── SELLERS SECTION ────────────────────────── */
.sellers-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
@media (min-width: 1024px) {
  .sellers-section {
    border-radius: 12px;
    border: 1px solid var(--color-border-tertiary);
    margin-top: 16px;
    padding: 20px;
  }
}
.sellers-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.sellers-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.sellers-count {
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-left: 4px;
  text-transform: none;
  font-size: 0.8125rem;
}

.sellers-toolbar {
  display: flex; gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 19px;
}
.sellers-sort,
.sellers-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  min-height: 34px;
}
.sellers-sort .label { color: var(--color-text-tertiary); font-weight: 500; }
.sellers-sort .caret { color: var(--color-text-tertiary); font-size: 0.625rem; margin-left: 2px; }
.sellers-filter:hover,
.sellers-sort:hover { border-color: var(--green); color: var(--green-dark); }
.sellers-filter.active { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.sellers-filter .icon { display: inline-flex; align-items: center; }

/* ─── SELLER CARD ────────────────────────────── */
.seller-list { display: grid; gap: 10px; }
.seller {
  position: relative;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  padding: 14px;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (min-width: 600px) {
  .seller { padding: 16px; }
}
.seller:hover {
  border-color: var(--green);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* BOOSTED variant — orange tint, subtle, never deceptive */
.seller.boosted {
  background: linear-gradient(180deg, #FFF7EC 0%, #FFFDF8 100%);
  border-color: var(--orange);
}
.seller-boost-badge {
  position: absolute;
  top: -8px; left: 12px;
  background: var(--orange);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.seller-boost-badge::before { content: '&#9733;'; font-size: 0.6875rem; }

/* LOWEST PRICE pill — automatic, shown on the cheapest seller (when sort=lowest) */
.seller-best-badge {
  position: absolute;
  top: -8px; left: 12px;
  background: var(--green);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.seller-row1 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.seller-price {
  font-size: 1.25rem; font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.015em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seller-price .old {
  font-size: 0.8125rem;
  color: var(--orange-dark);
  text-decoration: line-through;
  text-decoration-color: var(--orange-dark);
  font-weight: 500;
  margin-left: 6px;
  opacity: 0.7;
}
.seller-price.no-price {
  font-size: 1rem;
  color: var(--orange-dark);
  font-weight: 700;
}
.seller-discount {
  font-size: 0.6875rem;
  background: var(--orange-light);
  color: var(--orange-dark);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap;
}

.seller-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.seller-verified-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  flex-shrink: 0;
}
.seller-loc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.seller-trust {
  display: flex; align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.seller-trust .stars { color: #F5A623; letter-spacing: -1px; font-size: 0.8125rem; }
.seller-trust .rating-num { color: var(--color-text-primary); font-weight: 700; }
.seller-trust .sep { color: var(--color-border-secondary); }
.seller-trust .age {}
.seller-trust .stock-in { color: var(--green-dark); font-weight: 600; }

/* Action row — flexes 1 button to full width, or 2 to 50/50 */
.seller-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}
@media (min-width: 600px) {
  .seller-actions { margin-top: 14px; }
}
.seller-btn {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 40px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.seller-btn-primary {
  background: var(--orange);
  color: white;
}
.seller-btn-primary:hover { background: var(--orange-dark); }
.seller-btn-secondary {
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
}
.seller-btn-secondary:hover { border-color: var(--green); color: var(--green-dark); }
.seller-btn-whatsapp {
  background: #25D366;
  color: white;
}
.seller-btn-whatsapp:hover { background: #1DA851; }
.seller-btn .icon { display: inline-flex; align-items: center; }
.seller-btn-cart {
  flex: 1;
  background: white;
  color: var(--green-dark);
  border: 1.5px solid var(--green);
  padding: 10px 12px;
}
.seller-btn-cart:hover {
  background: var(--green-light);
  border-color: var(--green-dark);
}
.seller-btn-cart .icon { display: inline-flex; align-items: center; }
@media (max-width: 360px) {
  .seller-btn-cart .label { display: none; }
}
.seller-btn-cart.cart-added {
  background: var(--green-light);
  border-color: var(--green-dark);
  color: var(--green-dark);
  pointer-events: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* ─── SHOW ALL / COMPACT MODE ────────────────── */
.sellers-show-more {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  background: white;
  border: 1px dashed var(--green);
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sellers-show-more:hover { background: var(--green-light); }

.seller-list-compact {
  display: none;
  margin-top: 10px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.seller-list-compact.open { display: block; }
.seller-row {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border-tertiary);
  background: white;
  text-decoration: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.seller-row:last-child { border-bottom: none; }
.seller-row:hover { background: var(--green-light); }
.seller-row-price {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seller-row-price.no-price {
  font-size: 0.8125rem;
  color: var(--orange-dark);
  font-weight: 700;
}
.seller-row-name {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-row-name .verified-mini {
  width: 12px; height: 12px;
  background: var(--orange);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5rem;
  flex-shrink: 0;
}
.seller-row-rating {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.seller-row-arrow { color: var(--color-text-tertiary); }

/* ─── PHONE-ONLY SELLERS HEADING ────────────── */
.sellers-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}
.sellers-section-divider::before,
.sellers-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-tertiary);
}

/* ─── STICKY BOTTOM PRICE BAR (mobile) ────────── */
.product-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--color-border-secondary);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 80;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.product-sticky-bar.visible { transform: translateY(0); }
.product-sticky-bar-left {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.product-sticky-bar-from {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.product-sticky-bar-price {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.product-sticky-bar-cta {
  background: var(--orange);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 42px;
  display: inline-flex; align-items: center; gap: 5px;
}
.product-sticky-bar-cta:hover { background: var(--orange-dark); }

/* Sticky bar shown on ALL screen sizes (was mobile-only).
   On desktop, center it within max-width and add corner radius for polish. */
@media (min-width: 1024px) {
  .product-sticky-bar {
    max-width: 640px;
    left: 50%;
    right: auto;
    transform: translate(-50%, 110%);
    bottom: 16px;
    border-radius: 14px;
    border: 1px solid var(--color-border-secondary);
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    padding: 12px 18px;
  }
  .product-sticky-bar.visible {
    transform: translate(-50%, 0);
  }
  body { padding-bottom: 0; }
}

/* ─── SPECIFICATIONS TABLE ──────────────────── */
.spec-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.spec-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 12px;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 8px;
  overflow: hidden;
}
.spec-table tr { border-bottom: 1px solid var(--color-border-tertiary); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table tr:nth-child(even) { background: #FAFBF7; }
.spec-table th, .spec-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.spec-table th {
  width: 40%;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: #F5F8EE;
}
.spec-table td { color: var(--color-text-primary); }
@media (min-width: 1024px) {
  .spec-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}

/* ─── OVERVIEW (merged review/key features) ─── */
.overview-section {
  background: white;
  margin-top: 8px;
  padding: 16px 16px 18px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}
.overview-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 10px;
}
.overview-section h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 16px 0 6px;
}
.overview-section p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.overview-section ul,
.overview-section ol {
  margin: 12px 0;
  padding-left: 22px;
}
.overview-section li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0 0 9px;
  padding-left: 2px;
}
.overview-section li:last-child {
  margin-bottom: 0;
}
.overview-section li strong,
.overview-section li b {
  font-weight: 700;
  color: var(--color-text-primary);
}
@media (min-width: 1024px) {
  .overview-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}

/* ─── FAQ ─────────────────────────────────────── */
.faq-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.faq-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 12px;
}
.faq-item {
  border-bottom: 1px solid var(--color-border-tertiary);
  padding: 12px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.faq-q::after { content: '+'; color: var(--color-text-tertiary); font-weight: 400; font-size: 1.25rem; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.65;
  display: none;
}
.faq-item.open .faq-a { display: block; }
@media (min-width: 1024px) {
  .faq-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}

/* ─── CONTENT WIDTH ON DESKTOP ─────────────── */
@media (min-width: 1024px) {
  .product-below {
    max-width: 1200px;
    margin: 16px auto 0;
    padding: 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .product-below > * { margin-top: 0; }
  .product-below .full-row { grid-column: 1 / -1; }
}

/* Add some bottom space so sticky bar doesn't cover content */
@media (max-width: 1023px) {
  body { padding-bottom: 70px; }
}

/* ─── REVIEWS & RATINGS ─────────────────────── */
.reviews-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.reviews-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 14px;
}
@media (min-width: 1024px) {
  .reviews-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}

.reviews-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: #FAFBF7;
  border-radius: 10px;
  border: 1px solid var(--color-border-tertiary);
  margin-bottom: 14px;
}
.reviews-score {
  text-align: center;
  padding-right: 16px;
  border-right: 1px solid var(--color-border-tertiary);
}
.reviews-score-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.reviews-score-stars {
  color: #F5A623;
  font-size: 0.9375rem;
  letter-spacing: -1px;
  margin-top: 4px;
}
.reviews-score-count {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.reviews-bars {
  display: flex; flex-direction: column;
  gap: 5px;
}
.reviews-bar {
  display: grid;
  grid-template-columns: 28px 1fr 30px;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.reviews-bar-label { font-weight: 600; color: var(--color-text-tertiary); }
.reviews-bar-track {
  height: 6px;
  background: var(--color-border-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.reviews-bar-fill {
  height: 100%;
  background: #F5A623;
  border-radius: 3px;
}
.reviews-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

.reviews-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
  margin-bottom: 14px;
}
.reviews-write-btn {
  flex: 1;
  padding: 11px 14px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 42px;
}
.reviews-write-btn:hover { background: var(--orange-dark); }
.reviews-write-btn.secondary {
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
}
.reviews-write-btn.secondary:hover {
  border-color: var(--green); color: var(--green-dark);
}

.reviews-tabs {
  display: flex; gap: 6px;
  overflow-x: auto;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-tabs::-webkit-scrollbar { display: none; }
.reviews-tab {
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.reviews-tab:hover { border-color: var(--green); color: var(--green-dark); }
.reviews-tab.active {
  background: var(--green-dark); color: white; border-color: var(--green-dark);
}

.reviews-list {
  display: flex; flex-direction: column;
}
.review {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.review:last-child { border-bottom: none; }
.review-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.review-avatar-q { background: var(--orange); }
.review-avatar-r { background: var(--green); }
.review-body { min-width: 0; }
.review-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.review-name {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}
.review-verified-badge {
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
}
.review-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.review-stars {
  color: #F5A623;
  font-size: 0.875rem;
  letter-spacing: -1px;
  margin-bottom: 5px;
}
.review-text {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0 0 6px;
}
.review-answer {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--green-light);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}
.review-answer-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 0.6875rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-answer p { margin: 0; }

.reviews-load-more {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  background: white;
  border: 1px dashed var(--green);
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.reviews-load-more:hover { background: var(--green-light); }

/* ─── REVIEWS EMPTY STATE ────────────────────────── */
.reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px 28px;
}
.reviews-empty-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #FFF8EE 0%, #FFF3E0 100%);
  border: 2px solid #FFE0A3;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(245,166,35,0.15);
}
.reviews-empty-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.reviews-empty-sub {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 340px;
  margin: 0 0 18px;
}
.reviews-empty-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 22px;
}
.reviews-empty-perk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #EEF7EE;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green-dark);
}
.reviews-empty-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 20px;
}
.reviews-empty-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(231,76,60,0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.reviews-empty-btn-primary:hover {
  background: var(--orange-dark, #c0392b);
  box-shadow: 0 6px 18px rgba(231,76,60,0.35);
}
.reviews-empty-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 20px;
  background: white;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-secondary);
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.reviews-empty-btn-secondary:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.reviews-empty-divider {
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
}
.reviews-empty-divider::before,
.reviews-empty-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-tertiary);
}
.reviews-empty-star-prompt {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.reviews-empty-stars-row {
  display: flex;
  gap: 6px;
  font-size: 1.75rem;
  cursor: pointer;
  margin-bottom: 4px;
}
.reviews-empty-star {
  color: #E0E0E0;
  transition: color 0.1s, transform 0.1s;
  line-height: 1;
  user-select: none;
}
.reviews-empty-star:hover,
.reviews-empty-star.hovered { color: #F5A623; transform: scale(1.15); }
.reviews-empty-star-hint {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  height: 16px;
}
@media (min-width: 600px) {
  .reviews-empty-cta { flex-direction: row; max-width: none; }
  .reviews-empty-divider { max-width: none; }
}


/* ─── RECENTLY VIEWED ───────────────────────── */
.recently-viewed {
  background: white;
  margin-top: 8px;
  padding: 12px 16px;
}
.recently-viewed h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .recently-viewed { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 16px 20px; margin-top: 16px; }
}
/* Recently Viewed:
   • Mobile: horizontal scroll carousel (swipe native, saves vertical space)
   • Desktop ≥600px: regular 4-col grid */
.recently-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* edge-to-edge bleed on mobile so cards look like they extend to screen edge */
  margin: 0 -16px;
  padding: 4px 16px 8px;
}
.recently-grid::-webkit-scrollbar { display: none; }
.recently-grid > .rv-card {
  flex: 0 0 36%;
  max-width: 150px;
  scroll-snap-align: start;
}
@media (min-width: 600px) {
  .recently-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .recently-grid > .rv-card {
    flex: initial;
    max-width: none;
  }
}
.rv-card {
  display: block;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rv-card:hover {
  border-color: var(--green);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.rv-card-img {
  width: 100%;
  padding-top: 80%;
  position: relative;
  background: #f5f7f4;
  overflow: hidden;
  flex-shrink: 0;
}
.rv-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}
.rv-card:hover .rv-card-img img { transform: scale(1.04); }
.rv-card-img-stub { width: 100%; height: 100%; }
.rv-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rv-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
  flex: 1;
}
.rv-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.rv-card-from {
  font-size: 0.6rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rv-card-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ─── MOBILE-ONLY TITLE BLOCK (above image) ──── */
.product-title-mobile {
  background: white;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.product-title-mobile .product-tags { margin-bottom: 8px; }
.product-title-mobile .product-h1 {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
@media (min-width: 600px) {
  .product-title-mobile .product-h1 { font-size: 1.375rem; }
}
@media (min-width: 1024px) {
  .product-title-mobile { display: none; }
  .product-title-desktop { display: revert; }
}
@media (max-width: 1023px) {
  .product-title-desktop { display: none !important; }
  .product-summary { padding-top: 12px; }
  .product-summary .product-h1 + .product-meta { margin-top: 0; }
}

/* ─── PRODUCT VIDEO SECTION (YouTube facade) ─── */
.product-video-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.product-video-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 12px;
}
@media (min-width: 1024px) {
  .product-video-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}
.product-video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.product-video-facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-video-facade::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 50%);
  pointer-events: none;
}
.product-video-facade-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(0,0,0,0.7);
  border: 2px solid white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.product-video-facade:hover .product-video-facade-play {
  background: var(--orange);
  transform: translate(-50%, -50%) scale(1.05);
}
.product-video-facade-play::before {
  content: '';
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent white;
  margin-left: 4px;
}
.product-video-caption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ─── RELATED LINK CHIPS ─────────────────────── */
.product-related {
  display: flex; gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-related::-webkit-scrollbar { display: none; }
.product-related-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--orange-light);
  color: var(--orange-dark);
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.product-related-chip:hover {
  background: var(--orange);
  color: white;
}
.product-related-chip .arr {
  font-weight: 400;
  opacity: 0.8;
  font-size: 0.6875rem;
  margin-left: 1px;
}
.product-lang-switch {
  display: flex; align-items: center; gap: 5px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-mid, #b7e4c7);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.product-lang-switch:hover {
  background: var(--green-dark);
  color: white;
}

/* ─── SELLER CARD — 2-COL LAYOUT ─────────────── */
/* Override: replace single-column seller card with 2-col layout
   (left: identity, right: price). Actions row spans full width below. */
.seller-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.seller-info { min-width: 0; }
.seller-info .seller-name,
.seller-info .seller-loc,
.seller-info .seller-trust { margin-bottom: 0; }
.seller-info .seller-name { margin-bottom: 4px; }
.seller-info .seller-loc { margin-bottom: 6px; }

.seller-price-block {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
  min-width: 130px;        /* keep right columns equal across cards for comparison */
}
@media (min-width: 600px) {
  .seller-price-block { min-width: 140px; }
}
.seller-price-block .seller-price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Inline price row: struck-through old price left, current price RIGHT.
   Right-alignment means current prices line up vertically across stacked cards
   → instant visual comparison of who's cheapest. */
.seller-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Reserve consistent slot heights so price blocks across cards line up.
   Missing old-price or save% will be empty but still take their slot. */
.seller-price-block .seller-price-old {
  font-size: 0.75rem;
  color: var(--orange-dark);
  text-decoration: line-through;
  text-decoration-color: var(--orange-dark);
  font-weight: 500;
  opacity: 0.7;
  display: inline-block;
}
.seller-price-block .seller-price-old:empty {
  display: none;
}
/* Legacy/alias: discount class is treated identically to save */
.seller-price-block .seller-discount {
  font-size: 0.6875rem;
  background: var(--orange-light);
  color: var(--orange-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  white-space: nowrap;
  align-self: flex-end;
}

/* When the seller is a "call for price" classified, price block becomes label */
.seller-price-block .seller-price.no-price {
  font-size: 0.875rem;
  color: var(--orange-dark);
  font-weight: 700;
  white-space: normal;
  text-align: right;
}

/* ─── PRICE RANGE STYLING (low–high in summary) ─ */
.product-price-sep {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 2px;
}
.product-price-high {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
@media (min-width: 1024px) {
  .product-price-high { font-size: 1.75rem; }
}

/* ─── COMPACT SELLER ROWS — denser, always-visible ─── */
/* Override grid: now [price · name+loc · rating · arrow] — 4 cols */
.seller-list-compact {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.seller-list-compact .seller-row {
  display: grid;
  grid-template-columns: 70px 1fr auto 12px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border-tertiary);
  text-decoration: none;
  color: var(--color-text-primary);
  background: white;
  transition: background 0.15s;
}
.seller-list-compact .seller-row:last-child { border-bottom: none; }
.seller-list-compact .seller-row:hover { background: var(--green-light); }

.seller-row-price {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.seller-row-price.no-price {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-dark);
  white-space: nowrap;
}

.seller-row-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-row-loc {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 0.75rem;
}
.seller-row-rating {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px;
}
.seller-row-stars { color: #F5A623; font-size: 0.8125rem; }
.seller-row-arrow {
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}
.verified-mini {
  width: 12px; height: 12px;
  background: var(--orange);
  color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Section divider */
.sellers-section-divider {
  padding: 9px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  background: #FAFBF7;
  border-bottom: 1px solid var(--color-border-tertiary);
  display: block;
}
.sellers-section-divider.phone-only-divider {
  background: var(--orange-light);
  color: var(--orange-dark);
  border-top: 1px solid var(--color-border-tertiary);
}

/* Hide the now-removed expand button (kept in CSS for back-compat if reintroduced) */
.sellers-show-more { display: none; }

/* Tighten on narrow phones */
@media (max-width: 380px) {
  .seller-list-compact .seller-row {
    grid-template-columns: 60px 1fr 12px;
    gap: 8px;
  }
  .seller-row-rating { display: none; }
}

/* ─── SELLER CARD — TABULAR 2-COL LAYOUT ─────────
   Left: identity + warranty + report (the "who" stuff).
   Right: price + old + save% + actions (the "money" stuff).
   Reads like a price-comparison table row.
   ═════════════════════════════════════════════════════════════ */
.seller-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 0;
}
.seller-info {
  display: flex; flex-direction: column;
  min-width: 0;
}
.seller-info .seller-name { margin-bottom: 4px; }
.seller-info .seller-loc { margin-bottom: 6px; }
.seller-info .seller-trust { margin-top: 5px; margin-bottom: 4px; }

/* Warranty / extra info chip — under ratings */
.seller-extras {
  display: flex; flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 0;
}
.seller-extra-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-light);
  padding: 3px 8px;
  border-radius: 11px;
  white-space: nowrap;
}
.seller-extra-chip .icon { display: inline-flex; align-items: center; }
.seller-extra-chip.warning {
  color: var(--orange-dark);
  background: var(--orange-light);
}

/* RIGHT side: price block + actions stacked.
   Compact green tinted box matching the top product price box style. */
.seller-price-block {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
  min-width: 110px;
  padding: 6px 10px;
  background: var(--green-light);
  border-radius: 8px;
  border: 1px solid #BFE0CC;
  flex-shrink: 0;
}
.seller-price-block .seller-price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.seller-price-block .seller-price-old {
  font-size: 0.75rem;
  color: var(--orange-dark);
  text-decoration: line-through;
  text-decoration-color: var(--orange-dark);
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.seller-price-block .seller-save {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--orange-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* Boosted card: orange-tinted price block instead of green */
.seller.boosted .seller-price-block {
  background: var(--orange-light);
  border-color: #F0C898;
}

/* Mobile: stack seller info above price block so long names never clash with wide price rows */
@media (max-width: 499px) {
  .seller-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .seller-price-block {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
  .seller-price-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Price freshness badge - shown only when aging/stale/expired */
.seller-freshness-badge {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 3px;
  margin-top: 4px;
  display: inline-block;
}
.freshness-aging  { background: #FEF9E7; color: #B7770D; border: 1px solid #F5D278; }
.freshness-stale  { background: #FEF3E2; color: #935D0A; border: 1px solid #ECA851; }
.freshness-expired { background: #FDEDEB; color: #922B21; border: 1px solid #E8928A; }

/* Larger price on bigger screens */
@media (min-width: 600px) {
  .seller-price-block { min-width: 140px; }
  .seller-price-block .seller-price { font-size: 1.5rem; }
}

/* Mobile: tighter min-width so the layout doesn't squeeze */
@media (max-width: 380px) {
  .seller-price-block { min-width: 96px; padding: 8px 10px; }
  .seller-price-block .seller-price { font-size: 1.1875rem; }
}

/* ─── SINGLE-SELLER MODE ────────────────────────
   When there's only 1 seller, hide comparison-only controls.
   Backend renders <body data-seller-mode="single"> on single-seller products.
   Dev note: see <!-- DEV NOTE --> below #sellerList for full logic.
   ─────────────────────────────────────────────── */
[data-seller-mode="single"] .sellers-toolbar { display: none; }
[data-seller-mode="single"] .sellers-count { display: none; }
[data-seller-mode="single"] .seller-best-badge { display: none; }
[data-seller-mode="single"] .seller-deal-badge { display: none; }
[data-seller-mode="single"] .seller-boost-badge { display: none; }
[data-seller-mode="single"] .seller.boosted .seller-price-block {
  /* No background — flat layout matches base seller-price-block */
  background: transparent;
  border: none;
}
[data-seller-mode="single"] .seller-list-compact { display: none; }
[data-seller-mode="single"] .sellers-show-more { display: none; }
[data-seller-mode="single"] .sellers-title::after {
  content: 'Available from';
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
[data-seller-mode="single"] .sellers-title > * { display: none; }

/* Single-seller summary block: change "Price Range" → "Price" via override class.
   Backend sets the textContent directly, this is just a visual hint */
[data-seller-mode="single"] .product-price-sep,
[data-seller-mode="single"] .product-price-high,
[data-seller-mode="single"] .product-price-range { display: none; }

/* ─── PHONE NUMBER IN COMPACT ROW ──────────────
   Visible inline so phone-only sellers see their number on the page.
   On narrow phones, the location hides first; phone always stays. */
.seller-row-phone {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .seller-list-compact .seller-row .seller-row-loc { display: none; }
}

/* ═══════════════════════════════════════════════
   COMPACT SELLER MINI-CARDS
   3-row layout: [name | price] · [phone · loc · &#9733;] · [actions]
   Smaller, denser than full cards, but NOT flat — they're cards.
   ═══════════════════════════════════════════════ */
.seller-list-compact {
  display: block;
  margin-top: 12px;
  border: none;
  background: transparent;
  overflow: visible;
  padding: 0;
}
.seller-list-compact > .seller-mini + .seller-mini { margin-top: 8px; }

.seller-mini {
  display: block;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 9px;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.seller-mini:hover {
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.seller-mini-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.seller-mini-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-mini-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  text-align: right;
  line-height: 1.1;
}
.seller-mini-price.no-price {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-dark);
}
.seller-mini-save {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--orange-dark);
  background: var(--orange-light);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
/* Old strikethrough price (when shown alongside save%) */
.seller-mini-old {
  font-size: 0.75rem;
  color: var(--orange-dark);
  text-decoration: line-through;
  text-decoration-color: var(--orange-dark);
  font-weight: 500;
  opacity: 0.7;
}
.seller-mini-row2 {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.seller-mini-row2 .sep { color: var(--color-border-secondary); }
.seller-mini-phone {
  color: var(--green-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.seller-mini-loc {}
.seller-mini-rating { display: inline-flex; align-items: center; gap: 2px; }
.seller-mini-stars { color: #F5A623; font-size: 0.8125rem; }
.seller-mini-age { color: var(--color-text-tertiary); }

.seller-mini-actions {
  display: flex; gap: 6px;
}

/* Smaller action button variant for mini-cards */
.seller-btn-sm {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.75rem;
  min-height: 32px;
  font-weight: 700;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
}
.seller-btn-sm .icon { display: inline-flex; align-items: center; }

/* On narrow phones: hide age + reduce row2 wrap */
@media (max-width: 380px) {
  .seller-mini-age { display: none; }
  .seller-mini-row2 .sep:nth-of-type(2) { display: none; }
}

/* ─── Override .product-below grid → stacked sections ──
   Spec, Key Features, and Overview have unequal heights.
   Stacking them full-width avoids awkward column gaps. */
@media (min-width: 1024px) {
  .product-below {
    display: block;  /* override the grid */
  }
  .product-below > * + * {
    margin: 16px 0;
  }
  /* Reviews + Recently Viewed stay full-width too — no special handling needed */
}

/* ─── KEY FEATURES (bullet list) ────────────── */
.features-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.features-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 12px;
}
@media (min-width: 1024px) {
  .features-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 22px; margin-top: 16px; }
}
.features-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 600px) {
  .features-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
}
.features-list li {
  position: relative;
  padding-left: 28px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-primary);
}
.features-list li::before {
  content: '';
  position: absolute;
  left: 6px; top: 0.5em;
  width: 14px; height: 14px;
  background: var(--green-light);
  border-radius: 50%;
  display: block;
}
.features-list li::after {
  content: '';
  position: absolute;
  left: 10px; top: calc(0.5em + 4px);
  width: 5px; height: 3px;
  border-left: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: rotate(-45deg);
}

/* ─── SHOW MORE SELLERS BUTTON ─────────────────
   Cap at 15 visible mini-cards; rest hidden behind this expand button. */
.sellers-show-more {
  display: flex;
  align-items: center; justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: white;
  border: 1px dashed var(--green);
  border-radius: 9px;
  color: var(--green-dark);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.sellers-show-more:hover { background: var(--green-light); }
.sellers-show-more[hidden] { display: none !important; }
.sellers-show-more.expanded .show-more-caret { transform: rotate(180deg); }
.show-more-caret { transition: transform 0.2s; }

/* Mini-cards beyond visibility cap (set by JS as data-hidden-by-cap="true") */
.seller-mini[data-hidden-by-cap="true"] { display: none; }
.sellers-section-divider[data-hidden-by-cap="true"] { display: none; }

/* ─── PAGE JUMP NAV (sticky after scroll past) ──
   Pill row that lets user jump between page sections.
   Becomes sticky once it scrolls past the site header.
   Position below pinned search bar (~62px tall when pinned).
   ────────────────────────────────────────────────── */
.product-jump-nav {
  background: white;
  border-top: 1px solid var(--color-border-tertiary);
  border-bottom: 1px solid var(--color-border-tertiary);
  position: sticky;
  top: 62px;       /* sit BELOW the pinned search bar */
  z-index: 700;    /* below search (z:800) but above content */
  /* Smooth shadow appears when stuck */
  transition: box-shadow 0.18s;
  max-width: 1200px;
  margin: 0 auto;
}
.product-jump-nav.is-stuck {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.product-jump-nav-inner {
  display: flex; gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
}
.product-jump-nav-inner::-webkit-scrollbar { display: none; }

.product-jump-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px;
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.product-jump-pill:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.product-jump-pill.active {
  background: var(--green-dark);
  color: white;
  border-color: var(--green-dark);
}
.product-jump-pill .icon { display: inline-flex; align-items: center; }
.product-jump-pill .count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.7;
  margin-left: 2px;
}
.product-jump-pill.active .count { opacity: 0.85; }

/* Add scroll-margin-top to all jump targets so sticky nav doesn't cover them.
   Cleared = sticky search (~62px) + jump nav (~50px) + small buffer */
#sellers, #specs, #features, #overview, #video, #reviews, #related,
.seller[id^="seller-"], .seller-mini[id^="seller-"] {
  scroll-margin-top: 120px;
}
@media (min-width: 1024px) {
  #sellers, #specs, #features, #overview, #video, #reviews, #related,
  .seller[id^="seller-"], .seller-mini[id^="seller-"] {
    scroll-margin-top: 130px;
  }
}

/* ─── SINGLE-SELLER TRUST BLOCK ──────────────
   Hidden by default; revealed in single-seller mode to fill the
   right column space and reassure the buyer at the conversion moment. */
.single-seller-trust { display: none; }
[data-seller-mode="single"] .single-seller-trust {
  display: block;
  margin-top: 16px;
  padding: 16px;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
}
.single-seller-trust-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.single-seller-trust-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.single-seller-trust-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.single-seller-trust-list li strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 1px;
}
.single-seller-trust-list .trust-icon {
  width: 26px; height: 26px;
  background: var(--green-light);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ─── SELLER SORT DROPDOWN MENU ──────────────── */
.sellers-toolbar { position: relative; }
.sellers-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 60;
  min-width: 200px;
  display: flex; flex-direction: column;
}
.sellers-sort-menu[hidden] { display: none; }
.sellers-sort-option {
  text-align: left;
  padding: 9px 12px;
  background: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sellers-sort-option:hover { background: var(--green-light); }
.sellers-sort-option.active {
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 700;
}
.sellers-sort-option.active::after {
  content: '\2713';
  color: var(--green-dark);
  font-weight: 900;
}

/* On mobile sort menu spans full width below */
@media (max-width: 600px) {
  .sellers-sort-menu {
    left: 0; right: 0;
    min-width: 0;
  }
}

/* Verified-only filter: hide cards without verified icon */
.seller[data-hidden-verified="true"],
.seller-mini[data-hidden-verified="true"] { display: none; }

/* ─── MOBILE: hide bottom tab bar when sticky seller bar is visible ──
   Both can't share the bottom of the screen. The seller bar is the
   conversion CTA — it wins when user is looking at the product.
   Body class .sticky-seller-bar-visible toggled by JS. */
@media (max-width: 1023px) {
  .mob-tab-bar { transition: transform 0.25s ease; }
  body.sticky-seller-bar-visible .mob-tab-bar {
    transform: translateY(110%);
  }
  /* Sticky seller bar above tab bar in z-stack so it definitely wins */
  .product-sticky-bar { z-index: 950; }
}

/* ─── JUMP NAV: tuck below when menus open ───
   The jump nav is sticky at top:62px with z-index 700. When any
   menu/sheet/dropdown opens (which use z-index 790+), the jump nav
   should NOT compete — set body class via JS to lower its z-index.
   
   Search dropdown, mega menu, region sheet all need to display ABOVE the jump nav. */
body.menu-open .product-jump-nav,
body:has(.search-backdrop.open) .product-jump-nav,
body:has(.mob-menu-overlay.open) .product-jump-nav,
body:has(.region-sheet-overlay.open) .product-jump-nav,
body:has(.filter-sheet-overlay.open) .product-jump-nav,
body:has(.cart-overlay.open) .product-jump-nav {
  z-index: 1;
}

/* JS-driven fallback for browsers without :has() support */
body.has-overlay-open .product-jump-nav {
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   REVIEW / QUESTION MODAL
   Mobile: bottom sheet (slide up from bottom)
   Desktop: centered dialog
   ═══════════════════════════════════════════════════════════ */
.rqmodal-overlay {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.32s, opacity 0.22s ease;
}
.rqmodal-overlay[hidden] {
  display: flex !important;  /* keep flex layout but hide */
}
.rqmodal-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.22s ease;
}
.rqmodal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}

.rqmodal-sheet {
  position: relative;
  background: white;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.rqmodal-overlay.open .rqmodal-sheet {
  transform: translateY(0);
}

@media (min-width: 600px) {
  .rqmodal-overlay {
    align-items: center;
    padding: 24px;
  }
  .rqmodal-sheet {
    border-radius: 14px;
    max-height: 84vh;
    transform: translateY(20px) scale(0.96);
  }
  .rqmodal-overlay.open .rqmodal-sheet {
    transform: translateY(0) scale(1);
  }
  .rqmodal-sheet-wide { max-width: 720px; }
}

/* Compare back button */
.rqmodal-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 4px 8px 4px 2px;
  font-size: 0.875rem; font-weight: 600; color: #149A49;
  cursor: pointer; border-radius: 6px; font-family: inherit;
}
.rqmodal-back-btn:hover { background: #f0fdf4; }

/* Compare result */
#cmpPageResult { display: flex; flex-direction: column; min-height: 0; position: relative; }
.cmp-result { overflow: auto; flex: 1; padding: 0 0 20px; }

/* Floating "More" scroll-down hint */
.cmp-more-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 8px);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: #149A49;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20,154,73,0.32), 0 2px 6px rgba(0,0,0,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
  z-index: 2;
}
.cmp-more-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.cmp-more-btn:hover { background: #0E7A38; }
.cmp-more-btn:active { transform: translate(-50%, 1px); }
.cmp-more-btn .cmp-more-icon {
  display: inline-flex;
}
.cmp-more-btn[aria-label="Scroll down for more"] .cmp-more-icon {
  animation: cmp-more-bounce 1.5s ease-in-out infinite;
}
@keyframes cmp-more-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.cmp-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  table-layout: fixed;
}
.cmp-table th, .cmp-table td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid #f3f4f6; word-break: break-word;
}
.cmp-col-label { width: 30%; color: #6b7280; font-weight: 600; font-size: 12px; }
.cmp-col-a, .cmp-col-b { width: 35%; }
.cmp-table thead th { background: #f9fafb; border-bottom: 2px solid #e5e7eb; position: sticky; top: 0; z-index: 1; }
.cmp-table tr:last-child td { border-bottom: none; }
.cmp-th-img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; display: block; margin: 0 0 8px; background: #f9fafb; padding: 4px; }
.cmp-th-name { font-size: 12px; font-weight: 700; color: #111827; line-height: 1.4; display: block; text-decoration: none; }
.cmp-th-name:hover { color: #149A49; }
.cmp-price-val { font-size: 14px; font-weight: 700; color: #149A49; }
.cmp-match { color: #9ca3af; }
.cmp-diff { font-weight: 600; color: #111827; }
.cmp-loading { text-align: center; padding: 40px 20px; color: #6b7280; font-size: 14px; }
.cmp-error { text-align: center; padding: 30px 20px; color: #dc2626; font-size: 14px; }

.rqmodal-handle {
  width: 36px; height: 4px;
  background: var(--color-border-secondary);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .rqmodal-handle { display: none; }
}

.rqmodal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.rqmodal-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.rqmodal-close {
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 1.125rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.rqmodal-close:hover {
  background: #F0EFEA;
  color: var(--color-text-primary);
}

.rqmodal-form {
  overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {
  .rqmodal-form { padding: 14px 16px; gap: 14px; }
}

.rqmodal-product {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: #FAFBF7;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 8px;
}
.rqmodal-product-thumb {
  width: 48px; height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  flex-shrink: 0;
}
.rqmodal-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.rqmodal-product-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.rqmodal-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.rqmodal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .rqmodal-field-row { grid-template-columns: 1fr; }
}

.rqmodal-label {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.rqmodal-label .label-text {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}
.rqmodal-required {
  color: var(--orange-dark);
  font-weight: 700;
}
.rqmodal-hint {
  color: var(--color-text-tertiary);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

.rqmodal-input,
.rqmodal-select,
.rqmodal-textarea {
  width: 100%;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 7px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.rqmodal-input:focus,
.rqmodal-select:focus,
.rqmodal-textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(20,154,73,0.12);
}
.rqmodal-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.rqmodal-char-count {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  text-align: right;
  margin: 0;
}

.rqmodal-locked-note {
  margin: 0;
  padding: 8px 10px;
  background: var(--green-light);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--green-dark);
  display: flex; align-items: center; gap: 6px;
}
.rqmodal-locked-note[hidden] { display: none; }
.rqmodal-locked-note .icon { font-size: 0.875rem; }

/* Stars */
.rqmodal-stars {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.rqmodal-star {
  background: transparent;
  border: none;
  color: var(--color-border-secondary);
  font-size: 1.875rem;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  transition: color 0.1s, transform 0.1s;
  font-family: inherit;
}
.rqmodal-star:hover { transform: scale(1.1); }
.rqmodal-star.filled,
.rqmodal-star[aria-checked="true"] {
  color: #F5A623;
}
.rqmodal-stars-label {
  margin-left: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* Action buttons */
.rqmodal-actions {
  display: flex; gap: 8px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-tertiary);
}
.rqmodal-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  min-height: 44px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rqmodal-btn-cancel {
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
}
.rqmodal-btn-cancel:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.rqmodal-btn-submit {
  background: var(--orange);
  color: white;
}
.rqmodal-btn-submit:hover { background: var(--orange-dark); }
.rqmodal-btn-submit:disabled {
  background: var(--color-border-secondary);
  cursor: not-allowed;
}

/* ── Mode-specific visibility ──
   Markup uses [data-mode-review] / [data-mode-question] attrs to mark
   elements that ONLY show in that mode. JS toggles modal[data-mode]. */
[data-mode-review], [data-mode-question] { display: none; }
.rqmodal-overlay[data-mode="review"] [data-mode-review] { display: block; }
.rqmodal-overlay[data-mode="question"] [data-mode-question] { display: block; }
/* For inline elements (spans inside labels), use inline */
.rqmodal-overlay[data-mode="review"] span[data-mode-review],
.rqmodal-overlay[data-mode="question"] span[data-mode-question] { display: inline; }
/* For <option>s, just remove from select if not active mode */
.rqmodal-overlay[data-mode="review"] option[data-mode-question],
.rqmodal-overlay[data-mode="question"] option[data-mode-review] { display: none; }

/* When seller is locked (e-com purchase), disable select + show note */
.rqmodal-overlay[data-seller-locked="true"] .rqmodal-select { display: none; }
.rqmodal-overlay[data-seller-locked="true"] #rqmodalSellerLockedNote { display: flex; }

/* ─── ICON-ONLY ACTION BUTTONS (mini cards) ───
   Compact 36×36 icon buttons. Visible label hidden but kept for a11y.
   Touch target: 36px is below ideal 44px but usable for secondary actions
   in dense lists. The PRIMARY action stays sized normally. */
.seller-btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 7px;
  flex: 0 0 auto;
  font-size: 0.9375rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.seller-btn-icon:hover { transform: scale(1.05); }
.seller-btn-icon .icon { font-size: 1rem; }
/* Visually hide the text label but keep it for screen readers */
.seller-btn-icon .visually-hidden,
.seller-btn-icon .btn-label-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Mini card layout: when actions row contains icon-buttons, align them
   inline with the price column on the right side of row1 */
.seller-mini-row1 {
  position: relative;
}
.seller-mini-icon-actions {
  display: flex; gap: 4px;
  margin-top: 4px;
}

/* When mini-card actions has Call(sm) + WhatsApp(icon), Call stretches to fill,
   icon button stays compact next to it */
.seller-mini-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.seller-mini-actions .seller-btn-sm {
  flex: 1;  /* explicit override — primary action takes remaining space */
}
.seller-mini-actions .seller-btn-icon {
  flex: 0 0 36px;
  height: 36px;
}

/* ─── DIFFERENTIATOR BADGES ─────────────────
   Each top-3 seller card earns a unique badge:
   • "Boosted" → orange-tint card + orange badge (paid placement)
   • "Lowest price" → green badge (cheapest by sort)
   • "Best deal" → orange badge (biggest discount %)
   • "Top rated" → green badge (highest rating, future use)
   • "Closest to you" → green badge (location-based, future)
   ─────────────────────────────────────────── */
.seller-deal-badge {
  position: absolute;
  top: -8px; left: 12px;
  background: var(--orange-dark);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.seller-toprated-badge {
  position: absolute;
  top: -8px; left: 12px;
  background: var(--green-dark);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ─── RELATED PRODUCTS ──────────────────────── */
.related-products,
.related-section {
  background: white;
  margin-top: 8px;
  padding: 16px;
}
.related-products h2,
.related-section h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .related-products,
  .related-section { border-radius: 12px; border: 1px solid var(--color-border-tertiary); padding: 20px 22px; margin-top: 16px; }
}

.related-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 4px 16px 8px;
}
.related-grid::-webkit-scrollbar { display: none; }
.related-grid > .rel-card {
  flex: 0 0 44%;
  max-width: 180px;
  scroll-snap-align: start;
}
@media (min-width: 600px) {
  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .related-grid > .rel-card { flex: initial; max-width: none; }
}
@media (min-width: 1024px) {
  .related-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}

.rel-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.rel-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.rel-card-img {
  width: 100%;
  padding-top: 80%;
  position: relative;
  background: #f5f7f4;
  overflow: hidden;
  flex-shrink: 0;
}
.rel-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}
.rel-card:hover .rel-card-img img { transform: scale(1.04); }
.rel-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rel-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
  flex: 1;
}
.rel-card-meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.rel-card-stars { color: #F5A623; letter-spacing: -1px; font-size: 0.75rem; }
.rel-card-rating { color: var(--color-text-primary); font-weight: 700; }
.rel-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 5px;
}
.rel-card-from {
  font-size: 0.6rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rel-card-price {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rel-card-disc {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 0.625rem;
  font-weight: 800;
  color: #fff;
  background: var(--orange-dark);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.rel-card-stalls {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--orange-dark);
  background: var(--orange-light);
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-block;
  align-self: flex-start;
  letter-spacing: 0.01em;
}

/* ─── REVIEWS — MULTI-CRITERIA SUMMARY ──────
   Aggregate breakdown: Overall, Product quality (common),
   Delivery (e-com), Seller behaviour (classified).
   Defends the product when delivery/service scores vary. */
.reviews-criteria {
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.reviews-criterion {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr 32px;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}
.reviews-criterion-name {
  color: var(--color-text-secondary);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
}
.reviews-criterion-tag {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--green-dark);
  background: var(--green-light);
}
.reviews-criterion-tag[title*="phone"] {
  color: var(--orange-dark);
  background: var(--orange-light);
}
.reviews-criterion-bar {
  height: 6px;
  background: #F0EFEA;
  border-radius: 3px;
  overflow: hidden;
}
.reviews-criterion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: 3px;
}
.reviews-criterion-score {
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Star distribution — collapsible */
.reviews-distribution {
  margin-top: 4px;
  flex-basis: 100%;
}
.reviews-distribution > summary {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  user-select: none;
}
.reviews-distribution > summary::-webkit-details-marker { display: none; }
.reviews-distribution-caret {
  display: inline-flex; align-items: center;
  color: var(--color-text-tertiary);
  transition: transform 0.15s;
}
.reviews-distribution[open] .reviews-distribution-caret { transform: rotate(180deg); }
.reviews-distribution[open] .reviews-bars { margin-top: 8px; }

/* ─── PER-REVIEW CRITERIA ROWS ────────────── */
.review-criteria {
  display: flex; flex-direction: column;
  gap: 3px;
  margin: 4px 0 8px;
}
.rc {
  display: grid;
  grid-template-columns: 110px auto;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
}
.rc-name {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.rc-stars {
  color: #F5A623;
  font-size: 0.875rem;
  letter-spacing: -1px;
}

/* "bought from {seller}" attribution */
.review-seller {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.review-seller a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}
.review-seller a:hover { text-decoration: underline; }

/* Make the summary block layout work better with criteria.
   On desktop: score on left, criteria + distribution on right. */
.reviews-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 600px) {
  .reviews-summary {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ─── MODAL MULTI-CRITERIA RATING ────────── */
.rqmodal-multistar {
  gap: 10px;
}
.rqmodal-criterion {
  display: grid;
  grid-template-columns: minmax(110px, 130px) 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border-tertiary);
}
.rqmodal-criterion:first-of-type { border-top: none; padding-top: 0; }
.rqmodal-criterion[hidden] { display: none; }
.rqmodal-criterion-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
/* Smaller stars within criterion rows */
.rqmodal-criterion .rqmodal-stars { gap: 2px; }
.rqmodal-criterion .rqmodal-star {
  font-size: 1.5rem;
  padding: 3px;
}

@media (max-width: 480px) {
  .rqmodal-criterion {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ─── REVIEWS PAGINATION (CSS + JS hybrid) ──
   ALL reviews server-rendered in HTML for Google indexing.
   JS adds data-hidden-by-cap="true" to reviews beyond cap; CSS hides them.
   Cursor scrolls to first newly-revealed review on expand.
   ────────────────────────────────────────────────── */
.reviews-list { position: relative; }
.reviews-list .review[data-hidden-by-cap="true"] { display: none; }

/* When all reviews fit in the visible count, hide the load-more button */
.reviews-load-more[hidden] { display: none !important; }

.reviews-load-more {
  display: flex;
  align-items: center; justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  background: white;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.reviews-load-more:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-light);
}

/* ─── INACTIVE-SELLER REVIEWS ──────────────
   Reviews from sellers no longer on BDStall:
   • Visible (it's still product feedback) but visually distinct
   • Excluded from default "Active sellers" tab
   • Excluded from aggregate score calculation by backend
   ────────────────────────────────────────── */
.review[data-seller-status="inactive"] {
  background: #FAFAF7;
  border-left: 3px solid var(--color-border-secondary);
  padding-left: 12px;
  opacity: 0.92;
}
.review[data-seller-status="inactive"] .review-text {
  color: var(--color-text-secondary);
}

.review-inactive-badge {
  display: inline-flex; align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  background: #F0EFEA;
  border: 1px solid var(--color-border-tertiary);
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Filter engine adds data-filter-hidden to reviews that don't match the active filter combo.
   Single source of truth — JS computes intersection of all active filters. */
.review[data-filter-hidden="true"] { display: none; }

/* Aggregate score: "active reviews" inline note + inactive reviews note below */
.reviews-score-count {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.reviews-score-count strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.reviews-inactive-info {
  width: 16px; height: 16px;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.reviews-inactive-info:hover {
  color: var(--green-dark);
  background: var(--green-light);
}

.reviews-score-inactive {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  margin-top: 6px;
  padding: 5px 10px;
  background: #FAFAF7;
  border-radius: 6px;
  display: inline-block;
}
.reviews-score-inactive strong {
  color: var(--color-text-secondary);
  font-weight: 700;
}

/* Tooltip popup for the info button */
.reviews-inactive-tooltip {
  position: absolute;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  line-height: 1.5;
  max-width: 280px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 50;
}
.reviews-inactive-tooltip[hidden] { display: none; }

/* ─── REVIEWS CONTEXT NOTE ──────────────────
   Honest framing under aggregate score.
   Acknowledges variability across sellers + tells buyer what to do. */
.reviews-context-note {
  margin: 14px 0 0;
  padding: 10px 14px;
  background: var(--green-light);
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--green-dark);
  display: flex; align-items: flex-start; gap: 8px;
}
.reviews-context-note .icon {
  font-size: 1rem;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--green-dark);
}
.reviews-context-note strong { font-weight: 700; }

/* ─── REVIEW SELLER LINK STYLES ────────────
   Active sellers: link, hover underline.
   Inactive sellers: greyed text, not clickable, with tooltip. */
.review-seller-link {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--green);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.review-seller-link:hover {
  color: var(--green);
  border-bottom-color: var(--green-dark);
  background: var(--green-light);
}

.review-seller-inactive {
  color: var(--color-text-tertiary);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--color-border-secondary);
  cursor: help;
  opacity: 0.85;
}

/* When user clicks a seller link, the target seller card briefly highlights */
@keyframes seller-card-highlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,154,73,0); }
  50% { box-shadow: 0 0 0 4px rgba(20,154,73,0.3); }
}
.seller.seller-flash, .seller-mini.seller-flash {
  animation: seller-card-highlight 1.4s ease-out;
}

/* ─── ACTIVE FILTER CHIP ──────────────────
   Shown above reviews list when filtered to one seller.
   Tap the ✕ to clear. */
.reviews-active-filter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--green-dark);
}
.reviews-active-filter[hidden] { display: none; }
.reviews-active-filter-label {
  flex: 1;
  min-width: 0;
}
.reviews-active-filter-label strong {
  font-weight: 700;
  color: var(--green-dark);
}
.reviews-active-filter-count {
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-left: 4px;
}
.reviews-active-filter-clear {
  background: white;
  border: 1px solid var(--green);
  color: var(--green-dark);
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.reviews-active-filter-clear:hover {
  background: var(--green-light);
}

/* When seller filter is active: hide reviews not matching */
.reviews-list[data-seller-filter] .review:not([data-seller-id]) { display: none; }
.reviews-list[data-seller-filter="depot"] .review:not([data-seller-id="depot"]) { display: none; }
.reviews-list[data-seller-filter="electrotech-bd"] .review:not([data-seller-id="electrotech-bd"]) { display: none; }
.reviews-list[data-seller-filter="bigraz-gallery"] .review:not([data-seller-id="bigraz-gallery"]) { display: none; }
/* The above are static demo rules. Real impl uses generic JS toggle (below). */

/* Generic JS-driven hide */
.review[data-hidden-by-seller-filter="true"] { display: none; }

/* ─── SELLER RATING LINK BUTTON (in seller cards) ────
   The &#9733; rating block in each seller card becomes a button:
   tap → filter reviews to this seller's reviews. */
.seller-rating-link {
  background: transparent;
  border: none;
  padding: 2px 6px 2px 0;
  margin: -2px -6px -2px 0;
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  color: inherit;
  transition: background 0.15s, color 0.15s;
}
.seller-rating-link:hover {
  background: var(--green-light);
  color: var(--green-dark);
}
.seller-rating-link:hover .rating-num,
.seller-rating-link:hover .rating-count {
  color: var(--green-dark);
}
.seller-rating-link .rating-count {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* ─── PER-REVIEW SELLER ACTIONS ──────────────
   Each review now shows two distinct actions when seller is active:
   • Contact seller → scrolls to seller card on this page (action zone)
   • Seller profile → links to /sellers/{slug} (their full track record)
   These are separate buttons so buyer's intent is unambiguous. */
.review-actions {
  display: inline-flex; align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
  font-size: 0.75rem;
}
.review-actions .sep {
  color: var(--color-border-secondary);
  margin: 0 -2px;
}
.review-action {
  display: inline-flex; align-items: center; gap: 4px;
  background: white;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.review-action:hover {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
}
.review-action-contact:hover {
  border-color: var(--orange);
  background: var(--orange-light);
  color: var(--orange-dark);
}
.review-action-count {
  color: var(--color-text-tertiary);
  font-weight: 500;
  font-size: 0.6875rem;
  margin-left: 2px;
}

/* "bought from" line: name styled as plain bold (not link) */
.review-seller-name {
  color: var(--color-text-primary);
  font-weight: 700;
}

/* Mobile: actions wrap onto a new line below the seller name for breathing room */
@media (max-width: 600px) {
  .review-actions {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
  }
}

/* ─── REVIEWS TOOLBAR ─────────────────────
   Tabs row + seller filter dropdown.
   On desktop: tabs on left, dropdown on right.
   On mobile: stacked. */
.reviews-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
.reviews-toolbar .reviews-tabs {
  margin: 0;
}

/* ─── SELLER FILTER DROPDOWN ──────────── */
.reviews-seller-filter {
  position: relative;
  flex-shrink: 0;
}
.reviews-seller-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.reviews-seller-filter-btn:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.reviews-seller-filter-btn.active {
  background: var(--green-dark);
  color: white;
  border-color: var(--green-dark);
}
.reviews-seller-filter-btn .icon { font-size: 0.875rem; }
.reviews-seller-filter-btn .caret {
  font-size: 0.75rem;
  transition: transform 0.15s;
}
.reviews-seller-filter-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.reviews-seller-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 5px;
  z-index: 60;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.reviews-seller-filter-menu[hidden] { display: none; }
.reviews-seller-filter-divider {
  height: 1px;
  background: var(--color-border-tertiary);
  margin: 4px 8px;
}
.reviews-seller-filter-option {
  text-align: left;
  padding: 8px 12px;
  background: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.reviews-seller-filter-option:hover { background: var(--green-light); }
.reviews-seller-filter-option.active {
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 700;
}
.reviews-seller-filter-option.active::after {
  content: '✓';
  color: var(--green-dark);
  font-weight: 900;
}
.reviews-seller-filter-option .opt-count {
  color: var(--color-text-tertiary);
  font-weight: 500;
  font-size: 0.75rem;
  margin-left: auto;
}
.reviews-seller-filter-option.active .opt-count {
  color: var(--green-dark);
}

@media (max-width: 600px) {
  .reviews-seller-filter-menu {
    right: auto; left: 0;
    width: calc(100vw - 32px);
  }
}

/* ─── SEE MORE FROM THIS SELLER (inline link below review) ──
   Shown only on the first review of a seller who has >1 review on THIS product.
   Tap → applies seller filter to the dropdown. */
.review-see-more-from-seller {
  margin: 8px 0 0;
}
.review-see-more-from-seller-btn {
  background: white;
  border: 1px dashed var(--green);
  color: var(--green-dark);
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex; align-items: center;
}
.review-see-more-from-seller-btn:hover {
  background: var(--green-light);
}

/* ─── REVIEWS TOOLBAR — MOBILE COMPACT ─────
   Tabs + seller filter dropdown all fit in 1 row on phones.
   Tabs become compact pills, count badges shrink. */
@media (max-width: 600px) {
  .reviews-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
    margin: 12px -16px 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .reviews-toolbar::-webkit-scrollbar { display: none; }

  .reviews-toolbar .reviews-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  .reviews-tab {
    padding: 6px 11px;
    font-size: 0.75rem;
    border-radius: 14px;
    flex-shrink: 0;
  }
  .reviews-tab-count {
    font-size: 0.6875rem;
    margin-left: 2px;
  }
  .reviews-seller-filter-btn {
    padding: 6px 11px;
    font-size: 0.75rem;
    border-radius: 14px;
    flex-shrink: 0;
  }
  .reviews-seller-filter-btn .icon { font-size: 0.8125rem; }
}

/* Classified-seller reviews can't be system-verified (no on-platform purchase record).
   Hide the "Verified buyer" badge if it accidentally appears on classified reviews. */
.review[data-seller-type="classified"] .review-verified-badge {
  display: none;
}

/* ─── ACTIVE-ONLY TOGGLE PILL ─────────────────
   Sits between the tabs and the seller dropdown.
   ON by default (hides reviews from inactive sellers). */
.reviews-active-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 18px;
  padding: 7px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.reviews-active-toggle:hover {
  border-color: var(--green);
  color: var(--green-dark);
}
.reviews-active-toggle.active {
  background: var(--green-dark);
  color: white;
  border-color: var(--green-dark);
}
.reviews-active-toggle .check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  color: var(--green-dark);
  font-size: 0.6875rem;
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.15s;
}
.reviews-active-toggle.active .check { opacity: 1; }

/* Right side group (toggle + dropdown) */
.reviews-filters-right {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* Mobile single-row scroll for the whole toolbar */
@media (max-width: 600px) {
  .reviews-toolbar {
    display: flex;
    flex-wrap: nowrap;
  }
  .reviews-active-toggle {
    padding: 6px 11px;
    font-size: 0.75rem;
    border-radius: 14px;
    flex-shrink: 0;
  }
  .reviews-active-toggle .check { width: 12px; height: 12px; font-size: 0.625rem; }
}

/* ─── CLASSIFIED SELLER CARDS — HIDE WARRANTY/RETURN CHIPS ──
   Classified sellers transact off-platform → BDStall can't enforce warranty
   or return claims. Showing these chips creates false expectations.
   E-com sellers (Buy Now → on-platform checkout) keep their chips since
   the platform CAN enforce returns and warranty claims.
   ─────────────────────────────────────────── */
.seller[data-seller-type="classified"] .seller-extras {
  display: none;
}

/* ─── SELLER TYPE CHIP ─────────────────────
   Small uppercase chip near seller name distinguishing transaction model:
   • E-com → "🛒 Online order" — green chip, signals on-platform protection
   • Classified → "📞 Classified" — orange chip, signals off-platform contact
   Provides upfront clarity so buyer knows what experience to expect. */
.seller-type-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 4px;
  white-space: nowrap;
}
.seller-type-chip-ecom {
  color: var(--green-dark);
  background: var(--green-light);
  border: 1px solid #BFE0CC;
}
.seller-type-chip-classified {
  color: var(--orange-dark);
  background: var(--orange-light);
  border: 1px solid #F0C898;
}

/* Mini cards: skip the chip — info density doesn't allow it.
   Mini cards already differentiate via visible buttons (Buy Now vs Call). */
.seller-mini .seller-type-chip { display: none; }

/* ─── SELLER CARD TOP GAP ──────────────────
   Cards were touching — add breathing room between full seller cards. */
.seller + .seller {
  margin-top: 12px;
}
@media (min-width: 600px) {
  .seller + .seller { margin-top: 14px; }
}

/* ─── SELLER PRICE-UPDATED BADGE ──────────────
   Shows when seller last updated their price/listing.
   Critical for both sides:
   • Buyers: "is this price still current before I call?"
   • Sellers: "my listing looks fresh → more calls"
   Only show within last 30 days — beyond that, hide (stale = negative signal).
   CSS class reused from .seller-joined-badge for compatibility. */
.seller-joined-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--green-dark);
  white-space: nowrap;
}
.seller-joined-badge::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}

/* seller-last-active: removed — replaced by seller-joined-badge showing price update time */

/* -- REPORT BUTTON -- pill badge, muted until hovered */
.seller-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  background: #F3F4F6;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seller-report-btn:hover {
  background: #FFF4EC;
  color: #C04E00;
  border-color: #FCD9C0;
}
.seller-report-btn .icon {
  font-size: 0.6875rem;
  line-height: 1;
}
/* -- CONDITION BADGE (New / Used) -- */
.condition-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.condition-new {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #6EE7B7;
}
.condition-used {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

/* ─── MINI CARD PRICE-UPDATE TIME ──────────
   SVG clock + "Updated Xh ago" — muted gray, secondary info.
   Same visual language as full seller cards' price-block footer. */
.seller-mini-updated {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
}
.seller-mini-updated .icon-clock {
  width: 9px; height: 9px;
  flex-shrink: 0;
}
@media (max-width: 360px) {
  .seller-mini-updated { display: none; }
}

/* ─── TRUST ROW (back to clean: just rating) ──
   Trust row contains only the star rating button.
   Update time + Report sit on their own meta row below. */
.seller-trust {
  display: flex; align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

/* ─── META ROW (under trust) ──
   Holds: 🕐 2h ago · ⚑ Report
   Grouped together at left like sibling metadata; no auto-stretch. */
.seller-meta-row {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 5px;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  overflow: hidden;
}
.seller-meta-row .meta-sep {
  color: var(--color-border-secondary);
  font-weight: 400;
}
.seller-meta-row .seller-price-updated {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.seller-meta-row .seller-price-updated .icon-clock {
  width: 10px; height: 10px;
  flex-shrink: 0;
  vertical-align: -1px;
}
.seller-meta-row .seller-report-btn {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── EXTRAS NOW IN RIGHT COLUMN ──
   Warranty/delivery chips moved under price block.
   Tight spacing so they sit close to the price (not floating below).
   On classified cards still hidden via existing rule (data-seller-type). */
.seller-price-block .seller-extras {
  margin-top: 4px;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.seller-price-block .seller-extra-chip {
  font-size: 0.625rem;
  padding: 2px 6px;
  line-height: 1.3;
}

/* ─── SELLER DETAILS (expandable insight panel) ──
   E-com seller cards only. Hidden by default; toggle reveals 3 stats.
   No height when collapsed → card stays compact. */
.seller-details {
  margin-top: 8px;
  width: 100%;
}
.seller-details-toggle {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.seller-details-toggle::-webkit-details-marker { display: none; }
.seller-details-toggle::marker { display: none; }
.seller-details-toggle:hover { text-decoration: underline; }
.seller-details-toggle .caret {
  font-size: 0.625rem;
  transition: transform 0.15s;
}
.seller-details[open] .seller-details-toggle .caret {
  transform: rotate(180deg);
}

.seller-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: var(--green-light);
  border-radius: 8px;
}
@media (max-width: 480px) {
  .seller-details-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.seller-stat {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.seller-stat-icon {
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.seller-stat-body {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.seller-stat-value {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seller-stat-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

/* ─── SPACE OPTIMIZATIONS (top-card review) ──
   1. Save% inline with old/new price: -22px per card with discount
   2. Location inline with rating: -22px per card (was its own line)
   3. Tighter action margin-top: -4px per card */

/* 1. Save badge sits left of old price (inline) instead of below */
.seller-price-row .seller-save {
  font-size: 0.6875rem;
  background: var(--orange-light);
  color: var(--orange-dark);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  align-self: center;        /* vertically center against the prices */
  white-space: nowrap;
}
.seller-price-row .seller-save:empty { display: none; }

/* 2. Location inline with rating row */
.seller-trust-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.seller-info .seller-trust { margin-bottom: 4px; }     /* was 8px when separate */

/* Variation tag */
.seller-variation-tag { display: inline-block; margin-top: 3px; font-size: 0.8125rem; font-weight: 600; color: #1d4ed8; }

/* Specialist badge */
.seller-specialist-row { margin-top: 3px; }
.specialist-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 5px;
  padding: 1px 7px 1px 5px;
  white-space: nowrap;
  line-height: 1.6;
}
.specialist-badge--strong {
  color: #78350f;
  background: #fffbeb;
  border-color: #f59e0b;
}
.specialist-badge-icon {
  display: inline-flex;
  align-items: center;
  color: #f59e0b;
  flex-shrink: 0;
}

/* 3. Tighten action margin-top */
.seller-actions { margin-top: 10px; }
@media (min-width: 600px) {
  .seller-actions { margin-top: 12px; }
}

/* ─── NOTIFY ON PRICE DROP MODAL ─── */
.notify-contact-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0 0 12px;
}
.notify-contact-option {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.notify-contact-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.notify-contact-option:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green-dark);
}
.notify-contact-option .icon { font-size: 0.9375rem; }

.notify-price-input-wrap {
  position: relative;
  display: flex; align-items: stretch;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.notify-price-input-wrap:focus-within { border-color: var(--green); }
.notify-price-currency {
  display: flex; align-items: center;
  padding: 0 14px;
  background: var(--color-bg-subtle);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  border-right: 1px solid var(--color-border-tertiary);
}
.notify-price-input {
  flex: 1;
  border: none !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  font-variant-numeric: tabular-nums;
}
.notify-price-input:focus { outline: none; }
.notify-price-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}
.notify-price-hint strong {
  color: var(--green-dark);
  font-weight: 700;
}

.rqmodal-fineprint {
  margin: 12px 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  text-align: center;
}

.notify-success {
  text-align: center;
  padding: 12px 0;
}
.notify-success-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 12px;
}
.notify-success-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
}
.notify-success-msg {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.notify-success-msg strong {
  color: var(--green-dark);
  font-weight: 700;
}

/* ─── COMPARE WITH SIMILAR MODAL ─── */
.compare-current {
  margin-bottom: 14px;
}
.compare-current-label,
.compare-suggestions-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin-bottom: 8px;
}
.compare-product-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.compare-product-card:hover {
  border-color: var(--green);
  background: var(--green-light);
}
.compare-product-card-current {
  background: var(--green-light);
  border-color: var(--green);
  cursor: default;
}
.compare-product-card-current:hover { background: var(--green-light); }
.compare-product-card input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.compare-product-card:has(input:checked) {
  border-color: var(--green-dark);
  background: var(--green-light);
  box-shadow: inset 0 0 0 1px var(--green-dark);
}
.compare-product-img {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #ECEAE3 0%, #DDDAD0 100%);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}
.compare-product-img img {
  width: 48px; height: 48px;
  object-fit: contain;
  display: block;
}
.compare-no-suggestions {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  padding: 12px 0;
}
.compare-product-body {
  flex: 1; min-width: 0;
}
.compare-product-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-product-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.compare-product-price strong {
  color: var(--green-dark);
  font-weight: 700;
}
.compare-product-rating {
  color: var(--orange-dark);
  font-weight: 600;
}
/* Select page fills the sheet so the action row stays pinned and the
   list scrolls instead of pushing the Compare button off-screen. */
#cmpPageSelect {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.compare-suggestions-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.rqmodal-submit-btn:disabled {
  background: var(--color-border-secondary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Input error flash for validation */
.rqmodal-input-error {
  border-color: var(--orange-dark) !important;
  animation: input-shake 0.4s;
}
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ─── MODAL CONTENT PADDING (Notify + Compare modals) ──
   Existing .rqmodal-form has its own 16px padding.
   Other content (intro paragraph, current product, suggestions list, action row)
   sits directly in the sheet and needs equivalent padding. */
.rqmodal-context {
  margin: 0;
  padding: 12px 16px 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.rqmodal-form {
  padding: 14px 16px 16px;
}

/* Submit row: padding around action buttons */
.rqmodal-submit-row {
  display: flex; align-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--color-border-tertiary);
  flex-shrink: 0;
  background: white;
}
.rqmodal-cancel-btn {
  padding: 11px 16px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.rqmodal-cancel-btn:hover {
  background: #F5F4F0;
  border-color: var(--color-text-secondary);
}
.rqmodal-submit-btn {
  flex: 1;
  padding: 12px 16px;
  background: var(--green-dark);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s;
}
.rqmodal-submit-btn:hover { background: var(--green); }
.rqmodal-submit-btn .icon { font-size: 0.9375rem; }

/* Notify form: when form is hidden and success panel is shown, add padding */
.notify-success {
  padding: 24px 16px;
}

/* Compare modal: padding for the inner regions */
.compare-current,
.compare-suggestions {
  padding: 0 16px;
}
.compare-current { padding-top: 12px; flex-shrink: 0; }
/* Suggestions region is the flexible, scrollable part of the select page */
.compare-suggestions {
  padding-bottom: 4px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.compare-suggestions-label { flex-shrink: 0; }

/* Form fields helper styling */
.rqmodal-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.rqmodal-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.rqmodal-input {
  padding: 11px 14px;
  background: white;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text-primary);
  transition: border-color 0.15s;
  width: 100%;
}
.rqmodal-input:focus {
  outline: none;
  border-color: var(--green);
}


/* ── Legacy jQuery fade modals (Bootstrap not loaded) ─────── */
#buyNowModal,
#reportPriceModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#buyNowModal .modal-dialog,
#reportPriceModal .modal-dialog {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  overflow: hidden;
}
#buyNowModal .modal-header,
#reportPriceModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
#buyNowModal .modal-title,
#reportPriceModal .modal-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}
#buyNowModal .modal-body,
#reportPriceModal .modal-body {
  padding: 18px;
}
#buyNowModal .modal-body label,
#reportPriceModal .modal-body label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 10px 0 4px;
  color: var(--color-text-secondary);
}
#buyNowModal .modal-body input,
#buyNowModal .modal-body select,
#reportPriceModal .modal-body input,
#reportPriceModal .modal-body select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  box-sizing: border-box;
}
#buyNowModal .modal-footer,
#reportPriceModal .modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border-tertiary);
}
#buyNowModal .modal-footer .btn,
#reportPriceModal .modal-footer .btn {
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
#buyNowModal .btn-info,
#reportPriceModal .btn-primary {
  background: var(--green);
  color: white;
}
#reportPriceModal .btn-secondary,
#buyNowModal .close,
#reportPriceModal .close {
  background: #f0f0f0;
  color: var(--color-text-primary);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 1rem;
  cursor: pointer;
}

/* ── Variant modal body (color/size/qty picker) ─────────────── */
.vmodal-body { padding: 0; }
.vmodal-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.vmodal-section:last-child { border-bottom: none; }
.vmodal-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 10px;
}
.vmodal-label strong { color: var(--color-text-primary); font-weight: 700; }
.vmodal-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vmodal-color-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 2px solid var(--color-border-tertiary);
  border-radius: 8px;
  background: #fafbf7;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.6875rem;
  color: var(--color-text-primary);
  transition: border-color 0.15s, background 0.15s;
  min-width: 72px;
}
.vmodal-color-img-wrap {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.vmodal-color-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vmodal-color-tile span {
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vmodal-color-tile:hover { border-color: var(--green); background: var(--green-light); }
.vmodal-color-tile.selected { border-color: var(--green); background: var(--green-light); }
.vmodal-size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vmodal-size-chip {
  padding: 6px 14px;
  border: 1.5px solid var(--color-border-secondary);
  border-radius: 20px;
  background: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vmodal-size-chip:hover { border-color: var(--green); color: var(--green-dark); }
.vmodal-size-chip.selected { border-color: var(--green); background: var(--green); color: white; font-weight: 600; }
.vmodal-qty-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--color-border-secondary);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.vmodal-qty-btn {
  width: 40px; height: 40px;
  background: #f5f5f5;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
}
.vmodal-qty-btn:hover { background: #e8e8e8; }
.vmodal-qty-val {
  min-width: 44px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  padding: 0 4px;
  user-select: none;
}
.vmodal-submit-btn {
  flex: 1;
  padding: 11px 18px;
  border-radius: 7px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: var(--green);
  color: white;
  transition: background 0.15s;
}
.vmodal-submit-btn:hover { background: var(--green-dark); }
.vmodal-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }