/* ==========================================================================
   TAHAM TECH BD - COMPONENT STYLESHEET
   Strictly wired to tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE & RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  /* clip (not hidden): hidden makes body a scroll container, which breaks
     position: sticky for the PDP gallery / checkout summary */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-family-body);
  background: var(--color-canvas);
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

/* Brand-tinted text selection & accessible keyboard focus */
::selection {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-sunken);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-primary);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* --------------------------------------------------------------------------
   3. PRESTIGE HEADER & LIVE SEARCH
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  z-index: var(--z-fixed);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.header-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-6);
}

/* Brand Logo (official Taham Tech wordmark) */
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  user-select: none;
}

.brand-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.02);
}

/* Dark header/footer: swap to the variant with a light "TECH" wordmark */
[data-theme="dark"] .brand-logo-img {
  content: url('assets/taham-logo-dark.webp?v=6ac1649e9cb4f40008e09077');
}

.brand-tagline {
  font-size: var(--font-size-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  margin-top: 2px;
}

/* Header Search Bar */
.header-search-wrap {
  flex: 1;
  min-width: 260px;
  max-width: 580px;
  position: relative;
  display: flex;
  align-items: center;
}

.header-search-container {
  flex: 1;
  min-width: 0;
  width: 100%;
  position: relative;
}

.search-input-pill {
  width: 100%;
  height: 46px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-12) 0 var(--space-10);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  /* Truncate long placeholders without clipping mid-glyph. */
  text-overflow: ellipsis;
}

.search-input-pill:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--color-brand-outline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.search-icon-left {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-shortcut-hint {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  font-family: var(--font-family-mono);
  pointer-events: none;
}

/* Live Search Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-height: 420px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
}

.search-results-dropdown.active {
  display: block;
  animation: dropdownIn var(--motion-fast);
}

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

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  cursor: pointer;
}

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

.search-result-item:hover {
  background: var(--color-surface-subtle);
}

.search-result-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.search-result-price {
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
}

/* Header Action Buttons */
.header-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.accent-picker { flex-shrink: 0; }
.header-action-btn.accent-picker-trigger { color: var(--color-brand-text); }
.accent-picker-trigger[aria-expanded="true"] { border-color: var(--color-brand-outline); }
.accent-picker-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: var(--z-dropdown);
  width: 240px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}
.accent-picker-panel[hidden] { display: none; }
.accent-picker-label { display: block; margin-bottom: 12px; font-size: var(--font-size-sm); font-weight: 700; }
.accent-picker-value { display: flex; align-items: center; gap: 12px; }
.accent-picker-value input {
  width: 48px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-base);
  cursor: pointer;
}
.accent-picker-value output { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.accent-picker-reset {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.accent-picker-reset:hover:not(:disabled) { border-color: var(--color-brand-outline); background: var(--color-brand-subtle); }
.accent-picker-reset:disabled { opacity: .5; cursor: default; }
.background-picker, .site-color-picker-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-default); }
@media (max-width: 480px) {
  .style-toggle-btn span { display: none; }
  .style-toggle-btn { width: 40px; padding: 0; }
}

.style-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.style-toggle-btn:hover, .style-toggle-btn[aria-pressed="true"] {
  border-color: var(--color-brand-outline);
  color: var(--color-brand-text);
}
.style-toggle-btn[aria-pressed="true"] .style-toggle-fill { fill: none; }

.header-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  position: relative;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.header-action-btn:hover {
  background: var(--color-surface-base);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-text);
  transform: translateY(-1px);
}

.header-action-btn.header-compare-trigger,
.header-action-btn.header-compare-trigger:hover,
.header-action-btn.header-compare-trigger[aria-current="page"] {
  position: relative;
  flex-shrink: 0;
  width: auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-brand-outline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-brand-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.compare-badge-count[hidden] { display: none !important; }

.header-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--primitive-brand-500);
  color: var(--color-brand-contrast);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--header-bg);
}

/* Cart header icon with floating item count */
.header-cart-trigger {
  flex-shrink: 0;
  padding: 0;
}

/* Secondary Navigation / Categories Bar */
.secondary-nav-bar {
  background: var(--subnav-bg);
  border-bottom: 1px solid var(--subnav-border);
  font-size: var(--font-size-sm);
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

.secondary-nav-bar > .container { position: relative; }

.secondary-nav-inner {
  display: flex;
  align-items: center;
  height: var(--subnav-height);
  gap: var(--space-4);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scrollbar-width: none;
}
.secondary-nav-inner::-webkit-scrollbar {
  display: none;
}

.nav-category-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-inline: auto;
}

.nav-cat-item {
  padding: var(--space-2) var(--space-3);
  color: var(--subnav-text);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--font-size-xs);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-cat-item:hover, .nav-cat-item.active {
  color: var(--color-brand-text);
  background: var(--color-brand-subtle);
}

.cat-pill-badge {
  font-size: var(--font-size-2xs);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.badge-hot { background: var(--color-brand-primary); color: var(--color-brand-contrast); }
.badge-emi { background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent); color: var(--color-brand-text); }
.badge-new { background: var(--primitive-emerald-500); color: #ffffff; }


/* --------------------------------------------------------------------------
   5. HERO BENTO GRID & PROMO SHOWCASE
   -------------------------------------------------------------------------- */
.hero-section {
  padding: var(--space-8) 0 var(--space-6);
}

.hero-bento-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: var(--space-4);
}

@media (max-width: 960px) {
  .hero-bento-grid {
    grid-template-columns: 1fr;
  }
}

/* Main Flagship Hero Card */
.hero-card-primary {
  background: linear-gradient(135deg, #f8f9fa 0%, #edf1f7 100%);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
}

/* Full-bleed banner images (bento hero + promo tiles) */
.bento-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-banner-img-primary {
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.promo-tile-card .bento-banner-img {
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

[data-theme="dark"] .hero-card-primary {
  background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 60%), #141417;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.hero-card-primary > div {
  max-width: 56%;
  z-index: 2;
  position: relative;
}

@media (max-width: 768px) {
  .hero-card-primary > div {
    max-width: 100%;
  }
}

.hero-tagline-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-brand);
  width: fit-content;
  margin-bottom: var(--space-4);
}

.hero-title {
  font-family: var(--font-family-display);
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.hero-title span {
  background: linear-gradient(135deg, var(--primitive-brand-300), var(--color-brand-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: var(--space-6);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  z-index: 2;
}



/* Secondary Promo Stack */
.hero-bento-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.promo-tile-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  min-height: 205px;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .promo-tile-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.promo-tile-card:hover {
  transform: none;
  box-shadow: var(--card-shadow-hover);
}

.promo-tile-card.dark-contrast {
  background: #0d0d0d;
  border-color: #1f1f1f;
  color: #ffffff;
}

.promo-tile-info {
  z-index: 2;
  max-width: 60%;
}

.promo-badge-pill {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-2);
}

.promo-tile-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.promo-tile-price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  margin-bottom: var(--space-4);
}

.promo-tile-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.25));
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.promo-tile-card:hover .promo-tile-img {
  transform: scale(1.08) rotate(3deg);
}

/* --------------------------------------------------------------------------
   6. 5-PILLAR VALUE TRUST BAR (Apple Gadgets style)
   -------------------------------------------------------------------------- */
.trust-pillars-bar {
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
}

.trust-pillars-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .trust-pillars-inner {
  background: var(--card-bg);
  border-color: var(--card-border);
}

@media (max-width: 960px) {
  .trust-pillars-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .trust-pillar-item:last-child {
    grid-column: 1 / -1;
  }
}

.trust-pillar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
}

.trust-pillar-icon {
  width: 44px;
  height: 44px;
  background: var(--color-surface-elevated);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-text);
  font-size: var(--font-size-xl);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.trust-pillar-text h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.trust-pillar-text p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. CATEGORY RACK (Diamu style)
   -------------------------------------------------------------------------- */
.category-rack-section {
  padding: var(--space-6) 0 var(--space-10);
}

.section-header-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.section-title-group h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.section-title-group h2 span {
  color: var(--color-brand-text);
}

.section-title-group p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 4px;
}

.category-squircle-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1200px) {
  .category-squircle-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .category-squircle-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.category-squircle-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  cursor: pointer;
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .category-squircle-card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.category-squircle-card:hover {
  transform: none;
  border-color: var(--color-brand-outline);
  box-shadow: var(--card-shadow-hover);
}

.category-squircle-card.active {
  border-color: var(--color-brand-outline);
  background: var(--color-brand-subtle);
}

.category-squircle-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.category-squircle-card:hover .category-squircle-img {
  transform: scale(1.1);
}

.category-squircle-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   8. GADGET PRODUCT CARD COMPONENT
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.product-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .product-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}

.product-card:hover {
  transform: none;
  border-color: var(--color-brand-outline);
  box-shadow: var(--card-shadow-hover);
}

[data-theme="dark"] .product-card:hover {
  border-color: var(--color-brand-outline);
  box-shadow: var(--card-shadow-hover);
}

.product-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.badge-pill {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}

.badge-discount {
  background: var(--comp-badge-discount-bg);
  color: var(--comp-badge-discount-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.badge-warranty {
  background: var(--comp-badge-warranty-bg);
  color: var(--comp-badge-warranty-text);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-stock {
  background: var(--comp-badge-stock-bg);
  color: var(--comp-badge-stock-text);
}

.product-wishlist-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.product-wishlist-btn:hover, .product-wishlist-btn.active {
  color: var(--color-brand-text);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-color: var(--color-brand-outline);
  transform: scale(1.1);
}

/* Card Image & Quick View Overlay */
.product-card-media {
  position: relative;
  height: 200px;
  background: transparent;
  border: none;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  overflow: hidden;
}

.product-card-thumb {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.06));
}

.product-card:hover .product-card-thumb {
  transform: scale(1.08);
}

.product-card-quick-actions {
  position: absolute;
  bottom: var(--space-2);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  transform: translateY(120%);
  opacity: 0;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  z-index: 4;
}

.product-card:hover .product-card-quick-actions {
  transform: translateY(0);
  opacity: 1;
}

.card-action-btn {
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.card-action-btn:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-outline);
}

/* Card Details */
.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-brand-tag {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.product-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  overflow-wrap: anywhere;
}

.product-card-title:hover {
  color: var(--color-brand-text);
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--primitive-amber-500);
  margin-bottom: var(--space-3);
}

.rating-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
}

.rating-value {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.product-price-block {
  margin-top: auto;
  margin-bottom: var(--space-3);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cash-price {
  font-family: var(--font-family-display);
  font-size: var(--comp-price-cash-size);
  font-weight: var(--comp-price-cash-weight);
  color: var(--comp-price-cash-color);
  white-space: nowrap;
}

.regular-price {
  font-size: var(--comp-price-regular-size);
  color: var(--comp-price-regular-color);
  text-decoration: line-through;
  white-space: nowrap;
}

.emi-hint-pill {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.emi-hint-pill span {
  color: var(--primitive-cyan-500);
  font-weight: var(--font-weight-semibold);
}

/* Card Add Button */
.product-card-cta {
  width: 100%;
  height: 38px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

[data-theme="dark"] .product-card-cta {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.product-card-cta:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-contrast);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* --------------------------------------------------------------------------
   9. CATALOG / PLP LAYOUT & FILTER SIDEBAR
   -------------------------------------------------------------------------- */
.catalog-page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0 var(--space-16);
}

@media (max-width: 960px) {
  .catalog-page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The sidebar becomes a slide-up bottom sheet, opened from the toolbar's
     Filters button — an always-expanded panel buried the product grid */
  .catalog-page-layout .filter-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-height: 82dvh;
    z-index: calc(var(--z-drawer) + 1);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border-bottom: none;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.16);
    padding-top: var(--space-7);
    transform: translateY(105%);
    transition: transform var(--motion-fast), opacity var(--motion-fast);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  }
  body.filter-sheet-open .catalog-page-layout .filter-sidebar {
    transform: translateY(0);
  }
  .filter-sidebar::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border-default);
  }
  .price-slider-row {
    min-width: 0;
  }
}

body.filter-sheet-open {
  overflow: hidden;
}

.filter-sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.filter-sheet-scrim.active {
  opacity: 1;
  pointer-events: auto;
}

/* Sheet-only controls: close (in header) and apply (footer) */
.filter-sheet-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.filter-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filter-sheet-apply {
  display: none;
}

