/* ==========================================================================
   PREMIUM BONG WHOLESALE - LUXURY LIGHT THEME DESIGN SYSTEM
   Color Palette:
   - Primary Orange: #E87F24
   - Base Light BG: #F4F5F9
   - Crisp White: #FFFFFF
   - Text Dark: #0F172A
   - Muted Text: #64748B
   - Accent Red: #D97706 / #EF4444
   - Premium Blue: #025492
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&family=Lexend:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary-orange: #E87F24;
  --primary-orange-glow: rgba(232, 127, 36, 0.25);
  --primary-orange-rgb: 232, 127, 36;
  --white: #FFFFFF;
  --accent-red: #EF4444;
  --dark-bg: #F4F5F9;
  --dark-card: #FFFFFF;
  --dark-surface: #FFFFFF;
  --text-main: #0F172A;
  --gray-muted: #64748B;
  --gray-dark: #334155;
  --premium-blue: #025492;
  --premium-blue-glow: rgba(2, 84, 146, 0.2);

  /* Storefront CTA tokens — every public button pulls its colour from here */
  --cta-fill: linear-gradient(135deg, #F0902B 0%, #E87F24 55%, #DD6E12 100%);
  --cta-fill-hover: linear-gradient(135deg, #FFA53D 0%, #F0902B 55%, #E87F24 100%);
  --cta-ink: #1A1206;
  --cta-ring: rgba(15, 23, 42, 0.85);
  --cta-glow: 0 10px 30px rgba(232, 127, 36, 0.35);
  --cta-glow-hover: 0 14px 38px rgba(232, 127, 36, 0.5);

  --font-heading: 'Lexend', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-bg-hover: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(232, 127, 36, 0.25);
  --glass-border-light: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  --glass-blur: blur(16px);

  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base & Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* clip, not hidden: `overflow-x: hidden` turns html/body into scroll
     containers, which silently kills `position: sticky` on descendants
     (the shop filter rail). Clipping stops the sideways scroll without
     creating a scroll container. */
  overflow-x: clip;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  background-color: var(--dark-bg);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #E2E8F0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-orange), var(--premium-blue));
  border-radius: 4px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-main);
}

.text-gradient-orange {
  background: linear-gradient(120deg, #E87F24 0%, #F5A623 35%, #A855F7 70%, #E87F24 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s ease-in-out infinite;
}

.text-gradient-blue {
  background: linear-gradient(120deg, #0284C7 0%, #38BDF8 35%, #6366F1 70%, #0284C7 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 5s ease-in-out infinite;
}

.text-gradient-silver {
  background: linear-gradient(135deg, #334155 0%, #64748B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Custom Cursor Disabled */
.cursor-dot,
.cursor-follower {
  display: none !important;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-smoke-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

.preloader-ring-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary-orange);
  border-right-color: var(--premium-blue);
  animation: preloaderSpin 1.5s linear infinite;
  box-shadow: 0 0 30px var(--primary-orange-glow);
}

.preloader-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: var(--primary-orange);
  animation: preloaderSpinReverse 1s linear infinite;
}

@keyframes preloaderSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes preloaderSpinReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.preloader-logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-logo img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(232, 127, 36, 0.5));
}

.preloader-text {
  margin-top: 24px;
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gray-muted);
}

/* Glassmorphism Components (Light Theme) */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.glass-panel-glow {
  border-color: var(--glass-border);
  box-shadow: 0 10px 40px rgba(232, 127, 36, 0.12);
}

.glass-panel:hover {
  background: var(--glass-bg-hover);
  border-color: var(--primary-orange);
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(232, 127, 36, 0.15);
}

/* Navbar */
.navbar-glass {
  position: fixed;
  top: 38px;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition-smooth);
  background: transparent;
}

.navbar-glass.scrolled {
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(232, 127, 36, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.navbar-brand-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.navbar-brand-logo img {
  height: 72px;
  width: auto;
  object-fit: contain;
  transition: var(--transition-smooth);
  filter: drop-shadow(0 2px 8px rgba(232, 127, 36, 0.25));
}

.navbar-brand-logo:hover img {
  filter: drop-shadow(0 4px 16px rgba(232, 127, 36, 0.5));
  transform: scale(1.04);
}

.nav-link-custom {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-dark);
  text-decoration: none;
  padding: 8px 16px;
  position: relative;
  transition: var(--transition-smooth);
}

.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-orange);
  transition: var(--transition-smooth);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--primary-orange);
}

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

.nav-link-custom:hover::after,
.nav-link-custom.active::after {
  width: 70%;
}

.nav-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.nav-icon-btn:hover {
  background: var(--primary-orange);
  color: var(--white);
  border-color: var(--primary-orange);
  box-shadow: 0 0 20px var(--primary-orange-glow);
  transform: scale(1.08);
}

.badge-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Buttons ------------------------------------------------------------------
   One CTA look across the whole storefront: an orange pill sitting inside a
   detached outline ring, the treatment the home page catalog button already
   used. Every public button class points at this block, so the colour lives
   in exactly one place (the --cta-* tokens). The ring is drawn with
   outline + outline-offset rather than a wrapper element, which keeps it out
   of layout and lets it round out with the pill on hover.
   -------------------------------------------------------------------------- */
.btn-glow-orange,
.btn-glass,
.btn-glass-dark,
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 32px;
  border: none !important;
  border-radius: 12px;
  background: var(--cta-fill) !important;
  color: var(--cta-ink) !important;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  outline: 2px solid var(--cta-ring);
  outline-offset: 7px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--cta-glow) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
}

.btn-glow-orange:hover,
.btn-glass:hover,
.btn-glass-dark:hover,
.btn-ghost-light:hover,
.btn-glow-orange:focus-visible,
.btn-glass:focus-visible,
.btn-glass-dark:focus-visible,
.btn-ghost-light:focus-visible {
  /* Hover changes colour and glow only. The shape, the ring and the button's
     position on the page are the resting design and stay put. */
  background: var(--cta-fill-hover) !important;
  color: var(--cta-ink) !important;
  box-shadow: var(--cta-glow-hover) !important;
}

/* Only forward-pointing icons travel on hover; a document or cart glyph
   sitting left of the label should stay put. */
.btn-glow-orange i,
.btn-glass i,
.btn-glass-dark i,
.btn-ghost-light i {
  font-size: 0.85rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-glow-orange:hover .bi-arrow-right,
.btn-glow-orange:hover .bi-chevron-right,
.btn-glass:hover .bi-arrow-right,
.btn-glass:hover .bi-chevron-right,
.btn-glass-dark:hover .bi-arrow-right,
.btn-glass-dark:hover .bi-chevron-right {
  transform: translateX(4px);
}

/* Hero Section (Light Mode) */
.hero-section {
  position: relative;
  min-height: 75vh;
  padding-top: 130px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 70% 30%, rgba(232, 127, 36, 0.12) 0%, rgba(2, 84, 146, 0.06) 50%, #F4F5F9 90%);
}

.hero-canvas-smoke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#hero-3d-canvas {
  width: 100%;
  height: 100%;
  min-height: 480px;
  cursor: grab;
  position: relative;
  overflow: visible !important;
}

#hero-3d-canvas:active {
  cursor: grabbing;
}

@media (max-width: 991.98px) {
  #hero-3d-canvas,
  .webgl-3d-box {
    display: none !important;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(232, 127, 36, 0.1);
  border: 1px solid var(--primary-orange-glow);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-orange);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
}

.hero-title {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 18px;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: 1.0rem;
  line-height: 1.65;
  color: var(--gray-muted);
  max-width: 480px;
  margin-bottom: 26px;
  font-weight: 400;
}

.floating-glass-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(232, 127, 36, 0.08));
  border: 1px solid rgba(232, 127, 36, 0.2);
  backdrop-filter: blur(5px);
  pointer-events: none;
  animation: floatAnim 8s ease-in-out infinite alternate;
}

@keyframes floatAnim {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(-30px) rotate(15deg);
  }
}

/* Category Glass Cards (Light Theme) */
.category-card {
  height: 360px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--glass-border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
  cursor: pointer;
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, rgba(15, 23, 42, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  transition: var(--transition-smooth);
}

.category-card:hover img {
  transform: scale(1.1) rotate(1deg);
}

.category-card:hover {
  border-color: var(--primary-orange);
  box-shadow: 0 20px 50px rgba(232, 127, 36, 0.2);
}

/* Feature Metrics (Light Theme) */
.stat-card {
  padding: 30px 24px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: var(--transition-smooth);
}

.stat-card:hover {
  background: #FFFFFF;
  border-color: var(--primary-orange);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(232, 127, 36, 0.15);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--primary-orange);
  margin-bottom: 5px;
}

/* Product Cards (Light Theme - Luxury Redesign) */
.product-card {
  background: #FFFFFF;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 20px;
  position: relative;
  transition: var(--transition-bounce);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(232, 127, 36, 0.5), transparent, rgba(2, 84, 146, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

.product-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(30deg);
  transition: all 0.8s ease;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}

.product-card:hover::after {
  left: 130%;
  opacity: 1;
}

.product-card:hover::before {
  opacity: 1;
}

.product-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1), 0 0 30px var(--primary-orange-glow);
}

.product-img-wrapper {
  position: relative;
  width: 100%;
  height: 270px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F1F5F9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.product-img-wrapper img {
  max-height: 85%;
  max-width: 85%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.product-card:hover .product-img-wrapper img {
  transform: scale(1.14) rotate(-2deg);
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.15));
}

.badge-wholesale-tier {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(2, 84, 146, 0.9);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  z-index: 3;
}

.badge-stock {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(34, 197, 94, 0.15);
  color: #15803D;
  border: 1px solid rgba(34, 197, 94, 0.3);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
}

.badge-stock::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #16A34A;
  border-radius: 50%;
  box-shadow: 0 0 8px #16A34A;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Redesigned Spec Pills & Profit Margin Badge */
.product-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  margin-bottom: 8px;
}

.spec-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.margin-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(232, 127, 36, 0.12);
  color: #C46313;
  border: 1px solid rgba(232, 127, 36, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 6px;
  color: var(--text-main);
  line-height: 1.35;
}

.product-price-wholesale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.price-unit {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary-orange);
}

.price-msrp {
  font-size: 0.85rem;
  color: var(--gray-muted);
  text-decoration: line-through;
}

.moq-indicator {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--premium-blue);
  background: rgba(2, 84, 146, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}

/* Quick Action Overlay inside card image */
.product-quick-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 4;
}

.product-card:hover .product-quick-overlay {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.btn-quick-action {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-main);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.btn-quick-action:hover {
  background: var(--primary-orange);
  color: var(--white);
  border-color: var(--primary-orange);
  transform: scale(1.05);
}

/* OFFER TICKER MARQUEE STRIP */
.offer-ticker-wrapper {
  width: 100%;
  background: linear-gradient(90deg, #0a0a0a 0%, #1c0900 35%, #0F172A 65%, #0a0a0a 100%);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  border-bottom: 1px solid rgba(232, 127, 36, 0.4);
  padding: 0;
  height: 38px;
  display: flex;
  align-items: center;
}

.offer-ticker-wrapper::before,
.offer-ticker-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.offer-ticker-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, #0a0a0a 0%, transparent 100%);
}

.offer-ticker-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, #0a0a0a 0%, transparent 100%);
}

.offer-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: tickerScroll 30s linear infinite;
  gap: 0;
}

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

@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.offer-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.offer-ticker-item .ticker-code {
  background: var(--primary-orange);
  color: #FFFFFF;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(232, 127, 36, 0.5);
  animation: codePulse 2s ease-in-out infinite;
}

@keyframes codePulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(232, 127, 36, 0.5);
  }

  50% {
    box-shadow: 0 0 18px rgba(232, 127, 36, 0.9);
  }
}

