/* === oneline-system.css === 
/* ============================================================
   ONELINE — Design System (Apple-Inspired)
   Shopify Dawn Theme · High Specificity
   ============================================================
   This file defines the core design system:
   1. CSS Custom Properties (Design Tokens)
   2. Global Reset & Base Styles
   3. Typography Scale
   4. Spacing System
   5. Button System
   6. Utility Classes

   IMPORTANT: This CSS uses high-specificity selectors and
   !important strategically to survive Dawn theme overrides.
   ============================================================ */

/* ===== 1. DESIGN TOKENS ===== */
:root,
.ol-root {
  /* ---- Colors ---- */
  --ol-white: #FFFFFF;
  --ol-bg-light: #F5F5F7;
  --ol-bg-card: #FFFFFF;
  --ol-black: #1D1D1F;
  --ol-gray-medium: #6E6E73;
  --ol-gray-light: #A1A1A6;
  --ol-border: #D2D2D7;
  --ol-blue: #D4550F;
  --ol-blue-hover: #BE4C0D;
  --ol-blue-active: #A8430B;
  --ol-orange: #FF6B00;
  --ol-orange-hover: #E86000;
  --ol-green: #34C759;
  --ol-red: #FF3B30;
  --ol-footer-bg: #1D1D1F;
  --ol-footer-text: #A1A1A6;
  --ol-hero-bg: #000000;
  --ol-badge-bg: #FF6B00;
  --ol-preorder-bg: #FFF9E6;
  --ol-preorder-border: #FF6B00;

  /* ---- Typography ---- */
  --ol-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ol-font-family-mono: "SF Mono", SFMono-Regular, "Menlo", monospace;

  /* Font Sizes */
  --ol-text-xs: 12px;
  --ol-text-sm: 14px;
  --ol-text-base: 17px;
  --ol-text-lg: 20px;
  --ol-text-xl: 24px;
  --ol-text-2xl: 32px;
  --ol-text-3xl: 40px;
  --ol-text-4xl: 48px;
  --ol-text-5xl: 56px;

  /* Font Weights */
  --ol-weight-normal: 400;
  --ol-weight-medium: 500;
  --ol-weight-semibold: 600;
  --ol-weight-bold: 700;

  /* Line Heights */
  --ol-leading-tight: 1.1;
  --ol-leading-normal: 1.4;
  --ol-leading-relaxed: 1.5;
  --ol-leading-loose: 1.6;

  /* Letter Spacing */
  --ol-tracking-tight: -0.5px;
  --ol-tracking-normal: 0;
  --ol-tracking-wide: 0.02em;

  /* ---- Spacing (8px grid) ---- */
  --ol-space-1: 4px;
  --ol-space-2: 8px;
  --ol-space-3: 12px;
  --ol-space-4: 16px;
  --ol-space-5: 20px;
  --ol-space-6: 24px;
  --ol-space-8: 32px;
  --ol-space-10: 40px;
  --ol-space-12: 48px;
  --ol-space-16: 64px;
  --ol-space-20: 80px;
  --ol-space-24: 96px;

  /* ---- Border Radius ---- */
  --ol-radius-sm: 6px;
  --ol-radius-md: 8px;
  --ol-radius-lg: 12px;
  --ol-radius-xl: 16px;
  --ol-radius-pill: 980px;
  --ol-radius-full: 50%;

  /* ---- Shadows ---- */
  --ol-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ol-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ol-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ol-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.15);
  --ol-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ---- Transitions ---- */
  --ol-transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  --ol-transition-base: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --ol-transition-slow: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---- Layout ---- */
  --ol-max-width: 980px;
  --ol-max-width-wide: 1200px;
  --ol-header-height: 72px;
  --ol-header-height-mobile: 72px;
}


/* ===== 2. GLOBAL RESET ===== */

/* Force box-sizing and remove margins */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ol-font-family);
  font-size: var(--ol-text-base);
  line-height: var(--ol-leading-relaxed);
  color: var(--ol-black);
  background-color: var(--ol-white);
  overflow-x: hidden;
}

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

a {
  color: var(--ol-blue);
  text-decoration: none;
  transition: color var(--ol-transition-fast);
}

a:hover {
  color: var(--ol-blue-hover);
}

/* Remove list styles */
ul, ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0 !important;
  font-family: var(--ol-font-family);
  color: var(--ol-black);
}

p {
  margin: 0 !important;
}

button {
  font-family: var(--ol-font-family);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

input, select, textarea {
  font-family: var(--ol-font-family);
}


/* ===== 3. TYPOGRAPHY ===== */

/* Section Titles (Apple-style) */
.ol-section-title {
  font-size: var(--ol-text-2xl) !important;
  font-weight: var(--ol-weight-semibold) !important;
  line-height: var(--ol-leading-tight) !important;
  letter-spacing: var(--ol-tracking-tight) !important;
  color: var(--ol-black) !important;
  text-align: center !important;
  margin-bottom: var(--ol-space-10) !important;
}

.ol-section-subtitle {
  font-size: var(--ol-text-lg) !important;
  font-weight: var(--ol-weight-normal) !important;
  line-height: var(--ol-leading-normal) !important;
  color: var(--ol-gray-medium) !important;
  text-align: center !important;
  margin-bottom: var(--ol-space-8) !important;
}

.ol-hero-title {
  font-size: var(--ol-text-4xl) !important;
  font-weight: var(--ol-weight-bold) !important;
  line-height: var(--ol-leading-tight) !important;
  letter-spacing: var(--ol-tracking-tight) !important;
  color: var(--ol-white) !important;
  text-align: center !important;
}

.ol-hero-subtitle {
  font-size: var(--ol-text-xl) !important;
  font-weight: var(--ol-weight-normal) !important;
  line-height: var(--ol-leading-normal) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-align: center !important;
  margin-top: var(--ol-space-3) !important;
}

.ol-card-title {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-semibold) !important;
  line-height: var(--ol-leading-normal) !important;
  color: var(--ol-black) !important;
}

.ol-card-price {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  color: var(--ol-black) !important;
}

.ol-card-subtitle {
  font-size: var(--ol-text-sm) !important;
  font-weight: var(--ol-weight-normal) !important;
  color: var(--ol-gray-medium) !important;
  line-height: var(--ol-leading-normal) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ol-body-text {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-normal) !important;
  line-height: var(--ol-leading-relaxed) !important;
  color: var(--ol-black) !important;
}

.ol-caption {
  font-size: var(--ol-text-sm) !important;
  font-weight: var(--ol-weight-normal) !important;
  line-height: var(--ol-leading-loose) !important;
  color: var(--ol-gray-medium) !important;
}

.ol-small {
  font-size: var(--ol-text-xs) !important;
  font-weight: var(--ol-weight-normal) !important;
  color: var(--ol-gray-light) !important;
}


/* ===== 4. SPACING SYSTEM ===== */

.ol-section {
  padding-top: var(--ol-space-20) !important;
  padding-bottom: var(--ol-space-20) !important;
}

.ol-section-sm {
  padding-top: var(--ol-space-10) !important;
  padding-bottom: var(--ol-space-10) !important;
}

.ol-container {
  max-width: var(--ol-max-width) !important;
  margin: 0 auto !important;
  padding-left: var(--ol-space-6) !important;
  padding-right: var(--ol-space-6) !important;
}

.ol-container-wide {
  max-width: var(--ol-max-width-wide) !important;
  margin: 0 auto !important;
  padding-left: var(--ol-space-6) !important;
  padding-right: var(--ol-space-6) !important;
}

.ol-full-width {
  width: 100% !important;
  max-width: 100% !important;
}


/* ===== 5. BUTTON SYSTEM ===== */