.filter-trigger-btn {
  display: none;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.filter-trigger-btn:active {
  transform: scale(0.98);
}

.filter-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}

.filter-active-count[hidden] {
  display: none;
}

@media (max-width: 960px) {
  .filter-trigger-btn {
    display: inline-flex;
  }
  .filter-sheet-close {
    display: inline-flex;
  }
  .filter-sheet-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-brand-primary);
    color: var(--color-brand-contrast);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
  }
  .filter-sheet-apply:active {
    transform: scale(0.98);
  }
}

.filter-sidebar {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  height: fit-content;
  position: sticky;
  top: calc(var(--header-height) + var(--subnav-height) + var(--space-4));
}

.filter-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-5);
}

.filter-sidebar-header h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.reset-filters-btn {
  font-size: var(--font-size-xs);
  color: var(--color-brand-text);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.filter-group {
  margin-bottom: var(--space-6);
}

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

.filter-group-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
}

/* Dual-Thumb Price Range Slider */
.price-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.price-slider-sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.price-input-box {
  flex: 1;
  min-width: 0;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.price-input-box:focus {
  outline: none;
  border-color: var(--color-brand-outline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

/* Two stacked range inputs; the fill span sits between the thumbs */
.dual-range {
  position: relative;
  height: 24px;
  margin-top: var(--space-2);
}

.dual-range-track,
.dual-range-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.dual-range-track {
  left: 0;
  right: 0;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-subtle);
}

.dual-range-fill {
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-primary));
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.dual-range input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  pointer-events: none;
}

.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface-card);
  border: 2.5px solid var(--color-brand-outline);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.dual-range input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-glow-brand);
}

.dual-range input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
}

.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface-card);
  border: 2.5px solid var(--color-brand-outline);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

/* In-Stock Toggle Switch */
.filter-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}

.filter-switch-copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.filter-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.filter-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.filter-switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.filter-switch input:checked + .filter-switch-slider {
  background: var(--color-brand-primary);
}

.filter-switch input:checked + .filter-switch-slider::before {
  transform: translateX(18px);
}

.filter-switch input:focus-visible + .filter-switch-slider {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* Brand Multi-Select Chips */
.brand-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 6px var(--space-3);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.brand-chip:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand-text);
}

.brand-chip:active {
  transform: scale(0.96);
}

.brand-chip.selected {
  background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-text);
}

.brand-chip-count {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

.brand-chip.selected .brand-chip-count {
  color: var(--color-brand-text);
  background: color-mix(in srgb, var(--color-brand-primary) 16%, transparent);
}

/* Active Filter Chips Bar (removable summary of every applied facet) */
.active-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

/* display:flex above overrides the UA [hidden] rule — restore it */
.active-filter-chips[hidden] {
  display: none;
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 5px 6px 5px var(--space-3);
  box-shadow: var(--shadow-xs);
  animation: chip-in var(--motion-normal) ease both;
}

.active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.active-chip-x:hover {
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
}

.clear-all-chips {
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px var(--space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes chip-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Catalog Top Controls Bar */
.catalog-content-area {
  min-width: 0;
}

/* Sumash-style horizontal brand strip above the grid */
.catalog-brand-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  scrollbar-width: none;
  /* Right-edge fade so a half-clipped chip reads as "scroll for more",
     not as a layout bug */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}

.catalog-brand-strip::-webkit-scrollbar {
  display: none;
}

.catalog-brand-strip .brand-chip {
  flex-shrink: 0;
}

/* Category-level SEO content block */
.catalog-seo-block {
  margin-top: var(--space-12);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.catalog-seo-block h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  line-height: 1.35;
}

.catalog-seo-block > p {
  font-size: var(--font-size-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  max-width: 90ch;
}

.catalog-seo-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.catalog-seo-cols h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.catalog-seo-cols p {
  font-size: var(--font-size-xs);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.catalog-seo-cols a {
  color: var(--color-brand-text);
  font-weight: var(--font-weight-semibold);
}

.catalog-seo-outro {
  font-size: var(--font-size-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
}

.catalog-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile: the SEO columns must stack and the toolbar must share one row.
   These overrides live AFTER the base rules above — the 960px block near
   the top of section 9 is earlier in the cascade and loses to them. */
@media (max-width: 960px) {
  .catalog-seo-block {
    padding: var(--space-6) var(--space-5);
  }
  .catalog-seo-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  .catalog-seo-cols > div + div {
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-4);
  }
  .catalog-toolbar-actions {
    width: 100%;
  }
  .catalog-sort-select {
    flex: 1;
    min-width: 0;
  }
}

/* Fluid feel: cards ease up as the grid re-renders after a filter change */
#catalog-products-grid .product-card {
  animation: chip-in var(--motion-normal) ease both;
}

/* Out-of-stock cards: dimmed art, muted CTA (Dazzle-style Stock Out) */
.product-card.is-oos .product-card-thumb {
  filter: grayscale(0.55) opacity(0.82);
}

.badge-oos {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.product-card.is-oos .product-card-cta {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
}

.catalog-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.catalog-items-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.catalog-items-count strong {
  color: var(--color-text-primary);
}

.catalog-sort-select {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. PRODUCT DETAIL PAGE (PDP) COMPONENT SUITE
   -------------------------------------------------------------------------- */
.pdp-section {
  /* longhand so the .container horizontal gutters survive this override */
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
}

.breadcrumb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumb-row a:hover {
  color: var(--color-brand-text);
}

.pdp-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

@media (max-width: 960px) {
  .pdp-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* PDP Gallery */
.pdp-gallery-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Stretch to the (taller) buy-box height so both columns always end on
     the same line — no dead gap, and nothing moves independently while
     the page scrolls */
  align-self: stretch;
}

/* Product description + reassurance strip: beside the gallery on desktop,
   inside the buy box on mobile (two nodes, one source) */
.pdp-desc--gallery,
.pdp-gallery-trust {
  display: none;
}

@media (min-width: 961px) {
  .pdp-desc--info {
    display: none;
  }
  .pdp-desc--gallery {
    display: block;
  }
  .pdp-gallery-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
  }
}

.pdp-gallery-trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pdp-gallery-trust-item svg {
  color: var(--color-brand-text);
  flex-shrink: 0;
}

.pdp-gallery-main {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  /* Fixed square stage instead of stretching to the buy-box height — a tall
     frame around a contained product shot just reads as dead white space */
  aspect-ratio: 1 / 1;
  /* The color thumbnails MUST be visible without scrolling: cap the stage by
     the space left in the first viewport (header + breadcrumb + thumbs +
     gaps ≈ 310px), so image + thumbs always fit together on screen */
  max-height: min(640px, calc(100vh - 310px));
  max-height: min(640px, calc(100dvh - 310px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  /* Amazon-style magnify: the zoom itself is driven by JS (app.js tracks the
     cursor via transform-origin); CSS only hints the affordance */
  cursor: zoom-in;
}

.pdp-main-img {
  /* The 82%-fill square assets must NOT render edge-to-edge on the big PDP
     stage — cap the box so the product occupies ~60% of the frame like
     premium retailer galleries, with air on all sides */
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 72%;
  object-fit: contain;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.pdp-gallery-thumbs {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.pdp-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumb-btn {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-subtle);
  background: var(--color-surface-card);
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  flex-shrink: 0;
  cursor: pointer;
}

.gallery-thumb-btn:hover {
  transform: translateY(-1px);
}

.gallery-thumb-btn.active {
  border-color: var(--color-brand-outline);
}

.gallery-thumb-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* PDP Details Content */
.pdp-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pdp-brand-sku-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pdp-brand-badge {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

.pdp-title {
  font-family: var(--font-family-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Social Proof Bar (Dazzle pattern) */
.social-proof-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(14, 165, 233, 0.12);
  /* --color-info is cyan-400 in dark mode, #0284c7 (readable) in light */
  color: var(--color-info);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  width: fit-content;
}

/* PDP Price Box */
.pdp-price-panel {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.pdp-cash-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pdp-cash-price {
  font-family: var(--font-family-display);
  font-size: 2rem;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-text);
  white-space: nowrap;
}

.pdp-reg-price {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-decoration: line-through;
  white-space: nowrap;
}

.pdp-save-badge {
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

/* Dual Warranty Switcher (Diamu & Dazzle style) */
.warranty-switcher-box {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

.warranty-box-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.warranty-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.warranty-card-option {
  border: 2px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  position: relative;
}

.warranty-card-option.selected {
  border-color: var(--color-brand-outline);
  background: var(--color-brand-subtle);
}

.warranty-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.warranty-option-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.warranty-option-desc {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.warranty-price-delta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  margin-top: 4px;
}

/* Variant Selectors */
.pdp-selector-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.selector-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.selector-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.variant-chip-btn {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.variant-chip-btn:hover {
  border-color: var(--color-brand-outline);
}

.variant-chip-btn.selected {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-contrast);
}

/* Color Swatches */
.color-swatch-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  padding: 2px;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  cursor: pointer;
}

.color-swatch-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
}

.color-swatch-btn.selected {
  border-color: var(--color-brand-outline);
  transform: scale(1.1);
}

/* Action Buttons Bar */
.pdp-cta-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Dazzle-style purchase anchoring (Task 2): on desktop the CTA row sticks
   just below the sticky header while the info column scrolls. Mobile keeps
   the CTA in flow — the fixed buy bar below replaces it once it scrolls off. */
@media (min-width: 768px) {
  .pdp-cta-bar {
    position: sticky;
    top: calc(var(--header-total-height, 120px) + var(--space-4));
    z-index: var(--z-sticky);
    background: var(--color-surface-card);
    padding: var(--space-3) var(--space-4);
    margin: 0 calc(-1 * var(--space-4)); /* stretch over the column's visual padding */
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--card-shadow);
  }
}

.quantity-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  overflow: hidden;
  height: 50px;
}

.stepper-btn {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.stepper-btn:hover {
  background: var(--color-surface-subtle);
}

.stepper-count {
  width: 44px;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.btn-primary-large {
  flex: 1;
  min-width: 160px;
  height: 48px;
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.btn-primary-large:hover {
  background: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.btn-secondary-large {
  flex: 1;
  min-width: 160px;
  height: 48px;
  background: var(--color-surface-card);
  border: 1.5px solid var(--color-border-default);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

[data-theme="dark"] .btn-secondary-large {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.btn-secondary-large:hover {
  border-color: var(--color-brand-outline);
  color: var(--color-brand-text);
}

/* Quick Direct Order (WhatsApp & Helpline) */
.direct-channels-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.channel-card-btn {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.channel-card-btn:hover {
  border-color: var(--color-brand-outline);
  background: var(--color-surface-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.channel-card-btn.whatsapp {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

[data-theme="dark"] .channel-card-btn.whatsapp {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(110, 231, 183, 0.28);
  color: #6ee7b7;
}

.channel-card-btn.whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

/* Icon + text label inside a channel card */
.channel-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Financial Calculator Trigger Pills */
.financial-triggers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.finance-pill-btn {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.finance-pill-btn:hover {
  border-color: var(--color-brand-outline);
  box-shadow: var(--shadow-sm);
}

/* Specifications Matrix Table */
.specs-matrix-section {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-top: var(--space-10);
  box-shadow: var(--shadow-md);
}

.specs-section-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.specs-table tr {
  border-bottom: 1px solid var(--comp-table-border);
}

.specs-table tr:hover {
  background: var(--comp-table-row-hover);
}

.specs-table th {
  width: 28%;
  text-align: left;
  padding: var(--space-4) var(--space-3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.specs-table td {
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-primary);
  /* Long spec values must wrap, never push the table past its card (body
     clips overflow-x, so the table would be unreachable on small phones) */
  overflow-wrap: anywhere;
}

/* Product Overview — rich feature story (Apple-Gadgets/Dazzle-style) */
.pdp-story-section {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-top: var(--space-10);
  box-shadow: var(--shadow-md);
}

.pdp-story-lead {
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.pdp-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10) var(--space-10);
}

.pdp-story-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* Ember tick anchors each feature block to the brand palette */
.pdp-story-heading::before {
  content: '';
  width: 18px;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-brand-primary), transparent);
  flex-shrink: 0;
}

.pdp-story-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.pdp-story-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.pdp-story-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-brand-primary);
  opacity: 0.55;
  transform: rotate(45deg);
}

.pdp-story-list strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.pdp-story-list li span {
  color: var(--color-text-secondary);
}

/* Frequently Asked Questions — SEO accordion */
.pdp-faq-section {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-top: var(--space-10);
  box-shadow: var(--shadow-md);
}

.pdp-faq-section .specs-section-title {
  margin-bottom: var(--space-4);
}

.faq-item {
  border-bottom: 1px solid var(--color-border-default);
}

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

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.faq-question:hover {
  color: var(--color-brand-text);
}

.faq-question-text {
  flex: 1;
}

.faq-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-brand-text);
}

/* Grid controls the open state; motion.js fades content without animating layout. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: none;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-answer-inner p {
  padding: 0 var(--space-2) var(--space-5) var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 72ch;
}

@media (max-width: 900px) {
  .pdp-story-section,
  .pdp-faq-section {
    padding: var(--space-6);
  }

  .pdp-story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .pdp-story-lead {
    font-size: var(--font-size-base);
  }

  .faq-question {
    font-size: var(--font-size-sm);
    padding: var(--space-4) var(--space-1);
  }
}

/* --------------------------------------------------------------------------
   11. SLIDE-OVER CART DRAWER
   -------------------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--z-drawer);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: var(--drawer-max-width);
  background: var(--comp-drawer-bg);
  border-left: 1px solid var(--comp-drawer-border);
  box-shadow: var(--comp-drawer-shadow);
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.drawer-backdrop.active .cart-drawer-panel {
  transform: translateX(0);
}

/* Category Drawer Panel (Phone View Navigation) */
.category-drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: min(380px, 88vw);
  background: var(--comp-drawer-bg);
  border-right: 1px solid var(--comp-drawer-border);
  box-shadow: 16px 0 48px rgba(0, 0, 0, 0.35);
  z-index: calc(var(--z-drawer) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.drawer-backdrop.active .category-drawer-panel {
  transform: translateX(0);
}

.category-drawer-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.category-drawer-heading h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text-primary);
}

.category-drawer-sub {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.category-drawer-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-drawer-list-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) calc(var(--bottom-dock-height) + 24px);
}

.category-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.category-drawer-item {
  width: 100%;
}

.category-drawer-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  gap: 12px;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.category-drawer-btn:hover,
.category-drawer-btn:active {
  background: var(--color-surface-elevated);
  border-color: var(--color-brand-outline);
  transform: none;
}

.category-drawer-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.category-drawer-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-drawer-item-meta {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-drawer-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.category-drawer-btn:hover .category-drawer-chevron {
  color: var(--color-brand-text);
  transform: translateX(2px);
}

.category-drawer-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

.category-subcategory-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 260ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease; }
.category-subcategory-fold.is-open { grid-template-rows: 1fr; opacity: 1; }
.category-subcategory-clip { min-height: 0; overflow: hidden; }
.category-subcategories { list-style: none; margin: 6px 0 10px 12px; padding: 3px 0 3px 12px; border-left: 1px solid var(--color-border-default); }
@media (prefers-reduced-motion: reduce) { .category-subcategory-fold { transition: none; } }
.category-subcategory-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; font-size: var(--font-size-xs); text-align: left; color: var(--color-text-secondary); border-radius: var(--radius-sm); }
.category-subcategory-btn:hover, .category-subcategory-btn:focus-visible { color: var(--color-brand-text); background: var(--color-brand-subtle); }
.category-view-all { color: var(--color-brand-text); font-weight: 650; }
.category-subcategory-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.category-product-count { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand-primary); color: var(--color-brand-contrast); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); line-height: 1; }
.category-drawer-btn[aria-expanded="true"] { border-color: var(--color-brand-outline); background: var(--color-brand-subtle); }
.category-drawer-btn[aria-expanded="true"] .category-drawer-chevron { color: var(--color-brand-text); transform: rotate(90deg); }

.drawer-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.drawer-close-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.drawer-close-btn:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

/* Free Shipping Progress Indicator */
.free-shipping-tracker {
  background: var(--color-surface-subtle);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
}

.shipping-progress-text {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

.shipping-progress-text strong {
  color: var(--color-brand-text);
}

.shipping-progress-bar {
  height: 6px;
  background: var(--color-border-default);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.shipping-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primitive-brand-500), var(--primitive-emerald-500));
  border-radius: var(--radius-full);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

/* Cart Items List */
.drawer-items-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-item-row {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cart-item-thumb {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  flex-shrink: 0;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  margin-bottom: 2px;
  /* Long accessory names wrap to two lines instead of cutting off mid-word */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-variant {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.cart-item-price-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Price stays left; stepper + remove sit grouped at the row's right edge */
.cart-item-actions-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.cart-item-price {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
}

.cart-item-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
}

.cart-item-stepper button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cart-item-stepper span {
  min-width: 22px;
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.cart-item-remove-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--primitive-slate-400);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.cart-item-remove-btn:hover {
  color: var(--primitive-rose-500);
  background: color-mix(in srgb, var(--primitive-rose-500) 8%, transparent);
}

/* Trust strip fills the space under the last item with real reassurance */
.drawer-trust-strip {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.drawer-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.drawer-trust-item svg {
  color: var(--color-brand-text);
  flex-shrink: 0;
}

/* Drawer Footer */
.drawer-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-elevated);
}

.drawer-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}

.drawer-summary-line .shipping-free {
  color: var(--primitive-emerald-600);
  font-weight: var(--font-weight-bold);
}

.drawer-summary-line.total {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.drawer-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.drawer-checkout-btn {
  width: 100%;
  height: 48px;
  background: var(--primitive-brand-500);
  color: var(--color-brand-contrast);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  box-shadow: var(--shadow-glow-brand);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.cart-checkout-btn {
  width: 100%;
  margin-top: var(--space-4);
}

.drawer-footer .cart-checkout-btn {
  background: var(--color-brand-primary);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.drawer-footer .cart-checkout-btn:hover {
  background: var(--color-brand-hover);
  box-shadow: none;
}

.drawer-checkout-btn:hover {
  background: var(--primitive-brand-600);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   12. CHECKOUT VIEW & BD PAYMENT GATEWAYS
   -------------------------------------------------------------------------- */
.checkout-section {
  --checkout-accent: var(--color-brand-primary);
  --checkout-accent-hover: var(--color-brand-hover);
  --checkout-watermark-color: var(--color-brand-hover);
  --checkout-card-padding: var(--space-5);
  /* longhand so the .container horizontal gutters survive this override */
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 960px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .checkout-summary-card {
    position: static !important;
    top: auto !important;
  }
}

.checkout-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--checkout-card-padding);
  box-shadow: none;
  margin-bottom: var(--space-4);
}

.checkout-summary-card {
  position: sticky;
  top: calc(var(--header-height) + var(--subnav-height) + 20px);
}

#checkout-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

#checkout-items-list .cart-item-stepper button {
  border-radius: 0;
}

#checkout-items-list .cart-item-remove-btn {
  border-radius: var(--radius-full);
}

.checkout-empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 240px;
  padding: var(--space-6) var(--space-3);
  text-align: center;
  color: var(--color-text-secondary);
}

.checkout-empty-cart-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.checkout-empty-cart p {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.checkout-empty-cart .card-action-btn {
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
}

.checkout-details,
.checkout-promo {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.checkout-details[disabled] {
  cursor: not-allowed;
}

.checkout-details[disabled] .checkout-card > :not(.checkout-card-header) {
  opacity: 0.5;
}

.checkout-promo {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.checkout-promo .form-input {
  min-width: 0;
}

.checkout-auth-card {
  border-color: var(--color-border-default);
}

.checkout-card-header,
.checkout-auth-card .auth-step-header {
  margin: calc(-1 * var(--checkout-card-padding)) calc(-1 * var(--checkout-card-padding)) var(--space-4);
  padding: var(--space-3) var(--checkout-card-padding);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-default);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.checkout-card-header .checkout-step-title,
.checkout-auth-card .auth-step-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.checkout-auth-card .auth-step-header .auth-subtitle {
  margin: var(--space-2) 0 0;
}

#checkout-view .checkout-step-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--checkout-accent);
}

#checkout-view .location-radio-card,
#checkout-view .payment-method-card {
  border-radius: var(--radius-md);
  border-width: 1px;
}

#checkout-view .location-radio-card.selected,
#checkout-view .payment-method-card.selected {
  border-color: var(--checkout-accent);
}

#checkout-view .form-input,
#checkout-view .otp-box,
#checkout-view .payment-suboption,
#checkout-view .badge-pill,
#checkout-view button {
  border-radius: var(--radius-sm);
}

#checkout-view .checkout-apply-btn {
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  border: 1px solid var(--color-brand-outline);
  box-shadow: none;
  filter: none;
}

#checkout-view .checkout-apply-btn:not(:disabled):hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  box-shadow: none;
}

#checkout-view .btn-primary-large {
  background: var(--color-brand-primary);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

#checkout-view .btn-primary-large:not(:disabled):hover {
  background: var(--color-brand-hover);
  box-shadow: none;
}

#checkout-view .checkout-apply-btn {
  height: 44px;
  padding: 0 var(--space-4);
}

#checkout-view .checkout-promo .form-input {
  height: 44px;
  font-size: var(--font-size-xs);
}