.offer-ticker-item .ticker-icon {
  color: var(--primary-orange);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.offer-ticker-sep {
  color: var(--primary-orange);
  opacity: 0.5;
  font-size: 0.6rem;
  padding: 0 4px;
  flex-shrink: 0;
}

/* UNIFIED PREMIUM CATEGORY BANNER SYSTEM */
.premium-category-banner {
  position: relative;
  min-height: 300px;
  padding: 45px 0 35px 0;
  margin-top: 116px;
  overflow: hidden;
  background: radial-gradient(circle at 75% 30%, rgba(232, 127, 36, 0.14) 0%, rgba(2, 84, 146, 0.08) 45%, #F4F5F9 90%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}


.banner-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(232, 127, 36, 0.3);
  border-radius: 30px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-orange);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  margin-bottom: 18px;
}

.banner-heading {
  font-size: clamp(2.5rem, 4.8vw, 4.0rem);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.banner-desc {
  font-size: 1.1rem;
  color: var(--gray-muted);
  max-width: 600px;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 24px;
}

.banner-canvas-smoke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.banner-stat-chip {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition-smooth);
}

.banner-stat-chip:hover {
  transform: translateY(-3px);
  border-color: var(--primary-orange);
  box-shadow: 0 12px 30px rgba(232, 127, 36, 0.12);
}

.banner-stat-chip i {
  font-size: 1.5rem;
  color: var(--primary-orange);
}

.banner-stat-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.banner-stat-lbl {
  font-size: 0.75rem;
  color: var(--gray-muted);
}

/* Standarized Right 3D Frame */
.banner-3d-frame {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(232, 127, 36, 0.25);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), inset 0 0 30px rgba(255, 255, 255, 0.8);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.banner-3d-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-orange), transparent);
  animation: shineSweep 4s infinite ease-in-out;
}

@keyframes shineSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

#category-3d-canvas {
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}

#category-3d-canvas:active {
  cursor: grabbing;
}

.banner-stat-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
}

.banner-stat-lbl {
  font-size: 0.75rem;
  color: var(--gray-muted);
}

/* Stacking Card Showcase Section (Light Theme) */
.stack-section {
  position: relative;
  padding: 100px 0;
  background: var(--dark-bg);
}

.stack-card {
  position: sticky;
  top: 140px;
  background: #FFFFFF;
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
}

/* Wholesale Timeline (Light Theme) */
.timeline-container {
  position: relative;
  padding: 40px 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--primary-orange), var(--premium-blue));
  transform: translateX(-50%);
  box-shadow: 0 0 15px var(--primary-orange-glow);
}

.timeline-item {
  position: relative;
  margin-bottom: 60px;
}

.timeline-node {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 24px;
  height: 24px;
  background: var(--primary-orange);
  border: 4px solid #F4F5F9;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 15px var(--primary-orange);
  z-index: 2;
}

/* Accordion (Light Theme) */
.accordion-glass .accordion-item {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px !important;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  transition: var(--transition-smooth);
}

.accordion-glass .accordion-button {
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 22px 28px;
  box-shadow: none;
}

.accordion-glass .accordion-button:not(.collapsed) {
  background: rgba(232, 127, 36, 0.08);
  color: var(--primary-orange);
  box-shadow: none;
}

.accordion-glass .accordion-body {
  color: var(--gray-muted);
  padding: 0 28px 24px 28px;
  font-size: 1rem;
}

/* Offcanvas Cart (Light Theme & Z-Index Fix) */
.offcanvas {
  z-index: 10050 !important;
}

.offcanvas-backdrop {
  z-index: 10040 !important;
}

.offcanvas-glass {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: var(--text-main);
  border-left: 1px solid var(--glass-border);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.22);
}

#cartItemsList {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F8FAFC;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  transition: all 0.2s ease;
}

.cart-item:hover {
  background: #FFFFFF;
  border-color: rgba(232, 127, 36, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.cart-item-img {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #E2E8F0;
  flex-shrink: 0;
}

.cart-item-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.cart-del-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.cart-del-btn:hover {
  background: #ef4444;
  color: #ffffff;
  transform: scale(1.06);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

/* Footer (Light Theme) */
.footer-glass {
  background: #FFFFFF;
  border-top: 1px solid rgba(232, 127, 36, 0.2);
  padding-top: 80px;
  padding-bottom: 40px;
  position: relative;
}

.footer-link {
  color: var(--gray-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
  display: inline-block;
  margin-bottom: 10px;
}

.footer-link:hover {
  color: var(--primary-orange);
  transform: translateX(5px);
}

/* Responsiveness */
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 2.8rem;
  }

  .timeline-container::before {
    left: 20px;
  }

  .timeline-node {
    left: 20px;
  }

  .cursor-dot,
  .cursor-follower {
    display: none !important;
  }
}

/* FLIPKART STYLE PRODUCT DETAIL STYLES */
.fk-gallery-wrapper {
  display: flex;
  gap: 16px;
}

.fk-thumb-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 60px;
}

.fk-thumb-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 4px;
  object-fit: contain;
  cursor: pointer;
  background: #FFFFFF;
  transition: all 0.2s ease;
}

.fk-thumb-img:hover,
.fk-thumb-img.active {
  border-color: var(--primary-orange);
  box-shadow: 0 0 10px rgba(232, 127, 36, 0.3);
  transform: scale(1.05);
}