/* Primary Button (Apple Blue) */
.ol-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-3) var(--ol-space-8) !important;
  background: var(--ol-blue) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  line-height: 1 !important;
  border-radius: var(--ol-radius-pill) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
  min-height: 48px !important;
}

.ol-btn-primary:hover {
  background: var(--ol-blue-hover) !important;
  color: var(--ol-white) !important;
  text-decoration: none !important;
}

.ol-btn-primary:active {
  background: var(--ol-blue-active) !important;
}

/* Secondary Button (Outline) */
.ol-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-3) var(--ol-space-8) !important;
  background: transparent !important;
  color: var(--ol-blue) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  line-height: 1 !important;
  border-radius: var(--ol-radius-pill) !important;
  border: 1.5px solid var(--ol-blue) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
  min-height: 48px !important;
}

.ol-btn-secondary:hover {
  background: rgba(0, 113, 227, 0.05) !important;
  color: var(--ol-blue) !important;
  text-decoration: none !important;
}

/* Pre-order Button (Orange) */
.ol-btn-preorder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-3) var(--ol-space-8) !important;
  background: var(--ol-orange) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  line-height: 1 !important;
  border-radius: var(--ol-radius-pill) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
  min-height: 48px !important;
}

.ol-btn-preorder:hover {
  background: var(--ol-orange-hover) !important;
  color: var(--ol-white) !important;
  text-decoration: none !important;
}

/* Hero: Primary button on dark bg */
.ol-btn-hero-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-4) var(--ol-space-10) !important;
  background: var(--ol-blue) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  line-height: 1 !important;
  border-radius: var(--ol-radius-pill) !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
  min-height: 52px !important;
}

.ol-btn-hero-primary:hover {
  background: var(--ol-blue-hover) !important;
  color: var(--ol-white) !important;
  text-decoration: none !important;
}

/* Hero: Secondary button on dark bg */
.ol-btn-hero-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-4) var(--ol-space-10) !important;
  background: transparent !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  line-height: 1 !important;
  border-radius: var(--ol-radius-pill) !important;
  border: 1.5px solid var(--ol-white) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
  min-height: 52px !important;
}

.ol-btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ol-white) !important;
  text-decoration: none !important;
}

/* Ghost Button */
.ol-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--ol-space-1) !important;
  padding: var(--ol-space-2) var(--ol-space-4) !important;
  background: transparent !important;
  color: var(--ol-blue) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  border-radius: var(--ol-radius-pill) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all var(--ol-transition-fast) !important;
}

.ol-btn-ghost:hover {
  background: rgba(0, 113, 227, 0.05) !important;
  color: var(--ol-blue) !important;
  text-decoration: none !important;
}

/* Button sizes */
.ol-btn-sm {
  padding: var(--ol-space-2) var(--ol-space-5) !important;
  font-size: var(--ol-text-sm) !important;
  min-height: 40px !important;
}

.ol-btn-lg {
  padding: var(--ol-space-4) var(--ol-space-12) !important;
  font-size: var(--ol-text-lg) !important;
  min-height: 56px !important;
}

/* Disabled state */
.ol-btn-primary:disabled,
.ol-btn-secondary:disabled,
.ol-btn-preorder:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* ===== 6. UTILITY CLASSES ===== */

/* Text alignment */
.ol-text-center { text-align: center !important; }
.ol-text-left { text-align: left !important; }
.ol-text-right { text-align: right !important; }

/* Flex helpers */
.ol-flex { display: flex !important; }
.ol-flex-col { flex-direction: column !important; }
.ol-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ol-flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.ol-flex-wrap { flex-wrap: wrap !important; }
.ol-gap-1 { gap: var(--ol-space-1) !important; }
.ol-gap-2 { gap: var(--ol-space-2) !important; }
.ol-gap-4 { gap: var(--ol-space-4) !important; }
.ol-gap-6 { gap: var(--ol-space-6) !important; }
.ol-gap-8 { gap: var(--ol-space-8) !important; }

/* Grid helpers */
.ol-grid {
  display: grid !important;
  gap: var(--ol-space-4) !important;
}

/* Visibility */
.ol-hidden { display: none !important; }
.ol-show-desktop { display: none !important; }
.ol-show-mobile { display: block !important; }

/* PRE-ORDER Badge */
.ol-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px var(--ol-space-3) !important;
  background: var(--ol-badge-bg) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-xs) !important;
  font-weight: var(--ol-weight-semibold) !important;
  border-radius: var(--ol-radius-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Pre-order info box */
.ol-preorder-box {
  background: var(--ol-preorder-bg) !important;
  border-left: 3px solid var(--ol-preorder-border) !important;
  border-radius: var(--ol-radius-md) !important;
  padding: var(--ol-space-4) !important;
}

.ol-preorder-box-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--ol-space-3) !important;
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-black) !important;
  line-height: var(--ol-leading-normal) !important;
}

.ol-preorder-box-item + .ol-preorder-box-item {
  margin-top: var(--ol-space-3) !important;
}

.ol-preorder-box-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Skeleton loading */
.ol-skeleton {
  background: linear-gradient(90deg, #F5F5F7 25%, #E8E8ED 50%, #F5F5F7 75%) !important;
  background-size: 200% 100% !important;
  animation: ol-shimmer 1.5s infinite !important;
  border-radius: var(--ol-radius-md) !important;
}

@keyframes ol-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ===== 7. RESPONSIVE BREAKPOINTS ===== */

/* Tablet (≥768px) */
@media (min-width: 768px) {
  .ol-show-desktop { display: flex !important; }
  .ol-show-mobile { display: none !important; }
  .ol-hidden-desktop { display: none !important; }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .ol-hero-title {
    font-size: var(--ol-text-5xl) !important;
  }

  .ol-section-title {
    font-size: var(--ol-text-3xl) !important;
  }

  .ol-container {
    padding-left: var(--ol-space-8) !important;
    padding-right: var(--ol-space-8) !important;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .ol-hero-title {
    font-size: var(--ol-text-2xl) !important;
  }

  .ol-hero-subtitle {
    font-size: var(--ol-text-base) !important;
  }

  .ol-section-title {
    font-size: var(--ol-text-xl) !important;
    margin-bottom: var(--ol-space-6) !important;
  }

  .ol-section-subtitle {
    font-size: var(--ol-text-base) !important;
  }

  .ol-section {
    padding-top: var(--ol-space-10) !important;
    padding-bottom: var(--ol-space-10) !important;
  }

  .ol-btn-hero-primary,
  .ol-btn-hero-secondary {
    min-height: 48px !important;
    padding: var(--ol-space-3) var(--ol-space-8) !important;
  }

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

/* ===== 8. FLY TO CART ANIMATION ===== */
.ol-fly-clone {
  position: fixed !important;
  z-index: 99999 !important;
  border-radius: var(--ol-radius-md) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Cart icon bounce */
.ol-cart-bounce {
  animation: ol-cart-bounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes ol-cart-bounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.3); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Button loading state */
.ol-btn-is-adding {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ===== MOBILE BOTTOM NAV (N-4) ===== */
.ol-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 833px) {
  .ol-mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--ol-border) !important;
    z-index: 9990 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 var(--ol-space-2) !important;
  }

  body {
    padding-bottom: 56px !important;
  }

  .ol-mbn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: var(--ol-space-1) var(--ol-space-3) !important;
    color: var(--ol-gray-medium) !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-family: var(--ol-font-family) !important;
    position: relative !important;
    transition: color var(--ol-transition-fast) !important;
    min-width: 64px !important;
  }

  .ol-mbn-item:hover,
  .ol-mbn-item.is-active {
    color: var(--ol-black) !important;
  }

  .ol-mbn-item svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  .ol-mbn-item span {
    font-size: 10px !important;
    font-weight: var(--ol-weight-medium) !important;
    line-height: 1 !important;
  }

  .ol-mbn-cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 12px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: var(--ol-orange) !important;
    color: var(--ol-white) !important;
    font-size: 10px !important;
    font-weight: var(--ol-weight-bold) !important;
    line-height: 16px !important;
    text-align: center !important;
    border-radius: var(--ol-radius-full) !important;
    padding: 0 4px !important;
  }

  /* Adjust WhatsApp float for bottom nav */
  .ol-whatsapp-float {
    bottom: 80px !important;
  }
}