#checkout-view .auth-resend-row .card-action-btn {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  box-shadow: none;
}

#checkout-view .auth-resend-row .card-action-btn:disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  cursor: not-allowed;
}

#checkout-view button:focus-visible {
  outline: 2px solid var(--checkout-accent);
  outline-offset: 3px;
}

.checkout-auth-card[hidden],
.checkout-details[hidden],
.checkout-submit-hint[hidden] {
  display: none;
}

.checkout-auth-card .auth-step h3 {
  padding-right: 0;
}

.checkout-auth-card .auth-fineprint {
  text-align: left;
}

.checkout-auth-notice,
.checkout-submit-hint {
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.checkout-auth-notice {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.checkout-submit-hint {
  text-align: center;
}

#checkout-submit:disabled,
#checkout-view .checkout-apply-btn:disabled {
  opacity: 1;
  background: var(--color-surface-sunken);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

#checkout-submit:disabled:hover {
  transform: none;
}

.checkout-step-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.checkout-step-number {
  width: 32px;
  height: 32px;
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
}

/* Delivery Location Toggle */
.delivery-location-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.location-radio-card {
  border: 2px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.location-radio-card.selected {
  border-color: var(--color-brand-outline);
  background: var(--color-brand-subtle);
}

.location-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: 2px;
}

.location-card-cost {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
}

/* Form Groups */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-input {
  width: 100%;
  height: 46px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand-outline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
  background: var(--color-surface-card);
}

/* Payment Methods (bKash / Nagad / Card EMI / COD) */
.payment-methods-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-method-card {
  border: 2px solid var(--color-border-subtle);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.payment-method-card.selected {
  border-color: var(--color-brand-outline);
  background: var(--color-surface-card);
}

.checkout-pickup-card {
  margin-bottom: 0;
}

.payment-method-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.payment-details-accordion {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  display: none;
}

.payment-method-card.selected .payment-details-accordion {
  display: block;
}

/* Delivery and payment share one surface with plain section headings. */
.checkout-section-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.checkout-customer-fields > .form-group:last-child { margin-bottom: 0; }

.checkout-section .form-group { margin-bottom: var(--space-3); }
.checkout-section .form-row { gap: var(--space-3); margin-bottom: var(--space-3); }
.checkout-section .form-row > .form-group { margin-bottom: 0; }
.checkout-section .form-label { margin-bottom: 6px; }
.checkout-section .delivery-location-selector { gap: var(--space-3); margin-bottom: var(--space-3); }
.checkout-section .location-radio-card,
.checkout-section .checkout-pickup-card { padding: var(--space-3); }
.checkout-section .checkout-prebook-fee { margin-top: var(--space-3); }
.checkout-section .pickup-schedule { margin: var(--space-3) 0; }

.checkout-delivery-title,
.checkout-payment-title {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

#checkout-view .checkout-payment-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

#checkout-view .checkout-payment-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: var(--space-3);
  text-align: left;
  color: var(--color-text-primary);
}

#checkout-view .checkout-options-card :is(.location-radio-card, .payment-method-card) {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 24%, transparent);
}

#checkout-view .checkout-options-card :is(.location-radio-card, .payment-method-card).selected {
  border-color: var(--checkout-accent);
}

.checkout-options-card :is(.location-card-title, .checkout-payment-name, .payment-method-header) {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding-right: 40px;
}

.checkout-options-card :is(.location-card-title, .checkout-payment-name, .payment-method-header)::after {
  content: '';
  display: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 2px solid var(--checkout-watermark-color);
  border-radius: 50%;
  pointer-events: none;
}