.fk-main-img-box {
  flex-grow: 1;
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A square frame matches the catalog photography, so a product fills it
     edge to edge instead of sitting in white gutters. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* The whole piece stays in frame: no crop, no hover zoom. */
.fk-main-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.fk-action-btns {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn-fk-cart {
  flex: 1;
  background: #FF9F00;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(255, 159, 0, 0.3);
  transition: var(--transition-smooth);
  cursor: pointer;
  text-decoration: none;
}

.btn-fk-cart:hover {
  background: #E08C00;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-fk-buy {
  flex: 1;
  background: #FB641B;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 16px 24px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(251, 100, 27, 0.35);
  transition: var(--transition-smooth);
  cursor: pointer;
  text-decoration: none;
}

.btn-fk-buy:hover {
  background: #E0530F;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.fk-rating-badge {
  background: #388E3C;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fk-offer-tag {
  color: #26A541;
  font-weight: 700;
  font-size: 0.9rem;
}

.fk-pincode-box {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
}

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

.fk-spec-table th {
  background: #F8FAFC;
  color: #0F172A;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.fk-spec-table td {
  padding: 12px 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.fk-spec-key {
  color: #64748B;
  width: 35%;
}

.fk-spec-val {
  color: #0F172A;
  font-weight: 600;
}

/* ==========================================================================
   HOMEPAGE LUXURY SECTIONS DESIGN SYSTEM (BOOTSTRAP ONLY)
   ========================================================================== */

/* Section Background Rhythms */
.bg-white-gradient {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.bg-dark-luxury {
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 50%, #0F172A 100%);
  color: #FFFFFF;
}

/* Premium Bong Collection sits on the same near-black ground as the rest of the
   dark sections instead of the navy gradient, with two ember blooms so the
   frosted spec pills and the 3D model still have light to catch. */
.section-bong-collection {
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(232, 127, 36, 0.14) 0%, rgba(232, 127, 36, 0) 60%),
    radial-gradient(80% 70% at 95% 100%, rgba(232, 127, 36, 0.09) 0%, rgba(232, 127, 36, 0) 62%),
    #0A0A0A;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bg-dark-gradient {
  background: linear-gradient(180deg, #0F172A 0%, #1A2338 100%);
  color: #FFFFFF;
}

.bg-lab-luxury {
  background: linear-gradient(135deg, #0D1117 0%, #1E120A 50%, #0A0F1D 100%);
  color: #FFFFFF;
}

.bg-light-premium {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
}

/* Wider-than-default container so the category tiles get more breathing room */
.container.container-wide {
  max-width: 1640px;
}

@media (min-width: 1200px) {
  .container.container-wide {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Section 1: Editorial Category Tiles (tinted panel, label + corner arrow) */
.cat-tile {
  --tile-bg: #E2E8F0;
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: var(--tile-bg);
  text-decoration: none;
  isolation: isolate;
  /* Base state for the GSAP wipe-up reveal (animated from inset(100% ...)) */
  clip-path: inset(0% 0% 0% 0% round 24px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-tile-lilac { --tile-bg: #DED5F2; }
.cat-tile-sand  { --tile-bg: #D6CCC4; }
.cat-tile-slate { --tile-bg: #A9C0C6; }
.cat-tile-clay  { --tile-bg: #DDD1C6; }

.cat-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 55px rgba(232, 127, 36, 0.22);
}

/* Soft light bloom behind the icon for depth */
.cat-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 50% 62%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

/* Centred line-art category icon */
.cat-tile-media {
  position: absolute;
  inset: 56px 14% 42px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.16));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-tile:hover .cat-tile-media img {
  transform: translateY(-6px) scale(1.06);
}

.cat-tile-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 22px;
}

.cat-tile-label {
  font-family: var(--font-heading, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #0F172A;
  text-transform: lowercase;
}

.cat-tile-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  color: #0F172A;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, color 0.4s ease;
}

.cat-tile:hover .cat-tile-arrow {
  background: #E87F24;
  color: #FFFFFF;
  transform: translate(4px, -4px);
  box-shadow: 0 8px 20px rgba(232, 127, 36, 0.45);
}

.cat-tile-count {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.cat-tile:focus-visible {
  outline: 3px solid #E87F24;
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .cat-tile {
    border-radius: 18px;
    clip-path: inset(0% 0% 0% 0% round 18px);
  }

  .cat-tile-top {
    padding: 14px 16px;
  }

  .cat-tile-label {
    font-size: 0.95rem;
  }

  .cat-tile-arrow {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }

  .cat-tile-count {
    left: 16px;
    bottom: 12px;
    font-size: 0.62rem;
  }

  .cat-tile-media {
    inset: 48px 14% 34px;
  }
}

/* Section 3: Why Buy From Us Feature Cards */
.why-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(232, 127, 36, 0.18);
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  height: 100%;
}

.why-card:hover {
  transform: translateY(-8px);
  border-color: #E87F24;
  box-shadow: 0 20px 45px rgba(232, 127, 36, 0.18);
  background: #FFFFFF;
}

.why-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(232, 127, 36, 0.12);
  color: #E87F24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 22px;
  transition: all 0.4s ease;
}

.why-card:hover .why-icon-circle {
  background: linear-gradient(135deg, #E87F24, #F5A623);
  color: #FFFFFF;
  transform: rotate(10deg) scale(1.08);
  box-shadow: 0 10px 25px rgba(232, 127, 36, 0.35);
}

/* Section 4: Magazine-Style Accessories Grid */
.acc-mag-feature {
  background: linear-gradient(135deg, #10172A 0%, #1E293B 100%);
  border-radius: 24px;
  padding: 40px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  height: 100%;
}

.acc-mag-feature::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(232, 127, 36, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.acc-sub-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 20px;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.acc-sub-card:hover {
  transform: translateY(-5px);
  border-color: #E87F24;
  box-shadow: 0 15px 30px rgba(232, 127, 36, 0.15);
}

.acc-sub-img {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.acc-sub-img img {
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.acc-sub-card:hover .acc-sub-img img {
  transform: scale(1.1);
}

/* Section 5: Interactive Hand Pipes Slider Cards */
.pipe-card-slot {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.4s ease;
}

.pipe-card-slot.featured {
  border-color: #E87F24;
  transform: scale(1.05);
  box-shadow: 0 20px 45px rgba(232, 127, 36, 0.2);
  background: #FFFFFF;
}

.pipe-card-slot.blur-side {
  opacity: 0.75;
  transform: scale(0.95);
  filter: blur(0.5px);
}

/* 3D WebGL Canvas Containers for Section 6 & 7 */
.webgl-3d-box {
  width: 100%;
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webgl-3d-box canvas {
  width: 100% !important;
  height: 100% !important;
}

.glass-spec-pill {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}




/* Dark Section Card Overrides for Premium Contrast */
.bg-dark-luxury .fk-card,
.bg-dark-gradient .fk-card,
.bg-lab-luxury .fk-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

.bg-dark-luxury .fk-card-name,
.bg-dark-gradient .fk-card-name,
.bg-lab-luxury .fk-card-name {
  color: #FFFFFF;
}

.bg-dark-luxury .fk-card-desc,
.bg-dark-gradient .fk-card-desc,
.bg-lab-luxury .fk-card-desc {
  color: rgba(255, 255, 255, 0.65);
}

.bg-dark-luxury .fk-price-ws,
.bg-dark-gradient .fk-price-ws,
.bg-lab-luxury .fk-price-ws {
  color: #FFFFFF;
}

.bg-dark-luxury .fk-price-mrp,
.bg-dark-gradient .fk-price-mrp,
.bg-lab-luxury .fk-price-mrp {
  color: rgba(255, 255, 255, 0.5);
}

.bg-dark-luxury .fk-card-btn-outline,
.bg-dark-gradient .fk-card-btn-outline,
.bg-lab-luxury .fk-card-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  color: #E87F24;
  border-color: rgba(232, 127, 36, 0.5);
}

.bg-dark-luxury .fk-card-btn-outline:hover,
.bg-dark-gradient .fk-card-btn-outline:hover,
.bg-lab-luxury .fk-card-btn-outline:hover {
  background: #E87F24;
  color: #FFFFFF;
}

.bg-dark-gradient .acc-sub-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.bg-dark-gradient .acc-sub-card .h6 {
  color: #FFFFFF !important;
}

.bg-dark-gradient .acc-sub-card .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* 3D WebGL Canvas Backdrop Glow */
.webgl-3d-box::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 127, 36, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.section-beaker-collection .webgl-3d-box::before {
  background: radial-gradient(circle, rgba(255, 140, 0, 0.25) 0%, transparent 70%);
}




/* ==========================================================================
   BEST SELLING PRODUCTS: LONG FRAME IMAGE & HOVER OVERLAY
   ========================================================================== */
.bs-product-card {
  position: relative;
  height: 440px;
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 100%);
  border: 1.5px solid rgba(232, 127, 36, 0.25);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.bs-product-card:hover {
  transform: translateY(-8px);
  border-color: #E87F24;
  box-shadow: 0 22px 55px rgba(232, 127, 36, 0.38);
}

.bs-img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: radial-gradient(circle at center, rgba(232, 127, 36, 0.22) 0%, rgba(15, 23, 42, 0.85) 60%, #0A0F1D 100%);
}

.bs-img-wrapper img {
  max-height: 330px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bs-product-card:hover .bs-img-wrapper img {
  transform: scale(1.1) translateY(-10px);
  filter: drop-shadow(0 20px 40px rgba(232, 127, 36, 0.55));
}

.bs-badge-top {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #E87F24;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bs-wish-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.3s ease;
}

.bs-wish-btn:hover {
  background: #E87F24;
  color: #FFFFFF;
  border-color: #E87F24;
  transform: scale(1.12);
}

.bs-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 29, 0.3) 0%, rgba(10, 15, 29, 0.94) 25%, #0A0F1D 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  z-index: 10;
}

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


/* ==========================================================================
   BEST SELLING PRODUCTS: PRODUCT IMAGE DEFAULT + HOVER DETAILS OVERLAY
   ========================================================================== */
.bs-product-card {
  position: relative;
  height: 410px;
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 100%);
  border: 1.5px solid rgba(232, 127, 36, 0.25);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.bs-product-card:hover {
  transform: translateY(-8px);
  border-color: #E87F24;
  box-shadow: 0 22px 55px rgba(232, 127, 36, 0.38);
}

.bs-img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 25px 65px 25px;
  background: radial-gradient(circle at center, rgba(232, 127, 36, 0.2) 0%, rgba(15, 23, 42, 0.9) 70%, #0A0F1D 100%);
}

.bs-img-wrapper img {
  max-height: 250px;
  max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bs-product-card:hover .bs-img-wrapper img {
  transform: scale(1.1) translateY(-10px);
  filter: drop-shadow(0 20px 40px rgba(232, 127, 36, 0.55));
}

.bs-badge-top {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #E87F24, #F5A623) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: none !important;
}

.bs-wish-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.3s ease;
}

.bs-wish-btn:hover {
  background: #E87F24 !important;
  color: #FFFFFF !important;
  border-color: #E87F24 !important;
  transform: scale(1.12);
}

.bs-default-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 29, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.bs-default-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68%;
}

.bs-default-price {
  color: #E87F24;
  font-weight: 800;
  font-size: 1.1rem;
}

.bs-product-card:hover .bs-default-bottom {
  opacity: 0;
}

.bs-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 29, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  z-index: 10;
}

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


/* ==========================================================================
   MUST-HAVE ACCESSORIES: HIGH-CONTRAST GLASS GRID & MAGAZINE FEATURE
   ========================================================================== */
.acc-mag-feature {
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 100%);
  border: 1.5px solid rgba(232, 127, 36, 0.35);
  border-radius: 24px;
  padding: 36px 30px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  height: 100%;
}

.acc-mag-feature::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(232, 127, 36, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.acc-sub-card {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px;
  padding: 20px 16px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  color: #FFFFFF !important;
  opacity: 1;
}

.acc-sub-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #E87F24 !important;
  box-shadow: 0 18px 40px rgba(232, 127, 36, 0.32);
}

.acc-sub-card h4,
.acc-sub-card .h4,
.acc-sub-card h6,
.acc-sub-card .h6,
.acc-sub-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  margin-bottom: 4px;
}

.acc-sub-desc {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.acc-sub-price {
  color: #E87F24 !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.3px;
}

.acc-sub-img {
  height: 105px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
  border: 1px solid rgba(232, 127, 36, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 10px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

.acc-sub-img img {
  max-height: 85px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(232, 127, 36, 0.4));
  transition: transform 0.4s ease;
}

.acc-sub-card:hover .acc-sub-img img {
  transform: scale(1.12) rotate(2deg);
  filter: drop-shadow(0 10px 22px rgba(232, 127, 36, 0.6));
}


/* ==========================================================================
   SECTION 4 ACCESSORIES PERFECT ALIGNMENT & GLASS FRAME STYLING
   ========================================================================== */
.section-accessories .row.g-4 {
  align-items: stretch;
}

.acc-mag-feature {
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 100%);
  border: 1.5px solid rgba(232, 127, 36, 0.35);
  border-radius: 22px;
  padding: 32px 28px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.acc-mag-img-frame {
  background: radial-gradient(circle at center, rgba(232, 127, 36, 0.25) 0%, rgba(15, 23, 42, 0.8) 70%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 16px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5);
}

.acc-mag-img-frame img {
  max-height: 190px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 22px rgba(232, 127, 36, 0.45));
}

.acc-sub-card {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px;
  padding: 18px 14px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  color: #FFFFFF !important;
  opacity: 1;
}

.acc-sub-card:hover {
  transform: translateY(-6px) scale(1.02);
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #E87F24 !important;
  box-shadow: 0 18px 40px rgba(232, 127, 36, 0.35);
}

.acc-sub-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.02rem !important;
  margin-bottom: 3px;
  line-height: 1.25;
}

.acc-sub-desc {
  color: #CBD5E1 !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.acc-sub-price {
  color: #E87F24 !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.3px;
}

.acc-sub-img {
  width: 100%;
  height: 110px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.85) 100%);
  border: 1px solid rgba(232, 127, 36, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 10px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
}

.acc-sub-img img {
  max-height: 88px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(232, 127, 36, 0.4));
  transition: transform 0.4s ease;
}

.acc-sub-card:hover .acc-sub-img img {
  transform: scale(1.12) rotate(2deg);
  filter: drop-shadow(0 10px 22px rgba(232, 127, 36, 0.6));
}



/* ==========================================================================
   SECTION 8 TRENDING PRODUCTS: LUXURY CATALOG GRID LAYOUT
   ========================================================================== */
.trending-card {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid rgba(232, 127, 36, 0.25);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}

.trending-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #E87F24;
  box-shadow: 0 20px 45px rgba(232, 127, 36, 0.22);
}

.trending-img-box {
  position: relative;
  height: 210px;
  background: linear-gradient(135deg, #0A0F1D 0%, #16213E 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.35);
}

.trending-img-box img {
  max-height: 175px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(232, 127, 36, 0.38));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trending-card:hover .trending-img-box img {
  transform: scale(1.12) translateY(-4px) rotate(2deg);
  filter: drop-shadow(0 12px 26px rgba(232, 127, 36, 0.6));
}

.trending-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #E87F24, #F5A623) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.trending-wish {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 5;
  transition: all 0.3s ease;
}

.trending-wish:hover {
  background: #E87F24 !important;
  color: #FFFFFF !important;
  border-color: #E87F24 !important;
  transform: scale(1.12);
}

.trending-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  margin-bottom: 4px;
  line-height: 1.3;
}

.trending-desc {
  color: #475569 !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  margin-bottom: 12px;
}

.trending-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.trending-price-ws {
  color: #0F172A;
  font-weight: 800;
  font-size: 1.25rem;
}

.trending-price-mrp {
  color: #94A3B8;
  text-decoration: line-through;
  font-size: 0.85rem;
}

.trending-price-disc {
  color: #E87F24;
  font-weight: 800;
  font-size: 0.78rem;
  margin-left: auto;
  background: #FFF3E0;
  padding: 3px 8px;
  border-radius: 12px;
}



/* ==========================================================================
   SECTION 8 TRENDING PRODUCTS: ASYMMETRIC LUXURY SPOTLIGHT & GLASS ROWS
   ========================================================================== */
.section-trending {
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(232, 127, 36, 0.14) 0%, rgba(232, 127, 36, 0) 60%),
    radial-gradient(80% 70% at 95% 100%, rgba(232, 127, 36, 0.09) 0%, rgba(232, 127, 36, 0) 62%),
    #0A0A0A !important;
  color: #FFFFFF !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-trending::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232, 127, 36, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Right column: horizontal glass rows
   The four rows share the height of the featured card beside them, so both
   columns bottom out on the same line.
   -------------------------------------------------------------------------- */
.right-trending-col {
  height: 100%;
}

.trending-h-card {
  /* Natural height — stretching four rows to fill left them airy and loose. */
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* The row whose product is currently in the featured card */
.trending-h-card.is-active {
  background: rgba(232, 127, 36, 0.10);
  border-color: rgba(232, 127, 36, 0.55);
}

.trending-h-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #E87F24;
  transform: translateX(8px);
  box-shadow: 0 18px 45px rgba(232, 127, 36, 0.22);
}

/* Side by side, natural row heights left ~85px of dead space under the last
   row. Share the leftover across the four rows so the column bottoms out on
   the featured card's baseline. Stacked layouts keep natural heights. */
@media (min-width: 992px) {
  .trending-h-card {
    flex: 1 1 auto;
  }
}

.trending-h-img {
  position: relative;   /* anchors the photo while GSAP Flip moves it */
  width: 120px;
  height: 110px;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(32, 32, 32, 0.9) 100%);
  border: 1px solid rgba(232, 127, 36, 0.25);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* The product shots are opaque studio photos, not cut-outs. Padding them
     onto the dark plate left a pale rectangle floating inside a frame, and
     each photo's aspect ratio landed differently. Fill the plate instead so
     all four rows read as one set of thumbnails. */
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.trending-h-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.trending-h-card:hover .trending-h-img img {
  transform: scale(1.08);
}

.trending-h-info {
  flex-grow: 1;
  min-width: 0;
}

.trending-h-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  margin-bottom: 4px;
}

.trending-h-desc {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem !important;
  margin-bottom: 10px;
  /* One line, same as .modern-prod-specs on the cards. Letting it wrap made
     every row 44px taller and forced the featured photo plate to stretch. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-h-price {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.25rem;
}

.trending-h-mrp {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
  font-size: 0.88rem;
  margin-left: 6px;
}

/* --- Tag / discount pills ------------------------------------------------
   One frosted-glass family in place of the stock Bootstrap badge colours, so
   the rows sit on the same palette as the rest of the dark sections. */
.trending-tag {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

.trending-off {
  display: inline-flex;
  align-items: center;
  background: rgba(220, 38, 38, 0.16);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #FCA5A5;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .trending-h-card {
    padding: 14px;
    gap: 14px;
  }

  .trending-h-img {
    width: 88px;
    height: 84px;
  }

  .trending-h-title {
    font-size: 1rem !important;
  }

  .trending-h-desc {
    display: none;
  }
}

/* Preloader Bulletproof Safety Dismiss */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.loaded #preloader,
#preloader.loaded,
#preloader.hide-loader {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}


/* ==========================================================================
   HOMEPAGE CARDS PERFECT ALIGNMENT ENGINE (ALL SECTIONS)
   ========================================================================== */

/* Equal row height enforcement */
.section-categories .row.g-4,
.section-bestsellers .row.g-4,
.section-why-us .row.g-4,
.section-accessories .row.g-4,
.section-trending .row.g-4 {
  align-items: stretch !important;
}

/* Bestseller Cards Alignment */
.bs-product-card {
  height: 420px !important;
}

/* ==========================================================================
   MODERN HOMEPAGE REDESIGN STYLES (Performance & Luxury Glass Aesthetics)
   ========================================================================== */

/* --- 1. Best Sellers Modern Product Cards (Luxury Dark Theme) --- */
/* Layered gradient ground: cool indigo base, warm ember bloom behind the heading,
   violet lift in the lower corner so the row of cards sits in light, not on flat black. */
.bg-dark-bestsellers {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232, 127, 36, 0.12) 0%, rgba(232, 127, 36, 0) 55%),
    #141414;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Slow-drifting aurora wash, animated by GSAP */
.bg-dark-bestsellers .bestsellers-aurora {
  position: absolute;
  top: -25%;
  left: -15%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, rgba(232, 127, 36, 0.16) 0%, rgba(232, 127, 36, 0) 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.section-bestsellers .container {
  position: relative;
  z-index: 1;
}

/* The ring stroke is dark by default (the site's light theme). Dark sections
   flip the token to white, and every CTA inside them picks it up. */
.bg-dark,
.bg-dark-luxury,
.bg-dark-gradient,
.bg-dark-bestsellers,
.bg-lab-luxury,
.navbar,
footer,
.modal-content {
  --cta-ring: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   RINGED PILL BUTTON
   Orange pill inside a detached outline ring; the ring rounds out on hover.
   -------------------------------------------------------------------------- */
/* Outer ring starts as a soft-cornered rectangle; GSAP rounds it into a pill on hover */
.ring-btn {
  position: relative;
  display: inline-flex;
  padding: 7px;
  border: 2px solid var(--cta-ring);
  border-radius: 16px;
  text-decoration: none;
}

.ring-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border-radius: 10px;   /* GSAP rounds this out to a stadium on hover */
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--cta-glow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.ring-btn-inner i {
  font-size: 0.85rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ring-btn:hover .ring-btn-inner {
  background: var(--cta-fill-hover);
  box-shadow: var(--cta-glow-hover);
}

.ring-btn:hover .ring-btn-inner i {
  transform: translateX(4px);
}

.ring-btn:focus-visible {
  outline: 2px solid #E87F24;
  outline-offset: 4px;
}

/* Keep the cards on one baseline: columns stretch, cards fill them */
.section-bestsellers .row {
  align-items: stretch;
}

.section-bestsellers .row > [class*="col-"] {
  display: flex;
  min-width: 0;   /* lets a column shrink past its content's min width */
}

/* Desktop: force all five products onto a single line.
   Flex columns would wrap here because the card content sets a min width,
   so a grid with minmax(0, 1fr) tracks is what guarantees one row. */
@media (min-width: 992px) {
  .section-bestsellers .row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
  }

  .section-bestsellers .row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-product-card {
  width: 100%;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(160deg, #232323 0%, #1B1B1B 55%, #161616 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 30px;
  padding: 14px 14px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

/* Gradient rim that lights up on hover */
:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(232, 127, 36, 0.75) 0%, rgba(139, 92, 246, 0.45) 45%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-product-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(232, 127, 36, 0.2);
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-product-card:hover::after {
  opacity: 1;
}

/* Light product panel filling the top of the card */
:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-img-box {
  height: auto;
  aspect-ratio: 4 / 5;   /* identical panel height in every card, whatever the photo */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 22px;
  background: linear-gradient(160deg, #F2F2F4 0%, #E4E4E8 100%);
  border: none;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 18px;
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-img-box img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 10px;
}

.modern-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.modern-moq {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-rating {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-prod-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-prod-specs {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   TRENDING QUICK VIEW
   The image panel is a <button> so the popup is keyboard reachable; these
   rules strip the native chrome so it still reads as the card's photo plate.
   -------------------------------------------------------------------------- */
.section-trending .modern-img-box {
  width: 100%;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: inherit;
  font: inherit;
  color: inherit;
  /* A 4:5 portrait plate made the featured card overrun the section. It now
     holds a landscape 4:3 and the rows beside it stretch to whatever height
     that lands on, so the two columns still bottom out together. */
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  min-height: 0;
}

.section-trending .modern-img-box:focus-visible {
  outline: 2px solid #E87F24;
  outline-offset: 3px;
}

.modern-qv-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.modern-product-card:hover .modern-qv-hint,
.section-trending .modern-img-box:focus-visible .modern-qv-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Popup shell: the grid tile blown up, same surfaces and radii. */
.tqv-card {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(160deg, #232323 0%, #1B1B1B 55%, #161616 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.85);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.tqv-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.tqv-close:hover {
  background: #E87F24;
  border-color: #E87F24;
}

.tqv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: center;
}

.tqv-img-box {
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  background: linear-gradient(160deg, #F2F2F4 0%, #E4E4E8 100%);
  overflow: hidden;
}

.tqv-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tqv-body {
  /* Right padding keeps the meta row clear of the floating close button. */
  padding: 6px 58px 10px 0;
}

/* The card's meta styles are scoped to the sections, so restate them here. */
.tqv-body .modern-rating {
  font-size: 0.78rem;
  font-weight: 700;
  color: #e2e8f0;
}

.tqv-body .modern-moq {
  color: rgba(255, 255, 255, 0.45);
}

.tqv-title {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.tqv-specs {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.tqv-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tqv-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}

.tqv-list li i {
  color: #E87F24;
  flex-shrink: 0;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .tqv-card {
    border-radius: 24px;
    padding: 12px;
  }

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

  .tqv-img-box {
    aspect-ratio: 16 / 11;
  }

  .tqv-body {
    padding: 0 6px 6px;
  }

  .tqv-title {
    font-size: 1.3rem;
  }

  .tqv-close {
    top: 18px;
    right: 18px;
  }
}

/* --------------------------------------------------------------------------
   B2B CALL TO ACTION: bracketed slash-fill button
   Wholesale buyers request a quote, they don't cart a single unit.
   -------------------------------------------------------------------------- */
.quote-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  margin-top: auto;   /* holds the CTA on the card's bottom edge */
  padding: 8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: clamp(11px, 0.82vw, 14px);   /* five-up cards are narrow; keep the label inside */
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
}

/* Top and bottom corner brackets */
.quote-button::before,
.quote-button::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid #7D8082;
  transition: all 0.15s ease;
  pointer-events: none;
}

.quote-button::before {
  top: 0;
  border-bottom-width: 0;
  border-radius: 14px 14px 0 0;
}

.quote-button::after {
  bottom: 0;
  border-top-width: 0;
  border-radius: 0 0 14px 14px;
}

.quote-button:active,
.quote-button:focus {
  outline: none;
}

.quote-button:active::before,
.quote-button:active::after {
  right: 3px;
  left: 3px;
}

.quote-button:active::before {
  top: 3px;
}

.quote-button:active::after {
  bottom: 3px;
}

.quote-button .button_lg {
  position: relative;
  display: block;
  padding: 14px 12px;
  color: #fff;
  background-color: #0f1923;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px transparent;
}

/* The skewed fill that sweeps across on hover */
.quote-button .button_sl {
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -8px;
  width: 0;
  background-color: #E87F24;
  transform: skew(-15deg);
  transition: all 0.2s ease;
}

.quote-button .button_text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1.25;
}

.quote-button .button_text i {
  font-size: 1rem;
  flex-shrink: 0;
}

.quote-button:hover,
.quote-button:focus-visible {
  color: #0f1923;
}

.quote-button:hover .button_lg,
.quote-button:focus-visible .button_lg {
  color: #0f1923;
}

.quote-button:hover .button_sl,
.quote-button:focus-visible .button_sl {
  width: calc(100% + 15px);
}

/* --- 2. Why Buy From Us (Luxury Light Bento) --- */
.bg-light-why {
  background: linear-gradient(180deg, #F6F4F0 0%, #FBFAF8 100%);
  position: relative;
}

/* --------------------------------------------------------------------------
   EDITORIAL STORY CARDS
   Paper-toned panel divided by hairline rules: eyebrow / statement /
   stat pair / arrow link. No shadow, no radius — the rules do the work.
   -------------------------------------------------------------------------- */
.story-card {
  --story-rule: #E2DDD3;
  background: #F7F5F1;
  border: 1px solid var(--story-rule);
  border-radius: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.story-card:hover {
  border-color: #C9C2B4;
  background: #F9F8F5;
}

.story-head {
  padding: 24px 28px 0;
}

.story-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1C1C1A;
}

.story-body {
  padding: 26px 28px 32px;
  flex: 1;
}

.story-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  line-height: 0.5;
  color: #1C1C1A;
  margin-bottom: 18px;
}

.story-statement {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1C1C1A;
  margin-bottom: 14px;
}

.story-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #3A3833;
  margin-bottom: 20px;
}

.story-meta {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #C2410C;
  margin-bottom: 0;
}

/* Stat pair, split by the same hairline as the card edges */
.story-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 24px 28px;
  border-top: 1px solid var(--story-rule);
}

.story-stat-val {
  display: block;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #E8590C;
  margin-bottom: 8px;
}

.story-stat-label {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #57534E;
}

/* Circular arrow row pinned to the card's bottom edge */
.story-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  border-top: 1px solid var(--story-rule);
  color: #1C1C1A;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s ease;
}

.story-link:hover {
  background: #F1EEE8;
  color: #1C1C1A;
}

.story-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #1C1C1A;
  border-radius: 50%;
  font-size: 0.95rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, color 0.25s ease;
}

.story-link:hover .story-link-icon {
  background: #E8590C;
  border-color: #E8590C;
  color: #FFFFFF;
  transform: translateX(4px);
}

/* The middle card carries a touch more weight */
.story-card.featured {
  --story-rule: #D8D1C4;
  background: #F2EFE9;
}

/* --- 3. Accessories 4-Card Bento Grid (Luxury Light Theme) --- */
.bg-light-accessories {
  background: #F4F5F9;
  position: relative;
}

/* This grid now uses the same dark product card as Best Sellers
   (see :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-* above).
   Only the row alignment differs — four columns instead of five. */
.section-accessories .row {
  align-items: stretch;
}

.section-accessories .row > [class*="col-"] {
  display: flex;
  min-width: 0;
}

/* Five across on desktop, same grid trick as Best Sellers */
@media (min-width: 992px) {
  .section-accessories .row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
  }

  .section-accessories .row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- 4. Hand Pipes Split Showcase (Black Glassmorphism) --- */
/* Near-black ground with two ember blooms so the frosted panels have something
   to catch light from; without them the glass reads as flat grey. */
.bg-dark-handpipes {
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(232, 127, 36, 0.14) 0%, rgba(232, 127, 36, 0) 60%),
    radial-gradient(80% 70% at 95% 100%, rgba(232, 127, 36, 0.09) 0%, rgba(232, 127, 36, 0) 62%),
    #0A0A0A;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Hairline separators keep the black section from butting flat into its neighbours */
.bg-dark-handpipes::before,
.bg-dark-handpipes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 127, 36, 0) 0%, rgba(232, 127, 36, 0.35) 50%, rgba(232, 127, 36, 0) 100%);
  z-index: 2;
}

.bg-dark-handpipes::before { top: 0; }
.bg-dark-handpipes::after  { bottom: 0; }

.bg-dark-handpipes .container {
  position: relative;
  z-index: 1;
}

/* ---- Featured artwork banner (the section's only content) ---- */
.handpipes-banner {
  display: block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.handpipes-banner img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Diagonal sheen sweeping across the glass frame on hover */
.handpipes-banner::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-70%);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.4s ease;
  pointer-events: none;
}

.handpipes-banner:hover::after {
  transform: translateX(70%);
  opacity: 1;
}

.handpipes-banner:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 127, 36, 0.45);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.62), 0 0 30px rgba(232, 127, 36, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.handpipes-banner:hover img {
  transform: scale(1.03);
}

.handpipes-banner:focus-visible {
  outline: 2px solid #E87F24;
  outline-offset: 4px;
}

/* --- 5. Category Horizontal Navigation Strip --- */
.category-strip {
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}

.home-category-strip {
  background: radial-gradient(circle at 50% 50%, #111827 0%, #0b0f19 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 10;
}

.home-category-strip .category-strip-inner {
  display: flex;
  align-items: center;
  overflow-x: auto;
  gap: 0;
  scrollbar-width: none;
  padding: 8px 0;
}

.home-category-strip .category-strip-inner::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   INFINITE TICKER
   The track holds the chips twice over; GSAP slides it exactly one copy's
   width and wraps, so the seam is invisible and the loop never ends.
   -------------------------------------------------------------------------- */
.is-ticker .ticker-viewport {
  overflow: hidden;
  position: relative;
  /* Feather the two ends so chips fade out rather than clipping hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.is-ticker .ticker-track {
  overflow: visible;      /* the viewport does the clipping now */
  width: max-content;
  flex-wrap: nowrap;
  will-change: transform;
}

.is-ticker .ticker-track {
  align-items: center;
  gap: 0;
  padding: 18px 0;
}

/* Oversized wordmark-style entries */
.is-ticker .ticker-word {
  flex: 0 0 auto;
  padding: 0 26px;
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #F1F5F9;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.is-ticker .ticker-word:hover {
  color: #FBA94C;
  text-shadow: 0 0 26px rgba(232, 127, 36, 0.55);
}

/* Glowing orb between words, like the sun in the reference */
.is-ticker .ticker-orb {
  flex: 0 0 auto;
  width: clamp(16px, 1.5vw, 26px);
  height: clamp(16px, 1.5vw, 26px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFC876 0%, #F0902B 45%, #DD6E12 100%);
  box-shadow: 0 0 18px rgba(232, 127, 36, 0.75), 0 0 42px rgba(232, 127, 36, 0.35);
}

@media (max-width: 767.98px) {
  .is-ticker .ticker-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

.home-category-strip .cat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  min-width: 92px;
}

.home-category-strip .cat-chip:hover,
.home-category-strip .cat-chip.active {
  color: #fb923c;
  border-bottom-color: #e87f24;
  background: rgba(232, 127, 36, 0.08);
}

.home-category-strip .cat-chip.active {
  font-weight: 700;
}

.home-category-strip .cat-chip-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-category-strip .cat-chip:hover .cat-chip-icon,
.home-category-strip .cat-chip.active .cat-chip-icon {
  transform: scale(1.08);
  border-color: #e87f24;
  background: rgba(232, 127, 36, 0.15);
}

.home-category-strip .cat-chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

.home-category-strip .cat-chip-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  color: inherit;
}

/* Mobile Navigation Drawer Links */
.mob-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  background: transparent;
}

.mob-nav-item:hover,
.mob-nav-item.active {
  background: rgba(232, 127, 36, 0.1);
  color: #E87F24;
}

.mob-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E87F24;
  font-size: 1rem;
  flex-shrink: 0;
}

.mob-nav-item.active .mob-nav-icon,
.mob-nav-item:hover .mob-nav-icon {
  background: #E87F24;
  color: #fff;
}

.mob-nav-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.mob-nav-item:hover .mob-nav-arrow {
  transform: translateX(3px);
  color: #E87F24;
}

/* ==========================================================================
   SITE FOOTER: BOLD FLAT BLOCK
   Ink slab that closes the light pages: oversized statement, pill navigation,
   newsletter card and a giant wordmark bled into the baseline. Decorative
   ribbon curves sit behind the grid, a shade off the ground. It butts straight
   up against the page above it - no light band between the two.
   ========================================================================== */

.footer-bold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0F172A;
  color: rgba(255, 255, 255, 0.72);
  padding: 96px 0 32px;
}

/* Ribbon curves: stroke only, never a hit target */
.footer-bold-inner {
  position: relative;
  z-index: 1;
}

/* Statement + direct contact ------------------------------------------------ */

.footer-statement {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--white);
  margin-bottom: 36px;
  max-width: 22ch;
}