/* ===== 9. WHATSAPP FLOATING BUTTON ===== */
.ol-whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9990 !important;
  width: 56px !important;
  height: 56px !important;
  background: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.ol-whatsapp-float:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45) !important;
}

.ol-whatsapp-float svg {
  width: 28px !important;
  height: 28px !important;
  fill: #FFFFFF !important;
  display: block !important;
}

@media (max-width: 767px) {
  .ol-whatsapp-float {
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .ol-whatsapp-float svg {
    width: 24px !important;
    height: 24px !important;
  }
}


/* === oneline-header.css ===
/* ============================================================
   ONELINE — Solid Black Navigation v3
   ============================================================ */
/* ── Announcement bar ── */
.ol-announce {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 36px !important;
  background: #C07A3A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  z-index: 10000 !important;
}
.ol-announce-text {
  font-size: 12px !important;
  color: #FFFFFF !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}
.ol-announce-divider {
  width: 1px !important;
  height: 14px !important;
  background: rgba(255,255,255,0.3) !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.ol-header {
  position: fixed !important;
  top: 36px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  height: 72px !important;
  background: #1E2430 !important;
  border-bottom: 1px solid #2E3545 !important;
}
.ol-header-inner {
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
}
/* ── Logo ── */
.ol-header-logo {
  display: flex !important; align-items: center !important;
  text-decoration: none !important; color: #fff !important;
  flex-shrink: 0 !important; gap: 8px !important;
}
.ol-header-logo:hover { color: #fff !important; opacity: 0.85 !important; text-decoration: none !important; }
.ol-logo-icon {
  width: 16px !important; height: 16px !important;
  background: #C07A3A !important; border-radius: 3px !important;
  flex-shrink: 0 !important; display: block !important;
}
.ol-logo-text {
  font-size: 20px !important; font-weight: 100 !important;
  letter-spacing: 2.5px !important; color: #fff !important;
  line-height: 1 !important;
}
/* ── Center Nav ── */
.ol-header-nav {
  display: none !important;
  align-items: center !important; gap: 4px !important;
  position: absolute !important;
  left: 50% !important; transform: translateX(-50%) !important;
}
.ol-nav-indicator { display: none !important; }
.ol-header-nav-link {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
  padding: 6px 14px !important;
  border-radius: 980px !important;
  background: transparent !important;
  white-space: nowrap !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}
.ol-header-nav-link:hover {
  color: rgba(255,255,255,0.90) !important;
  background: rgba(255,255,255,0.10) !important;
  text-decoration: none !important;
}
.ol-header-nav-link.is-cta {
  background: #C07A3A !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(192,122,58,0.35) !important;
}
.ol-header-nav-link.is-cta:hover {
  background: #A86830 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(192,122,58,0.48) !important;
  text-decoration: none !important;
}
/* ── Right actions ── */
.ol-header-actions {
  display: flex !important; align-items: center !important;
  gap: 12px !important; flex-shrink: 0 !important;
}
/* Rating */
.ol-header-rating {
  display: none !important; align-items: center !important;
  gap: 5px !important;
}
.ol-header-stars {
  display: flex !important; align-items: center !important; gap: 1px !important;
}
.ol-header-rating-text {
  font-size: 11px !important;
  color: rgba(255,255,255,0.42) !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}
/* Stock pill */
.ol-header-stock {
  display: none !important; align-items: center !important;
  gap: 6px !important;
  background: #1E2430 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 980px !important;
  padding: 4px 10px !important;
  white-space: nowrap !important;
}
.ol-header-stock-dot {
  width: 6px !important; height: 6px !important;
  background: #30D158 !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  box-shadow: 0 0 4px rgba(48,209,88,0.55) !important;
}
.ol-header-stock-text {
  font-size: 11px !important;
  color: rgba(255,255,255,0.42) !important;
}
.ol-header-stock-text strong {
  color: #fff !important; font-weight: 700 !important;
}
/* Icon buttons */
.ol-header-search-btn {
  display: flex !important; align-items: center !important;
  justify-content: center !important; width: 34px !important;
  height: 34px !important; color: rgba(255,255,255,0.78) !important;
  border-radius: var(--ol-radius-full) !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  cursor: pointer !important;
}
.ol-header-search-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.ol-header-cart-btn {
  position: relative !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important;
  color: rgba(255,255,255,0.78) !important;
  border-radius: var(--ol-radius-full) !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  cursor: pointer !important; text-decoration: none !important;
}
.ol-header-cart-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.ol-cart-count {
  position: absolute !important; top: 2px !important; right: 2px !important;
  min-width: 14px !important; height: 14px !important;
  background: #C07A3A !important; color: #fff !important;
  font-size: 8px !important; font-weight: 700 !important;
  line-height: 14px !important; text-align: center !important;
  border-radius: var(--ol-radius-full) !important; padding: 0 3px !important;
}
/* Hamburger */
.ol-hamburger {
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  width: 34px !important; height: 34px !important;
  cursor: pointer !important;
  border-radius: var(--ol-radius-full) !important;
  transition: background 0.18s ease !important;
  margin-left: 2px !important;
}
.ol-hamburger:hover { background: rgba(255,255,255,0.08) !important; }
.ol-hamburger-line {
  display: block !important; width: 18px !important; height: 1.5px !important;
  background: rgba(255,255,255,0.9) !important; border-radius: 1px !important;
  transition: all var(--ol-transition-base) !important;
}
.ol-hamburger-line + .ol-hamburger-line { margin-top: 5px !important; }
.ol-hamburger.is-open .ol-hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px) !important;
}
.ol-hamburger.is-open .ol-hamburger-line:nth-child(2) { opacity: 0 !important; }
.ol-hamburger.is-open .ol-hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px) !important;
}
/* ── Mobile menu ── */
.ol-mobile-menu {
  position: fixed !important; inset: 0 !important;
  background: rgba(10, 10, 12, 0.97) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  z-index: 9998 !important; display: flex !important;
  flex-direction: column !important; opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  overflow-y: auto !important;
  padding: calc(72px + 36px) var(--ol-space-6) var(--ol-space-6) !important;
}
.ol-mobile-menu.is-open { opacity: 1 !important; visibility: visible !important; }
.ol-mobile-nav-link {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: var(--ol-space-5) 0 !important;
  font-size: var(--ol-text-xl) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: rgba(255,255,255,0.88) !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  transition: color var(--ol-transition-fast) !important;
}
.ol-mobile-nav-link:hover { color: #fff !important; text-decoration: none !important; }
.ol-mobile-menu-footer { margin-top: auto !important; padding-top: var(--ol-space-8) !important; }
.ol-mobile-menu-footer a {
  display: block !important; padding: var(--ol-space-3) 0 !important;
  font-size: var(--ol-text-sm) !important; color: rgba(255,255,255,0.35) !important;
}
/* ── Search overlay ── */
.ol-search-overlay {
  position: fixed !important; top: 0 !important;
  left: 0 !important; right: 0 !important;
  background: rgba(14, 14, 16, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 9997 !important;
  padding: calc(72px + 32px) var(--ol-space-6) var(--ol-space-6) !important;
  box-shadow: none !important;
  opacity: 0 !important; visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all var(--ol-transition-base) !important;
}
.ol-search-overlay.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.ol-search-input-wrapper {
  display: flex !important; align-items: center !important;
  gap: var(--ol-space-3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding-bottom: var(--ol-space-3) !important;
}
.ol-search-input {
  flex: 1 !important; border: none !important; outline: none !important;
  font-size: var(--ol-text-xl) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: rgba(255,255,255,0.9) !important; background: transparent !important;
  padding: 0 !important;
}
.ol-search-input::placeholder { color: rgba(255,255,255,0.3) !important; font-weight: var(--ol-weight-normal) !important; }
.ol-search-close {
  display: flex !important; align-items: center !important;
  justify-content: center !important; width: 36px !important;
  height: 36px !important; color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  border-radius: var(--ol-radius-full) !important;
  transition: background var(--ol-transition-fast) !important;
}
.ol-search-close:hover { background: rgba(255,255,255,0.1) !important; }
/* ── Breadcrumb ── */
.ol-breadcrumb {
  display: flex !important; align-items: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-4) 0 !important;
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-gray-medium) !important;
}
.ol-breadcrumb a { color: var(--ol-gray-medium) !important; text-decoration: none !important; transition: color var(--ol-transition-fast) !important; }
.ol-breadcrumb a:hover { color: var(--ol-blue) !important; }
.ol-breadcrumb-sep { color: var(--ol-border) !important; font-size: 10px !important; }
.ol-breadcrumb-current { color: var(--ol-black) !important; font-weight: var(--ol-weight-medium) !important; }
/* ── Responsive breakpoints ── */
@media (min-width: 1080px) {
  .ol-header-nav { display: flex !important; }
  .ol-header-rating { display: none !important; }
  .ol-header-stock { display: none !important; }
  .ol-hamburger { display: none !important; }
  .ol-mobile-menu.is-open { opacity: 0 !important; visibility: hidden !important; }
}
@media (min-width: 834px) and (max-width: 1079px) {
  .ol-header-nav { display: flex !important; }
  .ol-hamburger { display: none !important; }
  .ol-mobile-menu.is-open { opacity: 0 !important; visibility: hidden !important; }
}
@media (max-width: 833px) {
  .ol-mobile-menu { padding-top: calc(36px + 72px + 28px) !important; }
  .ol-search-overlay { padding-top: calc(36px + 72px + 16px) !important; }
}

/* ── Trust Three Cards ── */
.ol-trust {
  background: #F5F4F0 !important;
  padding: 72px 0 !important;
}
.ol-trust-eyebrow {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #C07A3A !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
.ol-trust-title {
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 48px !important;
}
.ol-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.ol-trust-card {
  background: #fff !important;
  border-radius: 14px !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
}
.ol-trust-icon {
  width: 44px !important;
  height: 44px !important;
  background: rgba(192,122,58,0.10) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C07A3A !important;
  margin-bottom: 20px !important;
  flex-shrink: 0 !important;
}
.ol-trust-card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 10px !important;
  line-height: 1.2 !important;
}
.ol-trust-card-desc {
  font-size: 14px !important;
  color: #6E6E73 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  flex: 1 !important;
}
.ol-trust-card-stat {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #C07A3A !important;
  margin-top: 20px !important;
}
@media (max-width: 767px) {
  .ol-trust { padding: 56px 16px !important; }
  .ol-trust-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Popular Kits Carousel ── */
.ol-popular {
  background: #1E2430 !important;
  padding: 72px 0 !important;
}
.ol-popular-inner {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.ol-popular-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
}
.ol-popular-header-left { flex: 1 !important; }
.ol-popular-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}
.ol-popular-subtitle {
  font-size: 13px !important;
  color: rgba(255,255,255,0.40) !important;
  margin: 0 !important;
}
.ol-popular-nav {
  display: flex !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.ol-popular-prev,
.ol-popular-next {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}
.ol-popular-prev:hover,
.ol-popular-next:hover {
  border-color: #C07A3A !important;
  background: rgba(192,122,58,0.10) !important;
  color: #C07A3A !important;
}
.ol-popular-prev:disabled,
.ol-popular-next:disabled {
  opacity: 0.28 !important;
  cursor: default !important;
  pointer-events: none !important;
}
.ol-popular-track-wrap {
  overflow: hidden !important;
}
.ol-popular-track {
  display: flex !important;
  gap: 16px !important;
  transition: transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  will-change: transform !important;
}
/* Card */
.ol-pop-card {
  background: #161616 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.22s ease !important;
}
.ol-pop-card:hover {
  border-color: #C07A3A !important;
  text-decoration: none !important;
}
.ol-pop-card-img {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background: #2E3545 !important;
  overflow: hidden !important;
}
.ol-pop-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
}
.ol-pop-card-placeholder {
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #2E3545 0%, #2A2A2A 100%) !important;
}
.ol-pop-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: #C07A3A !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 3px 9px !important;
  border-radius: 980px !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
}
.ol-pop-card-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}
.ol-pop-brand {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.35) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  margin: 0 !important;
}
.ol-pop-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.ol-pop-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
}
.ol-pop-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #C07A3A !important;
}
.ol-pop-ship {
  font-size: 11px !important;
  color: rgba(255,255,255,0.32) !important;
}
@media (max-width: 767px) {
  .ol-popular { padding: 56px 0 !important; }
}