#checkout-view .checkout-payment-choice.selected {
  background: var(--color-brand-subtle);
}

.checkout-options-card :is(.location-radio-card, .payment-method-card).selected > :is(.location-card-title, .checkout-payment-name, .payment-method-header)::after {
  content: '✓';
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--checkout-watermark-color);
  opacity: .72;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.checkout-payment-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.checkout-payment-caption { font-size: var(--font-size-2xs); color: var(--color-text-secondary); text-align: left; }
.checkout-payment-details { margin-top: var(--space-3); font-size: var(--font-size-xs); line-height: 1.6; }
.checkout-payment-details[hidden] { display: none; }
.checkout-payment-details .form-group:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  #checkout-view .checkout-payment-choices { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  #checkout-view .checkout-payment-choice {
    min-height: 56px;
  }
}

.checkout-pickup-details {
  line-height: 1.6;
}

.checkout-prebook-fee {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.checkout-prebook-fee-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
}

.checkout-prebook-fee-row strong {
  color: var(--color-brand-text);
  font-size: var(--font-size-sm);
}

.checkout-prebook-fee p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.pickup-address,
.pickup-detail,
.pickup-payment-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.pickup-detail-icon {
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--color-brand-text);
}

.pickup-address strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.pickup-address p {
  margin: 2px 0 0;
  color: var(--color-text-secondary);
}

.pickup-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-5) 0;
}

.pickup-schedule dt {
  color: var(--color-text-muted);
}

.pickup-schedule dd {
  margin: 2px 0 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.pickup-payment-note {
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-weight: var(--font-weight-semibold);
}

.pickup-payment-note .pickup-detail-icon {
  margin-top: 0;
}

.pickup-payment-secondary {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

/* Online Payment sub-options (SSLCommerz gateway / Bank transfer) */
.payment-suboptions {
  display: grid;
  gap: 8px;
  margin-top: var(--space-3);
}

.payment-suboption {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.payment-suboption:has(input:checked),
.payment-suboption.checked {
  border-color: var(--color-brand-outline);
  background: var(--color-brand-subtle);
}

.payment-suboption input {
  margin-top: 2px;
  accent-color: var(--color-brand-primary);
}

.payment-suboption-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-xs);
}

.payment-suboption-body small {
  color: var(--color-text-muted);
}

/* SSLCommerz demo gateway modal */
.ssl-gw-box {
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.ssl-gw-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}

.ssl-gw-methods {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   13. MODALS (Quick View & BD Bank EMI Calculator)
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--comp-modal-bg);
  border: 1px solid var(--comp-modal-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--comp-modal-shadow);
  width: 100%;
  max-width: var(--modal-max-width);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.95);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.modal-backdrop.active .modal-card {
  transform: scale(1);
}

.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.modal-close-btn:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.modal-body {
  padding: var(--space-6);
}

/* Quick View layout (stacks on mobile) */
.quick-view-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
}

/* EMI Modal Table */
.emi-bank-select-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  align-items: center;
}

.emi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.emi-table th, .emi-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-wrap: anywhere;
}

.emi-table th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.emi-table td strong {
  color: var(--color-brand-text);
}

/* --------------------------------------------------------------------------
   14. MOBILE BOTTOM DOCK (Sticky Navigation)
   -------------------------------------------------------------------------- */
.mobile-bottom-dock {
  display: none;
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: calc(var(--bottom-dock-height) + env(safe-area-inset-bottom, 0px) + 1px);
  background: var(--color-surface-base);
  border: 0;
  z-index: var(--z-fixed);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1) calc(env(safe-area-inset-bottom, 0px) + 1px);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .mobile-bottom-dock {
    display: flex;
  }
  body {
    padding-bottom: calc(var(--bottom-dock-height) + env(safe-area-inset-bottom, 0px));
  }
}

.mobile-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--color-text-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  position: relative;
  flex: 1 1 0px;
  min-width: 0;
  padding: var(--space-1) 0;
}

.mobile-dock-btn:hover, .mobile-dock-btn.active, .mobile-dock-btn[aria-expanded="true"] {
  color: var(--color-brand-text);
}

.mobile-dock-btn svg {
  width: 22px;
  height: 22px;
}

/* Back to Top (bottom-left, opposite the WhatsApp FAB; revealed on scroll) */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: var(--z-fixed);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.back-to-top:hover {
  color: var(--color-brand-text);
  border-color: var(--color-brand-outline);
}

/* On the PDP the sticky buy bar occupies the bottom edge — lift the button
   above it so the two never overlap */
body.pdp-buybar-visible .back-to-top {
  bottom: 104px;
}

@media (max-width: 768px) {
  .back-to-top { display: none; }
}

/* Floating WhatsApp Button (revealed on scroll so it never covers the trust bar) */
.floating-whatsapp-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--primitive-whatsapp);
  color: #ffffff;
  padding: 0;
  border-radius: 50%;
  box-shadow: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.floating-whatsapp-widget svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 10px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(4px, -50%);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms;
}

.floating-whatsapp-widget:focus-visible {
  outline: 3px solid var(--color-text-primary);
  outline-offset: 4px;
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .floating-whatsapp-widget.revealed:is(:hover, :focus-visible) .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}

.floating-whatsapp-widget.revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-whatsapp-widget.revealed:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .floating-whatsapp-widget.revealed {
    animation: whatsapp-shake 2s ease-in-out infinite;
  }

  .floating-whatsapp-widget:is(:hover, :focus-visible) {
    animation-play-state: paused;
  }
}

@keyframes whatsapp-shake {
  0%, 88%, 100% { rotate: 0deg; }
  90% { rotate: -7deg; }
  92% { rotate: 7deg; }
  94% { rotate: -5deg; }
  96% { rotate: 5deg; }
  98% { rotate: -2deg; }
}

@media (max-width: 768px) {
  .floating-whatsapp-widget {
    bottom: calc(var(--bottom-dock-height) + 16px);
    right: 16px;
    width: 56px;
    height: 56px;
  }
  .floating-whatsapp-widget svg {
    width: 32px;
    height: 32px;
  }
  .whatsapp-tooltip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-tooltip { transition: none; }
}

/* --------------------------------------------------------------------------
   15. TOAST NOTIFICATIONS
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(var(--space-12) * 2 + var(--space-6) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
  width: min(420px, calc(100vw - var(--space-12)));
}

.toast-item {
  --toast-color: var(--color-success);
  --toast-icon-bg: var(--color-success-bg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-surface-elevated);
  border: 1px solid color-mix(in srgb, var(--toast-color) 65%, var(--color-border-default));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  line-height: 1.35;
  color: var(--color-text-primary);
  pointer-events: auto;
  animation: toastIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast-progress {
  position: absolute;
  inset: 0 -32px 0 0;
  z-index: -1;
  pointer-events: none;
  background: var(--toast-icon-bg);
  clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  background: var(--toast-color);
}

.toast-content {
  align-self: center;
  overflow-wrap: anywhere;
}

.toast-title {
  display: block;
  margin-bottom: 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.toast-message {
  display: block;
  font-size: var(--font-size-2xs);
}

.toast-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.toast-close:hover,
.toast-close:active {
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

.toast-close:focus-visible {
  outline: 2px solid var(--color-brand-outline);
  outline-offset: -2px;
}

.toast-item.is-dismissing {
  pointer-events: none;
  animation: toastOut 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(32px) scale(0.98); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateX(24px) scale(0.98); }
}

.toast-item.error {
  --toast-color: var(--color-danger);
  --toast-icon-bg: var(--color-danger-bg);
}

.toast-item.info {
  --toast-color: var(--color-info);
  --toast-icon-bg: var(--color-info-bg);
}

.toast-item.warning {
  --toast-color: var(--color-warning);
  --toast-icon-bg: var(--color-warning-bg);
}

@media (prefers-reduced-motion: reduce) {
  .toast-item,
  .toast-item.is-dismissing { animation-duration: 1ms; }
  .toast-close { transition: none; }
}

/* --------------------------------------------------------------------------
   16. FOOTER (Dazzle-style: newsletter band + link columns + contact grid)
   -------------------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(55% 60% at 50% 108%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%),
    #07090e;
  border-radius: 28px 28px 0 0;
  color: #94a3b8;
  padding: 150px 0 var(--space-8);
  margin-top: auto;
  font-size: var(--font-size-sm);
}

/* The floating buttons occupy the bottom ~68px of the viewport. Extra footer
   padding keeps the © / payment row (and everything above it) clear of them
   at full scroll — no fixed element ever covers footer content. */
@media (min-width: 769px) {
  .site-footer {
    padding-bottom: calc(var(--space-8) + 80px);
  }
}

/* --- Newsletter card (straddles the footer's top edge) -------------------- */
.footer-cta-wrap {
  max-width: 1080px;
  margin: 0 auto -110px;
  padding: 0 var(--space-6);
  position: relative;
  z-index: 2;
}

.footer-newsletter-card {
  background: #ffffff;
  border: 1px solid rgba(2, 6, 23, 0.06);
  border-radius: 24px;
  padding: 48px 64px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 48px -20px rgba(2, 6, 23, 0.28),
    0 4px 24px -8px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.footer-newsletter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--primitive-brand-500), transparent);
}

.footer-newsletter-card h3 {
  font-family: var(--font-family-display);
  color: #0f172a;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer-newsletter-card > p {
  color: #64748b;
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-7);
}

.footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 12px 10px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-newsletter-form:focus-within {
  border-color: var(--color-brand-outline);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.footer-newsletter-mail {
  display: flex;
  align-items: center;
  color: #94a3b8;
}

.footer-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #0f172a;
  font-size: var(--font-size-base);
  padding: 8px 0;
}

.footer-newsletter-form input[type="email"]::placeholder {
  color: #94a3b8;
}

.footer-newsletter-btn {
  flex-shrink: 0;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-brand-text);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-newsletter-btn:hover {
  color: var(--color-brand-contrast);
  background: var(--primitive-brand-500);
}

.footer-newsletter-btn:active {
  transform: scale(0.97);
}

/* --- Main link grid ------------------------------------------------------ */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1fr 0.9fr 1.35fr;
  gap: var(--space-8);
  padding: var(--space-10) 0 var(--space-12);
}

.footer-brand-col .brand-logo-img {
  height: 42px;
}

.footer-brand-col p {
  margin: var(--space-5) 0;
  max-width: 340px;
  line-height: 1.8;
}

.footer-social-links {
  display: flex;
  gap: var(--space-3);
}

.footer-social-btn {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-social-btn:hover {
  background: var(--primitive-brand-500);
  border-color: var(--color-brand-outline);
  transform: translateY(-1px);
}

.footer-app-label {
  margin: var(--space-6) 0 var(--space-3);
  color: #cbd5e1;
  font-size: var(--font-size-sm);
}

.footer-app-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 18px;
  background: #101418;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-app-badge:hover {
  border-color: var(--color-brand-outline);
  transform: translateY(-1px);
}