.footer-block-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-orange);
  margin-bottom: 18px;
}

.footer-contact-line {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 8px;
  width: fit-content;
  transition: var(--transition-smooth);
}

.footer-contact-line:hover {
  color: var(--primary-orange);
  transform: translateX(4px);
}

.footer-address {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 14px 0 0;
  max-width: 26ch;
}

/* Pill navigation ----------------------------------------------------------- */

.footer-pill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.footer-pill:hover,
.footer-pill:focus-visible {
  background: var(--primary-orange);
  border-color: var(--primary-orange);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--primary-orange-rgb), 0.28);
}

/* Social + newsletter ------------------------------------------------------- */

/* The brand artwork carries its own colour and shape, so the buttons stay bare
   - no ring, no plate - and only lift on hover. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.footer-social-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  transition: var(--transition-bounce);
}

.footer-social-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  transform: translateY(-4px) scale(1.08);
}

.footer-social-btn:focus-visible {
  outline: 2px solid var(--primary-orange);
  outline-offset: 3px;
}

.footer-news-card {
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.footer-news-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 8px;
}

.footer-news-copy {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
}

.footer-news-form {
  display: flex;
  flex-direction: column;
  /* The submit button's ring sits 9px above its own edge, so the gap has to
     clear that before it reads as space between the two fields. */
  gap: 26px;
}