/* ══════════════════════════════════════════════
   Footer — three separate rule blocks
   Order: CTA banner → body background → text
   ══════════════════════════════════════════════ */

/* ── Footer ── */
.ol-footer {
  background: #111111 !important;
  width: 100% !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.ol-footer-body {
  padding: 56px 48px !important;
}
.ol-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 2fr !important;
  gap: 80px !important;
  align-items: start !important;
}
/* ─ Left column ─ */
.ol-footer-brand-name {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 4px !important;
  line-height: 1 !important;
}
.ol-footer-eyebrow {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #C07A3A !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 20px !important;
}
.ol-footer-brand-desc {
  font-size: 13px !important;
  color: #888888 !important;
  line-height: 1.85 !important;
  margin: 0 0 20px !important;
}
/* Delivery info list */
.ol-footer-info-list {
  border-top: 0.5px solid #1E2430 !important;
  margin-bottom: 20px !important;
}
.ol-footer-info-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 0.5px solid #1E2430 !important;
}
.ol-footer-info-icon {
  color: #C07A3A !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 1px !important;
}
.ol-footer-info-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ol-footer-info-text strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #BBBBBB !important;
  line-height: 1.5 !important;
}
.ol-footer-info-text span {
  font-size: 13px !important;
  color: #888888 !important;
  line-height: 1.5 !important;
}
/* Contact */
.ol-footer-contact {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.ol-footer-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ol-footer-contact-icon {
  color: #555555 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.ol-footer-contact-item > span:last-child {
  font-size: 13px !important;
  color: #777777 !important;
}
/* CTA button */
.ol-footer-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #C07A3A !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  margin-bottom: 24px !important;
  transition: background 0.18s ease !important;
  display: inline-flex !important;
}
.ol-footer-cta:hover {
  background: #A86830 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.ol-footer-cta-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
/* Left column socials — circle containers */
.ol-footer-socials {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.ol-footer-social {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 0.5px solid #2A2A2A !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666666 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}
.ol-footer-social:hover {
  color: #FFFFFF !important;
  border-color: #555555 !important;
  text-decoration: none !important;
}
/* ─ Right column ─ */
.ol-footer-nav-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 32px !important;
}
.ol-footer-col-title {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #C07A3A !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
.ol-footer-col-links {
  display: flex !important;
  flex-direction: column !important;
}
.ol-footer-col-link {
  font-size: 14px !important;
  color: #AAAAAA !important;
  text-decoration: none !important;
  margin-bottom: 12px !important;
  transition: color 0.15s ease !important;
  line-height: 1 !important;
}
.ol-footer-col-link:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
/* Email subscribe */
.ol-footer-subscribe {
  border-top: 0.5px solid #2E3545 !important;
  margin-top: 8px !important;
  padding-top: 32px !important;
}
.ol-footer-subscribe-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
.ol-footer-subscribe-text {
  flex-shrink: 0 !important;
}
.ol-footer-subscribe-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #DDDDDD !important;
  margin: 0 0 4px !important;
}
.ol-footer-subscribe-sub {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.ol-footer-subscribe-form {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.ol-footer-subscribe-input {
  background: #1A1A1A !important;
  border: 0.5px solid #2A2A2A !important;
  border-radius: 4px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  color: #CCCCCC !important;
  width: 220px !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}
.ol-footer-subscribe-input::placeholder {
  color: #444444 !important;
}
.ol-footer-subscribe-input:focus {
  border-color: #C07A3A !important;
}
.ol-footer-subscribe-btn {
  background: #C07A3A !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.18s ease !important;
  font-family: var(--ol-font-family) !important;
}
.ol-footer-subscribe-btn:hover {
  background: #A86830 !important;
}
/* ─ Divider ─ */
.ol-footer-divider-wrap {
  padding: 0 48px !important;
}
.ol-footer-divider {
  border: none !important;
  border-top: 0.5px solid #1A1A1A !important;
  margin: 0 !important;
}
/* ─ Bottom bar ─ */
.ol-footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 48px !important;
  border-top: none !important;
  background: transparent !important;
}
.ol-footer-copy {
  font-size: 12px !important;
  color: #444444 !important;
}
.ol-footer-bottom-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.ol-footer-tagline {
  font-size: 12px !important;
  color: #444444 !important;
  letter-spacing: 0.04em !important;
}
.ol-footer-bottom-socials {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
.ol-footer-bottom-social {
  color: #555555 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  transition: color 0.15s ease !important;
}
.ol-footer-bottom-social:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}
/* ─ Mobile ─ */
@media (max-width: 900px) {
  .ol-footer-body { padding: 48px 24px !important; }
  .ol-footer-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ol-footer-nav-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .ol-footer-subscribe-inner { flex-direction: column !important; align-items: flex-start !important; }
  .ol-footer-subscribe-input { width: 100% !important; }
  .ol-footer-subscribe-form { width: 100% !important; }
  .ol-footer-divider-wrap { padding: 0 24px !important; }
  .ol-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 20px 24px !important; }
}

/* ── FAQ ── */
.ol-faq {
  background: #F5F4F0 !important;
  padding: 72px 56px !important;
}
.ol-faq-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.ol-faq-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 64px !important;
  align-items: start !important;
}
/* Left column */
.ol-faq-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #C07A3A !important;
  margin: 0 0 14px !important;
}
.ol-faq-title {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #1E2430 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}
.ol-faq-subtitle {
  font-size: 13px !important;
  color: #777 !important;
  line-height: 1.6 !important;
  margin: 0 0 0 !important;
}
/* Promise list */
.ol-promise-list {
  border-top: 0.5px solid #D8D6D0 !important;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.ol-promise-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  border-bottom: 0.5px solid #D8D6D0 !important;
}
.ol-promise-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(192,122,58, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ol-promise-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.ol-promise-text strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E2430 !important;
  line-height: 1.35 !important;
}
.ol-promise-text span {
  font-size: 12px !important;
  color: #666 !important;
  line-height: 1.6 !important;
}
/* CTA button */
.ol-faq-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #1E2430 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 980px !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
.ol-faq-cta:hover {
  background: #2E3545 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.ol-faq-cta-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
/* Right column — FAQ accordion */
.ol-faq-list {
  border-top: 0.5px solid #D8D6D0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.ol-faq-item {
  border-bottom: 0.5px solid #D8D6D0 !important;
}
.ol-faq-q {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1E2430 !important;
  font-family: var(--ol-font-family) !important;
  line-height: 1.35 !important;
}
.ol-faq-q:hover { color: #1E2430 !important; }
/* Kill any pseudo-element icon injected by Trade theme */
.ol-faq-q::before,
.ol-faq-q::after {
  display: none !important;
  content: '' !important;
}
.ol-faq-icon {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  color: #C07A3A !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ol-faq-item.is-open .ol-faq-icon {
  transform: rotate(45deg) !important;
}
.ol-faq-a {
  overflow: hidden !important;
  max-height: 0 !important;
  will-change: max-height !important;
}
.ol-faq-item.is-open .ol-faq-a {
  max-height: 400px !important;
}
.ol-faq-a p {
  padding: 0 0 20px 0 !important;
  font-size: 13px !important;
  color: #555 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}
/* Legacy WhatsApp button — hidden */
.ol-faq-wa {
  display: none !important;
}
@media (max-width: 767px) {
  .ol-faq {
    padding: 56px 24px !important;
  }
  .ol-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* ── How It Works ── */
.ol-hiw {
  background: #fff !important;
  padding: 80px 0 !important;
}
.ol-hiw-eyebrow {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #C07A3A !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
.ol-hiw-title {
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}
.ol-hiw-subtitle {
  text-align: center !important;
  font-size: 15px !important;
  color: #6E6E73 !important;
  margin: 0 0 56px !important;
}
/* Steps row */
.ol-hiw-steps {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
/* Connecting line — spans from center of node 1 to center of node 4 */
.ol-hiw-line {
  position: absolute !important;
  top: 20px !important;        /* half of 40px node */
  left: 12.5% !important;      /* center of column 1 */
  right: 12.5% !important;     /* center of column 4 */
  height: 1px !important;
  background: rgba(192,122,58,0.28) !important;
  z-index: 0 !important;
}
/* Individual step */
.ol-hiw-step {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 20px !important;
}
/* Copper node circle */
.ol-hiw-node {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #C07A3A !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-bottom: 20px !important;
  box-shadow: 0 0 0 6px rgba(192,122,58,0.10) !important;
}
.ol-hiw-step-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
}
.ol-hiw-step-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}
.ol-hiw-step-desc {
  font-size: 13px !important;
  color: #6E6E73 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  flex: 1 !important;
}
.ol-hiw-day {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: #C07A3A !important;
  margin-top: 16px !important;
  text-transform: uppercase !important;
}
/* Mobile: vertical stack */
@media (max-width: 767px) {
  .ol-hiw { padding: 56px 0 !important; }
  .ol-hiw-subtitle { margin-bottom: 40px !important; }
  .ol-hiw-steps { grid-template-columns: 1fr !important; }
  .ol-hiw-line {
    top: 20px !important;
    left: 20px !important;     /* center of 40px node (20px from left) */
    right: auto !important;
    bottom: 20px !important;
    width: 1px !important;
    height: auto !important;
  }
  .ol-hiw-step {
    flex-direction: row !important;
    text-align: left !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 0 0 36px !important;
  }
  .ol-hiw-step:last-child { padding-bottom: 0 !important; }
  .ol-hiw-step-body { align-items: flex-start !important; }
  .ol-hiw-node { margin-bottom: 0 !important; flex-shrink: 0 !important; }
}

/* === oneline-home.css ===
/* ============================================================
   ONELINE — Homepage Section Styles (Apple-Inspired)
   ============================================================
   Sections:
   1. Hero Section
   2. Category Grid
   3. Features/Highlights
   4. Featured Products
   5. Pre-order Process (4 Steps)
   6. Call to Action Banner
   ============================================================ */


/* ===== 1. HERO SECTION ===== */

.ol-hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 560px !important;
  background: var(--ol-hero-bg) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
}

.ol-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.ol-hero-bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  user-select: none !important;
  pointer-events: none !important;
  will-change: transform !important;
  filter: saturate(0.6) !important;
}

/* Slow zoom animation */
.ol-hero-bg.is-zooming img {
  animation: ol-hero-zoom 8s ease-in-out infinite alternate !important;
}

@keyframes ol-hero-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

/* Gradient overlay — lighter now, glass panel handles contrast */
.ol-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.5) 100%
  ) !important;
  pointer-events: none !important;
}