.footer-app-badge span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.footer-app-badge small {
  color: #94a3b8;
  font-size: var(--font-size-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-app-badge strong {
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 600;
}

.footer-col-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 var(--space-4);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin-bottom: var(--space-6);
}

.footer-col-chevron {
  display: none;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-col.open .footer-col-chevron {
  transform: rotate(180deg);
}

.footer-col-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-col-body-inner {
  overflow: hidden;
  min-height: 0;
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: var(--space-2);
  font-size: 15px;
}

.footer-links-list a {
  display: inline-block;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-links-list a:hover {
  color: var(--color-brand-text);
  transform: translateX(3px);
}

/* --- Contact column (branch-location style) ------------------------------ */
.footer-col-contact h4 {
  font-family: var(--font-family-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: var(--space-6);
}

.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
  line-height: 1.7;
}

.footer-contact-list strong {
  color: #e2e8f0;
  font-weight: 600;
}

.footer-contact-link {
  color: var(--color-brand-text);
  font-weight: 500;
}

.footer-contact-link:hover {
  text-decoration: underline;
}

.footer-contact-muted {
  color: #64748b;
}

/* --- Bottom bar ----------------------------------------------------------- */
.footer-bottom-row {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-pay-rails {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer-pay-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: var(--font-size-2xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.footer-pay-secure svg {
  color: #4ade80;
}

.footer-pay-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 var(--space-1);
}

.footer-pay-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.footer-pay-chip {
  height: 30px;
  min-width: 46px;
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.footer-pay-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

.footer-pay-chip img {
  height: 15px;
  width: auto;
  display: block;
}

.footer-pay-chip--cod {
  color: #0f172a;
}

/* --- Tablet: brand & contact take full rows, links sit in 3 columns ------ */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  .footer-brand-col,
  .footer-col-contact {
    grid-column: 1 / -1;
  }
}

/* --- Phones: link columns collapse into accordions & mid-aligned layout --- */
@media (max-width: 640px) {
  .site-footer {
    padding-top: 130px;
    padding-bottom: calc(var(--bottom-dock-height) + env(safe-area-inset-bottom) + 90px) !important;
    border-radius: 20px 20px 0 0;
    text-align: center;
  }

  .footer-cta-wrap {
    margin-bottom: -84px;
    padding: 0 var(--space-4);
  }

  .footer-newsletter-card {
    padding: 28px 20px 30px;
    border-radius: 18px;
  }

  .footer-newsletter-card > p {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-5);
  }

  .footer-newsletter-form {
    padding-left: 14px;
  }

  .footer-newsletter-btn {
    padding: 10px 16px;
    font-size: var(--font-size-sm);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-6) 0;
  }

  .footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .footer-brand-col .brand-logo {
    display: inline-flex;
    justify-content: center;
    margin: 0 auto;
  }

  .footer-brand-col p {
    text-align: center;
    max-width: 480px;
    margin: 0 auto var(--space-4);
  }

  .footer-social-links {
    justify-content: center;
    margin: 0 auto var(--space-3);
  }

  .footer-app-label {
    text-align: center;
  }

  .footer-app-badge {
    margin: 0 auto;
    display: inline-flex;
  }

  .footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .footer-col-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 0;
    padding-top: var(--space-6);
  }

  .footer-col-contact h4 {
    text-align: center;
    width: 100%;
  }

  .footer-contact-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .footer-contact-list li {
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .footer-col-toggle {
    padding: var(--space-5) 0 var(--space-4);
    margin-bottom: 0;
  }

  .footer-col-chevron {
    display: block;
    color: #94a3b8;
  }

  .footer-col:not(.open) .footer-col-body {
    grid-template-rows: 0fr;
  }

  .footer-col.open .footer-col-toggle {
    color: var(--color-brand-text);
  }

  .footer-copyright {
    text-align: center;
    width: 100%;
  }

  .footer-pay-rails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: center;
  }

  .footer-pay-secure {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .footer-pay-divider {
    display: none;
  }

  .footer-pay-label {
    width: 100%;
    text-align: center;
    margin: var(--space-1) 0;
  }
}

/* --------------------------------------------------------------------------
   17. COMPREHENSIVE MOBILE RESPONSIVE OVERRIDES (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Brand row: drop the tagline — its ~190px width is what pushes the
     wishlist/cart buttons onto a second line on phones */
  .brand-logo-img {
    height: 34px;
  }
  .brand-tagline {
    display: none;
  }

  /* Header: brand + actions on row 1, search & category get full-width row 2 */
  .header-main-row {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-2) 0 var(--space-3);
    row-gap: var(--space-3);
    column-gap: var(--space-2);
  }
  .brand-logo,
  .header-actions {
    flex-shrink: 0;
  }
  .header-actions .account-btn {
    display: none !important; /* Account is in the lower navbar on phone */
  }
  .header-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
  .header-search-container {
    display: block;
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  .search-input-pill {
    height: 44px;
    font-size: 16px; /* prevents iOS focus zoom */
  }
  .search-shortcut-hint {
    display: none;
  }

  /* Nav categories bar: hidden on phones — categories are a list via category icon & lower navbar */
  .secondary-nav-bar {
    display: none !important;
  }
  .header-actions {
    gap: var(--space-2);
  }
  .header-action-btn {
    width: 40px;
    height: 40px;
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Hero: show the FULL banner on small screens instead of cropping its copy */
  .hero-section {
    padding: var(--space-5) 0 var(--space-4);
  }
  .hero-card-primary {
    min-height: 0;
    padding: 0;
  }
  .hero-card-primary .bento-banner-img {
    height: auto;
    object-fit: contain;
  }
  .promo-tile-card {
    min-height: 0;
  }

  /* Trust bar: 2-up compact grid (5th pillar spans full width) */
  .trust-pillars-inner {
    padding: var(--space-3) var(--space-3);
  }
  .trust-pillar-icon {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-base);
  }

  /* PDP */
  .pdp-gallery-main {
    /* aspect-ratio sizes the stage off the viewport width; cap the height so
       tablets don't render a poster-sized frame around a 300px-baked image.
       Viewport-aware like the desktop rule so thumbs stay above the fold on
       short/landscape screens */
    max-height: min(560px, calc(100vh - 240px));
    max-height: min(560px, calc(100dvh - 240px));
    padding: var(--space-4);
  }
  .gallery-thumb-btn {
    width: 68px;
    height: 68px;
  }
  .pdp-cta-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .pdp-cta-bar .quantity-stepper {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: space-between;
  }
  .pdp-cta-bar .btn-primary-large,
  .pdp-cta-bar .btn-secondary-large {
    min-width: 0;
  }

  /* Finance pills never collide */
  .financial-triggers-row {
    grid-template-columns: 1fr;
  }
  .finance-pill-btn {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Forms: 16px inputs prevent iOS focus zoom */
  .form-input,
  .catalog-sort-select,
  .price-input-box {
    font-size: 16px;
  }
  .checkout-card {
    --checkout-card-padding: var(--space-4);
    padding: var(--checkout-card-padding);
  }
  .delivery-location-selector {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Modals & tables */
  .modal-backdrop {
    padding: var(--space-3);
  }
  .quick-view-body {
    grid-template-columns: 1fr;
  }
  .emi-table th,
  .emi-table td {
    padding: var(--space-2) var(--space-2);
    font-size: var(--font-size-2xs);
  }

  /* Drawer */
  .cart-drawer-panel {
    max-width: 100%;
  }
  .drawer-items-list,
  .drawer-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .free-shipping-tracker {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Toasts span the viewport width */
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
  }
  .toast-item {
    min-width: 0;
    max-width: 100%;
  }

  /* Section headers stack */
  .section-header-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Sticky bottom dock with iOS safe-area support */
  .mobile-bottom-dock {
    display: flex !important;
  }
  body {
    padding-bottom: calc(var(--bottom-dock-height) + env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: calc(var(--bottom-dock-height) + env(safe-area-inset-bottom) + 90px) !important;
  }
}

/* --------------------------------------------------------------------------
   18. SMALL PHONE OVERRIDES (<= 640px): 2-up commerce grid
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .product-card {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
  }
  .product-card-media {
    height: 128px;
    padding: var(--space-1);
  }
  .product-card-body {
    padding: 0 var(--space-1);
  }
  .product-card-title {
    font-size: var(--font-size-sm);
    height: 2.6em;
  }
  .product-card-cta {
    height: 34px;
    font-size: var(--font-size-2xs);
  }
  .product-card-cta svg {
    width: 13px;
    height: 13px;
  }
  .badge-pill {
    font-size: var(--font-size-2xs);
    padding: 2px 6px;
  }
  .product-wishlist-btn {
    width: 40px;
    height: 40px;
  }
  .cash-price {
    font-size: var(--font-size-base);
  }
  .regular-price {
    font-size: var(--font-size-2xs);
  }
  .emi-hint-pill {
    font-size: var(--font-size-2xs);
  }
  .pdp-cash-price {
    font-size: 1.625rem;
  }
  .specs-table th {
    width: 42%;
  }
  .specs-table th,
  .specs-table td {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-xs);
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   24. MICRO-INTERACTIONS & MOTION SAFETY
   -------------------------------------------------------------------------- */

/* Tactile press feedback — the site had hover states but nothing on press */
button:not(:disabled):active,
.category-squircle-card:active,
[role="link"]:active,
[role="button"]:active {
  transform: scale(0.98);
}

.btn-primary-large:active,
.btn-secondary-large:active {
  transform: scale(0.98) translateY(0);
}

/* One-off transforms (steppers, swatches) keep their own :active rules below */
.cart-item-stepper button:active,
.product-wishlist-btn:active,
.gallery-thumb-btn:active {
  transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   25. THEME SWITCH ANIMATION
   -------------------------------------------------------------------------- */

/* Theme switch animation: applied transiently by app.js during toggle */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: transform var(--motion-fast), opacity var(--motion-fast) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   26. PDP STICKY BUY BAR (Dazzle-style purchase anchoring, all viewports)
   Shown by app.js (body.pdp-buybar-visible) once the in-flow .pdp-cta-bar
   scrolls out of view; replaces the mobile bottom dock while visible.
   -------------------------------------------------------------------------- */
.pdp-sticky-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex; /* shown via body.pdp-buybar-visible */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-8);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border-default);
  box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, 0.12);
  z-index: var(--z-sticky);
  transform: translateY(110%);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

body.pdp-buybar-visible .pdp-sticky-buybar {
  transform: translateY(0);
}

/* Desktop clearance: footer/specs never sit under the bar; mobile refines this */
body.pdp-buybar-visible {
  padding-bottom: 96px;
}

/* Keep the WhatsApp FAB above the bar on every viewport */
body.pdp-buybar-visible .floating-whatsapp-widget {
  bottom: 104px;
}

/* Fulfillment group: Store Pickup | Home Delivery */
.buybar-fulfillment {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.buybar-fulfillment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-secondary);
}

.buybar-fulfillment-item > svg {
  color: var(--color-brand-text);
  flex-shrink: 0;
  margin-top: 2px;
}

.buybar-fulfillment-copy {
  display: grid;
  gap: 1px;
  font-size: var(--font-size-2xs);
  line-height: 1.4;
  min-width: 0;
}

.buybar-fulfillment-copy strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.buybar-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.buybar-link:hover {
  color: var(--color-brand-text);
}

.buybar-delivery-express {
  color: var(--color-brand-text);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.buybar-delivery-standard {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.buybar-vr {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-default);
  flex-shrink: 0;
}

/* Price + EMI + financing link */
.pdp-buybar-price-wrap {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.pdp-buybar-price {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.pdp-buybar-emi-hint {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buybar-financing-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.buybar-financing-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Actions: stepper + Add to Cart + Buy Now */
.buybar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.buybar-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-card);
}

.buybar-stepper button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.buybar-stepper button:hover {
  color: var(--color-brand-text);
}

.buybar-stepper span {
  min-width: 26px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.pdp-buybar-add,
.pdp-buybar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.pdp-buybar-add {
  background: color-mix(in srgb, var(--color-brand-primary) 16%, var(--color-surface-card));
  color: var(--color-brand-text);
  border: 1px solid var(--color-border-brand);
}

.pdp-buybar-add:hover {
  background: color-mix(in srgb, var(--color-brand-primary) 24%, var(--color-surface-card));
}

.pdp-buybar-cta {
  background: var(--color-text-primary);
  color: var(--color-surface-card);
  border: 1px solid var(--color-text-primary);
}

.pdp-buybar-cta:hover {
  box-shadow: var(--shadow-glow-brand);
}

.pdp-buybar-add:active,
.pdp-buybar-cta:active {
  transform: scale(0.97);
}

/* Mobile + tablet: fulfillment info and stepper collapse away, leaving the
   compact price + CTA pair the thumb can reach */
@media (max-width: 1199px) {
  .buybar-fulfillment {
    display: none;
  }

  .pdp-sticky-buybar {
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  }

  .pdp-buybar-price {
    font-size: var(--font-size-lg);
  }

  .buybar-financing-link {
    display: none;
  }
}

@media (max-width: 767px) {
  .pdp-sticky-buybar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 16px;
  }

  .pdp-buybar-price-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }

  .pdp-buybar-price {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .pdp-buybar-emi-hint {
    min-width: 0;
  }

  .buybar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .buybar-stepper {
    display: none;
  }

  .pdp-buybar-add,
  .pdp-buybar-cta {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    font-size: var(--font-size-xs);
  }

  /* Let the dock slide instead of snapping when the buy bar replaces it */
  .mobile-bottom-dock {
    transition: transform var(--motion-fast), opacity var(--motion-fast);
  }

  /* Dazzle behavior: the buy bar replaces the dock on the PDP */
  body.pdp-buybar-visible.pdp-view-active .mobile-bottom-dock {
    transform: translateY(110%);
  }

  /* Swap body clearance from the dock to the (slightly taller) buy bar so the
     footer and specs never sit underneath it */
  body.pdp-buybar-visible {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* Lift the WhatsApp FAB above the buy bar so it never covers the CTA */
  body.pdp-buybar-visible .floating-whatsapp-widget {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   17. DEDICATED 0% EMI PAGE (#emi route, Dazzle-Style)
   -------------------------------------------------------------------------- */
.emi-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

/* Hero */
.emi-hero {
  margin: 0 auto var(--space-12);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--color-brand-primary) 14%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 100%, color-mix(in srgb, var(--color-brand-primary) 8%, transparent) 0%, transparent 70%),
    var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--comp-product-card-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.emi-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}

.emi-hero .badge-pill {
  margin-bottom: var(--space-5);
}

.emi-hero h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.18;
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.emi-hero p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.emi-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.emi-hero-stat {
  display: grid;
  gap: 1px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.emi-hero-stat strong {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-brand-text);
  line-height: 1.1;
}

.emi-hero-stat span {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.emi-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* How it works */
.emi-how-section {
  margin-bottom: var(--space-10);
}

.emi-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.emi-step-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--comp-product-card-radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.emi-step-num {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  border-radius: var(--radius-full);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-4);
}

.emi-step-card h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.emi-step-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Partner banks grid */
.emi-banks-section {
  margin-bottom: var(--space-10);
}

.emi-banks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.emi-bank-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--comp-product-card-radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-bank-card:hover {
  border-color: var(--color-brand-outline);
  box-shadow: var(--shadow-md);
  transform: none;
}

.emi-bank-card-name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Only special plans get a tag; the tenure chips wall is gone */
.emi-bank-zero-tag {
  align-self: flex-start;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--primitive-emerald-600);
  background: color-mix(in srgb, var(--primitive-emerald-500) 12%, transparent);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}

.emi-bank-card-meta {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.emi-bank-card .card-action-btn {
  margin-top: auto;
}

/* Calculator */
.emi-calc-section {
  margin-bottom: var(--space-10);
}

.emi-calc-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.emi-calc-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.emi-calc-quickrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.emi-calc-quick-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.emi-calc-quick-chip {
  font-family: inherit;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-calc-quick-chip:hover {
  color: var(--color-brand-text);
  border-color: var(--color-border-brand);
  background: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
}

.emi-calc-price-note {
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-brand-primary) 7%, transparent);
  border: 1px solid var(--color-border-brand);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}

/* Highlight the tenure most customers pick */
.emi-pop-row {
  background: color-mix(in srgb, var(--color-brand-primary) 5%, transparent);
}

.emi-pop-tag {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand-text);
  background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  vertical-align: middle;
}

/* What you need for card EMI */
.emi-docs-section {
  margin-bottom: var(--space-10);
}

.emi-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.emi-doc-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.emi-doc-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  color: var(--color-brand-text);
}

.emi-doc-item strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.emi-doc-item span {
  display: block;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.emi-fineprint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  line-height: 1.6;
}

/* Hero payment-brand strip */
.emi-hero-paylogos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.pay-logo-img {
  height: 22px;
  width: auto;
  opacity: 0.85;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.pay-logo-img:hover {
  opacity: 1;
}

/* More Ways to Pay (Dazzle-style bKash/Nagad EMI + exchange + COD) */
.emi-payways-section {
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.emi-payways-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.emi-payway-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-payway-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
}

/* Fixed-height media slot so logo cards and icon cards align across the row */
.emi-payway-media {
  height: 48px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
}

.emi-payway-logo {
  height: 30px;
  width: auto;
}

.emi-payway-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  color: var(--color-brand-text);
}

.emi-payway-card h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.emi-payway-card p {
  font-size: var(--font-size-xs);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Dazzle-style financing popup: bank list pane + tenure table pane */
.emi-modal-card {
  max-width: 900px;
}

.emi-modal-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.emi-modal-bank-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  display: grid;
  gap: 2px;
}

.emi-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-bank-row:hover {
  background: var(--color-surface-subtle);
}

.emi-bank-row.selected {
  background: color-mix(in srgb, var(--color-brand-primary) 9%, transparent);
  outline: 1px solid var(--color-border-brand);
}

.emi-bank-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.emi-bank-row-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.35;
}

.emi-bank-row-monthly {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  white-space: nowrap;
}

.emi-modal-selected-bank {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.emi-modal-table-pane .emi-table {
  font-size: var(--font-size-2xs);
}

/* On phones the tenure table scrolls sideways instead of crushing its headers */
.emi-table-wrap {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .emi-table {
    min-width: 480px;
  }
}

/* "More ways to pay" logo row inside the modal */
.emi-modal-payways {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.emi-modal-payways-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.emi-modal-payways .pay-logo-img {
  height: 16px;
}

.emi-modal-payways-note {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  /* Stack the panes: bank list becomes a horizontal scroller */
  .emi-modal-layout {
    grid-template-columns: 1fr;
  }

  .emi-modal-bank-list {
    max-height: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2);
  }

  .emi-bank-row {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-width: 180px;
    border: 1px solid var(--color-border-default);
  }

  .emi-payways-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   LIVE OTHER PRICE CHECK (Dazzle-style) — PDP trigger + modal
   ============================================================ */
.live-price-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.live-price-trigger:hover {
  color: var(--color-text-primary);
}

.live-price-trigger svg {
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.live-price-trigger:hover svg {
  transform: translateX(3px);
}

.live-price-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  animation: liveprice-pulse 1.8s ease-out infinite;
}

@keyframes liveprice-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .live-price-dot { animation: none; }
}

.liveprice-modal-card {
  max-width: 560px;
}

.liveprice-prod-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.liveprice-save-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.liveprice-save-label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.liveprice-save-amt {
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-brand-text);
  letter-spacing: -0.02em;
}

.liveprice-save-vs {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.liveprice-rows {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.liveprice-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.liveprice-row:first-child {
  border-top: 0;
}

.liveprice-row.is-you {
  background: var(--color-surface-subtle);
}

.liveprice-rank {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  min-width: 26px;
}

.liveprice-shop {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.liveprice-you-chip {
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.liveprice-delta {
  color: var(--color-brand-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  min-width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.liveprice-amount {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  min-width: 104px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.liveprice-disclaimer {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .liveprice-save-amt {
    font-size: var(--font-size-2xl);
  }
  .liveprice-row {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }
  .liveprice-delta {
    min-width: 0;
  }
  .liveprice-amount {
    min-width: 0;
  }
}

@media (max-width: 540px) {
  .emi-payways-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ accordion (native <details>) */
.emi-faq-section {
  margin-bottom: var(--space-10);
}

.emi-faq-list {
  border-top: 1px solid var(--color-border-subtle);
}

.emi-faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.emi-faq-item summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-2);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  list-style: none;
  position: relative;
  padding-right: var(--space-8);
}

.emi-faq-item summary::-webkit-details-marker {
  display: none;
}

.emi-faq-item summary::after {
  content: '+';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-text);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-faq-item[open] summary::after {
  content: '−';
}

.emi-faq-item summary:hover {
  color: var(--color-brand-text);
}

.emi-faq-item p {
  padding: 0 var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* CTA banner */
.emi-cta-banner {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border-radius: var(--comp-product-card-radius);
  background:
    radial-gradient(ellipse 55% 90% at 50% 115%, rgba(255, 255, 255, 0.16) 0%, transparent 70%),
    linear-gradient(135deg, var(--primitive-brand-500), var(--primitive-brand-700));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-glow-brand);
  margin-bottom: var(--space-10);
}

.emi-cta-banner p {
  font-size: var(--font-size-sm);
  opacity: 0.85;
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}

.emi-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.emi-cta-btn-primary {
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--primitive-brand-700);
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-7);
  cursor: pointer;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-cta-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
}

.emi-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-7);
  text-decoration: none;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.emi-cta-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

.emi-cta-banner h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
  margin-bottom: var(--space-5);
}

.emi-cta-banner .btn-primary-large {
  flex: 0 1 auto;
  background: var(--color-surface-card);
  color: var(--color-brand-text);
  padding: 0 var(--space-8);
  box-shadow: var(--shadow-sm);
}

.emi-cta-banner .btn-primary-large:hover {
  background: var(--color-brand-subtle);
}

/* EMI page responsive */
@media (max-width: 768px) {
  .emi-hero {
    padding: var(--space-10) var(--space-5);
  }
  .emi-hero h1 {
    font-size: var(--font-size-2xl);
  }
  .emi-hero-stat {
    padding: var(--space-2) var(--space-4);
  }
  .emi-hero-stat strong {
    font-size: var(--font-size-lg);
  }
  .emi-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .emi-calc-card {
    padding: var(--space-5);
  }
  .emi-docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .emi-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .emi-steps-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .emi-calc-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .emi-hero-paylogos {
    gap: var(--space-4);
  }
  .pay-logo-img {
    height: 18px;
  }
}

/* --------------------------------------------------------------------------
   22. AUTH — SIGN IN / OTP MODAL (Task 4)
   Base modal chrome (.modal-backdrop / .modal-card / .modal-close-btn) is
   reused; everything below is auth-specific.
   -------------------------------------------------------------------------- */
.auth-modal-box {
  max-width: 400px;
  padding: var(--space-6);
  text-align: left;
}

/* The auth modal has no .modal-header; float the close button over the card */
.auth-modal-box .modal-close-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  border: none;
  background: transparent;
  cursor: pointer;
}

.auth-step h3 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  padding-right: var(--space-8); /* keep the title clear of the close button */
}

.auth-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.auth-fineprint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  line-height: 1.5;
  text-align: center;
}

.auth-submit-btn {
  width: 100%;
  margin-top: var(--space-4);
}

.otp-input-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.otp-box {
  flex: 1 1 52px;      /* shrink to fit one row on 390px mobile viewports */
  min-width: 0;
  max-width: 52px;
  height: 60px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--font-size-xl);
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.otp-box:focus {
  outline: none;
  border-color: var(--color-brand-outline);
  background: var(--input-bg-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.auth-resend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  gap: var(--space-2);
}

/* Highlight the signed-in profile icon in the header. */
.user-signed-in .account-btn {
  color: var(--color-brand-text);
}

/* ============================================================
   USED / PRE-OWNED DEVICES PAGE (#used) — hero, cards, modal
   ============================================================ */
.used-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
}

.used-hero {
  margin-bottom: var(--space-8);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--color-brand-primary) 12%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 90% 100%, color-mix(in srgb, var(--color-brand-primary) 7%, transparent) 0%, transparent 70%),
    var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--comp-product-card-radius);
  box-shadow: var(--shadow-md);
}

