/* ==========================================================================
   RONGIN BAZAR LUXURY E-COMMERCE STYLESHEET
   Crafted for Premium Sunglasses & Modern High-Conversion Storefront
   ========================================================================== */

:root {
  /* Brand Palettes */
  --primary: #e11d74;
  --primary-hover: #be185d;
  --primary-glow: rgba(225, 29, 116, 0.35);
  /* Rongin Bazar brand fill colour */
  --primary-gradient: #e11d74; /* buttons and brand fills: solid magenta (owner found the gradient too busy) */
  --accent-cyan: #0d9488;
  --accent-cyan-glow: rgba(13, 148, 136, 0.3);
  
  /* Dark Theme Default */
  --bg-main: #0a0d14;
  --bg-surface: #111724;
  --bg-card: #151d2e;
  --bg-card-hover: #1c263c;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: #e11d74;
  
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  
  --badge-bg: rgba(225, 29, 116, 0.15);
  --badge-text: #f472b6;
  --success: #10b981;
  --danger: #ef4444;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 25px var(--primary-glow);
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  --font-heading: 'Outfit', 'Hind Siliguri', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Hind Siliguri', sans-serif;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border-color: #e2e8f0;
  --border-focus: #be185d;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;
  
  --badge-bg: #fce7f3;
  --badge-text: #9d174d;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 20px rgba(225, 29, 116, 0.2);
}

/* CSS Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* body alone having overflow-x:hidden doesn't fully stop the mobile
     browser's own viewport from panning sideways when ANY element on
     the page is wider than the screen — the html root needs it too.
     This is what let the whole checkout modal (position:fixed, so it
     moves with viewport pan) shift left/right on touch instead of
     just clipping the offending content in place. */
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button, input, select, textarea {
  font-family: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
}

.gradient-text {
  background: linear-gradient(135deg, #f472b6 0%, #e11d74 50%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   TOP ANNOUNCEMENT MARQUEE
   ========================================================================== */
.top-announcement-bar {
  background: linear-gradient(90deg, #e11d74 0%, #db2777 45%, #0d9488 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(225, 29, 116, 0.2);
}

.announcement-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: scroll-marquee 30s linear infinite;
  gap: 2.5rem;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   SITE HEADER NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 13, 20, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.88);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  gap: 1.5rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-main);
}

.logo-text .highlight {
  color: var(--primary);
}

.logo-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  .desktop-nav {
    display: flex;
  }
}

.nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  padding: 0.4rem 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-main);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-gradient);
  border-radius: var(--radius-full);
}

.nav-link.special-link {
  color: var(--primary);
  background: var(--badge-bg);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Search Box */
.search-box-wrapper {
  position: relative;
  display: none;
}

@media (min-width: 640px) {
  .search-box-wrapper {
    display: block;
  }
}

.search-input-box {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  width: 220px;
  transition: var(--transition);
}

@media (min-width: 1200px) {
  .search-input-box {
    width: 280px;
  }
}

.search-input-box:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.search-input-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 0.85rem;
  width: 100%;
  margin-left: 0.5rem;
}

.search-icon {
  color: var(--text-dim);
}

.clear-search-btn {
  display: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 0 0.2rem;
}

.search-results-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: none;
  max-height: 380px;
  overflow-y: auto;
  z-index: 105;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition);
}

.search-item:hover {
  background: var(--bg-card-hover);
}

.search-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.search-item-info h4 {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.search-item-info span {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 700;
}

/* Icon Buttons */
.icon-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.icon-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

.btn-text-sm {
  font-size: 0.8rem;
  font-weight: 600;
  display: none;
}

@media (min-width: 768px) {
  .btn-text-sm {
    display: inline;
  }
  .icon-btn {
    padding: 0.5rem 0.9rem;
  }
}

/* Theme Toggle */
.sun-icon { display: none; }
.moon-icon { display: block; }

[data-theme="light"] .sun-icon { display: block; }
[data-theme="light"] .moon-icon { display: none; }

/* Cart Button */
.cart-trigger-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--primary-gradient);
  color: #000;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glow);
}

.cart-trigger-btn:hover {
  transform: scale(1.05);
}

.cart-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #000;
  color: #f472b6;
  font-size: 0.75rem;
  font-weight: 800;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
}

.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--text-main);
}

@media (min-width: 992px) {
  .mobile-menu-btn {
    display: none;
  }
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100%;
  background: var(--bg-surface);
  z-index: 160;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.mobile-drawer.active {
  transform: translateX(0);
}

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

.close-drawer-btn {
  font-size: 1.8rem;
  color: var(--text-muted);
}

.drawer-content {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Drawer category nav (index.html / category.html mobile menu) */
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition);
}

.drawer-nav-link:hover,
.drawer-nav-link.active {
  background: var(--bg-card-hover);
  color: var(--primary);
}

.drawer-nav-link .badge-cat-hot,
.drawer-nav-link .badge-cat-new {
  margin-left: auto;
}

.drawer-highlight-gadget {
  background: linear-gradient(90deg, rgba(225, 29, 116, 0.15), rgba(239, 68, 68, 0.05));
  font-weight: 700;
}

.drawer-highlight-fashion {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.05));
  font-weight: 700;
}

.drawer-footer {
  margin-top: auto;
  padding-top: 1.25rem;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}