.ol-hero-content {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  width: 75% !important;
  max-width: 860px !important;
  padding: var(--ol-space-8) var(--ol-space-10) !important;
}

/* Gradient glass panel behind hero text */
.ol-hero-glass {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(20, 20, 30, 0.4) 100%
  ) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  z-index: -1 !important;
}

/* Hero badge (e.g., "NEW ARRIVAL") */
.ol-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--ol-space-2) !important;
  padding: var(--ol-space-1) var(--ol-space-4) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-xs) !important;
  font-weight: var(--ol-weight-semibold) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--ol-radius-pill) !important;
  margin-bottom: var(--ol-space-6) !important;
  backdrop-filter: blur(10px) !important;
}

.ol-hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-4) !important;
  margin-top: var(--ol-space-8) !important;
  flex-wrap: wrap !important;
}


/* ===== CONTENT GLASS CONTAINER ===== */
.ol-content-glass {
  position: relative !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(245, 245, 247, 0.7) 50%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ===== 2. CATEGORY GRID ===== */

.ol-categories {
  background: transparent !important;
}

.ol-category-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--ol-space-4) !important;
}

.ol-category-card {
  position: relative !important;
  background: var(--ol-bg-light) !important;
  border-radius: var(--ol-radius-lg) !important;
  overflow: hidden !important;
  padding: var(--ol-space-8) !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 280px !important;
  transition: all var(--ol-transition-base) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
}