.used-hero h1 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: 1.15;
  margin: var(--space-4) 0;
}

.used-hero p {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.used-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.used-hero-stat {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.used-hero-stat strong {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-brand-text);
}

.used-hero-stat span {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.used-hero-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.used-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.used-condition-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.used-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.used-chip span {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.used-chip:hover {
  border-color: var(--color-brand-outline);
  color: var(--color-brand-text);
}

.used-chip.selected {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-contrast);
}

.used-chip.selected span {
  background: color-mix(in srgb, #ffffff 22%, transparent);
  color: #ffffff;
}

.used-count-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.used-devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.used-device-card {
  background: var(--comp-product-card-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--comp-product-card-radius);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.used-device-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
  border-color: var(--color-brand-outline);
}

.used-card-media {
  position: relative;
  background: var(--color-surface-subtle);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
}

.used-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.used-device-card:hover .used-card-media img {
  transform: scale(1.05);
}

.badge-used {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-text-primary);
  color: var(--color-surface-card);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.used-card-media .used-condition-chip {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.used-condition-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.used-condition-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.used-condition-chip.cond-like-new { color: var(--color-success); }
.used-condition-chip.cond-excellent { color: var(--color-warning); }
.used-condition-chip.cond-good { color: var(--color-text-secondary); }

.used-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.used-card-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.used-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.used-meta-row .meta-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
}

.used-battery {
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.used-battery-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}

.used-battery-top strong {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.used-battery-bar {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-border-subtle);
  overflow: hidden;
}

.used-battery-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
}

.used-battery .bh-high { color: var(--color-success); }
.used-battery-bar span.bh-high { background: var(--color-success); }
.used-battery .bh-mid { color: var(--color-warning); }
.used-battery-bar span.bh-mid { background: var(--color-warning); }
.used-battery .bh-low { color: var(--primitive-rose-500); }
.used-battery-bar span.bh-low { background: var(--primitive-rose-500); }

.used-remarks {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
}

.used-remarks svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.used-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.used-price-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.used-price {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-brand-text);
  white-space: nowrap;
}

.used-vs-new {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.used-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  transition: transform var(--motion-fast), opacity var(--motion-fast);
}

.used-device-card:hover .used-card-cta {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-outline);
  color: var(--color-brand-contrast);
}