.footer-news-input {
  width: 100%;
  padding: 14px 18px;
  /* Same stroke and corner as the button's ring below it, so the two edges
     match: 2px of --cta-ring on a 12px radius. */
  border-radius: 12px;
  border: 2px solid var(--cta-ring);
  background: rgba(15, 23, 42, 0.55);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-smooth);
}

.footer-news-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.footer-news-input:focus {
  outline: none;
  border-color: var(--primary-orange);
  border-width: 2px;
  background: rgba(15, 23, 42, 0.8);
  box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.18);
}

.footer-news-actions {
  display: flex;
}

.footer-news-submit {
  width: 100%;
  padding: 13px 28px;
}

/* Giant wordmark + baseline ------------------------------------------------- */

.footer-wordmark {
  margin-top: 72px;
  text-align: center;
  overflow: hidden;
  line-height: 0.82;
}

.footer-baseline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-baseline-note {
  color: rgba(255, 255, 255, 0.38);
}

/* Footer responsiveness ----------------------------------------------------- */

@media (max-width: 991.98px) {
  .footer-bold {
    padding: 64px 0 28px;
    margin-top: 64px;
  }

  .footer-statement {
    max-width: none;
    margin-bottom: 28px;
  }

  .footer-wordmark {
    margin-top: 48px;
  }
}

@media (max-width: 575.98px) {
  .footer-bold {
    padding: 48px 0 24px;
  }

  .footer-news-card {
    padding: 22px;
  }

  .footer-baseline {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   WHOLESALE PRODUCT CARD (.fk-card) + CATALOG GRIDS
   The dense spec-sheet card used by the homepage bestsellers grid and the
   catalog pages: photo plate, two-line name, rating chip, wholesale price
   against MSRP, MOQ tier line and a split CTA row pinned to the bottom edge.
   Colour overrides for the dark sections live further down the file; only
   layout and the light-ground palette are set here.
   ========================================================================== */

.fk-product-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Five up is the default rhythm; the modifier keeps the intent explicit. */
.fk-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Detached: cards read as separate tiles rather than one ruled table. */
.fk-grid-detached {
  gap: 22px;
}

.fk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: var(--white);
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.fk-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-orange);
  box-shadow: 0 22px 44px rgba(232, 127, 36, 0.18);
}

/* Photo plate ---------------------------------------------------------- */

.fk-card-img-wrap {
  position: relative;
  height: 190px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #F2F2F4 0%, #E4E4E8 100%);
}

.fk-card-img-wrap img {
  max-width: 100%;
  max-height: 168px;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-card:hover .fk-card-img-wrap img {
  transform: scale(1.07);
}

.fk-card-badge {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 0 8px 8px 0;
  background: var(--primary-orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fk-card-badge.hot {
  background: var(--accent-red);
}

.fk-card-badge.bulk {
  background: var(--premium-blue);
}

.fk-card-wish {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gray-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-bounce);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.fk-card-wish:hover {
  transform: scale(1.12);
  color: var(--accent-red);
}

/* Toggled by fk-card.js so the light and dark cards can differ. */
.fk-card-wish.is-wished {
  color: var(--accent-red);
  background: var(--white);
}

/* Body ----------------------------------------------------------------- */

.fk-card-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  /* Two lines flat, so every card in the row breaks at the same place. */
  height: 2.5em;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-main);
}

.fk-card-desc {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--gray-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fk-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  height: 19px;
  padding: 0 6px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: #388E3C;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}

.fk-card-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.fk-price-ws {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.fk-price-mrp {
  font-size: 0.75rem;
  color: var(--gray-muted);
  text-decoration: line-through;
}

.fk-price-disc {
  font-size: 0.72rem;
  font-weight: 700;
  color: #388E3C;
}

.fk-card-tier {
  display: flex;
  align-items: center;
  height: 18px;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--premium-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA row: pinned to the bottom so uneven names never stagger the buttons. */
.fk-card-btns {
  display: flex;
  gap: 6px;
  height: 32px;
  margin-top: auto;
}

.fk-card-btn,
.fk-card-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 6px;
  border-radius: 5px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.fk-card-btn {
  flex: 1 1 58%;
  border: none;
  background: linear-gradient(135deg, var(--primary-orange) 0%, #C46313 100%);
  color: var(--white);
}

.fk-card-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 18px rgba(232, 127, 36, 0.35);
}

.fk-card-btn-outline {
  flex: 1 1 42%;
  border: 1px solid rgba(232, 127, 36, 0.5);
  background: var(--white);
  color: var(--primary-orange);
}

.fk-card-btn-outline:hover {
  background: var(--primary-orange);
  color: var(--white);
}

/* Bestsellers sit on the dark bento ground: glass card, inverted type. The
   other dark sections are covered by the override block below. */
.bg-dark-bestsellers .fk-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.bg-dark-bestsellers .fk-card-name,
.bg-dark-bestsellers .fk-price-ws {
  color: var(--white);
}

.bg-dark-bestsellers .fk-card-desc {
  color: rgba(255, 255, 255, 0.65);
}

.bg-dark-bestsellers .fk-price-mrp {
  color: rgba(255, 255, 255, 0.5);
}

.bg-dark-bestsellers .fk-card-tier {
  color: #FBBF24;
}

.bg-dark-bestsellers .fk-card-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  color: var(--primary-orange);
}

.bg-dark-bestsellers .fk-card-btn-outline:hover {
  background: var(--primary-orange);
  color: var(--white);
}

.bg-dark-bestsellers .fk-card-wish {
  background: rgba(15, 23, 42, 0.55);
  color: rgba(255, 255, 255, 0.85);
}

/* Catalog grid responsiveness ------------------------------------------ */

@media (max-width: 1399.98px) {

  .fk-product-grid,
  .fk-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {

  .fk-product-grid,
  .fk-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {

  .fk-product-grid,
  .fk-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fk-grid-detached {
    gap: 10px;
  }
}

/* ==========================================================================
   CATALOG GRID + LIGHT GROUND FOR THE MODERN PRODUCT CARD
   The .modern-product-card family is styled for the dark homepage sections
   further down; the catalog pages run it on the light shop ground, so the
   base look lives here and the dark rules out-specify it.
   ========================================================================== */

.shop-catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.modern-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 18px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.modern-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 127, 36, 0.45);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.modern-img-box {
  position: relative;
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #F2F2F4 0%, #E4E4E8 100%);
}

.modern-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-product-card:hover .modern-img-box img {
  transform: scale(1.06);
}

.modern-card-badge {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 0 8px 8px 0;
  background: var(--primary-orange);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modern-card-badge.hot {
  background: var(--accent-red);
}

.modern-card-badge.bulk {
  background: var(--premium-blue);
}

.modern-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 2px;
}

.modern-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-dark);
}

.modern-rating-count,
.modern-rating-text {
  font-weight: 500;
  color: var(--gray-muted);
}

.modern-prod-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  height: 2.6em;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-main);
}

.modern-prod-specs {
  font-size: 0.8rem;
  color: var(--gray-muted);
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Holds the quote CTA on the card's bottom edge whatever the title height. */
.modern-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1199.98px) {
  .shop-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .shop-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ==========================================================================
   SECTION ODDS AND ENDS
   Small shared pieces the sections above lean on: the trending row meta,
   the story stat cell, and a handful of measure / tracking utilities.
   ========================================================================== */

.trending-h-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.trending-h-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #FBBF24;
}