.ol-category-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ol-shadow-hover) !important;
  border-color: var(--ol-border) !important;
  text-decoration: none !important;
}

.ol-category-icon {
  width: 72px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: var(--ol-space-4) !important;
  background: var(--ol-white) !important;
  border-radius: var(--ol-radius-full) !important;
  box-shadow: var(--ol-shadow-sm) !important;
}

.ol-category-icon svg {
  width: 36px !important;
  height: 36px !important;
  color: var(--ol-blue) !important;
}

.ol-category-title {
  font-size: var(--ol-text-lg) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: var(--ol-black) !important;
  margin-bottom: var(--ol-space-2) !important;
}

.ol-category-count {
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-gray-medium) !important;
}


/* ===== 3. FEATURES / HIGHLIGHTS ===== */

.ol-features {
  background: transparent !important;
}

.ol-features-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--ol-space-4) !important;
}

.ol-feature-card {
  background: var(--ol-white) !important;
  border-radius: var(--ol-radius-lg) !important;
  padding: var(--ol-space-8) !important;
  text-align: center !important;
  border: 1px solid var(--ol-border) !important;
  transition: all var(--ol-transition-base) !important;
}

.ol-feature-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ol-shadow-md) !important;
}

.ol-feature-icon {
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto var(--ol-space-4) !important;
  background: var(--ol-bg-light) !important;
  border-radius: var(--ol-radius-full) !important;
}

.ol-feature-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--ol-blue) !important;
}

.ol-feature-title {
  font-size: var(--ol-text-lg) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: var(--ol-black) !important;
  margin-bottom: var(--ol-space-2) !important;
}

.ol-feature-desc {
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-gray-medium) !important;
  line-height: var(--ol-leading-normal) !important;
}


/* ===== 4. FEATURED PRODUCTS ===== */

.ol-products {
  background: transparent !important;
}

.ol-product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--ol-space-4) !important;
}

.ol-product-card {
  background: var(--ol-white) !important;
  border: 1px solid var(--ol-border) !important;
  border-radius: var(--ol-radius-lg) !important;
  overflow: hidden !important;
  transition: all var(--ol-transition-base) !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.ol-product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ol-shadow-hover) !important;
  text-decoration: none !important;
}

.ol-product-image-wrap {
  position: relative !important;
  width: 100% !important;
  padding-top: 100% !important;
  background: var(--ol-bg-light) !important;
  overflow: hidden !important;
}

.ol-product-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--ol-transition-base) !important;
}

.ol-product-card:hover .ol-product-image {
  transform: scale(1.03) !important;
}

.ol-product-badge {
  position: absolute !important;
  top: var(--ol-space-3) !important;
  left: var(--ol-space-3) !important;
  z-index: 2 !important;
}

.ol-product-info {
  padding: var(--ol-space-4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ol-space-1) !important;
  flex: 1 !important;
}

.ol-product-brand {
  font-size: var(--ol-text-xs) !important;
  font-weight: var(--ol-weight-medium) !important;
  color: var(--ol-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.ol-product-name {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: var(--ol-black) !important;
  line-height: var(--ol-leading-normal) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ol-product-price {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  color: var(--ol-black) !important;
  margin-top: auto !important;
  padding-top: var(--ol-space-2) !important;
}

.ol-product-compare-price {
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-gray-medium) !important;
  text-decoration: line-through !important;
  margin-left: var(--ol-space-2) !important;
}

/* Featured product: wider/spans more */
.ol-product-card.is-featured {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.ol-product-card.is-featured .ol-product-image-wrap {
  padding-top: 60% !important;
}

.ol-product-card.is-featured .ol-product-info {
  justify-content: center !important;
  padding: var(--ol-space-8) !important;
}


/* ===== 5. PRE-ORDER PROCESS (4 Steps) ===== */

.ol-process {
  background: transparent !important;
}

.ol-process-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--ol-space-4) !important;
  counter-reset: ol-step !important;
}

.ol-process-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--ol-space-6) !important;
  background: var(--ol-white) !important;
  border-radius: var(--ol-radius-lg) !important;
  padding: var(--ol-space-6) !important;
  border: 1px solid var(--ol-border) !important;
  transition: all var(--ol-transition-base) !important;
}

.ol-process-step:hover {
  box-shadow: var(--ol-shadow-md) !important;
}

.ol-step-number {
  flex-shrink: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ol-blue) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-lg) !important;
  font-weight: var(--ol-weight-bold) !important;
  border-radius: var(--ol-radius-full) !important;
}

.ol-step-content {
  flex: 1 !important;
}

.ol-step-title {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: var(--ol-black) !important;
  margin-bottom: var(--ol-space-1) !important;
}

.ol-step-desc {
  font-size: var(--ol-text-sm) !important;
  color: var(--ol-gray-medium) !important;
  line-height: var(--ol-leading-normal) !important;
}

.ol-step-icon {
  font-size: 24px !important;
}


/* ===== 6. CTA BANNER ===== */

.ol-cta-banner {
  background: linear-gradient(135deg, #1D1D1F 0%, #2D2D2F 100%) !important;
  padding: var(--ol-space-16) var(--ol-space-6) !important;
  text-align: center !important;
}

.ol-cta-title {
  font-size: var(--ol-text-2xl) !important;
  font-weight: var(--ol-weight-bold) !important;
  color: var(--ol-white) !important;
  margin-bottom: var(--ol-space-4) !important;
  letter-spacing: var(--ol-tracking-tight) !important;
}

.ol-cta-desc {
  font-size: var(--ol-text-base) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 600px !important;
  margin: 0 auto var(--ol-space-8) !important;
  line-height: var(--ol-leading-normal) !important;
}

.ol-cta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-4) !important;
  flex-wrap: wrap !important;
}