/* How buying used works */
.used-steps {
  margin-top: var(--space-12);
}

.used-steps h2,
.used-page .catalog-seo-block h2 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--space-6);
}

.used-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.used-step-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.used-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  font-family: var(--font-family-display);
  font-weight: 800;
  margin-bottom: var(--space-3);
}

.used-step-card h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.used-step-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Used device detail page (reuses PDP layout classes) */
.used-pdp-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.used-pdp-badges .badge-used {
  position: static;
}

.used-title-tag {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.pdp-sku-code {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.used-pdp-battery {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.used-pdp-battery .used-battery {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.used-battery-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
}

.used-pdp-specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Single-column inspection list inside the info column */
.used-pdp-inspection ul {
  grid-template-columns: 1fr;
}

.used-pdp-cta .btn-primary-large,
.used-pdp-cta .btn-secondary-large {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  white-space: nowrap;
}

.used-pdp-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 960px) {
  .used-hero {
    padding: var(--space-10) var(--space-5);
  }
  .used-hero h1 {
    font-size: var(--font-size-2xl);
  }
  .used-steps-grid {
    grid-template-columns: 1fr;
  }
  .used-page .catalog-seo-block h2 {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 640px) {
  .used-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .used-hero-stat {
    min-width: 104px;
    padding: var(--space-2) var(--space-4);
  }
  .used-hero-stat strong {
    font-size: var(--font-size-lg);
  }
  .used-pdp-cta {
    flex-direction: column;
  }
}

/* Restored: used unit spec list + inspection checklist (shared page styles) */
.used-spec-list {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.used-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.used-spec-row:first-child {
  border-top: 0;
}

.used-spec-row span {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.used-spec-row strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-align: right;
  min-width: 0;
}

.used-checklist {
  background: var(--color-success-bg);
  border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.used-checklist-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-success);
  margin-bottom: var(--space-2);
}

.used-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-4);
}

.used-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--font-size-2xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.used-checklist li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Savings line under the used price — proper pill */
.used-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  border: 1px solid color-mix(in srgb, var(--color-brand-outline) 25%, transparent);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}

/* Mobile: stack the reservation CTAs (overrides the 2-col CTA grid at <=768px) */
@media (max-width: 640px) {
  .used-pdp-cta {
    display: grid;
    grid-template-columns: 1fr;
  }
  .used-pdp-cta .btn-primary-large,
  .used-pdp-cta .btn-secondary-large {
    width: 100%;
    white-space: normal;
  }
}

.home-brands-section { margin-bottom: var(--space-12); }
.hero-bento-grid { align-items: start; }
.hero-main-carousel { position: relative; min-width: 0; }
.hero-banner-viewport { position: relative; aspect-ratio: 15 / 8; border: 0; border-radius: 12px; overflow: hidden; background: #efefef; }
.hero-banner-slide { position: absolute; inset: 0; visibility: hidden; pointer-events: none; background: #080808; }
.hero-banner-slide:first-child { background: #efefef; }
.hero-banner-slide.is-active { visibility: visible; pointer-events: auto; z-index: 2; }
.hero-banner-slide.is-leaving { visibility: visible; z-index: 1; }
.hero-banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-banner-nav { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; justify-content: center; align-items: center; gap: 2px; width: fit-content; margin: 0; padding: 1px 4px; border: 0; border-radius: 999px; }
.hero-banner-nav::before { content: ''; position: absolute; inset: 4px 6px; border-radius: inherit; background: rgb(25 25 28 / 78%); pointer-events: none; }
.hero-banner-dot { position: relative; display: flex; justify-content: center; align-items: center; width: 32px; height: 28px; cursor: pointer; border-radius: 999px; }
.hero-banner-dot span { width: 14px; height: 5px; border-radius: 999px; clip-path: inset(0 4px round 3px); background: rgb(255 255 255 / 45%); transition: clip-path 240ms cubic-bezier(.2, .7, .2, 1), background-color 180ms ease; }
.hero-banner-dot[aria-current="true"] span { clip-path: inset(0 0 round 4px); background: #ffffff; }
.hero-banner-dot:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.hero-banner-arrow { position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-block: auto; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(25 25 28 / 55%); color: #fff; cursor: pointer; }
.hero-banner-prev { left: 10px; }
.hero-banner-next { right: 10px; }
.hero-banner-arrow:hover { background: rgb(25 25 28 / 75%); }
.hero-banner-arrow:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.hero-bento-secondary { display: grid; min-width: 0; gap: var(--space-4); }
.hero-bento-secondary .promo-tile-card { display: block; min-width: 0; min-height: 0; padding: 0; aspect-ratio: 15 / 8; width: 100%; border: 0; border-radius: 12px; box-shadow: none; background: #080808; }
.hero-bento-secondary .promo-macbook { background: #f7f7f9; }
.hero-bento-secondary .bento-banner-img { position: absolute; inset: 0; display: block; object-fit: contain; }
.hero-banner-slide img, .hero-bento-secondary .bento-banner-img { transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .hero-banner-slide:hover img, .hero-bento-secondary .promo-tile-card:hover .bento-banner-img { transform: scale(1.025); }
}
.hero-bento-secondary .promo-tile-card:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 3px; }
@media (min-width: 961px) {
  .hero-bento-grid { align-items: stretch; }
  .hero-bento-secondary { contain: size; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .hero-bento-secondary .promo-tile-card { aspect-ratio: auto; }
}
@media (max-width: 960px) {
  .hero-bento-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-bento-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-slide, .hero-banner-slide img, .hero-banner-dot span { transition: none; }
  .hero-banner-slide img, .hero-bento-secondary .bento-banner-img { transition: none; }
  .hero-banner-slide:hover img, .hero-bento-secondary .promo-tile-card:hover .bento-banner-img { transform: none; }
}
@media (max-width: 640px) {
  .hero-banner-nav { bottom: 8px; gap: 1px; padding: 1px 3px; }
  .hero-banner-arrow { display: none; }
  .hero-banner-dot { width: 24px; height: 20px; }
  .hero-banner-dot span { width: 10px; height: 4px; clip-path: inset(0 3px round 2px); transition: clip-path 340ms cubic-bezier(.2,.7,.2,1), background-color 260ms ease; }
  .hero-banner-dot[aria-current="true"] span { clip-path: inset(0 0 round 3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-slide, .hero-banner-slide img, .hero-banner-dot span { transition: none; }
}
.home-collection-section .section-header-flex { align-items: center; flex-direction: row; gap: 16px; }
.category-squircle-grid.product-rail, .home-brand-grid.product-rail { grid-template-columns: none; }
.product-rail > .category-squircle-card, .product-rail > .home-brand-card { scroll-snap-align: start; }
.home-brand-grid.product-rail { --rail-columns: 6; --rail-gap: 16px; }
.home-brand-logo { width: 100px; max-width: 80%; height: 48px; object-fit: contain; margin-bottom: 6px; }
[data-theme="dark"] .home-brand-logo { filter: brightness(0) invert(1); }
.home-product-section { margin-bottom: var(--space-12); scroll-margin-top: 80px; }
.home-product-section .section-header-flex { align-items: center; flex-direction: row; gap: 16px; margin-bottom: 20px; }
.home-product-section .section-title-group h2 { gap: 6px; }
.flash-deals-title-group { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; width: 100%; gap: 16px; min-width: 0; }
.flash-deals-title-group h2 { white-space: nowrap; }
.flash-deals-countdown { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--color-brand-primary); color: var(--color-brand-contrast); font-size: var(--font-size-2xs); line-height: 1; white-space: nowrap; }
.flash-deals-countdown[hidden] { display: none; }
.flash-deals-countdown-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.product-rail {
  --rail-gap: 20px;
  --rail-columns: 5;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--rail-columns) * var(--rail-gap)) / (var(--rail-columns) + .5));
  align-items: stretch;
  gap: var(--rail-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 12px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.product-rail::-webkit-scrollbar { display: none; }
/* Leave room for edge-card shadows while keeping cards aligned with headings. */
.home-product-section .product-rail {
  margin-inline: -8px;
  padding: 8px 8px 14px;
  scroll-padding-inline: 8px;
  overscroll-behavior-x: none;
}
.product-rail > .storefront-card { scroll-snap-align: start; }
.product-rail.is-looping { scroll-snap-type: none; }
.product-rail:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.home-rail-wrapper { position: relative; min-width: 0; }
.home-rail-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* Keep vertical centering independent of the shared button press transform. */
  translate: 0 -50%;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: 0 3px 12px rgb(0 0 0 / 12%);
  cursor: pointer;
}
.home-rail-prev { left: -16px; }
.home-rail-next { right: -16px; }
.home-rail-arrow:hover:not(:disabled) { border-color: var(--color-brand-outline); background: var(--color-brand-primary); color: var(--color-brand-contrast); }
.home-rail-arrow:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.home-rail-arrow:disabled { opacity: .4; cursor: default; box-shadow: none; }
.home-rail-arrow[hidden] { display: none; }
@media (max-width: 640px) {
  .home-rail-arrow { display: none; }
}
@media (min-width: 1200px) {
  .product-grid, .used-devices-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) { .product-rail { --rail-columns: 4; --rail-gap: 16px; } }
@media (max-width: 900px) { .product-rail { --rail-columns: 3; } }
@media (max-width: 640px) {
  .product-rail { --rail-columns: 1; --rail-gap: 12px; }
  .flash-deals-title-group { gap: 8px; flex-wrap: wrap; }
  .flash-deals-title-group h2 { font-size: clamp(18px, 5vw, 24px); }
  .flash-deals-countdown { flex-shrink: 0; gap: 5px; padding: 8px; font-size: var(--font-size-2xs); }
  .flash-deals-countdown svg { width: 13px; height: 13px; }
  .flash-deals-countdown-time { font-size: var(--font-size-2xs); letter-spacing: .02em; }
}
.home-brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.home-brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 144px; padding: 24px 16px; border: 1px solid var(--color-border-strong, var(--color-border-default)); border-radius: 12px; background: var(--color-surface-card); color: var(--color-text-primary); cursor: pointer; }
.home-brand-wordmark { font-family: 'Manrope', var(--font-family-body); font-size: 15px; font-weight: 600; }
.home-brand-card:hover { border-color: var(--color-brand-outline); }
.home-brand-card:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
@media (max-width: 1024px) { .home-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-brand-grid.product-rail { --rail-columns: 4; } }
@media (max-width: 640px) {
  .home-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .home-brand-card { min-height: 132px; padding: 20px 12px; }
  .home-brand-grid.product-rail { --rail-columns: 2; --rail-gap: 12px; }
  .home-brand-wordmark { font-size: 15px; }
  .used-devices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* Shared storefront cards: savings strip, product art, title, and price. */
.storefront-card {
  --storefront-card-radius: 9px;
  --storefront-card-paper: #ffffff;
  --storefront-card-stage: #f6f6f6;
  --storefront-card-ink: #161819;
  --storefront-card-muted: #707070;
  --storefront-card-shadow: 0 3px 8px rgb(0 0 0 / 12%);
  container-type: inline-size;
  min-width: 0;
  padding: 0;
  background: var(--storefront-card-paper);
  border: 0;
  border-radius: var(--storefront-card-radius);
  box-shadow: var(--storefront-card-shadow);
  font-family: 'Manrope', var(--font-family-body);
  justify-content: flex-start;
}
[data-theme="dark"] .storefront-card {
  --storefront-card-paper: #202326;
  --storefront-card-stage: #292c2f;
  --storefront-card-ink: #f3f3f3;
  --storefront-card-muted: #b5b5b5;
  --storefront-card-shadow: 0 3px 8px rgb(0 0 0 / 24%);
  background: var(--storefront-card-paper);
  border: 0;
  box-shadow: var(--storefront-card-shadow);
}
.storefront-card:hover, [data-theme="dark"] .storefront-card:hover { transform: none; box-shadow: var(--storefront-card-shadow); }
.storefront-card a { text-decoration: none; color: inherit; }
.storefront-card .product-card-savings-link { display: block; }
.storefront-card .product-card-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: clamp(36px, 14cqi, 50px);
  padding: 8px 5px;
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
  border: 1px solid transparent;
  font-size: clamp(var(--font-size-2xs), 5.4cqi, var(--font-size-lg));
  font-weight: 800;
  white-space: nowrap;
}
.storefront-card .product-card-savings strong { color: inherit; font-size: inherit; font-weight: inherit; }
[data-storefront-style="outline"] #home-view .storefront-card .product-card-savings {
  background: #ffffff;
  color: var(--color-brand-text);
  border-color: var(--color-brand-outline);
  border-width: 1px;
  border-radius: var(--storefront-card-radius) var(--storefront-card-radius) 0 0;
}
[data-storefront-style="outline"] #home-view .storefront-card:hover .product-card-savings {
  background: var(--color-brand-primary);
  color: var(--color-brand-contrast);
}
.storefront-card .product-card-media, .storefront-card .used-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1.18;
  height: auto;
  padding: 0;
  margin: 0;
  background: var(--storefront-card-stage);
  border-radius: 0 0 8px 8px;
}
.storefront-card .product-card-image-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.storefront-card .product-card-thumb, .storefront-card .used-card-media img {
  width: 76%;
  height: 76%;
  max-width: 76%;
  max-height: 76%;
  object-fit: contain;
  filter: none;
  transition: transform 320ms cubic-bezier(.2, .65, .3, 1), opacity var(--motion-fast);
}
.storefront-card:hover .product-card-thumb, .storefront-card:hover .used-card-media img { transform: scale(1.055); }
@media (prefers-reduced-motion: reduce) {
  .storefront-card .product-card-thumb, .storefront-card .used-card-media img { transition: none; }
  .storefront-card:hover .product-card-thumb, .storefront-card:hover .used-card-media img { transform: none; }
}
.storefront-card .product-card-body, .storefront-card .used-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: clamp(10px, 5cqi, 18px);
  color: var(--storefront-card-ink);
}
.storefront-card .product-card-title, .storefront-card .used-card-title {
  font-family: inherit;
  font-size: clamp(var(--font-size-sm), 6cqi, var(--font-size-xl));
  font-weight: 600;
  line-height: 1.4;
  height: 2.8em;
  margin: 0 0 clamp(14px, 6cqi, 22px);
  color: var(--storefront-card-ink);
}
.storefront-card .product-price-block { margin: auto 0 0; }
.storefront-card .price-row, .storefront-card .used-price-stack { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.storefront-card .cash-price, .storefront-card .used-price { font-family: inherit; font-size: clamp(20px, 9.5cqi, 32px); font-weight: 800; color: var(--storefront-card-ink); letter-spacing: -.035em; line-height: 1.25; }
.storefront-card .regular-price, .storefront-card .used-vs-new { font-size: clamp(var(--font-size-2xs), 5cqi, var(--font-size-base)); font-weight: 400; color: var(--storefront-card-muted); }
.storefront-card .used-meta-row { font-size: var(--font-size-2xs); color: var(--storefront-card-muted); margin: -8px 0 14px; }
.storefront-card .used-price-row { margin-top: auto; padding: 0; }
.storefront-card .product-compare-btn { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--color-border-default); border-radius: 50%; background: var(--storefront-card-paper); color: var(--storefront-card-muted); opacity: 0; pointer-events: none; z-index: 3; cursor: pointer; }
.storefront-card .product-compare-btn.active, .storefront-card .product-compare-btn:hover { color: var(--color-brand-text); border-color: var(--color-brand-outline); }
.storefront-card:hover .product-compare-btn, .storefront-card:focus-within .product-compare-btn, .storefront-card .product-compare-btn.active { opacity: 1; pointer-events: auto; }
.storefront-card :focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -3px; }
@media (hover: none) {
  .storefront-card .product-compare-btn { opacity: 1; pointer-events: auto; width: 32px; height: 32px; top: 6px; right: 6px; }
}