/* The row CTA is the shared .quote-button, trimmed for the narrow row. */
.trending-h-quote {
  margin-top: 0;
  max-width: 200px;
  font-size: clamp(10px, 0.7vw, 12px);
}

.story-stat {
  min-width: 0;
}

.hero-cta-group {
  margin-bottom: 4px;
}

.banner-cta-group {
  margin-top: 8px;
}

.section-handpipes,
.product-detail-section {
  position: relative;
}

.mob-menu-group {
  display: block;
}

.mob-nav-text {
  flex-grow: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-main);
}

.max-w-600 {
  max-width: 600px;
}

.max-w-700 {
  max-width: 700px;
}

.max-h-300 {
  max-height: 300px;
}

.tracking-wider {
  letter-spacing: 0.14em;
}

/* ==========================================================================
   MOBILE RESPONSIVE PERFECTION SYSTEM (< 992px & < 768px)
   STRICT RULE: Only applies to mobile viewports; 0 changes to desktop layout
   ========================================================================== */

@media (max-width: 991.98px) {
  /* 0. Compact & Professional Header on Mobile (< 992px) - Strict Non-colliding Geometry */
  .offer-ticker-wrapper {
    top: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
    z-index: 1100 !important;
  }

  .offer-ticker-item {
    font-size: 0.7rem !important;
  }

  .navbar-glass,
  .navbar-glass.scrolled {
    top: 30px !important;
    padding: 6px 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 1050 !important;
  }

  .navbar-brand-logo img {
    height: 36px !important;
  }

  .nav-icon-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.9rem !important;
  }

  .badge-counter {
    width: 16px !important;
    height: 16px !important;
    font-size: 0.62rem !important;
    top: -3px !important;
    right: -3px !important;
  }

  /* 1. Global Section Spacing & Headings */
  section.py-5,
  .section-categories,
  .bg-dark-bestsellers,
  .bg-light-why,
  .bg-light-accessories,
  .bg-dark-handpipes,
  .section-bestsellers,
  .section-why-us,
  .section-accessories,
  .section-handpipes,
  .section-beaker-collection,
  .section-trending {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-categories .py-5,
  .bg-dark-bestsellers .py-5,
  .bg-light-why .py-5,
  .bg-light-accessories .py-5,
  .bg-dark-handpipes .py-5,
  .section-beaker-collection .py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Headings Scaling */
  .display-3, .hero-title {
    font-size: 2.3rem !important;
    line-height: 1.2 !important;
  }

  .display-4 {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
  }

  .display-5 {
    font-size: 1.65rem !important;
    line-height: 1.3 !important;
  }

  .max-w-700 {
    margin-bottom: 28px !important;
  }

  /* 2. Hero Section Mobile Optimization (Prevents header clipping) */
  .hero-section {
    padding-top: 100px !important;
    padding-bottom: 30px !important;
    min-height: auto !important;
  }

  .hero-badge {
    font-size: 0.72rem !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
  }

  .hero-subtitle,
  .hero-section p.lead {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  /* 3. Global Buttons Scaling on Mobile */
  .btn-glow-orange,
  .btn-glass,
  .btn-glass-dark,
  .btn-ghost-light {
    padding: 10px 22px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
    gap: 8px !important;
    outline-offset: 5px;
  }

  .hero-cta-group {
    gap: 10px !important;
  }

  .hero-cta-group .btn-glow-orange,
  .hero-cta-group .btn-glass {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
  }

  /* 4. Reset desktop fixed heights on all card grids */
  .bs-product-card {
    height: auto !important;
  }

  /* 6. Best Sellers Modern Product Cards (.modern-product-card) */
  .modern-product-card {
    padding: 10px 10px 16px !important;
    border-radius: 24px !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-img-box {
    border-radius: 18px !important;
    margin-bottom: 14px !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-prod-title {
    font-size: 1.15rem !important;
  }

  .quote-button {
    font-size: 12px !important;
  }

  .quote-button .button_lg {
    padding: 10px 12px !important;
  }

  /* 7. Why Us Editorial Story Cards (.story-card) */
  .story-head {
    padding: 20px 20px 0 !important;
  }

  .story-body {
    padding: 20px 20px 26px !important;
  }

  .story-statement {
    font-size: 1.5rem !important;
  }

  .story-desc {
    font-size: 0.97rem !important;
  }

  .story-stats,
  .story-link {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .story-stat-val {
    font-size: 1.75rem !important;
  }

  /* 9. Hand Pipes artwork banner */
  .handpipes-banner {
    border-radius: 16px !important;
  }
}

@media (max-width: 767.98px) {
  /* Compact Smartphone & Small Tablet Refinements */
  .display-3, .hero-title {
    font-size: 1.95rem !important;
  }

  .display-4 {
    font-size: 1.6rem !important;
  }

  .display-5 {
    font-size: 1.45rem !important;
  }

  /* Best Sellers Card Compact Mode */
  .modern-product-card {
    padding: 8px 8px 14px !important;
    border-radius: 20px !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-img-box {
    border-radius: 15px !important;
    margin-bottom: 10px !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-card-body {
    padding: 0 4px !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-prod-title {
    font-size: 1rem !important;
  }

  :is(.bg-dark-bestsellers, .section-accessories, .section-trending) .modern-prod-specs {
    font-size: 0.72rem !important;
    margin-bottom: 10px !important;
  }

  .quote-button {
    font-size: 10px !important;
    padding: 6px !important;
  }

  .quote-button .button_lg {
    padding: 9px 6px !important;
  }

  .quote-button .button_text {
    gap: 5px !important;
  }

  .quote-button .button_text i {
    font-size: 0.8rem !important;
  }

  /* Header Icons & Navigation */
  .nav-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* Catalog grid cards on shop.html / catalog pages (3-4 cards per frame) */
  .fk-card {
    padding: 6px 6px 8px !important;
    border-radius: 8px !important;
  }

  .fk-card-img-wrap {
    height: 85px !important;
    margin-bottom: 4px !important;
  }

  .fk-card-img-wrap img {
    max-height: 75px !important;
  }

  .fk-card-wish {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
    top: 4px !important;
    right: 4px !important;
  }

  .fk-card-badge {
    font-size: 0.55rem !important;
    padding: 1px 5px !important;
    top: 4px !important;
    border-radius: 0 6px 6px 0 !important;
  }

  .fk-card-name {
    font-size: 0.72rem !important;
    height: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  .fk-card-desc {
    display: none !important;
  }

  .fk-card-rating {
    font-size: 0.6rem !important;
    height: 15px !important;
    padding: 0 4px !important;
    margin-bottom: 2px !important;
  }

  .fk-price-ws {
    font-size: 0.82rem !important;
  }

  .fk-price-mrp,
  .fk-price-disc {
    font-size: 0.62rem !important;
  }

  .fk-card-tier {
    font-size: 0.6rem !important;
    height: 14px !important;
    margin-bottom: 4px !important;
  }

  .fk-card-btns {
    gap: 3px !important;
    height: 24px !important;
    margin-top: auto !important;
  }

  .fk-card-btn,
  .fk-card-btn-outline {
    font-size: 0.65rem !important;
    height: 24px !important;
    padding: 0 2px !important;
    border-radius: 3px !important;
  }

  /* Catalog Product Cards (.product-card) on Mobile (3-4 cards per frame) */
  .product-card {
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  }

  .product-img-wrapper {
    height: 105px !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
  }

  .product-img-wrapper img {
    max-height: 90px !important;
    max-width: 90% !important;
  }

  .badge-wholesale-tier {
    top: 6px !important;
    left: 6px !important;
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .badge-stock {
    top: 6px !important;
    right: 6px !important;
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .product-spec-row {
    display: none !important;
  }

  .product-title {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    height: 28px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-price-wholesale {
    font-size: 0.76rem !important;
    margin-bottom: 6px !important;
    padding-top: 4px !important;
  }

  .price-unit {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
  }

  .price-msrp {
    font-size: 0.65rem !important;
  }

  .moq-indicator {
    font-size: 0.62rem !important;
  }

  .product-card .btn-glow-orange {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    min-width: unset !important;
    outline-offset: 4px;
  }

  /* Product Detail Page & Catalog Pages Mobile Optimization */
  .product-detail-section,
  .catalog-header,
  .catalog-section,
  .shop-page-body,
  .checkout-section,
  .contact-section,
  .legal-section {
    padding-top: 100px !important;
    padding-bottom: 30px !important;
  }

  .fk-gallery-wrapper {
    flex-direction: column-reverse !important;
    gap: 10px !important;
  }

  .fk-thumb-column {
    flex-direction: row !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .fk-thumb-img {
    width: 48px !important;
    height: 48px !important;
  }

  .fk-main-img-box {
    padding: 8px !important;
  }

  .fk-action-btns {
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .btn-fk-cart,
  .btn-fk-buy {
    padding: 11px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }

  /* Sticky top resets on mobile */
  .sticky-top {
    position: static !important;
    top: auto !important;
  }

  /* Offcanvas Drawer Mobile Fitting */
  .offcanvas-glass {
    max-width: 88vw !important;
  }

  .cart-item {
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  .cart-item-img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  .cart-del-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  /* Footer Padding */
  .footer-glass {
    padding-top: 48px !important;
    padding-bottom: 28px !important;
  }
}
/* ==========================================================================
   HEADER SEARCH TYPE-AHEAD
   The suggestion list under the search modal's field. The modal sits on a
   white panel, so this stays light regardless of the page behind it.
   ========================================================================== */

.site-search-suggest {
  margin-top: 10px;
  max-height: 58vh;
  overflow-y: auto;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 8px;
  scrollbar-width: thin;
}

.site-search-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #0f172a;
  transition: background 0.15s ease;
}

.site-search-item img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 9px;
  background: #f1f5f9;
}

.site-search-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.site-search-item-name {
  font-family: var(--font-heading, inherit);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-item-name mark {
  background: rgba(232, 127, 36, 0.22);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}

.site-search-item-meta {
  font-size: 0.74rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.site-search-item:hover,
.site-search-item.is-active {
  background: #fff5eb;
}

.site-search-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 11px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.84rem;
  font-weight: 700;
  color: #c46313;
  text-decoration: none;
  border-radius: 0 0 12px 12px;
}

.site-search-all:hover,
.site-search-all.is-active {
  background: #fff5eb;
  color: #a8500c;
}

.site-search-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 0.88rem;
  color: #64748b;
}

/* ==========================================================================
   PAGE TRANSITIONS
   The wrapper around each page body. GSAP drives the movement; these rules
   only keep the browser from fighting it.
   ========================================================================== */

.page-transition {
  backface-visibility: hidden;
}

.page-transition.is-animating {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Uploaded footer logo, in place of the oversized wordmark. */
.footer-wordmark-logo {
  max-width: min(420px, 70%);
  max-height: 120px;
  object-fit: contain;
}

/* ==========================================================================
   TESTIMONIALS
   Buyer quotes from the admin panel, shown after the trending grid. Each card
   is a quiet grey slab on a near-white ground: star row, quote, then a small
   round avatar beside the name and role. No photo panel, no score figure —
   the type carries it.
   ========================================================================== */

.section-testimonials {
  background: linear-gradient(180deg, #fbfbfa 0%, #f4f5f3 100%);
}

.testimonial-heading {
  color: #0f172a;
}

/* Five or fewer: a centred row that never stretches a card wider than it wants
   to be, so a single testimonial stays a card rather than a billboard. */
.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.testimonial-grid .testimonial-card {
  flex: 0 1 320px;
  max-width: 340px;
}

/* Four or more: a stepping carousel. GSAP Flip moves the cards; these rules
   only set the stage - a centred row that clips at the section edges. */
.testimonial-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* Once the script is driving it the row holds only the cards that fit, so
   nothing needs scrolling or masking - it sits centred like a fixed panel. */
.testimonial-marquee.is-stepping {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  justify-content: center;
  gap: 26px;
  width: max-content;
  min-width: 100%;
  padding: 8px 13px;
}

.testimonial-marquee.is-stepping .testimonial-track {
  width: 100%;
  min-width: 0;
}

/* The script sets --testimonial-visible to the number of cards that fit, and
   they share the row between them. */
.testimonial-marquee.is-stepping .testimonial-card {
  width: calc((100% - (var(--testimonial-visible, 3) - 1) * 26px) / var(--testimonial-visible, 3));
  max-width: 400px;
  /* GSAP writes `transform` every frame here. Leaving the CSS transition on
     transform would smear each of those writes through its own easing curve,
     which is what makes the step look like it stutters - so inside the
     carousel only the shadow transitions, and the hover lift is dropped. */
  transition: box-shadow 0.4s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.testimonial-marquee.is-stepping .testimonial-card:hover {
  transform: none;
}

.testimonial-track .testimonial-card {
  width: 320px;
  flex-shrink: 0;
}

/* Hiding the outgoing card is what tells Flip it has left: Flip then pulls it
   out of the flow and hands it to onLeave to animate away. */
.testimonial-card.is-leaving {
  display: none;
}


.testimonial-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 26px 26px;
  border-radius: 18px;
  background: #edefed;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

/* Rating reads as five marks, not a number: filled to the score, hollow after */
.testimonial-stars {
  display: flex;
  gap: 4px;
  font-size: 1.15rem;
  color: #1f2a24;
  line-height: 1;
  margin-bottom: 22px;
}

.testimonial-stars .bi-star {
  color: rgba(31, 42, 36, 0.25);
}

.testimonial-quote {
  margin: 0 0 30px;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: #1f2a24;
}

/* Avatar and name sit together on one line, pushed to the card's bottom edge */
.testimonial-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: auto;
}

.testimonial-media {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #d8dcd8;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.testimonial-media-initial {
  font-family: var(--font-heading, inherit);
  font-size: 1.15rem;
  font-weight: 700;
  color: #4a554d;
}

.testimonial-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.testimonial-name {
  font-family: var(--font-heading, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2a24;
  line-height: 1.25;
}

.testimonial-role {
  font-size: 0.82rem;
  color: #7c857e;
}

@media (max-width: 575.98px) {
  .testimonial-card {
    padding: 24px 20px;
  }

  .testimonial-quote {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   BUYER SIGN-IN (emailed one-time code)
   A full-width strip under the navbar, rendered for guests only: the form on a
   plain white ground, the pitch on an orange block beside it. Below 768px the
   pitch stacks under the form.
   ========================================================================== */

.otp-panel {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.otp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Full viewport on desktop; dvh so mobile browser chrome does not overshoot.
     The phone breakpoint below drops this back to natural height. */
  min-height: 100vh;
  min-height: 100dvh;
}

.otp-pane {
  padding: 40px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.otp-pane-form {
  background: #ffffff;
  align-items: center;
}

/* A sign-in form reads badly stretched across half a wide screen */
.otp-form-inner {
  width: 100%;
  max-width: 420px;
}

.otp-brand-logo {
  width: 132px;
  height: auto;
  margin-bottom: 22px;
  align-self: flex-start;
}

.otp-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.otp-sub {
  font-size: 0.92rem;
  color: #64748b;
  margin: 0 0 22px;
}

.otp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.otp-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.otp-input::placeholder {
  color: rgba(15, 23, 42, 0.35);
}

.otp-input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.15);
}

/* The code is six characters and nothing else, so it gets room to breathe */
.otp-input-code {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;   /* centres the text despite the trailing letter-space */
}

.otp-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #64748b;
  cursor: pointer;
}

.otp-consent input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary-orange);
}

.otp-consent a {
  color: var(--primary-orange);
  text-decoration: underline;
}

.otp-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.otp-submit:hover:not(:disabled) {
  background: var(--cta-fill-hover);
}

.otp-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.otp-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(26, 18, 6, 0.3);
  border-top-color: #1A1206;
  border-radius: 50%;
  animation: otp-spin 0.7s linear infinite;
}

.otp-submit.is-busy .otp-spinner {
  display: block;
}

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

/* One line for both errors and confirmations; colour carries which it is */
.otp-feedback {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  min-height: 1.1em;
  color: #b91c1c;
}

.otp-feedback.is-ok {
  color: #15803d;
}

.otp-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.otp-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-orange);
  cursor: pointer;
}

.otp-link:disabled {
  color: #94a3b8;
  cursor: default;
}

.otp-pane-pitch {
  background: linear-gradient(150deg, #F0902B 0%, #E87F24 55%, #DD6E12 100%);
  color: #ffffff;
  text-align: center;
  align-items: center;
}

.otp-pitch-inner {
  max-width: 44ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.otp-pitch-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* The global heading rule paints every h3 dark, so this one says white itself */
.otp-pitch-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
}

.otp-pitch-copy {
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.6;
  margin: 0;
  opacity: 0.95;
}

.otp-pitch-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}

.otp-pitch-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.45;
  opacity: 0.96;
}

.otp-pitch-list i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.05rem;
  opacity: 0.85;
}

.otp-pitch-list strong {
  font-weight: 700;
}

/* Three figures on one line, split by hairlines */
.otp-pitch-proof {
  display: flex;
  justify-content: center;
  gap: 22px;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.otp-pitch-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.otp-pitch-stat strong {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.otp-pitch-stat span {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}

.otp-pitch-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.84rem;
  opacity: 0.85;
}

@media (max-width: 767.98px) {
  .otp-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .otp-pane {
    padding: 32px 24px;
  }

  /* Form first on a phone; the pitch is the part that can wait */
  .otp-pane-pitch {
    order: 2;
    padding: 26px 24px;
  }

  .otp-pitch-copy {
    font-size: 0.95rem;
  }

  .otp-pitch-list li {
    font-size: 0.9rem;
  }

  /* Three stats side by side get cramped on a phone; let them wrap */
  .otp-pitch-proof {
    flex-wrap: wrap;
    gap: 16px 22px;
  }

  .otp-pitch-stat strong {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   BUYER ACCOUNT AREA
   The signed-in buyer's own page: their details and password on the left,
   every request they have sent on the right. Plus the navbar profile menu.
   ========================================================================== */

.account-section {
  background: linear-gradient(180deg, #fbfbfa 0%, #f4f5f3 100%);
  min-height: 70vh;
}

.account-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.account-avatar {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
}

.account-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.account-email {
  margin: 2px 0 0;
  font-size: 0.92rem;
  color: #64748b;
}

.account-signout {
  padding: 10px 20px !important;
  font-size: 0.78rem !important;
}

.account-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.account-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.account-card-sub {
  font-size: 0.86rem;
  color: #64748b;
  margin: 0 0 18px;
}

.account-count {
  min-width: 30px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(232, 127, 36, 0.12);
  color: #B45309;
  font-weight: 800;
  font-size: 0.8rem;
  text-align: center;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.account-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-field input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.14);
}

.account-field input:disabled {
  background: #f1f5f9;
  color: #0f172a;
  /* WebKit greys disabled text out regardless of `color`, so state it here too */
  -webkit-text-fill-color: #0f172a;
  opacity: 1;
  font-weight: 600;
  cursor: not-allowed;
}

.account-hint {
  font-size: 0.75rem;
  color: #64748b;
}

.account-error {
  font-size: 0.75rem;
  color: #b91c1c;
}

.account-flash {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  background: rgba(21, 128, 61, 0.1);
  color: #15803d;
}

/* --- Requests list -------------------------------------------------------- */

.account-request {
  padding: 18px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.account-request:first-of-type {
  border-top: none;
  padding-top: 0;
}

.account-request-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.account-request-type {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: #0f172a;
}

.account-request-product {
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: #B45309;
}

.account-request-message {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
}

.account-request-meta {
  margin: 0;
  font-size: 0.76rem;
  color: #94a3b8;
}

.account-empty {
  text-align: center;
  padding: 34px 10px;
  color: #94a3b8;
}

.account-empty i {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 10px;
}

.account-empty p {
  margin: 0 0 18px;
  font-size: 0.9rem;
}

/* --- Navbar profile menu -------------------------------------------------- */

.account-menu-panel {
  min-width: 250px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.16);
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 6px;
}

.account-menu-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-family: var(--font-heading);
  font-weight: 800;
}

.account-menu-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-menu-who strong {
  font-size: 0.9rem;
  color: #0f172a;
  line-height: 1.2;
}

/* The address can be long; keep it on one line rather than wrapping the menu */
.account-menu-who span {
  font-size: 0.76rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

.account-menu-panel .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: #334155;
}

.account-menu-panel .dropdown-item:hover,
.account-menu-panel .dropdown-item:focus {
  background: rgba(232, 127, 36, 0.1);
  color: #B45309;
}

.account-menu-panel .dropdown-item i {
  font-size: 0.95rem;
  opacity: 0.75;
}

@media (max-width: 575.98px) {
  .account-head {
    flex-wrap: wrap;
  }

  .account-signout {
    width: 100%;
    margin-top: 12px;
  }
}

/* Guests get a labelled sign-in action in place of the account icon. Sized to
   sit level with the icon buttons beside it rather than towering over them. */
.nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-login-btn:hover,
.nav-login-btn:focus-visible {
  background: var(--cta-fill-hover);
  color: var(--cta-ink);
}

.nav-login-btn i {
  font-size: 0.95rem;
}

@media (max-width: 991.98px) {
  .nav-login-btn {
    padding: 8px 14px;
    font-size: 0.7rem;
    gap: 6px;
  }
}

/* ==========================================================================
   ADD-TO-CART SIGN-IN GATE
   The dialog a guest gets instead of an add: the product on a soft ground to
   the left, the emailed-code sign-in to the right. Reuses the .otp-* form
   styles above; only the shell and the product side are new. Deliberately
   price-free — trade pricing is for signed-in buyers.
   ========================================================================== */

.gate-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  /* Never taller than the viewport; the rare overflow scrolls inside. */
  max-height: 92vh;
  overflow-y: auto;
}

.gate-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(15, 23, 42, 0.06);
  opacity: 0.65;
}

.gate-close:hover {
  opacity: 1;
}

.gate-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Left: the product being added */
.gate-product {
  padding: 22px 24px;
  background: #f6f8f3;
  display: flex;
  flex-direction: column;
}

.gate-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.gate-badge {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-orange-rgb), 0.12);
  color: var(--primary-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gate-status {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}

.gate-img-wrap {
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  /* A fixed 4:3 frame keeps the dialog the same height whatever the source
     image is, and the picture fills it edge to edge. */
  aspect-ratio: 4 / 3;
}

.gate-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate-product-name {
  margin: 14px 0 6px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.gate-product-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #64748b;
}

/* Right: the sign-in form */
.gate-auth {
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.gate-logo {
  width: 108px;
  height: auto;
  margin: 0 auto 14px;
}

.gate-title {
  font-size: 1.3rem;
}

.gate-sub {
  margin-bottom: 16px;
}

/* The gate is a short form; the header panel's roomier rhythm makes the
   dialog taller than it needs to be. */
.gate-auth .otp-form {
  gap: 14px;
}

.gate-auth .otp-input {
  padding: 12px 16px;
}

.gate-auth .otp-submit {
  padding: 13px 24px;
}

/* The gate's form is centred, but its fields and consent copy still read
   left-to-right like any other form. */
.gate-auth .otp-form,
.gate-auth .otp-consent,
.gate-auth .otp-feedback {
  text-align: left;
}

.gate-label {
  margin-bottom: -8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

@media (max-width: 767.98px) {
  .gate-split {
    grid-template-columns: 1fr;
  }

  .gate-product {
    padding: 20px 20px 18px;
  }

  /* Stacked, a 4:3 frame eats the screen — keep the picture a strip. */
  .gate-img-wrap {
    aspect-ratio: 16 / 9;
  }

  .gate-auth {
    padding: 22px 20px 24px;
  }
}

/* ==========================================================================
   BULK QUOTE POPUP
   Opened from any "Request Bulk Quote" button once a buyer is signed in. It
   borrows the sign-in gate's shell and product side (.gate-*) so both dialogs
   read as one thing; only the form on the right is its own.
   ========================================================================== */

.quote-side {
  padding-top: 24px;
  padding-bottom: 24px;
}

.quote-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.quote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.quote-field-row {
  display: flex;
  gap: 12px;
}

/* Quantity is a short number; the phone beside it needs the room. */
.quote-field-qty {
  flex: 0 0 34%;
}

.quote-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.quote-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quote-input::placeholder {
  color: rgba(15, 23, 42, 0.35);
}

.quote-input:focus {
  outline: none;
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 4px rgba(var(--primary-orange-rgb), 0.15);
}

.quote-textarea {
  resize: vertical;
  min-height: 84px;
}

.quote-feedback {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  line-height: 1.4;
}

.quote-feedback.is-error {
  color: #dc2626;
}

.quote-feedback.is-ok {
  color: #16a34a;
}

/* The ringed home-page CTA, as a full-width submit button. */
.quote-submit.ring-btn {
  width: 100%;
  margin-top: 4px;
  background: none;
  font-family: var(--font-heading);
  cursor: pointer;
}

.quote-submit .ring-btn-inner {
  flex: 1;
  justify-content: center;
}

.quote-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quote-spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(26, 18, 6, 0.3);
  border-top-color: #1A1206;
  border-radius: 50%;
  animation: otp-spin 0.7s linear infinite;
}

.quote-modal-form.is-sending .quote-spinner {
  display: block;
}

/* While sending, the chevron gives way to the spinner. */
.quote-modal-form.is-sending .quote-submit i {
  display: none;
}

@media (max-width: 767.98px) {
  .quote-side {
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .quote-field-row {
    flex-direction: column;
    gap: 14px;
  }

  .quote-field-qty {
    flex: 1 1 auto;
  }
}

/* Account tabs: profile details and request history, one at a time. */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 20px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: #64748b;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.account-tab i {
  font-size: 1rem;
}

.account-tab:hover {
  color: #0f172a;
}

.account-tab.active {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
}

.account-tab .account-count {
  min-width: 24px;
  padding: 2px 8px;
  font-size: 0.72rem;
}

/* The profile form reads badly stretched across a wide screen. */
.account-pane-narrow {
  max-width: 620px;
}

@media (max-width: 575.98px) {
  .account-tab {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   PRODUCT REVIEWS
   The star picker is five radios laid out right-to-left, so a plain sibling
   selector can light up every star up to the one under the cursor.
   ========================================================================== */

.review-form {
  background: var(--white);
}

.product-detail-copy :is(p, ul, ol) {
  margin-bottom: 0.75rem;
}

.product-detail-copy img {
  max-width: 100%;
  height: auto;
}

.review-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  font-size: 1.35rem;
  line-height: 1;
}

.review-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.review-stars label {
  color: rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.review-stars label:hover,
.review-stars label:hover ~ label,
.review-stars input:checked ~ label {
  color: #F5A623;
}

.review-stars label:hover {
  transform: scale(1.1);
}

/* Keyboard users need to see which star has focus. */
.review-stars input:focus-visible + label {
  outline: 2px solid var(--primary-orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* The same bracketed CTA as the cards, sized for the product page column. */
.quote-button-lg {
  margin-top: 0;
  padding: 10px;
  font-size: 14px;
}

.quote-button-lg .button_lg {
  padding: 14px 22px;
}

/* Product page: the quote CTA and the WhatsApp line share one row. */
.fk-action-btns .quote-button-lg {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  font-size: clamp(11px, 0.85vw, 13px);
}

.fk-action-btns .quote-button-lg .button_lg {
  padding: 14px 10px;
}

.fk-action-btns .quote-button-lg .button_text {
  white-space: nowrap;
}

/* WhatsApp wears the same bracketed shape in the brand's green. */
.whatsapp-button .button_lg {
  background-color: #128C7E;
}

.whatsapp-button .button_sl {
  background-color: #25D366;
}

.whatsapp-button::before,
.whatsapp-button::after {
  border-color: #128C7E;
}

.whatsapp-button:hover::before,
.whatsapp-button:focus-visible::before,
.whatsapp-button:hover::after,
.whatsapp-button:focus-visible::after {
  border-color: #25D366;
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE: RATINGS PANEL
   A <details> that reads as a headed row until it is opened, so the reviews
   do not push the specs off the page.
   -------------------------------------------------------------------------- */
.review-panel {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}

.review-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

/* Kill the native disclosure triangle in every engine. */
.review-panel-head::-webkit-details-marker {
  display: none;
}

.review-panel-head::marker {
  content: '';
}

.review-panel-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted, #6B7280);
}

.review-panel-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  color: #0f1923;
}

.review-panel-score i {
  color: #1FA463;
  font-size: 0.75rem;
}

.review-panel-chevron {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.05);
  color: #0f1923;
  transition: transform 0.25s ease, background 0.25s ease;
}

.review-panel[open] .review-panel-chevron {
  transform: rotate(180deg);
  background: rgba(232, 127, 36, 0.15);
}

.review-panel-head:hover .review-panel-chevron {
  background: rgba(232, 127, 36, 0.15);
}

.review-panel-body {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  padding-top: 18px;
}

/* --------------------------------------------------------------------------
   RECENTLY VIEWED
   Same card row as the home page sections, on either ground.
   -------------------------------------------------------------------------- */
.section-recently-viewed .recently-viewed-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #0f1923;
}

.section-recently-viewed.is-dark .recently-viewed-title {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   CARD RAIL
   Five cards across, scrolled by the arrows parked on the rail's own edges.
   The track scrolls natively, so touch and trackpad work without any
   JavaScript.
   -------------------------------------------------------------------------- */
.row-slider {
  position: relative;
}

.row-slider-track {
  display: flex;
  width: 100%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* the arrows are the control */
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.row-slider-track::-webkit-scrollbar {
  display: none;
}

.row-slider-item {
  flex: 0 0 calc((100% - 4 * 12px) / 5);
  /* Without this the card's own content width wins and every item comes out
     card-and-a-half wide. */
  min-width: 0;
  scroll-snap-align: start;
}

.row-slider-btn {
  /* Floated over the rail's edge - half on the cards, half off - so the row
     itself keeps the full container width. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 50%;
  background: var(--white);
  color: #0f1923;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.row-slider-btn-prev {
  left: -22px;
}

.row-slider-btn-next {
  right: -22px;
}

.row-slider-btn[hidden] {
  display: none;
}

.row-slider-btn:hover:not(:disabled) {
  border-color: var(--primary-orange);
  background: rgba(232, 127, 36, 0.15);
}

.row-slider-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* On the dark sections the buttons invert. */
.is-dark .row-slider-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(18, 26, 42, 0.92);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.is-dark .row-slider-btn:hover:not(:disabled) {
  border-color: var(--primary-orange);
  background: rgba(232, 127, 36, 0.3);
}

@media (max-width: 991.98px) {
  .row-slider-item {
    flex-basis: calc((100% - 2 * 12px) / 3);
  }
}

@media (max-width: 767.98px) {
  .row-slider-track {
    gap: 8px;
  }

  .row-slider-item {
    flex-basis: calc((100% - 8px) / 2);
  }

  /* No room to hang off the edge on a phone, so the arrows sit just inside
     it instead. */
  .row-slider-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .row-slider-btn-prev {
    left: 2px;
  }

  .row-slider-btn-next {
    right: 2px;
  }
}

/* --------------------------------------------------------------------------
   WRITTEN PAGES
   About Us and the policies. The body is whatever the admin's editor produced,
   so the styling is set here by element rather than by class.
   -------------------------------------------------------------------------- */
.written-page-body h2,
.written-page-body h3,
.written-page-body h4 {
  font-family: var(--font-heading, inherit);
  font-weight: 700;
  color: #0f1923;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.written-page-body h2 {
  font-size: 1.5rem;
}

.written-page-body h3,
.written-page-body h4 {
  font-size: 1.2rem;
}

.written-page-body > *:first-child {
  margin-top: 0;
}

.written-page-body p,
.written-page-body li {
  line-height: 1.75;
}

.written-page-body strong {
  color: #0f1923;
}

.written-page-body a {
  color: var(--primary-orange);
  font-weight: 600;
  text-decoration: none;
}

.written-page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Quill writes its alignment as classes, which land in the stored HTML. */
.written-page-body .ql-align-center { text-align: center; }
.written-page-body .ql-align-right { text-align: right; }
.written-page-body .ql-align-justify { text-align: justify; }

/* --------------------------------------------------------------------------
   ABOUT US
   The reference layout in the storefront's own colours: a centred story with
   three rounded photo cards (the middle one lifted), then the light identity
   band whose near-black value bar carries the vision/mission card.
   -------------------------------------------------------------------------- */
.about-page {
  /* The reference layout, in the storefront's own palette: ember CTA, near
     black bar, light ground. */
  --about-bar: linear-gradient(135deg, #16213E 0%, #0F172A 100%);
  --about-ground: linear-gradient(180deg, #FFFFFF 0%, #F4F5F9 100%);
  --about-ink: #0F172A;
  padding-top: 120px;
  font-family: var(--font-body);
}

.about-story {
  padding: 60px 0 90px;
  background: var(--white);
}

.about-story-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--about-ink);
  text-align: center;
  margin-bottom: 3rem;
}

/* The short rule under the heading, as on the reference. */
.about-story-heading::after {
  content: '';
  display: block;
  width: 86px;
  height: 3px;
  border-radius: 3px;
  margin: 0.7rem auto 0;
  background: var(--primary-orange);
}

/* The quote block is centred on its own half of the row. */
.about-story-copy {
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
}

.about-story-quote {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 600;
  line-height: 1.85;
  color: var(--about-ink);
  margin: 0 0 1.75rem;
}

.about-story-btn {
  display: inline-block;
  padding: 0.55rem 1.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cta-ink);
  background: var(--cta-fill);
  text-decoration: none;
  box-shadow: var(--cta-glow);
  transition: var(--transition-smooth);
}

.about-story-btn:hover {
  background: var(--cta-fill-hover);
  box-shadow: var(--cta-glow-hover);
  color: var(--cta-ink);
  transform: translateY(-2px);
}

.about-story-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: center;
}

.about-story-frame {
  margin: 0;
  aspect-ratio: 3 / 4.2;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

/* The middle card stands taller than the two beside it and rides higher. */
.about-story-frame-2 {
  aspect-ratio: 3 / 5.1;
  transform: translateY(-16px);
}

.about-story-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-identity {
  position: relative;
  padding: 60px 0 90px;
  /* The site's light ground with a single ember bloom, as the other pale
     sections use. */
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(232, 127, 36, 0.12) 0%, rgba(232, 127, 36, 0) 65%),
    var(--about-ground);
  color: var(--about-ink);
}

.about-identity-eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-orange);
  margin-bottom: 1rem;
}

.about-identity-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--about-ink);
  text-align: center;
  max-width: 18ch;
  line-height: 1.45;
  margin: 0 auto 2.5rem;
}

/* The value bar and the vision/mission card overlap, so the white card reads
   as hanging off the green bar rather than sitting in its own box. */
.about-identity-stack {
  max-width: 900px;
  margin: 0 auto;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  padding: 1.75rem 1.5rem 3.5rem;
  border-radius: 20px;
  background: var(--about-bar);
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.about-value i {
  display: block;
  font-size: 1.35rem;
  color: var(--primary-orange);
  margin-bottom: 0.5rem;
}

.about-value span {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  display: block;
}

.about-vm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  width: calc(100% - 70px);
  margin: -2.25rem auto 0;
  padding: 2.25rem 2.25rem;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
}

/* The hairline between vision and mission. */
.about-vm-col + .about-vm-col {
  border-left: 1px solid rgba(15, 23, 42, 0.1);
  padding-left: 2.5rem;
}

.about-vm-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--about-ink);
  margin-bottom: 0.75rem;
}

.about-vm-title i {
  color: var(--primary-orange);
  margin-right: 0.4rem;
}

.about-vm-copy {
  color: var(--gray-muted);
  font-size: 0.82rem;
  line-height: 1.85;
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-story-copy {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .about-page {
    padding-top: 100px;
  }

  .about-story-frame-2 {
    transform: none;
  }

  .about-vm {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: calc(100% - 24px);
    padding: 1.75rem 1.25rem;
  }

  /* Stacked, the divider belongs above the second column, not beside it. */
  .about-vm-col + .about-vm-col {
    border-left: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    padding-left: 0;
    padding-top: 1.75rem;
  }
}