.contact-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.contact-phone {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.contact-card small {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.m-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.95rem;
}

.m-link:hover, .m-link.active {
  background: var(--bg-card-hover);
  color: var(--primary);
}

/* Button Component Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transition);
}

.btn-primary {
  background: var(--primary-gradient);
  color: #000;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(225, 29, 116, 0.5);
}

.btn-outline {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

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

.btn-block {
  width: 100%;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-whatsapp:hover {
  background: #20b858;
}

/* ==========================================================================
   PRODUCTS CATALOG
   ========================================================================== */
.products-section {
  padding: 4.5rem 0;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  .section-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.section-subtitle {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-title {
  font-size: 2rem;
  margin-top: 0.35rem;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-tab {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.cat-tab:hover, .cat-tab.active {
  background: var(--primary-gradient);
  color: #000;
  border-color: var(--primary);
}

.catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.sort-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-wrapper select {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  outline: none;
}

/* Products Grid & Cards */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

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

.product-card {
  background: var(--bg-card, #131b2e);
  border: 1px solid var(--border-color, #1e293b);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 116, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card-media, .card-image-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #0a0f1d !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-media img, .card-image-wrap img, .card-thumb-img, .card-product-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease;
}

.product-card:hover .card-media img,
.product-card:hover .card-image-wrap img {
  transform: scale(1.05);
}

.card-badges-group, .card-badge-row {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  z-index: 5 !important;
}

.card-badge, .badge-discount, .card-badge-discount {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
  letter-spacing: 0.3px !important;
}

.card-badge.trending, .badge-tag, .card-badge-trend {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.card-badge.trending.hot, .badge-tag.hot {
  background: var(--primary-gradient) !important;
  color: #000000 !important;
  border: none !important;
}

.card-badge-power, .card-badge-rx {
  background: #8b5cf6 !important;
  color: #ffffff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.card-quick-view-btn, .quick-view-overlay-btn, .card-view-pill {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
  z-index: 5;
  pointer-events: none;
}

.product-card:hover .card-quick-view-btn,
.product-card:hover .quick-view-overlay-btn,
.product-card:hover .card-view-pill {
  opacity: 1;
  transform: translateY(0);
}

.card-body, .card-info {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  background: transparent !important;
}

.card-meta-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
  min-height: 18px !important;
}

.card-brand, .card-cat-tag {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--primary, #e11d74) !important;
  letter-spacing: 0.4px !important;
}

.rx-tag {
  font-size: 0.7rem !important;
  color: #a78bfa !important;
  background: rgba(139, 92, 246, 0.15) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

.card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  color: #f8fafc !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.65rem !important;
  cursor: pointer;
}

.product-card:hover .card-title {
  color: var(--primary, #e11d74) !important;
}

.card-rating {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
  min-height: 18px !important;
}

.stars-gold {
  color: #e11d74 !important;
  font-size: 0.85rem !important;
}

.card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  min-height: 26px !important;
}

.current-price {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.regular-price {
  font-size: 0.85rem !important;
  color: #64748b !important;
  text-decoration: line-through !important;
}

.card-actions {
  margin-top: auto !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}

.btn-card-buy, .btn-order-direct {
  flex: 1 !important;
  background: var(--primary-gradient) !important;
  color: #0b0f19 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  text-decoration: none;
}

.btn-card-buy:hover, .btn-order-direct:hover {
  background: var(--primary-gradient) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(225, 29, 116, 0.4) !important;
}

.btn-card-cart, .btn-icon-cart {
  width: 42px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.btn-card-cart:hover, .btn-icon-cart:hover {
  background: #334155 !important;
  border-color: #e11d74 !important;
  color: #e11d74 !important;
}

/* Mobile Responsiveness for Product Cards & Grid */
@media (max-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .card-body, .card-info {
    padding: 10px 8px !important;
  }

  .card-title {
    font-size: 0.84rem !important;
    height: 2.35rem !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  .current-price {
    font-size: 1.05rem !important;
  }

  .regular-price {
    font-size: 0.75rem !important;
  }

  .btn-card-buy, .btn-order-direct {
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
  }

  .btn-card-cart, .btn-icon-cart {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
  }
}

/* ==========================================================================
   MODALS (Quick View, Size Guide, 1-Page Checkout, Tracking)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

.modal-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  width: 100%;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.modal-overlay.active .modal-dialog {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-close-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.modal-body {
  padding: 1.75rem;
}

/* Size Guide Dialog */
.size-guide-dialog {
  max-width: 750px;
}

.guide-header {
  text-align: center;
  margin-bottom: 2rem;
}

.guide-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
}

.face-shape-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.shape-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
  border-radius: var(--radius-md);
}

.shape-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.shape-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.shape-card p {
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.shape-card small {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.guide-footer {
  text-align: center;
}

/* Quick View Dialog */
.quick-view-dialog {
  max-width: 860px;
}

.qv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .qv-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.qv-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qv-main-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.qv-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.qv-thumb-img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.qv-thumb-img.active {
  border-color: var(--primary);
}

.qv-details h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.qv-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}

.qv-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
}

.qv-features-list {
  list-style: none;
  margin-bottom: 1.5rem;
}

.qv-features-list li {
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qv-features-list li::before {
  content: '✓';
  color: var(--primary);
  font-weight: bold;
}

/* ==========================================================================
   1-PAGE FAST CHECKOUT MODAL
   ========================================================================== */
.checkout-dialog {
  max-width: 960px;
}

.checkout-header {
  margin-bottom: 1.5rem;
}

.checkout-step-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.checkout-header h2 {
  font-size: 1.65rem;
  margin: 0.35rem 0 0.25rem;
}

.checkout-header p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.checkout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 860px) {
  .checkout-container {
    grid-template-columns: 1.35fr 1fr;
  }
}

.checkout-form .form-group {
  margin-bottom: 1.15rem;
}

.checkout-form label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.req {
  color: var(--danger);
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 0.9rem;
}

.checkout-form input:focus,
.checkout-form textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Delivery Radio Cards */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.radio-card.active {
  border-color: var(--primary);
  background: rgba(225, 29, 116, 0.08);
}

.radio-card input {
  accent-color: var(--primary);
}

.r-content .r-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
}

.r-content .r-charge {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Payment Options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pay-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pay-option.active {
  border-color: var(--primary);
  background: rgba(225, 29, 116, 0.08);
}

.pay-option input {
  accent-color: var(--primary);
}

.p-content strong {
  display: block;
  font-size: 0.88rem;
}

.p-content small {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Bundle Deal Card */
.bundle-offer-card {
  background: linear-gradient(135deg, rgba(225, 29, 116, 0.15) 0%, rgba(13, 148, 136, 0.1) 100%);
  border: 1px dashed var(--primary);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.15rem;
}

.bundle-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.bundle-checkbox-label input {
  accent-color: var(--primary);
  width: 1.1rem;
  height: 1.1rem;
}

.bundle-text {
  font-size: 0.85rem;
}

.submit-order-btn {
  width: 100%;
  padding: 0.95rem;
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

.secure-checkout-tag {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.75rem;
}

/* Checkout Summary Section */
.checkout-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  height: fit-content;
}

.checkout-summary h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.summary-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 1.25rem;
}

.s-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.s-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.s-item-info {
  flex: 1;
}

.s-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s-item-price {
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 700;
}

.summary-calc {
  border-top: 1px solid var(--border-color);
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}

.discount-row {
  color: var(--success);
}

.grand-total {
  font-size: 1.15rem;
  color: var(--text-main);
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
}

.total-val {
  color: var(--primary);
}

/* ==========================================================================
   ORDER SUCCESS CONFIRMATION MODAL
   ========================================================================== */
.order-success-dialog {
  max-width: 550px;
}

.text-center {
  text-align: center;
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.success-sub {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.success-order-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.s-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-color);
}

.s-row:last-child {
  border-bottom: none;
}

.highlight-id {
  color: var(--primary);
}

.badge-pending {
  color: #f472b6;
  font-size: 0.8rem;
  font-weight: 600;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
   TRACK ORDER MODAL
   ========================================================================== */
.track-dialog {
  max-width: 600px;
}

.track-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.track-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.track-form .track-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.track-input-group input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  outline: none;
}

.track-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

/* Visual Progress Bar */
.track-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 1.5rem 0 1rem;
}

.track-stepper::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: var(--border-color);
  z-index: 1;
}

.step-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.step-node.completed .step-circle {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.step-node.active .step-circle {
  background: var(--primary-gradient);
  border-color: var(--primary);
  color: #000;
  box-shadow: 0 0 10px var(--primary);
}

.step-label {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.step-node.completed .step-label,
.step-node.active .step-label {
  color: var(--text-main);
  font-weight: 600;
}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 170;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 380px;
  height: 100%;
  background: var(--bg-surface);
  z-index: 180;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

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

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

.cart-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.close-cart-btn {
  font-size: 1.8rem;
  color: var(--text-muted);
}

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item-row {
  display: flex;
  gap: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
}

.cart-item-row img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cart-item-info {
  flex: 1;
}

.c-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-price {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 700;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.qty-btn {
  width: 24px;
  height: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.qty-val {
  font-size: 0.85rem;
  font-weight: 600;
}

.remove-cart-item {
  color: var(--text-dim);
  align-self: flex-start;
  padding: 0.2rem;
}

.remove-cart-item:hover {
  color: var(--danger);
}

.empty-cart-state {
  text-align: center;
  margin: auto 0;
}

.empty-cart-state span {
  font-size: 3rem;
}

.empty-cart-state p {
  color: var(--text-muted);
  margin: 0.5rem 0 1rem;
}

.cart-drawer-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.cart-subtotal-row strong {
  color: var(--primary);
}

.delivery-notice {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

/* ==========================================================================
   REVIEWS & TESTIMONIALS
   ========================================================================== */
.reviews-section {
  padding: 4rem 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

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

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stars {
  color: #e11d74;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.review-comment {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-style: italic;
}

.reviewer-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reviewer-avatar {
  width: 38px;
  height: 38px;
  background: var(--primary-gradient);
  color: #000;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviewer-meta strong {
  display: block;
  font-size: 0.88rem;
}

.reviewer-meta small {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.p-badge {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #e2e8f0;
}

/* ==========================================================================
   FLOATING WHATSAPP & TOAST NOTIFICATIONS
   ========================================================================== */
.floating-whatsapp {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 54px;
  height: 54px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  z-index: 120;
  transition: transform 0.25s ease;
}

.floating-whatsapp:hover {
  transform: scale(1.1);
}

.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: toast-in 0.3s ease;
  pointer-events: auto;
}

.toast.success {
  border-color: var(--success);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================
   ADDED: RECONFIRM, OTP & PRESCRIPTION MODAL STYLES
   ========================================== */
/* ====================================================
   NEW FEATURE STYLES: ORDER SUCCESS, RECONFIRM & OTP
   ==================================================== */

.order-success-dialog {
  max-width: 650px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.success-main-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.success-sub-title {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* Re-confirmation Callout Box (Screenshot Match) */
.reconfirm-callout-box {
  background: #f0fdf4;
  border: 2px dashed #86efac;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.reconfirm-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.15rem;
  color: #166534;
  margin-bottom: 0.5rem;
}

.reconfirm-sub {
  font-size: 0.95rem;
  color: #15803d;
  margin-bottom: 1.25rem;
}

.btn-reconfirm {
  background: linear-gradient(135deg, #ff5722, #f43f5e);
  color: #ffffff;
  border: none;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-reconfirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 63, 94, 0.5);
}

.reconfirm-checks {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: #166534;
  line-height: 1.6;
  text-align: center;
}

.reconfirm-checks p {
  margin: 3px 0;
}

.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}

.btn-whatsapp:hover {
  opacity: 0.9;
  color: #ffffff;
}

.success-details-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: left;
}

.success-details-card .s-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
}

.success-details-card .s-row:last-child {
  border-bottom: none;
}

.highlight-id {
  font-family: monospace;
  font-size: 1.1rem;
  color: var(--primary);
}

/* Islamic Policy Box (Screenshot Match) */
.islamic-policy-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}

.policy-heading {
  font-size: 1.25rem;
  font-weight: 800;
  color: #065f46;
  margin-bottom: 4px;
}

.bismillah-text {
  font-size: 0.95rem;
  color: #047857;
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}

.hadith-quote-card {
  background: #ffffff;
  border-left: 4px solid #10b981;
  border-radius: 6px;
  padding: 1rem;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.hadith-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
  font-style: italic;
  margin-bottom: 4px;
}

.hadith-ref {
  font-size: 0.8rem;
  font-weight: 700;
  color: #059669;
}

/* ====================================================
   4-DIGIT OTP MODAL STYLES (Screenshot Match)
   ==================================================== */
.otp-dialog {
  max-width: 420px;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.otp-main-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.otp-sub-text {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.otp-inputs-wrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1rem;
}

.otp-digit {
  width: 58px;
  height: 64px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.otp-digit:focus {
  border-color: #84cc16;
  box-shadow: 0 0 0 4px rgba(132, 204, 22, 0.2);
}

.btn-verify-otp {
  background: #84cc16;
  color: #ffffff;
  border: none;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(132, 204, 22, 0.35);
  transition: all 0.2s ease;
}

.btn-verify-otp:hover {
  background: #65a30d;
}

.resend-timer-box {
  font-size: 0.88rem;
  color: #64748b;
}

.btn-resend-link {
  background: none;
  border: none;
  color: #4f46e5;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ====================================================
   PRESCRIPTION EYEGLASSES MODAL & LENS CARDS
   ==================================================== */
.prescription-dialog {
  max-width: 650px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.rx-option-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.rx-tab-btn {
  padding: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

.rx-tab-btn.active {
  background: var(--primary-gradient);
  color: #ffffff;
  border-color: var(--primary);
}

.upload-dropzone {
  border: 2px dashed var(--border-color);
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.upload-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.rx-file-preview-wrap {
  margin-top: 12px;
  text-align: center;
}

.rx-file-preview-wrap img {
  max-height: 120px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

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

.power-eye-box {
  background: var(--bg-surface);
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.eye-label {
  font-size: 0.85rem;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
  color: var(--primary);
}

.power-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lens-options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.lens-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.2s ease;
}

.lens-card.active {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

.lens-price-tag {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.95rem;
}

/* Quick Order Card Button */
.card-quick-order-btn {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.card-quick-order-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.product-rating-stars {
  color: #e11d74;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.product-rating-count {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-left: 4px;
}

.product-pricing-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0;
}

.current-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

.old-price {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.discount-tag {
  background: #fee2e2;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}


/* ==========================================
   CLICKABLE PRODUCT CARDS ENHANCEMENTS
   ========================================== */
.clickable-media {
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
}
.clickable-media img {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-card:hover .clickable-media img {
  transform: scale(1.06) !important;
}
.clickable-title {
  cursor: pointer !important;
  transition: color 0.2s ease, text-decoration 0.2s ease !important;
}
.clickable-title:hover {
  color: var(--primary, #e11d74) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   RONGIN BAZAR BRAND LOGO & GOLD/WHITE SHINING EFFECT
   ========================================================================== */
.brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  padding: 2px 4px;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(225, 29, 116, 0.35));
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Gold Shimmer Sweep Reflection (Default / Dark Mode) */
.gold-shimmer-sweep {
  position: absolute;
  top: -50%;
  left: -120%;
  width: 65%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 215, 0, 0) 25%,
    rgba(255, 215, 0, 0.45) 45%,
    rgba(255, 255, 220, 0.95) 55%,
    rgba(255, 215, 0, 0.45) 65%,
    rgba(255, 215, 0, 0) 80%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: goldShimmerSweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  mix-blend-mode: color-dodge;
}

@keyframes goldShimmerSweep {
  0% {
    left: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  42% {
    left: 170%;
    opacity: 0.95;
  }
  48%, 100% {
    left: 170%;
    opacity: 0;
  }
}

/* White Shimmer Sweep Reflection (Light Mode / On White Color) */
[data-theme="light"] .brand-logo-img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

[data-theme="light"] .gold-shimmer-sweep,
body.light-theme .gold-shimmer-sweep {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 1) 55%,
    rgba(255, 255, 255, 0.7) 65%,
    rgba(255, 255, 255, 0) 80%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  animation: whiteShimmerSweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes whiteShimmerSweep {
  0% {
    left: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  42% {
    left: 170%;
    opacity: 1;
  }
  48%, 100% {
    left: 170%;
    opacity: 0;
  }
}

/* Nav & Tab Badges */
.nav-badge-hot, .tab-pill-hot, .badge-cat-hot {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  background: linear-gradient(135deg, #ef4444, #db2777);
  color: #fff;
  border-radius: 4px;
  margin-left: 0.35rem;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  letter-spacing: 0.5px;
}

.nav-badge-new, .tab-pill-new, .badge-cat-new {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  border-radius: 4px;
  margin-left: 0.35rem;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.35);
  letter-spacing: 0.5px;
}

/* ==========================================================================
   HERO 2-COLUMN LAYOUT & LEFT CATEGORY SIDEBAR
   ========================================================================== */
.hero-section {
  padding: 1.75rem 0 2rem;
  position: relative;
  background: radial-gradient(circle at 80% 20%, rgba(225, 29, 116, 0.07) 0%, transparent 60%);
}

.hero-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .hero-layout-grid {
    grid-template-columns: 270px 1fr;
    gap: 1.5rem;
  }
}

/* Left Category Sidebar */
.hero-category-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

/* Below 1024px: sidebar moves into the right-side hamburger drawer; banner takes full width */
@media (max-width: 1023px) {
  .hero-category-sidebar {
    display: none;
  }
}

.cat-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.15rem;
  background: linear-gradient(90deg, rgba(225, 29, 116, 0.12), transparent);
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.cat-header-icon-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-bg);
  color: var(--primary);
  border-radius: 6px;
}

.cat-sidebar-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.cat-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 1.15rem;
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid transparent;
}

.cat-sidebar-item:hover {
  background: var(--bg-card-hover);
  color: var(--primary);
  border-left-color: var(--primary);
  padding-left: 1.35rem;
}

.cat-item-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.cat-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  display: inline-block;
}

.cat-arrow {
  color: var(--text-dim);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.cat-sidebar-item:hover .cat-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

/* Highlight Gadget Item */
.cat-sidebar-item.highlight-gadget {
  background: linear-gradient(90deg, rgba(225, 29, 116, 0.15), rgba(239, 68, 68, 0.05));
  border-left-color: #e11d74;
  font-weight: 700;
}

.cat-sidebar-item.highlight-gadget:hover {
  background: linear-gradient(90deg, rgba(225, 29, 116, 0.25), rgba(239, 68, 68, 0.1));
}

.pulse-icon {
  animation: pulseIcon 1.8s infinite ease-in-out;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(225, 29, 116, 0)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(225, 29, 116, 0.8)); }
}

/* Highlight Fashion Item */
.cat-sidebar-item.highlight-fashion {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.05));
  border-left-color: #ec4899;
  font-weight: 600;
}

.cat-sidebar-item.highlight-fashion:hover {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.1));
}

.badge-cat-count {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--bg-surface);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.cat-sidebar-bottom-trust {
  margin-top: auto;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.trust-mini-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================================================
   PROMOTIONAL HERO BANNER CAROUSEL
   ========================================================================== */
.hero-banner-main {
  position: relative;
  min-height: 420px;
  display: flex;
}

.hero-carousel-container {
  position: relative;
  width: 100%;
  min-height: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
  padding: 2.2rem 2rem;
  display: flex;
  align-items: center;
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Slide Gradients & Themes */
.slide-gadgets {
  background: linear-gradient(135deg, #0e1320 0%, #17120a 50%, #0c101c 100%);
}

.slide-fashion {
  background: linear-gradient(135deg, #180d19 0%, #1f101a 50%, #100b14 100%);
}

.slide-eyewear {
  background: linear-gradient(135deg, #0b141e 0%, #0d1a22 50%, #081017 100%);
}

.slide-saree {
  background: linear-gradient(135deg, #1b0a16 0%, #2b0f24 50%, #120710 100%);
}

[data-theme="light"] .slide-gadgets {
  background: linear-gradient(135deg, #fffbeb 0%, #fce7f3 50%, #ffffff 100%);
}

[data-theme="light"] .slide-fashion {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #ffffff 100%);
}

[data-theme="light"] .slide-eyewear {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #ffffff 100%);
}

[data-theme="light"] .slide-saree {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #ffffff 100%);
}

.slide-inner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

@media (min-width: 768px) {
  .slide-inner-grid {
    grid-template-columns: 1.25fr 0.95fr;
    gap: 2rem;
  }
}

.slide-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.badge-banner-gold {
  background: rgba(225, 29, 116, 0.18);
  color: #e11d74;
  border: 1px solid rgba(225, 29, 116, 0.35);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.badge-banner-red {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.badge-banner-pink {
  background: rgba(236, 72, 153, 0.18);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.35);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.badge-banner-cyan {
  background: rgba(13, 148, 136, 0.18);
  color: #0d9488;
  border: 1px solid rgba(13, 148, 136, 0.35);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
}

.slide-headline {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 0.8rem;
  letter-spacing: -0.3px;
}

@media (min-width: 992px) {
  .slide-headline {
    font-size: 2.15rem;
  }
}

.text-gradient-gold {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-pink {
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.slide-subtext {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 1.15rem;
}

.slide-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.perk-item {
  font-size: 0.82rem;
  color: #10b981;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.slide-buttons-row {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.btn-banner-primary {
  background: var(--primary-gradient);
  color: #000;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 15px rgba(225, 29, 116, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-banner-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 29, 116, 0.6);
}

.btn-banner-fashion {
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-banner-fashion:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
}

.btn-banner-outline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
}

.btn-banner-outline:hover {
  background: var(--bg-surface);
  border-color: var(--primary);
}

/* Banner Visual & Image */
.image-showcase-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-orb {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(65px);
  opacity: 0.35;
  pointer-events: none;
}

.orb-gold { background: var(--primary-gradient); }
.orb-pink { background: #ec4899; }
.orb-cyan { background: #0d9488; }

.banner-product-img {
  width: 100%;
  max-width: 320px;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
  transition: transform 0.4s ease;
}

.carousel-slide:hover .banner-product-img {
  transform: scale(1.03);
}

.floating-promo-card {
  position: absolute;
  bottom: -12px;
  right: 10px;
  background: rgba(17, 23, 36, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 3;
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .floating-promo-card {
  background: rgba(255, 255, 255, 0.94);
}

.floating-badge-hot {
  font-size: 0.68rem;
  font-weight: 800;
  color: #e11d74;
  margin-bottom: 2px;
}

.floating-badge-new {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ec4899;
  margin-bottom: 2px;
}

.floating-promo-card strong {
  font-size: 0.85rem;
  color: var(--text-main);
}

.floating-promo-card small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Carousel Arrow Controls */
.carousel-nav-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 0.85rem;
  pointer-events: none;
  z-index: 10;
}

.carousel-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(17, 23, 36, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.carousel-arrow:hover {
  background: var(--primary-gradient);
  color: #000;
  transform: scale(1.1);
  border-color: var(--primary);
}

/* Carousel Indicator Dots */
.carousel-dots-container {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot.active {
  width: 26px;
  border-radius: 5px;
  background: var(--primary-gradient);
  box-shadow: 0 0 10px var(--primary);
}

/* ==========================================================================
   HERO BANNER — MOBILE FIXES
   Slides are position:absolute + inset:0 with a fixed min-height container
   so the desktop crossfade works. On mobile the 1-column stacked content
   (badges+headline+subtext+perks+buttons+image) is taller than that fixed
   height, so it was clipped by the container's overflow:hidden. Fix: make
   the active slide participate in normal flow instead of being absolute,
   so the container height matches its real content.
   ========================================================================== */
@media (max-width: 767px) {
  .hero-banner-main {
    min-height: 0;
  }

  .hero-carousel-container {
    min-height: 0;
    box-shadow: 0 0 0 2px rgba(225, 29, 116, 0.45), 0 10px 34px rgba(225, 29, 116, 0.22), 0 14px 36px rgba(0, 0, 0, 0.5);
  }

  .carousel-slide {
    position: static;
    display: none;
    padding: 1rem 0.85rem;
  }

  .carousel-slide.active {
    display: flex;
  }

  /* Full-bleed photo with a short headline + one CTA overlaid on top,
     matching a reference (Zatiq) mobile banner — the image is the banner
     now, not a column next to text. */
  .carousel-slide {
    padding: 0;
  }

  .slide-inner-grid {
    display: block;
    position: relative;
  }

  .slide-image-col,
  .image-showcase-wrap {
    width: 100%;
  }

  .banner-product-img {
    width: 100%;
    max-width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
  }

  .slide-text-col {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 3rem 1rem 1.1rem;
    background: linear-gradient(0deg, rgba(2, 4, 8, 0.92) 0%, rgba(2, 4, 8, 0.6) 60%, transparent 100%);
    min-width: 0;
    text-align: center;
  }

  .slide-subtext,
  .slide-perks-row {
    display: none;
  }

  .slide-badge-row {
    gap: 0.35rem;
    margin-bottom: 0.5rem;
  }

  .badge-banner-gold,
  .badge-banner-red,
  .badge-banner-pink,
  .badge-banner-cyan {
    font-size: 0.62rem;
    padding: 0.2rem 0.55rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  .slide-badge-row > *:nth-child(n+2) {
    display: none;
  }

  .slide-headline {
    font-size: 1.15rem;
    line-height: 1.3;
    margin-bottom: 0.65rem;
    /* text-shadow alone doesn't reliably render on the gradient-clipped
       spans (background-clip:text + transparent fill) inside the
       headline, so a drop-shadow filter + a thin stroke back it up —
       keeps the headline legible over any photo, not just dark ones. */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
    -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35);
  }

  .slide-buttons-row {
    justify-content: center;
  }

  .slide-buttons-row > * {
    position: relative;
    overflow: hidden;
    font-size: 0.75rem;
    padding: 0.5rem 0.9rem;
    white-space: normal;
    text-align: center;
    flex: 0 1 auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  .slide-buttons-row > *::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%);
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: bannerBtnShine 3s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes bannerBtnShine {
    0%, 40% { background-position: 200% 0; }
    70%, 100% { background-position: -40% 0; }
  }

  .slide-buttons-row > *:nth-child(n+2) {
    display: none;
  }

  /* Redundant with the headline/button already overlaid on the image —
     dropped on mobile instead of stacking two text blocks on one photo. */
  .floating-promo-card {
    display: none;
  }

  .carousel-nav-arrows {
    padding: 0 0.5rem;
  }

  .carousel-arrow {
    width: 26px;
    height: 26px;
  }

  .carousel-arrow svg {
    width: 16px;
    height: 16px;
  }

  .carousel-dots-container {
    position: static;
    transform: none;
    justify-content: center;
    padding: 0.5rem 0 0;
  }

  .carousel-dot {
    width: 6px;
    height: 6px;
  }

  .carousel-dot.active {
    width: 20px;
    box-shadow: 0 0 10px var(--primary), 0 0 3px var(--primary);
  }
}

/* ==========================================================================
   WORLD-CLASS ATTRACTIVE E-COMMERCE FOOTER
   ========================================================================== */
.site-footer {
  background: #080b12;
  color: #e2e8f0;
  border-top: 1px solid var(--border-color);
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .site-footer {
  background: #0f172a;
  color: #cbd5e1;
}

/* VIP Ribbon */
.footer-vip-newsletter {
  background: linear-gradient(90deg, #18130b 0%, #261908 50%, #18130b 100%);
  border-bottom: 1px solid rgba(225, 29, 116, 0.2);
  padding: 2.2rem 0;
}

.newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.newsletter-text-wrap {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  max-width: 600px;
}

.vip-icon {
  font-size: 2.2rem;
  background: rgba(225, 29, 116, 0.15);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(225, 29, 116, 0.3);
}

.vip-title {
  font-size: 1.35rem;
  color: #f472b6;
  margin-bottom: 0.2rem;
}

.vip-subtitle {
  color: #d1d5db;
  font-size: 0.88rem;
}

.newsletter-form {
  flex: 1;
  max-width: 440px;
  min-width: 280px;
}

.newsletter-input-group {
  display: flex;
  background: rgba(10, 13, 20, 0.9);
  border: 1px solid rgba(225, 29, 116, 0.4);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.3rem 0.3rem 1.15rem;
  transition: all 0.25s ease;
}

.newsletter-input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.3);
  border-color: #e11d74;
}

.newsletter-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 0.88rem;
  width: 100%;
}

.btn-newsletter-submit {
  background: var(--primary-gradient);
  color: #000;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  padding: 0.65rem 1.25rem;
  white-space: nowrap;
}

.btn-newsletter-submit:hover {
  transform: scale(1.03);
}

/* Main 4-Column Grid */
.footer-main-section {
  padding: 3.5rem 0 2.5rem;
}

.footer-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .footer-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer-grid-4 {
    grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr;
    gap: 3rem;
  }
}

.footer-mission-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-top: 0.8rem;
}

.footer-social-links {
  display: flex;
  gap: 0.75rem;
}

.social-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.social-icon-btn:hover {
  background: var(--primary-gradient);
  color: #000;
  transform: translateY(-2px);
}

.social-icon-btn.whatsapp:hover {
  background: #25d366;
  color: #fff;
}

.footer-col-title {
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--primary-gradient);
  border-radius: 2px;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-nav-list li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #94a3b8;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}

.footer-nav-list li a:hover {
  color: #e11d74;
  transform: translateX(4px);
}

.footer-badge-hot {
  font-size: 0.65rem;
  background: #ef4444;
  color: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 700;
}

.footer-badge-new {
  font-size: 0.65rem;
  background: #ec4899;
  color: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-weight: 700;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-entry {
  display: flex;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: #cbd5e1;
}

.entry-icon {
  font-size: 1.15rem;
  line-height: 1.4;
}

.contact-entry strong {
  display: block;
  color: #f1f5f9;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.phone-link, .whatsapp-link {
  color: #f472b6;
  font-weight: 700;
}

.phone-link:hover, .whatsapp-link:hover {
  text-decoration: underline;
}

.entry-sub {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Partners Bar */
.footer-partners-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.4rem 0;
  background: rgba(0, 0, 0, 0.2);
}

.partners-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.partner-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.partner-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
}

.partner-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.payment-badge, .courier-badge {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}

.bkash-badge { color: #e2136e; border-color: rgba(226, 19, 110, 0.4); font-weight: 800; }
.nagad-badge { color: #f7941d; border-color: rgba(247, 148, 29, 0.4); font-weight: 800; }
.rocket-badge { color: #8c3494; border-color: rgba(140, 52, 148, 0.4); font-weight: 800; }
.cod-badge { color: #10b981; border-color: rgba(16, 185, 129, 0.4); font-weight: 800; }

/* Bottom Bar */
.footer-bottom-bar {
  padding: 1.25rem 0;
  font-size: 0.82rem;
  color: #64748b;
}

.bottom-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright-text strong {
  color: #e11d74;
}

.security-seal {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: #10b981;
}

/* Footer — center everything on mobile instead of left-hugging with empty
   right-side whitespace (all footer rows are flex/space-between, which
   looks lopsided once they wrap to a single narrow column) */
@media (max-width: 767px) {
  .newsletter-inner {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-text-wrap {
    flex-direction: column;
    text-align: center;
  }

  .footer-brand-col,
  .footer-links-col,
  .footer-contact-col {
    text-align: center;
  }

  /* Per request: mobile footer keeps just the newsletter ribbon, brand
     block (logo + mission text + social icons) and the bottom copyright
     bar — the category list, customer-service list, contact column and
     payment/courier badge row felt cluttered/unprofessional stacked on
     a narrow screen (categories are already one tap away via the
     hamburger drawer; contact info is on the product/track-order flow). */
  .footer-links-col,
  .footer-contact-col,
  .footer-partners-bar {
    display: none;
  }

  .footer-social-links {
    justify-content: center;
  }

  .footer-nav-list,
  .contact-info-list {
    align-items: center;
  }

  .footer-nav-list li a {
    justify-content: center;
  }

  .contact-entry {
    flex-direction: column;
    align-items: center;
  }

  .partners-grid,
  .partner-group {
    flex-direction: column;
    text-align: center;
    /* Flex items default to min-width:auto (= max-content), so a
       shrink-wrapped item containing a wrapped badge row still sizes
       itself as if unwrapped and overflows the viewport — this was the
       footer "can be dragged left-right" bug. min-width:0 forces it to
       respect the container width and actually wrap. */
    min-width: 0;
    width: 100%;
  }

  .partner-badges {
    justify-content: center;
  }

  .bottom-bar-inner {
    flex-direction: column;
    text-align: center;
  }

  .security-seal {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Decorative underline under footer column titles is absolutely
     positioned at left:0, so it stayed left even once the title text
     above it was centered — recenter it too. */
  .footer-col-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Category Tab Gadget & Fashion Accents */
.cat-tab.cat-tab-gadget {
  border-color: rgba(225, 29, 116, 0.4);
  font-weight: 700;
}

.cat-tab.cat-tab-fashion {
  border-color: rgba(236, 72, 153, 0.4);
  font-weight: 700;
}

/* ==========================================================================
   TRUST BADGES BAR (Horizontal 4-Column Pasha-Pashi Layout)
   ========================================================================== */
.trust-bar-section {
  padding: 1.5rem 0 2.25rem 0;
  position: relative;
  z-index: 10;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
  width: 100%;
}

@media (max-width: 1080px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 580px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.trust-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trust-item:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 29, 116, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  background: var(--bg-card-hover);
}

.trust-item:hover::before {
  opacity: 1;
}

.trust-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(225, 29, 116, 0.12);
  border: 1px solid rgba(225, 29, 116, 0.25);
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.trust-item:hover .trust-icon {
  transform: scale(1.1);
  background: rgba(225, 29, 116, 0.2);
}

.trust-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.trust-text strong {
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.3;
}

.trust-text small {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ==========================================================================
   DEDICATED CATEGORY PAGE STYLES (Multi-Page Architecture)
   ========================================================================== */
.cat-page-hero {
  position: relative;
  padding: 3rem 0 2.5rem 0;
  background: linear-gradient(135deg, rgba(17, 23, 36, 0.95) 0%, rgba(10, 13, 20, 0.98) 100%);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.cat-hero-bg-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  filter: blur(1px);
  mask-image: linear-gradient(to right, transparent, black);
  -webkit-mask-image: linear-gradient(to right, transparent, black);
  pointer-events: none;
}

.cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.cat-breadcrumb a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.cat-breadcrumb a:hover {
  color: var(--primary);
}

.cat-breadcrumb-sep {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.cat-breadcrumb .current {
  color: var(--text-main);
  font-weight: 600;
}

.cat-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.cat-header-main {
  max-width: 720px;
}

.cat-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.cat-page-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.cat-page-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.cat-badge-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid rgba(225, 29, 116, 0.3);
}

.cat-page-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .cat-page-hero {
    padding: 2rem 0 1.5rem;
  }
  .cat-page-icon {
    font-size: 1.6rem;
  }
  .cat-page-title {
    font-size: 1.5rem;
  }
  .cat-page-desc {
    font-size: 0.9rem;
  }
}

/* Subcategories Filter Chips Bar */
.subcat-chips-section {
  padding: 1.1rem 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 4.5rem;
  z-index: 40;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.subcat-chips-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.65rem;
}

.subcat-chips-scroll {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}

.subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.subcat-chip:hover {
  background: var(--bg-card-hover);
  border-color: rgba(225, 29, 116, 0.4);
  color: var(--primary);
  transform: translateY(-1px);
}

.subcat-chip.active {
  background: var(--primary-gradient);
  color: #000;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(225, 29, 116, 0.35);
}

.subcat-chip .chip-count {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
}

.subcat-chip.active .chip-count {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}

/* Category Grid Toolbar */
.cat-grid-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0 1.5rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.cat-counter-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.cat-counter-text strong {
  color: var(--primary);
}

.cat-sort-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.cat-sort-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
}

.cat-sort-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ==========================================
   Logo Safeguards & Desktop Nav Perfect Alignment
   ========================================== */
.brand-logo-img,
.footer-logo-img,
.brand-logo-wrap img,
.footer-brand-col img,
.footer-logo-wrap img {
  max-width: 160px !important;
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.desktop-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex: 1;
}

@media (min-width: 992px) {
  .desktop-nav {
    display: flex;
  }
}

.desktop-nav .nav-link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
  color: var(--primary);
}




/* ==========================================================================
   SINGLE PRODUCT PAGE STYLES (MOBILE-FIRST & CONVERSION-OPTIMIZED)
   ========================================================================== */

.product-page-main {
  padding: 1.5rem 0 3.5rem 0;
  min-height: 80vh;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.breadcrumb-nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-nav a:hover {
  color: var(--primary);
}

.breadcrumb-nav .sep {
  color: #475569;
}

.breadcrumb-nav .current-title {
  color: var(--text-main);
  font-weight: 600;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Product Hero Grid */
.product-hero-grid {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* Gallery Section */
.product-gallery-wrap {
  position: sticky;
  top: 90px;
  min-width: 0;
}

.main-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0a0f1d;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 1rem;
}

.main-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.main-image-box:hover .main-product-img {
  transform: scale(1.04);
}

.gallery-badges-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 10;
}

.gallery-thumbs-list {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  min-width: 0;
}

.thumb-btn {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  background: #0a0f1d;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-btn.active, .thumb-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(225, 29, 116, 0.4);
}

/* Product Info Box */
.product-info-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-cat-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.prod-cat-pill {
  background: rgba(225, 29, 116, 0.12);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(225, 29, 116, 0.3);
}

.prod-brand-pill {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.product-title-h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 12px;
}

.product-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.product-pricing-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.price-main {
  font-size: 2.2rem;
  font-weight: 900;
  color: #10b981;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.price-regular {
  font-size: 1.15rem;
  color: #64748b;
  text-decoration: line-through;
}

.discount-save-tag {
  background: #ef4444;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
}

.stock-status-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #10b981;
  font-weight: 700;
  margin-bottom: 18px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 8px 14px;
  border-radius: 8px;
  width: fit-content;
}

/* Key Highlights Bullets */
.product-highlights-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.highlights-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.highlights-list li span.chk {
  color: #10b981;
  font-weight: bold;
}

/* Quantity & Action Buttons */
.purchase-action-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
}

.qty-picker {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #0f172a;
  overflow: hidden;
}

.qty-btn {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 1.1rem;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.qty-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.qty-num-input {
  width: 44px;
  height: 38px;
  background: transparent;
  border: none;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
}

.btn-buy-instant {
  background: var(--primary-gradient);
  color: #0b0f19;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 15px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(225, 29, 116, 0.4);
  transition: all 0.25s ease;
  width: 100%;
}

.btn-buy-instant:hover {
  background: var(--primary-gradient);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(225, 29, 116, 0.5);
}

.secondary-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-add-cart-outline {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-add-cart-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #273549;
}

.btn-whatsapp-direct {
  background: #25d366;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-whatsapp-direct:hover {
  background: #20ba59;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

/* Trust Features 4-Grid */
.product-trust-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #0f172a;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px;
}

.trust-mini-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-mini-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.trust-mini-text strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.25;
}

.trust-mini-text small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Tabs & Description Section */
.product-tabs-wrapper {
  margin-top: 3rem;
  border-top: 1px solid var(--border-color);
  padding-top: 2rem;
}

.nav-tabs-header {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-btn.active {
  background: rgba(225, 29, 116, 0.15);
  color: var(--primary);
  border: 1px solid rgba(225, 29, 116, 0.35);
}

.tab-pane {
  display: none;
  line-height: 1.75;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.tab-pane.active {
  display: block;
}

.tab-pane p {
  margin-bottom: 1rem;
  color: var(--text-main);
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

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

.specs-table td {
  padding: 10px 14px;
  font-size: 0.9rem;
}

.specs-table td:first-child {
  font-weight: 700;
  color: var(--text-muted);
  width: 35%;
  background: rgba(255, 255, 255, 0.015);
}

.specs-table td:last-child {
  color: var(--text-main);
}

/* 1-Step Direct Checkout Section */
.instant-checkout-card {
  background: linear-gradient(180deg, #131d35, #0c1220);
  border: 2px solid rgba(225, 29, 116, 0.45);
  border-radius: var(--radius-lg, 16px);
  padding: 2rem;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.checkout-card-header {
  text-align: center;
  margin-bottom: 1.8rem;
}

.checkout-card-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.checkout-card-header p {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.form-group-custom {
  margin-bottom: 14px;
}

.form-group-custom label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.form-input-custom {
  width: 100%;
  background: #090e1a;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  color: #ffffff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-input-custom:focus {
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(225, 29, 116, 0.3);
}

.zone-selector-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.zone-label-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #090e1a;
  cursor: pointer;
  transition: all 0.2s;
  /* Grid items default to min-width:auto, which uses their content's
     natural (unwrapped) size as a floor — with two cards side by side
     that floor can exceed the viewport, pushing the right-hand "ঢাকা
     সিটির বাইরে" card off-screen instead of the two 1fr columns
     actually sharing the row width. Same fix as the gallery-thumbnail
     and footer-partners overflow bugs earlier. */
  min-width: 0;
}

.zone-label-card input[type="radio"] {
  margin-bottom: 6px;
  accent-color: var(--primary);
}

.zone-label-card.selected, .zone-label-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(225, 29, 116, 0.08);
}

.zone-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.zone-cost {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 800;
}

/* Order Summary Box */
.checkout-summary-box {
  background: #090e1a;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px;
}

.summary-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.summary-item-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.summary-thumb {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #000;
}

.summary-details h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 4px;
}

.summary-details .summary-unit-price {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.summary-line-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Flex items default to min-width:auto, which on a narrow screen lets
   the label span's unwrapped content push the row wider than the
   viewport — the amount span (2nd child, right-aligned) then renders
   past the edge and gets clipped/invisible instead of the row
   actually sharing space between them. Screen recording confirmed
   this: subtotal/delivery amounts were blank exactly where this
   would happen. Let the label wrap/shrink; keep the amount intact. */
.summary-line-row > span:first-child {
  min-width: 0;
}

.summary-line-row > span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

.summary-line-row.total-line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  font-size: 1.15rem;
  font-weight: 800;
  color: #10b981;
}

.btn-submit-order {
  width: 100%;
  background: var(--primary-gradient);
  color: #0b0f19;
  font-size: 1.15rem;
  font-weight: 900;
  padding: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(225, 29, 116, 0.4);
  transition: all 0.25s ease;
}

.btn-submit-order:hover {
  background: var(--primary-gradient);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(225, 29, 116, 0.55);
}

.order-safety-text {
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 12px;
  line-height: 1.4;
}

/* Mobile Sticky Bottom Bar */
.mobile-sticky-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11, 15, 25, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(225, 29, 116, 0.35);
  padding: 10px 16px;
  /* Was 9999 — higher than every .modal-overlay (z-index:200), so this
     bar rendered on top of the checkout/OTP/track modals instead of
     behind them, bleeding through at the bottom of the checkout form. */
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);
}

/* Belt-and-suspenders on top of the z-index fix above: hide the sticky
   bar outright whenever any modal is open, instead of relying on
   stacking order (which depends on 100dvh actually being supported/
   computed correctly on the device — if it isn't, the checkout dialog
   can end up shorter than the viewport and the bar shows through
   below it regardless of z-index). */
body:has(.modal-overlay.active) .mobile-sticky-bottom-bar {
  display: none !important;
}

.mobile-bar-price-info {
  display: flex;
  flex-direction: column;
}

.mobile-bar-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mobile-bar-price {
  font-size: 1.25rem;
  font-weight: 900;
  color: #10b981;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.mobile-bar-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-bar-whatsapp {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.2rem;
}

.mobile-bar-cart {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}

.mobile-bar-order-btn {
  background: var(--primary-gradient);
  color: #0b0f19;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 11px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  animation: pulse-gold-glow 2s infinite;
}

@keyframes pulse-gold-glow {
  0% { box-shadow: 0 0 0 0 rgba(225, 29, 116, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(225, 29, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 29, 116, 0); }
}

/* Mobile Responsive Adaptations */
@media (max-width: 900px) {
  .product-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  .product-gallery-wrap {
    position: static;
  }
  .checkout-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 74px; /* Space for sticky bar */
  }
  .mobile-sticky-bottom-bar {
    display: flex !important;
  }
  .product-title-h1 {
    font-size: 1.35rem;
  }
  .price-main {
    font-size: 1.75rem;
  }
  .instant-checkout-card {
    padding: 1.25rem 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .product-trust-mini-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Any input/textarea/select rendered under 16px makes iOS/Android
     browsers auto-zoom the whole page in when the field is tapped, and
     it often doesn't zoom back out — this is the "page stays zoomed"
     complaint. Force every field to 16px on mobile regardless of its
     own class (.form-input-custom, .form-input, search box, etc all
     used smaller sizes). */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Center buy-box header rows + description content on mobile */
  .product-title-h1,
  .product-description-formatted,
  .desc-paragraph,
  #fullDescriptionContent > p,
  .specs-table td {
    text-align: center;
  }

  .product-cat-brand-row,
  .product-rating-row,
  .product-pricing-box,
  .desc-section-title {
    justify-content: center;
    text-align: center;
  }

  .stock-status-box {
    align-self: center;
  }

  .customer-reviews-section p,
  .customer-reviews-section small,
  .customer-reviews-section strong {
    text-align: center;
  }

  /* Related products (and any other .section-header + product-card grid
     on index/category pages) — center instead of left-hugging */
  .section-header {
    text-align: center;
    align-items: center;
  }

  .card-title,
  .card-rating,
  .card-price-row {
    justify-content: center;
    text-align: center;
  }
}

/* ========================================================
   PROFESSIONAL PRODUCT DESCRIPTION & COMFORTABLE READING
   ======================================================== */
.product-description-formatted {
  font-family: 'Hind Siliguri', 'Inter', -apple-system, sans-serif;
  color: #e2e8f0;
  font-size: 1.02rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  max-width: 900px;
}

[data-theme="light"] .product-description-formatted {
  color: #1e293b;
}

.desc-paragraph {
  margin-bottom: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.85;
  color: #cbd5e1;
}

[data-theme="light"] .desc-paragraph {
  color: #334155;
}

.desc-section-block {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.desc-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #f8fafc;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(225, 29, 116, 0.25);
  margin-bottom: 1.1rem;
}

[data-theme="light"] .desc-section-title {
  color: #0f172a;
  border-bottom-color: rgba(225, 29, 116, 0.4);
}

.desc-title-icon {
  font-size: 1.1rem;
}

.desc-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.desc-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #e2e8f0;
  transition: transform 0.2s, border-color 0.2s;
}

[data-theme="light"] .desc-list-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

.desc-list-item:hover {
  border-color: rgba(225, 29, 116, 0.35);
  transform: translateX(4px);
}

.desc-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-weight: 900;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.desc-spec-label {
  color: #e11d74;
  font-weight: 700;
  margin-right: 4px;
}

[data-theme="light"] .desc-spec-label {
  color: #be185d;
}

/* Quick Order Trigger CTA Banner */
.order-trigger-cta-banner {
  background: linear-gradient(135deg, rgba(225, 29, 116, 0.08), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(225, 29, 116, 0.3);
  border-radius: 16px;
  padding: 1.8rem 2rem;
  margin: 3.5rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cta-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 280px;
}

.cta-lightning {
  font-size: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(225, 29, 116, 0.15);
  border: 1px solid rgba(225, 29, 116, 0.35);
  flex-shrink: 0;
}

/* ========================================================
   CHECKOUT MODAL DIALOG
   ======================================================== */
.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

/* Only animate when actually opened. On the base class this ran on every
   product-page load — the keyframes drive opacity 0→1 over 0.25s, then
   drop back to the hidden base opacity:0, which read as the checkout
   flashing up and vanishing each time a product was opened. */
.checkout-modal-overlay.active {
  animation: fadeInModal 0.25s ease-out;
}

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

.checkout-modal-dialog {
  background: linear-gradient(180deg, #131d35 0%, #0a0f1d 100%);
  border: 1.5px solid rgba(225, 29, 116, 0.45);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(225, 29, 116, 0.15);
  animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  /* This dialog is itself a flex item of .checkout-modal-overlay — without
     min-width:0 it won't shrink below its content's natural width either,
     letting the zone-selector-row overflow propagate all the way up. */
  min-width: 0;
}

[data-theme="light"] .checkout-modal-dialog {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

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

.checkout-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.8rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(19, 29, 53, 0.95);
  backdrop-filter: blur(10px);
  z-index: 10;
}

[data-theme="light"] .checkout-modal-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: #e2e8f0;
}

.checkout-modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
}

[data-theme="light"] .checkout-modal-title {
  color: #0f172a;
}

.checkout-modal-subtitle {
  color: #e11d74;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}

.checkout-modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

[data-theme="light"] .checkout-modal-close {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.checkout-modal-close:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: rotate(90deg);
}

.checkout-modal-body {
  padding: 1.8rem;
  /* .checkout-modal-dialog is the scroll container (its sticky header
     depends on that); this used to also be overflow-y:auto, giving two
     nested scrollable regions — on mobile touch scroll would randomly
     grab the inner one and stop partway down the form. */
}

@media (max-width: 600px) {
  /* Full-screen takeover instead of a bottom-sheet popup — fills the
     whole viewport with no rounded corners or visible backdrop margin,
     so it reads as its own page rather than a popup, and nothing gets
     cropped at 94vh anymore. */
  .checkout-modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .checkout-modal-dialog {
    width: 100%;
    max-width: 100%;
    /* vh first as a fallback for browsers that don't support dvh (it's
       simply ignored as an invalid value there, leaving vh in effect);
       dvh second so it wins where supported and accounts for the
       mobile browser's address bar. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .checkout-modal-header {
    padding: 1.1rem 1.25rem;
  }
  .checkout-modal-title {
    font-size: 1.05rem;
  }
  .checkout-modal-subtitle {
    font-size: 0.78rem;
  }
  .checkout-modal-body {
    padding: 1.25rem 1rem;
  }
  .zone-label-card {
    min-height: 64px;
    justify-content: center;
  }
  .cta-banner-content {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner-left {
    flex-direction: column;
    text-align: center;
  }
}

/* ========================================================
   PRODUCT VARIANTS: COLOR/DESIGN & SIZE SELECTION
   ======================================================== */
.product-variants-container {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}

[data-theme="light"] .product-variants-container {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.variant-section-row {
  margin-bottom: 1.25rem;
}

.variant-section-row:last-child {
  margin-bottom: 0;
}

.variant-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.variant-label-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.variant-selected-value {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary);
  background: rgba(225, 29, 116, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(225, 29, 116, 0.3);
}

/* Color / Design Swatches */
.color-swatches-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.color-swatch-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #090e1a;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 72px;
}

[data-theme="light"] .color-swatch-item {
  background: #ffffff;
  border-color: #cbd5e1;
}

.color-swatch-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.color-swatch-item.active {
  border-color: var(--primary);
  background: rgba(225, 29, 116, 0.08);
  box-shadow: 0 0 12px rgba(225, 29, 116, 0.35);
}

.color-swatch-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: #1e293b;
}

.color-swatch-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
  text-align: center;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .color-swatch-name {
  color: #334155;
}

.color-swatch-check {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #090e1a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.color-swatch-item.active .color-swatch-check {
  display: flex;
}

/* Size Pills */
.size-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.size-pill-btn {
  background: #090e1a;
  border: 1.5px solid var(--border-color);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[data-theme="light"] .size-pill-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.size-pill-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.size-pill-btn.active {
  background: var(--primary-gradient);
  border-color: #e11d74;
  color: #0b0f19;
  box-shadow: 0 4px 12px rgba(225, 29, 116, 0.4);
}

.size-pill-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
}

.size-pill-sub {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

.btn-size-chart-trigger {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-size-chart-trigger:hover {
  color: #7dd3fc;
}

/* Variant tags in checkout modal */
.summary-variant-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.variant-tag-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(225, 29, 116, 0.15);
  color: #e11d74;
  border: 1px solid rgba(225, 29, 116, 0.35);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ==========================================================================
   MOBILE-FRIENDLY AUDIT FIXES
   index.html / category.html / product.html each use a lot of class names
   (mostly Bootstrap-style utility names like .w-100, .mb-3, .form-input,
   plus per-page checkout/modal component names) that were never actually
   defined in this file — they render as unstyled plain HTML. Added below,
   grouped by what they fix.
   ========================================================================== */

/* --- Utility classes (spacing / text / badges), used across all pages --- */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.w-100 { width: 100%; }
.flex-1 { flex: 1; }
.font-bold, .font-weight-bold { font-weight: 700; }
.font-xl { font-size: 1.15rem; }
.small { font-size: 0.85rem; }
.text-dark { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-green { color: #10b981; }
.text-primary { color: var(--primary); }
.text-blue { color: #38bdf8; }

.badge-pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
}

.bg-green {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* --- Generic modal header + close button (otp / size-guide / track-order
   modals on every page use these two classes with no component-specific
   modifier, so they had zero styling — title and × rendered unstyled) --- */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
}

.close-modal-btn {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  transition: var(--transition);
}

.close-modal-btn:hover {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

/* --- Shared buttons / form fields --- */
.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.btn-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label,
.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-input,
.form-textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--text-main);
  font-size: 0.92rem;
  font-family: inherit;
  transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.dev-otp-box {
  background: rgba(225, 29, 116, 0.1);
  border: 1px dashed rgba(225, 29, 116, 0.4);
  color: var(--primary);
  font-family: monospace;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

.whatsapp-box {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   index.html — 1-page checkout modal + prescription modal + catalog controls
   ========================================================================== */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.75rem;
}

@media (max-width: 860px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

.form-section-title {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.delivery-zone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .delivery-zone-grid {
    grid-template-columns: 1fr;
  }
}

.radio-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.payment-method-box {
  margin-bottom: 0.5rem;
}

.summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: sticky;
  top: 1rem;
}

.summary-card h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.checkout-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border-color);
}

.summary-totals-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sum-row.total-row {
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
  font-size: 1rem;
  color: var(--text-main);
  font-weight: 700;
}

.trust-notice-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
}

.btn-confirm-order {
  width: 100%;
  background: var(--primary-gradient);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 0.98rem;
}

.btn-price-tag {
  background: rgba(0, 0, 0, 0.15);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.prescription-product-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-bottom: 1.25rem;
}

.rx-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lens-selection-section {
  border-top: 1px solid var(--border-color);
  padding-top: 1.25rem;
}

.lens-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Catalog controls row (category tabs + sort) above the products grid */
.category-tabs-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.products-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-count-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.product-sort-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.track-results-container {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.drawer-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--border-color);
}

/* ==========================================================================
   category.html — its own (single-column) checkout form + cart drawer
   ========================================================================== */
.form-group-checkout {
  margin-bottom: 1rem;
}

.form-group-checkout label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.delivery-zone-group,
.payment-method-group {
  margin-bottom: 1rem;
}

.zone-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 420px) {
  .zone-options {
    grid-template-columns: 1fr;
  }
}

.zone-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}

.zone-card.active {
  border-color: var(--primary);
  background: var(--badge-bg);
}

.zone-card div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.payment-pills {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pay-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.pay-pill.active {
  border-color: var(--primary);
  background: var(--badge-bg);
}

.btn-checkout-submit,
.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem;
  border-radius: var(--radius-md);
  font-weight: 800;
}

.otp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.resend-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.drawer-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cart-item-counter {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   product.html — header helpline/cart, mobile drawer, mobile-only tweaks
   ========================================================================== */
.btn-call-helpline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.85rem;
}

.btn-call-helpline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width: 900px) {
  .btn-call-helpline .call-text {
    display: none;
  }
}

.cart-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--primary-gradient);
  color: #000;
  font-size: 0.68rem;
  font-weight: 800;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-btn {
  position: relative;
}

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

.mobile-drawer-content {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-drawer-content .mobile-nav-links {
  gap: 0.35rem;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transition);
}

.mobile-nav-item:hover {
  background: var(--bg-card-hover);
  color: var(--primary);
}

.mobile-drawer-footer {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mobile-drawer-footer p {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.2rem;
}

.drawer-call-btn,
.drawer-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
}

.drawer-call-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.drawer-wa-btn {
  background: #25D366;
  color: #fff;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

.modal-footer .btn {
  flex: 1;
}

/* ==========================================
   MOBILE HOME: compact trust strip, category stories,
   flash sale strip, app-style bottom navigation.
   Everything here is scoped to <=767px or hidden above it.
   ========================================== */
.trust-item-mobile,
.m-home-extras,
.m-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  /* Banner: drop the badge that overlaps the headline, swipe replaces arrows */
  .hero-carousel-container .slide-badge-row,
  .carousel-nav-arrows {
    display: none !important;
  }

  /* Trust cards -> one compact swipeable chip row */
  .trust-bar-section {
    padding: 0.75rem 0 0.25rem !important;
  }
  .trust-grid {
    display: flex !important;
    gap: 0.5rem !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .trust-grid::-webkit-scrollbar { display: none; }
  .trust-item-desktop { display: none !important; }
  .trust-item-mobile { display: flex; }
  .trust-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    border-radius: 999px;
    box-shadow: none;
  }
  .trust-item:hover { transform: none; }
  .trust-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.95rem;
    border-radius: 50%;
  }
  .trust-text small { display: none; }
  .trust-text strong {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* Category stories */
  .m-home-extras {
    display: block;
    padding: 0.75rem 0 0.25rem;
  }
  .m-cat-stories {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.25rem 0.1rem 0.5rem;
  }
  .m-cat-stories::-webkit-scrollbar { display: none; }
  .m-cat-story {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 66px;
    color: var(--text-main);
    text-decoration: none;
  }
  .m-cat-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(from 200deg, #e11d74, #ec4899, #8b5cf6, #e11d74);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25);
  }
  .m-cat-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2.5px solid var(--bg-main, #0b0f19);
    background: var(--bg-card);
    display: block;
  }
  .m-cat-label {
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Flash sale strip */
  .m-flash {
    margin-top: 0.75rem;
    padding: 0.75rem 0 0.75rem 0.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(225, 29, 116, 0.1));
    border: 1px solid rgba(239, 68, 68, 0.3);
  }
  .m-flash[hidden] { display: none; }
  .m-flash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.75rem;
    margin-bottom: 0.6rem;
  }
  .m-flash-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
  }
  .m-flash-timer {
    font-size: 0.72rem;
    color: var(--text-muted);
  }
  .m-flash-timer span {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .m-flash-track {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: 0.75rem;
  }
  .m-flash-track::-webkit-scrollbar { display: none; }
  .m-flash-card {
    position: relative;
    flex: 0 0 128px;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    text-decoration: none;
  }
  .m-flash-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
  }
  .m-flash-off {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
  }
  .m-flash-name {
    font-size: 0.74rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .m-flash-price {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
  }
  .m-flash-price del {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
  }

  /* App-style bottom navigation */
  .m-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
  }
  body:has(.m-bottom-nav) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.modal-overlay.active) .m-bottom-nav,
  body:has(.mobile-drawer.active) .m-bottom-nav {
    display: none;
  }
  .m-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-nav-icon {
    font-size: 1.2rem;
    line-height: 1;
    filter: grayscale(0.6);
    transition: transform 0.2s ease;
  }
  .m-nav-item.active {
    color: var(--primary);
  }
  .m-nav-item.active .m-nav-icon,
  .m-nav-deal .m-nav-icon {
    filter: none;
  }
  .m-nav-item:active .m-nav-icon {
    transform: scale(0.88);
  }

  /* BikroyBot chat: bubble replaced by the nav's চ্যাট button, panel sits above the nav */
  .bb-chat-bubble {
    display: none !important;
  }
  .bb-chat-panel {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 150px);
  }
}

@media (max-width: 767px) {
  /* Tighter rhythm: banner -> chips -> stories -> flash -> products */
  .hero-section {
    padding-bottom: 0 !important;
  }
  .products-section {
    padding-top: 1.5rem !important;
  }
  .products-section .section-header {
    margin-bottom: 0.9rem !important;
  }
  .products-section .section-tag,
  .products-section .section-subtitle {
    display: none !important;
  }
  .products-section .section-title {
    font-size: 1.25rem !important;
    margin: 0 !important;
  }
  /* Category tabs: one swipeable row instead of 4 wrapped rows */
  .category-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-bottom: 2px;
  }
  .category-tabs::-webkit-scrollbar { display: none; }
  .category-tabs .cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* One-click order (?order=now): checkout shown from the very first paint,
   without the fade/slide-in, so the product page never flashes first. */
html.direct-checkout .checkout-modal-overlay {
  opacity: 1;
  pointer-events: auto;
  animation: none;
}
html.direct-checkout .checkout-modal-dialog {
  animation: none;
}
html.direct-checkout body {
  overflow: hidden;
}
html.direct-checkout .mobile-sticky-bottom-bar {
  display: none !important;
}

/* "এখনই ক্যাশ অন ডেলিভারিতে অর্ডার করুন" CTAs: heartbeat + glow ring +
   shine sweep so the main order button always catches the eye. */
@keyframes ctaHeartbeat {
  0%, 40%, 100% { transform: scale(1); }
  8% { transform: scale(1.045); }
  16% { transform: scale(1); }
  24% { transform: scale(1.03); }
}
@keyframes ctaGlowRing {
  0% { box-shadow: 0 6px 20px rgba(225, 29, 116, 0.4), 0 0 0 0 rgba(225, 29, 116, 0.6); }
  70% { box-shadow: 0 6px 20px rgba(225, 29, 116, 0.4), 0 0 0 14px rgba(225, 29, 116, 0); }
  100% { box-shadow: 0 6px 20px rgba(225, 29, 116, 0.4), 0 0 0 0 rgba(225, 29, 116, 0); }
}
@keyframes ctaShine {
  0% { left: -75%; }
  55%, 100% { left: 125%; }
}
.btn-buy-instant,
.mobile-bar-order-btn {
  position: relative;
  overflow: hidden;
  animation: ctaHeartbeat 2.4s ease-in-out infinite, ctaGlowRing 2s ease-out infinite;
}
.btn-buy-instant::after,
.mobile-bar-order-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: ctaShine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-buy-instant,
  .mobile-bar-order-btn,
  .btn-buy-instant::after,
  .mobile-bar-order-btn::after {
    animation: none;
  }
}

/* ==========================================
   RONGIN BAZAR BRAND ICONS — gold gradient SVG marks (replace generic ✨ emoji,
   which renders differently on every phone and reads as an "AI" icon).
   Shape comes from an SVG mask, color from the gradient, so they stay
   crisp at any size and match the brand gold everywhere.
   ========================================== */
.wq-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  background: linear-gradient(135deg, #fce7f3 0%, #f472b6 35%, #e11d74 60%, #9d174d 100%);
  background-size: 220% 220%;
  background-position: 0% 0%;
  -webkit-mask: var(--wq-ico) center / contain no-repeat;
  mask: var(--wq-ico) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(225, 29, 116, 0.35));
  transition: background-position 0.6s ease;
}
/* Collection mark: three tiles + a diamond — "all products" */
.wq-ico-grid {
  --wq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='8' height='8' rx='2.2'/%3E%3Crect x='2.5' y='13.5' width='8' height='8' rx='2.2'/%3E%3Crect x='13.5' y='13.5' width='8' height='8' rx='2.2'/%3E%3Cpath d='M17.5 1.8l4.2 4.2-4.2 4.2-4.2-4.2z'/%3E%3C/svg%3E");
}
/* Faceted diamond — premium / why-choose / best */
.wq-ico-gem {
  --wq-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 3L2 8.6h6.3z' fill-opacity='.7'/%3E%3Cpath d='M6.2 3h11.6l-2.1 5.6H8.3z'/%3E%3Cpath d='M17.8 3L22 8.6h-6.3z' fill-opacity='.7'/%3E%3Cpath d='M2 8.6h6.3L12 21.5z' fill-opacity='.5'/%3E%3Cpath d='M8.3 8.6h7.4L12 21.5z' fill-opacity='.9'/%3E%3Cpath d='M15.7 8.6H22L12 21.5z' fill-opacity='.5'/%3E%3C/svg%3E");
}
button:hover .wq-ico,
a:hover .wq-ico,
.wq-ico:hover {
  background-position: 100% 100%;
}
/* On the orange "active" pills a gold icon would vanish — go dark there */
.cat-tab.active .wq-ico,
.subcat-chip.active .wq-ico {
  background: #1a1204;
  filter: none;
}

/* ==========================================================================
   RONGIN BAZAR LIGHT THEME (default)
   The copied Waqtix light theme left these parts dark; brand-coloured fills use
   the magenta → teal gradient.
   ========================================================================== */
[data-theme="light"] .card-media,
[data-theme="light"] .main-image-box,
[data-theme="light"] .thumb-btn,
[data-theme="light"] .color-swatch-thumb { background: #fff7fb !important; }
[data-theme="light"] .carousel-arrow { background: rgba(255, 255, 255, 0.92) !important; color: #e11d74 !important; border-color: #fbcfe8 !important; }
[data-theme="light"] .carousel-arrow:hover { background: var(--primary-gradient) !important; color: #fff !important; }
[data-theme="light"] .card-quick-view-btn { background: rgba(255, 255, 255, 0.92) !important; color: #9d174d !important; }
[data-theme="light"] .card-badge.trending { background: var(--primary-gradient) !important; color: #fff !important; }
[data-theme="light"] .btn-card-cart,
[data-theme="light"] .btn-add-cart-outline,
[data-theme="light"] .mobile-bar-cart { background: #fce7f3 !important; color: #9d174d !important; border-color: #f9a8d4 !important; }
[data-theme="light"] .btn-card-cart:hover,
[data-theme="light"] .btn-add-cart-outline:hover { background: var(--primary-gradient) !important; color: #fff !important; }
[data-theme="light"] .qty-picker,
[data-theme="light"] .product-trust-mini-grid { background: #fff7fb !important; border-color: #fbcfe8 !important; }
[data-theme="light"] .mobile-sticky-bottom-bar { background: rgba(255, 255, 255, 0.97) !important; border-top-color: #fbcfe8 !important; }
[data-theme="light"] .form-input-custom,
[data-theme="light"] .zone-label-card,
[data-theme="light"] .checkout-summary-box { background: #ffffff !important; color: #0f172a !important; border-color: #f9a8d4 !important; }
[data-theme="light"] .form-input-custom::placeholder { color: #94a3b8 !important; }
[data-theme="light"] .summary-thumb { background: #fff7fb !important; }

/* Footer: light with a gradient top edge */
[data-theme="light"] .site-footer { background: linear-gradient(180deg, #fff1f7 0%, #ffffff 40%, #f0fdfa 100%) !important; color: #475569 !important; border-top: 4px solid transparent !important; border-image: var(--primary-gradient) 1 !important; }
[data-theme="light"] .site-footer h3,
[data-theme="light"] .site-footer h4,
[data-theme="light"] .footer-col-title { color: #0f172a !important; }
[data-theme="light"] .footer-mission-text,
[data-theme="light"] .footer-nav-list li a,
[data-theme="light"] .footer-bottom-bar,
[data-theme="light"] .site-footer p { color: #475569 !important; }
[data-theme="light"] .footer-nav-list li a:hover { color: #e11d74 !important; }
[data-theme="light"] .footer-vip-newsletter { background: var(--primary-gradient) !important; color: #fff !important; }
[data-theme="light"] .footer-vip-newsletter * { color: #fff !important; }
[data-theme="light"] .newsletter-input-group { background: rgba(255, 255, 255, 0.95) !important; }
[data-theme="light"] .newsletter-input-group input { color: #0f172a !important; }
[data-theme="light"] .footer-partners-bar,
[data-theme="light"] .footer-bottom-bar { background: transparent !important; border-color: #fbcfe8 !important; }

/* Rongin Bazar page background: colour glow + alpona pattern on cream (design preview s-3) */
:root {
  --rb-alpona: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%20viewBox%3D'0%200%20180%20180'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23e11d74'%20stroke-width%3D'1.6'%20opacity%3D'0.16'%3E%3Ccircle%20cx%3D'90'%20cy%3D'90'%20r%3D'10'%2F%3E%3Ccircle%20cx%3D'90'%20cy%3D'90'%20r%3D'26'%2F%3E%3Cpath%20transform%3D'rotate(0%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(45%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(90%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(135%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(180%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(225%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(270%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Cpath%20transform%3D'rotate(315%2090%2090)'%20d%3D'M90%2064%20C80%2048%2080%2034%2090%2022%20C100%2034%20100%2048%2090%2064Z'%2F%3E%3Ccircle%20cx%3D'90'%20cy%3D'90'%20r%3D'72'%20stroke-dasharray%3D'2%207'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%230d9488'%20opacity%3D'0.18'%3E%3Ccircle%20cx%3D'90'%20cy%3D'8'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'172'%20cy%3D'90'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'90'%20cy%3D'172'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'90'%20r%3D'3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --rb-aurora: radial-gradient(38% 30% at 8% 6%, rgba(225, 29, 116, 0.42), transparent 70%),
    radial-gradient(34% 28% at 92% 12%, rgba(13, 148, 136, 0.38), transparent 70%),
    radial-gradient(40% 32% at 70% 70%, rgba(168, 85, 247, 0.30), transparent 70%),
    radial-gradient(36% 30% at 15% 80%, rgba(251, 191, 36, 0.28), transparent 70%);
}
[data-theme="light"] { --bg-main: transparent !important; }
[data-theme="light"] body {
  background: var(--rb-alpona) 0 0 / 180px 180px, var(--rb-aurora), #fffaf5 !important;
  background-attachment: fixed !important;
}
[data-theme="light"] .main-content,
[data-theme="light"] main,
[data-theme="light"] section { background-color: transparent !important; }
[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.72) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Premium two-line logo is wider than the old one */
.brand-logo-img,
.brand-logo-wrap img { height: 48px !important; max-height: 48px !important; max-width: 200px !important; }
.footer-logo-img,
.footer-brand-col img,
.footer-logo-wrap img { max-width: 220px !important; max-height: 58px !important; }
@media (max-width: 768px) {
  .brand-logo-img,
  .brand-logo-wrap img { height: 40px !important; max-height: 40px !important; max-width: 160px !important; }
}

/* Buttons: solid magenta everywhere (the copied code had blue/orange gradients on a few) */
.card-quick-order-btn,
.btn-reconfirm { background: #e11d74 !important; box-shadow: 0 6px 16px rgba(225, 29, 116, 0.28) !important; }
.card-quick-order-btn:hover,
.btn-reconfirm:hover { background: #be185d !important; }
[data-theme="light"] .order-trigger-cta-banner { background: linear-gradient(135deg, #fff1f7, #ffffff) !important; border-color: #fbcfe8 !important; }
[data-theme="light"] .order-trigger-cta-banner h3 { color: #0f172a !important; }

/* Rongin Bazar: readable card titles on the light theme, two-line category story labels */
[data-theme="light"] .card-title { color: #0f172a !important; }
[data-theme="light"] .product-card:hover .card-title { color: #e11d74 !important; }
.m-cat-story { width: 72px !important; }
.m-cat-label { font-size: 0.68rem !important; white-space: normal !important; text-align: center; line-height: 1.2; max-width: 72px; }

/* Category hero sits on a dark photo overlay: keep its text light on the light theme */
[data-theme="light"] .cat-page-hero .cat-page-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
[data-theme="light"] .cat-page-hero .cat-page-desc { color: rgba(255,255,255,0.88) !important; }
[data-theme="light"] .cat-page-hero .cat-breadcrumb, [data-theme="light"] .cat-page-hero .cat-breadcrumb a, [data-theme="light"] .cat-page-hero .cat-breadcrumb .current { color: rgba(255,255,255,0.85) !important; }