/* Keep half of the next category visible at every screen size. */
.category-squircle-grid.product-rail {
  grid-template-rows: 144px;
  grid-auto-columns: calc((100% - 8 * 12px) / 8.5);
  gap: 12px;
  scroll-snap-type: none;
}
.home-brand-grid.product-rail {
  grid-template-rows: 108px;
  grid-auto-columns: 108px;
  gap: 12px;
  align-items: stretch;
  scroll-snap-type: none;
}
.home-collection-track {
  display: grid;
  grid-column: 1;
  grid-row: 1 / -1;
  grid-auto-flow: column;
  grid-template-rows: inherit;
  grid-auto-columns: inherit;
  gap: inherit;
  width: max-content;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .home-collection-track { will-change: auto; }
}
.category-squircle-grid.product-rail .category-squircle-card {
  min-height: 0;
  padding: 16px 8px;
  gap: 10px;
  justify-content: center;
}
.category-squircle-grid.product-rail .category-squircle-img { width: 64px; height: 64px; margin: 0; flex-shrink: 0; }
.category-squircle-grid.product-rail .category-squircle-label { font-size: var(--font-size-xs); line-height: 1.4; }
.home-brand-grid.product-rail .home-brand-card {
  aspect-ratio: 1;
  min-height: 0;
  padding: 10px 8px;
  gap: 8px;
  border-radius: 10px;
}
.home-brand-grid.product-rail .home-brand-logo { width: 76px; height: 34px; margin: 0; }
.home-brand-grid.product-rail .home-brand-wordmark { font-size: var(--font-size-xs); line-height: 1.4; }
@media (max-width: 1200px) {
  .category-squircle-grid.product-rail { grid-auto-columns: calc((100% - 4 * 12px) / 4.5); }
}
@media (max-width: 640px) {
  .category-squircle-grid.product-rail { grid-template-rows: repeat(2, 132px); grid-auto-columns: calc((100% - 3 * 10px) / 3.5); gap: 10px; }
  .home-brand-grid.product-rail { grid-template-rows: repeat(2, 96px); grid-auto-columns: 96px; gap: 10px; }
  .category-squircle-grid.product-rail .category-squircle-card { padding: 8px 6px; gap: 6px; }
  .category-squircle-grid.product-rail .category-squircle-img { width: 48px; height: 48px; }
  .category-squircle-grid.product-rail .category-squircle-label { font-size: var(--font-size-xs); line-height: 1.25; }
}

/* Creator reviews: an editorial video strip with a quiet, continuous rightward drift. */
.creator-reviews-section {
  --review-paper: var(--color-canvas);
  padding: clamp(32px, 5vw, 64px) 0;
  margin-bottom: 24px;
  background: var(--review-paper);
  font-family: 'Manrope', var(--font-family-body);
}
.creator-reviews-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.creator-reviews-header h2 { margin: 0 0 12px; color: var(--color-text-primary); font-size: clamp(25px, 3vw, 38px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.creator-reviews-header h2 > span { color: var(--color-text-muted); font-weight: 500; }
.creator-reviews-intro { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: 1.7; }
.creator-reviews-controls { display: flex; flex-shrink: 0; gap: 8px; }
.creator-reviews-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--color-surface-card); border: 1px solid var(--color-border-default); border-radius: 50%; color: var(--color-text-primary); cursor: pointer; }
.creator-reviews-controls button:hover:not(:disabled), .creator-reviews-controls button[aria-pressed="true"]:not(:disabled) { color: var(--color-brand-text); border-color: var(--color-brand-outline); }
.creator-reviews-controls button:disabled { opacity: .5; cursor: default; }
.creator-reviews-controls button[hidden] { display: none; }
.creator-reviews-fade { position: relative; }
.creator-reviews-fade::before, .creator-reviews-fade::after { content: ''; position: absolute; inset-block: 0; width: clamp(18px, 4vw, 60px); z-index: 2; pointer-events: none; }
.creator-reviews-fade::before { left: 0; background: linear-gradient(to right, var(--review-paper), transparent); }
.creator-reviews-fade::after { right: 0; background: linear-gradient(to left, var(--review-paper), transparent); }
.creator-reviews-fade:focus-within::before, .creator-reviews-fade:focus-within::after { opacity: 0; }
.creator-reviews-viewport { --review-card-width: 344px; --review-gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 4px 0 12px; overscroll-behavior-x: contain; scrollbar-width: none; }
.creator-reviews-viewport::-webkit-scrollbar { display: none; }
.creator-reviews-track { display: flex; align-items: stretch; gap: var(--review-gap); width: max-content; }
.creator-review-card { display: flex; flex-direction: column; flex: 0 0 var(--review-card-width); width: var(--review-card-width); overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-surface-card); }
.creator-review-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-sunken); text-decoration: none; }
.creator-review-media-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-primary); font-size: 24px; font-weight: 800; letter-spacing: -.05em; }
.creator-review-media-fallback small { color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: 500; letter-spacing: 0; }
.creator-review-media > img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.creator-review-media > img[hidden] { display: none; }
.creator-review-play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand-primary); color: var(--color-brand-contrast); }
.creator-review-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.creator-review-body h3 { margin: 0 0 8px; font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }
.creator-review-body blockquote { flex: 1; margin: 0 0 12px; font-family: var(--font-family-bengali); font-size: 18px; line-height: 1.6; font-weight: 600; color: var(--color-text-primary); }
.creator-review-body blockquote > span { color: var(--color-brand-text); }
.creator-review-author { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.creator-review-avatar { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--color-brand-primary) 9%, var(--color-surface-card)); color: var(--color-brand-text); font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: -.04em; }
.creator-review-author strong { display: block; margin-bottom: 3px; font-size: var(--font-size-sm); color: var(--color-text-primary); }
.creator-review-author div > span { display: block; color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.creator-review-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text-primary); text-decoration: none; font-size: var(--font-size-xs); font-weight: 800; transition: color var(--motion-fast), border-color var(--motion-fast); }
.creator-review-link > svg:first-child { color: var(--color-brand-text); }
.creator-review-link-arrow { margin-left: auto; }
.creator-review-link:hover { color: var(--color-brand-text); border-color: var(--color-brand-outline); }
.creator-reviews-section :focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -3px; }
@media (max-width: 640px) {
  .creator-reviews-header { flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
  .creator-reviews-header h2 > span { display: block; }
  .creator-reviews-intro { max-width: 290px; font-size: var(--font-size-xs); }
  .creator-reviews-viewport { --review-card-width: 272px; --review-gap: 14px; }
  .creator-review-body { padding: 14px; }
  .creator-review-body blockquote { font-size: 17px; }
}

/* Each filter lives in its own panel with native multi-select checkboxes. */
@media (min-width: 961px) {
  .filter-sidebar { background: transparent; border: 0; padding: 0; }
}
.filter-sidebar-header, .filter-sidebar .filter-group {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.filter-sidebar .filter-group:last-child { margin-bottom: 14px; }
.filter-checkbox-list { display: flex; flex-direction: column; gap: 2px; }
.filter-sidebar .filter-checkbox-list {
  max-height: 214px; /* Six 34px options plus five 2px gaps. */
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}
.filter-sidebar .filter-checkbox-list::-webkit-scrollbar { width: 4px; }
.filter-sidebar .filter-checkbox-list::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar .filter-checkbox-list::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 999px; }
.filter-sidebar .filter-checkbox-list::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.filter-sidebar .filter-checkbox-option { flex-shrink: 0; }
.filter-sidebar .filter-option-count { flex-shrink: 0; }
.filter-checkbox-list[hidden] { display: none; }
.filter-checkbox-option { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); cursor: pointer; }
.filter-checkbox-option input { appearance: auto; width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--color-brand-primary); cursor: pointer; }
.filter-checkbox-option input:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.filter-checkbox-option:has(input:checked) { color: var(--color-text-primary); font-weight: 600; }
.filter-option-count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: 400; }
#catalog-brand-strip { border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-surface-card); padding: 8px 12px; gap: 4px 16px; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
#catalog-brand-strip .filter-checkbox-option { flex-shrink: 0; gap: 8px; white-space: nowrap; }
@media (max-width: 640px) {
  #catalog-view .breadcrumb-row {
    margin-bottom: var(--space-3);
  }
  #catalog-view .catalog-page-layout {
    padding-top: 0;
  }
  #catalog-brand-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 16px;
    padding: 8px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  #catalog-brand-strip .filter-checkbox-option {
    min-width: 0;
    padding: 4px 0;
    scroll-snap-align: start;
  }
}