/* ===== MODEL FINDER WIDGET (R-6) ===== */
.ol-finder {
  background: var(--ol-bg-light) !important;
}

.ol-finder-widget {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ol-space-4) !important;
  flex-wrap: wrap !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: var(--ol-space-10) !important;
  background: var(--ol-white) !important;
  border-radius: var(--ol-radius-xl) !important;
  box-shadow: var(--ol-shadow-sm) !important;
}

.ol-finder-select {
  flex: 1 !important;
  min-width: 140px !important;
  height: 72px !important;
  padding: 0 var(--ol-space-4) !important;
  background: var(--ol-bg-light) !important;
  border: 1.5px solid var(--ol-border) !important;
  border-radius: var(--ol-radius-md) !important;
  font-size: var(--ol-text-base) !important;
  color: var(--ol-black) !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: auto !important;
  font-family: var(--ol-font-family) !important;
}

.ol-finder-select:focus {
  border-color: var(--ol-blue) !important;
}

.ol-finder-select:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.ol-finder-btn {
  height: 72px !important;
  white-space: nowrap !important;
  padding: 0 var(--ol-space-8) !important;
}

@media (max-width: 767px) {
  .ol-finder-widget {
    flex-direction: column !important;
    padding: var(--ol-space-6) !important;
  }
  .ol-finder-select {
    width: 100% !important;
    min-width: unset !important;
  }
  .ol-finder-btn {
    width: 100% !important;
  }
}




/* ===== HERO ENTRANCE ANIMATION (N-10) ===== */
.ol-hero-badge {
  animation: heroFadeUp 0.6s ease 0.1s both !important;
}
.ol-hero-title {
  animation: heroFadeUp 0.6s ease 0.25s both !important;
}
.ol-hero-subtitle {
  animation: heroFadeUp 0.6s ease 0.4s both !important;
}
.ol-hero-actions {
  animation: heroFadeUp 0.6s ease 0.55s both !important;
}
.ol-hero-stats {
  animation: heroFadeUp 0.6s ease 0.7s both !important;
}

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


/* ===== SCROLLING BRAND STRIP ===== */
.ol-brand-scroll {
  width: 100% !important;
  background: var(--ol-white) !important;
  padding: var(--ol-space-4) 0 !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--ol-bg-light) !important;
}

.ol-brand-scroll-track {
  width: 100% !important;
  overflow: hidden !important;
}

.ol-brand-scroll-content {
  display: flex !important;
  align-items: center !important;
  gap: var(--ol-space-10) !important;
  animation: olBrandScroll 25s linear infinite !important;
  width: max-content !important;
}

.ol-brand-scroll-img {
  height: 38px !important;
  width: auto !important;
  display: block !important;
  opacity: 0.35 !important;
  filter: grayscale(1) !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
  flex-shrink: 0 !important;
}

.ol-brand-scroll:hover .ol-brand-scroll-img {
  opacity: 0.6 !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .ol-brand-scroll-content {
    animation: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: var(--ol-space-6) !important;
  }
}


/* ===== HERO SOCIAL PROOF STATS (N-8) ===== */
.ol-hero-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-top: var(--ol-space-10) !important;
}

.ol-hero-stat {
  text-align: center !important;
  padding: 0 var(--ol-space-8) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ol-hero-stat:last-child {
  border-right: none !important;
}

.ol-hero-stat strong {
  display: block;
  font-size: 22px !important;
  font-weight: var(--ol-weight-bold) !important;
  color: var(--ol-white) !important;
  line-height: 1.2 !important;
}

.ol-hero-stat span {
  display: block !important;
  font-size: 12px !important;
  font-weight: var(--ol-weight-normal) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 4px !important;
}

@media (max-width: 767px) {
  .ol-hero-stats {
    flex-wrap: wrap !important;
    gap: var(--ol-space-4) !important;
  }
  .ol-hero-stat {
    padding: 0 var(--ol-space-4) !important;
    min-width: 30% !important;
  }
  .ol-hero-stat strong {
    font-size: 18px !important;
  }
  .ol-hero-stat span {
    font-size: 11px !important;
  }

}


/* ===== RESPONSIVE ===== */

/* Tablet (≥768px) */
@media (min-width: 768px) {
  .ol-category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ol-features-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .ol-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .ol-process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ol-process-step {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  .ol-hero {
    height: 650px !important;
  }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
  .ol-hero {
    height: 480px !important;
  }

  .ol-hero-content {
    width: 92% !important;
    padding: var(--ol-space-6) var(--ol-space-6) !important;
  }

  .ol-hero-glass {
    border-radius: 20px !important;
    backdrop-filter: blur(16px) !important;
  }

  .ol-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ol-hero-actions .ol-btn-hero-primary,
  .ol-hero-actions .ol-btn-hero-secondary {
    width: 100% !important;
  }

  .ol-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--ol-space-3) !important;
  }

  .ol-product-card.is-featured {
    grid-template-columns: 1fr !important;
  }

  .ol-product-info {
    padding: var(--ol-space-3) !important;
  }

  .ol-product-name {
    font-size: var(--ol-text-sm) !important;
  }

  .ol-category-card {
    min-height: 200px !important;
    padding: var(--ol-space-6) !important;
  }

  .ol-cta-title {
    font-size: var(--ol-text-xl) !important;
  }

  .ol-cta-banner {
    padding: var(--ol-space-10) var(--ol-space-4) !important;
  }
}


/* === oneline-footer.css === 
/* ============================================================
   ONELINE — Apple-Style Footer (Light Gray)
   ============================================================
   4-column navigation + legal bar
   Background: #F5F5F7 (Apple Light Gray)
   ============================================================ */



/* === oneline-shopify.css === 
/* ============================================================
   ONELINE — Shopify Dawn Theme Override Strategy
   ============================================================
   THIS IS THE KEY FILE that prevents Dawn from overriding
   your Apple-style custom CSS.

   STRATEGY:
   1. All selectors use #shopify-section-{{ section.id }} prefix
      (when used in Liquid section files)
   2. For the static version, we use [data-ol-section] attribute
      which has equivalent specificity
   3. !important is used strategically on layout-critical props
   4. CSS @layer is used to ensure custom styles win
   5. Nest Dawn's problematic selectors and override them

   INSTRUCTIONS:
   - Copy this file to Shopify: assets/oneline-shopify.css
   - In each .liquid section, replace [data-ol-section] with
     #shopify-section-{{ section.id }}
   - Include in theme.liquid AFTER base.css:
     {{ 'oneline-shopify.css' | asset_url | stylesheet_tag }}
   ============================================================ */

/* ===== LAYER STRATEGY ===== */
/* Dawn's base.css loads first. We define our layer AFTER it
   and put all overrides here so they always win. */
@layer oneline-override {
  /* Empty - this establishes the layer order */
}

/* ===== SECTION-SCOPED OVERRIDES ===== */

/* HEADER - Override Dawn's default header */
[data-ol-section="header"] {
  /* Force header customization */
}

[data-ol-section="header"] .header-wrapper,
[data-ol-section="header"] header.header,
[data-ol-section="header"] .header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid transparent !important;
  position: fixed !important;
  width: 100% !important;
  z-index: 9999 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

[data-ol-section="header"] .header__heading-link,
[data-ol-section="header"] .header__heading {
  margin: 0 !important;
  padding: 0 !important;
}

[data-ol-section="header"] .header__heading-logo {
  max-height: 36px !important;
  width: auto !important;
}

/* Remove Dawn's default header spacing */
[data-ol-section="header"] .header__inline-menu,
[data-ol-section="header"] .header__active-nav {
  display: none !important;
}

/* HERO - Override Dawn's banner/image-banner */
[data-ol-section="hero"] .banner,
[data-ol-section="hero"] .image-banner,
[data-ol-section="hero"] .banner__content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
}

[data-ol-section="hero"] .banner__box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

[data-ol-section="hero"] .banner__heading,
[data-ol-section="hero"] .banner__text {
  margin: 0 !important;
  text-align: center !important;
}

[data-ol-section="hero"] .banner__media {
  position: absolute !important;
  inset: 0 !important;
}

/* PRODUCT CARD - Override Dawn's card product */
[data-ol-section="products"] .card-wrapper,
[data-ol-section="products"] .card {
  background: var(--ol-white) !important;
  border: 1px solid var(--ol-border) !important;
  border-radius: var(--ol-radius-lg) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

[data-ol-section="products"] .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-ol-section="products"] .card__inner {
  aspect-ratio: 1 / 1 !important;
}

[data-ol-section="products"] .card__heading {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-semibold) !important;
  line-height: var(--ol-leading-normal) !important;
}

[data-ol-section="products"] .card-information {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  color: var(--ol-black) !important;
}

[data-ol-section="products"] .price {
  font-size: var(--ol-text-base) !important;
  color: var(--ol-black) !important;
}

[data-ol-section="products"] .price .price-item {
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  color: var(--ol-black) !important;
}

[data-ol-section="products"] .price .badge {
  background: var(--ol-badge-bg) !important;
  color: var(--ol-white) !important;
  font-size: var(--ol-text-xs) !important;
  border-radius: var(--ol-radius-sm) !important;
  padding: 2px var(--ol-space-3) !important;
  border: none !important;
}

/* FOOTER - Override Dawn's footer */
[data-ol-section="footer"] .footer,
[data-ol-section="footer"] .footer__grid {
  background: var(--ol-footer-bg) !important;
  color: var(--ol-footer-text) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-ol-section="footer"] .footer__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ol-space-8) !important;
  max-width: var(--ol-max-width) !important;
  margin: 0 auto !important;
  padding: var(--ol-space-10) var(--ol-space-6) !important;
}

[data-ol-section="footer"] .footer-block {
  flex: 1 !important;
  min-width: 160px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-ol-section="footer"] .footer-block__heading {
  font-size: var(--ol-text-xs) !important;
  font-weight: var(--ol-weight-semibold) !important;
  color: var(--ol-white) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: var(--ol-space-4) !important;
  padding: 0 !important;
}

[data-ol-section="footer"] .footer-block__details-content {
  margin: 0 !important;
  padding: 0 !important;
}

[data-ol-section="footer"] .footer-block__details-content li {
  padding: var(--ol-space-1) 0 !important;
}

[data-ol-section="footer"] .footer-block__details-content a {
  font-size: var(--ol-text-xs) !important;
  color: var(--ol-footer-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-ol-section="footer"] .footer__content-bottom {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: var(--ol-space-4) 0 !important;
}

[data-ol-section="footer"] .footer__copyright {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px !important;
  text-align: center !important;
}

[data-ol-section="footer"] .footer__list-social {
  display: flex !important;
  gap: var(--ol-space-3) !important;
  justify-content: center !important;
}


/* ===== GLOBAL DAWN OVERRIDES ===== */

/* Remove Dawn's default page width constraints for full-width sections */
.page-width,
.page-width--narrow {
  max-width: none !important;
  padding: 0 !important;
}

/* Override Dawn's button styles globally */
.button:not(.product-media-container__zoom-button):not(.dialog-thumbnails-list__thumbnail),
.shopify-challenge__button,
.customer button {
  border-radius: var(--ol-radius-pill) !important;
  font-family: var(--ol-font-family) !important;
  min-height: 48px !important;
  padding: var(--ol-space-3) var(--ol-space-8) !important;
  font-size: var(--ol-text-base) !important;
  font-weight: var(--ol-weight-medium) !important;
  transition: all var(--ol-transition-fast) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1 !important;
}

.button--primary,
.button--secondary {
  border-radius: var(--ol-radius-pill) !important;
}

/* Override Dawn's link colors */
.link,
.customer a {
  color: var(--ol-blue) !important;
  transition: color var(--ol-transition-fast) !important;
}

.link:hover,
.customer a:hover {
  color: var(--ol-blue-hover) !important;
}

/* Override Dawn's heading fonts */
h1, h2, h3, h4, h5, h6,
.heading,
.title,
.title--primary {
  font-family: var(--ol-font-family) !important;
  letter-spacing: var(--ol-tracking-tight) !important;
}

/* Remove Dawn's default section spacing */
.section,
.section-template {
  margin: 0 !important;
  padding: 0 !important;
}

/* Override Dawn's focus styles to match Apple */
*:focus-visible {
  outline: 2px solid var(--ol-blue) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Override Dawn's border-radius for inputs */
.field__input,
.select__select,
.customer .field input {
  border-radius: var(--ol-radius-md) !important;
  border: 1.5px solid var(--ol-border) !important;
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus {
  border-color: var(--ol-blue) !important;
  box-shadow: none !important;
}


/* ===== CART OVERRIDES ===== */
[data-ol-section="cart"] .cart-item {
  border-bottom: 1px solid var(--ol-bg-light) !important;
}

[data-ol-section="cart"] cart-remove-button .button {
  color: var(--ol-red) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-height: auto !important;
}


/* ===== RESPONSIVE OVERRIDES FOR DAWN ===== */
@media (max-width: 767px) {
  [data-ol-section="header"] .header-wrapper,
  [data-ol-section="header"] header.header,
  [data-ol-section="header"] .header {
    height: 72px !important;
  }
}


/* ===== SCROLL LOCK FOR MOBILE MENU ===== */
body.ol-menu-open {
  overflow: hidden !important;
}


/* ===== DAWN SPECIFICITY OVERRIDES FOR ANNOUNCEMENT BAR ===== */
/* Hide Dawn's announcement bar by default */
.announcement-bar,
.announcement-bar__message {
  display: none !important;
}

/* ===== DAWN UTILITY OVERRIDES ===== */
/* Prevent Dawn from overriding our product grid */
.collection .product-grid,
.product-grid {
  display: none !important;
}

/* But re-activate it if our class is present */
.collection .ol-product-grid,
.ol-product-grid {
  display: grid !important;
}

/* ===== SLIDESHOW DOT NAVIGATION ===== */
/* 1. 关闭容器的颜色反相混合模式，否则自定义颜色会被反转 */
slideshow-controls:has(.slideshow-controls__dots) {
  mix-blend-mode: normal !important;
}

/* 2. 容器改为 visible overflow，防止 border 被裁掉 */
.slideshow-controls__dots {
  overflow: visible !important;
}

/* 3. 隐藏原生 ::after 小点，改由 button 背景色承担视觉 */
.slideshow-controls__dots .slideshow-control::after {
  display: none !important;
}

/* 4. 默认状态 — 重置全局 .button 的 min-height/padding，应用半透明胶囊样式 */
.slideshow-controls__dots .slideshow-control {
  min-height: unset !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: background 180ms ease, border-color 180ms ease !important;
}

/* 5. 激活状态 (aria-selected="true") */
.slideshow-controls__dots .slideshow-control[aria-selected='true'] {
  background: #D4550F !important;
  border: 1px solid #D4550F !important;
}

/* 6. 悬停状态 */
.slideshow-controls__dots .slideshow-control:hover {
  background: rgba(212, 85, 15, 0.6) !important;
  border: 1px solid #D4550F !important;
}