/* ========================================
   STYLE.CSS — KAANIPA JEWELS
   Primary accent: #2563EB (Blue)
   Font: Outfit (universal)
   Design: Clean, modern, pill-first, rounded
   ======================================== */

/* ========================================
   1. FONT IMPORTS
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ========================================
   2. CSS VARIABLES
   ======================================== */
:root {
  /* Universal Font */
  --font:              'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Primary Accent — Blue */
  --primary:           #2563EB;
  --primary-dark:      #1d4ed8;
  --primary-deeper:    #1e40af;
  --primary-light:     rgba(37, 99, 235, 0.08);
  --primary-ring:      rgba(37, 99, 235, 0.22);
  --primary-glow:      rgba(37, 99, 235, 0.32);
  --primary-ultra:     rgba(37, 99, 235, 0.06);

  /* Neutrals */
  --white:             #ffffff;
  --black:             #000000;
  --gray-50:           #f8fafc;
  --gray-100:          #f1f5f9;
  --gray-200:          #e2e8f0;
  --gray-300:          #cbd5e1;
  --gray-400:          #94a3b8;
  --gray-500:          #64748b;
  --gray-600:          #475569;
  --gray-900:          #0f172a;
  --border:            #e2e8f0;

  /* Surface */
  --surface:           #f8fafc;
  --surface-card:      #ffffff;

  /* Border Radius — rounded-first */
  --radius-pill:       999px;
  --radius-xl:         28px;
  --radius-lg:         24px;
  --radius-md:         20px;
  --radius-sm:         14px;
  --radius-xs:         10px;

  /* Spacing */
  --section-pad-y:     72px;
  --section-pad-y-md:  52px;
  --section-pad-y-sm:  40px;
  --container-pad:     48px;
  --container-pad-md:  32px;
  --container-pad-sm:  20px;
  --container-pad-xs:  16px;

  /* Shadows */
  --shadow-sm:         0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:         0 4px 20px rgba(0,0,0,0.09);
  --shadow-lg:         0 8px 36px rgba(0,0,0,0.10);
  --shadow-blue:       0 6px 28px var(--primary-ring);
  --shadow-blue-lg:    0 12px 44px var(--primary-glow);

  /* Timing */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --t-fast:            0.16s ease;
  --t-normal:          0.26s ease;
  --t-slow:            0.44s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dot Nav */
  --dot-size:          10px;
  --dot-active-width:  28px;
  --dot-height:        10px;

  /* Gold for stars */
  --gold:              #F59E0B;
}

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

html {
  -webkit-font-smoothing:    antialiased;
  -moz-osx-font-smoothing:   grayscale;
  text-rendering:            optimizeLegibility;
  scroll-behavior:           smooth;
}

body {
  font-family:  var(--font);
  font-weight:  400;
  color:        var(--gray-900);
  background:   var(--white);
  line-height:  1.65;
}

/* All text uses Outfit */
h1, h2, h3, h4, h5, h6,
p, a, span, button, input, textarea, select,
label, li, strong, em, small, blockquote,
.price, [class*="price"], [class*="title"],
[class*="heading"], [class*="label"] {
  font-family: var(--font) !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: 600; line-height: 1.25; }
h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.35; }

img    { display: block; max-width: 100%; }
a      { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font); }

/* Accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible {
  outline:        2px solid var(--primary);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

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

/* ========================================
   4. SECTION HEADING WITH BLUE UNDERLINE
   ======================================== */
.sec-title,
h2.sec-title,
h1.sec-title {
  font-family:    var(--font) !important;
  font-size:      clamp(1.75rem, 3.5vw, 2.5rem) !important;
  font-weight:    700 !important;
  line-height:    1.2;
  text-align:     center;
  color:          var(--gray-900);
  letter-spacing: -0.01em;
  display:        block;
}

/* Blue pill underline after heading */
.sec-title::after,
h2.sec-title::after,
h1.sec-title::after {
  content:         '';
  display:         block;
  width:           56px;
  height:          4px;
  background:      var(--primary);
  border-radius:   var(--radius-pill);
  margin:          12px auto 0;
}

/* Section header wrapper */
.section-header,
.sec-head {
  text-align:    center;
  margin-bottom: 40px;
  padding:       0 var(--container-pad-sm);
}

.section-header p,
.sec-head p {
  font-size:   1rem;
  color:       var(--gray-500);
  margin-top:  10px;
  line-height: 1.7;
}

/* ========================================
   5. PILL BUTTONS — GLOBAL
   ======================================== */
.btn,
.btn-primary,
.btn-secondary,
.button--primary,
.button--secondary,
.faq-cta-btn,
.social-button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 32px;
  border-radius:   var(--radius-pill);
  font-family:     var(--font);
  font-size:       0.9rem;
  font-weight:     600;
  letter-spacing:  0.025em;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--t-normal),
                   transform  0.15s ease,
                   box-shadow var(--t-normal),
                   border-color var(--t-normal),
                   color var(--t-normal);
}

/* Primary */
.btn-primary,
.button--primary,
.faq-cta-btn {
  background:  var(--primary);
  color:       var(--white);
  box-shadow:  var(--shadow-blue);
}

.btn-primary:hover,
.button--primary:hover,
.faq-cta-btn:hover {
  background:  var(--primary-dark);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-blue-lg);
}

/* Secondary / Outline */
.btn-secondary,
.button--secondary {
  background:   transparent;
  color:        var(--primary);
  border:       1.5px solid var(--primary);
  box-shadow:   none;
}

.btn-secondary:hover,
.button--secondary:hover {
  background:  var(--primary-light);
  transform:   translateY(-1px);
  box-shadow:  var(--shadow-blue);
}

/* ========================================
   6. SHARED DOT NAVIGATION — pill dots
   ======================================== */
.carousel-dots, .slider-dots, .reels-dots,
.collections-dots, .testimonial-dots, .steal-deal-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  padding:         0;
  margin-top:      20px;
}

.carousel-dots button,
.slider-dots .dot,
.reels-dots button,
.collections-dots button,
.testimonial-dot,
.steal-deal-dot {
  width:         var(--dot-size);
  height:        var(--dot-height);
  border-radius: var(--radius-pill);
  background:    var(--gray-200);
  border:        none;
  cursor:        pointer;
  transition:    background var(--t-normal), width var(--t-normal);
  padding:       0;
  flex-shrink:   0;
}

.carousel-dots button.active,
.slider-dots .dot.active,
.reels-dots button.active,
.collections-dots button.active,
.testimonial-dot.active,
.steal-deal-dot.active {
  width:      var(--dot-active-width);
  background: var(--primary);
}

.carousel-dots button:hover:not(.active),
.slider-dots .dot:hover:not(.active),
.reels-dots button:hover:not(.active),
.collections-dots button:hover:not(.active),
.testimonial-dot:hover:not(.active),
.steal-deal-dot:hover:not(.active) {
  background: var(--primary-ring);
}

/* ========================================
   7. SHARED NAV ARROWS
   ======================================== */
.nav-arrow,
.nav-btn,
.slider-nav,
.carousel-nav,
.testimonial-nav,
#cat-prev, #cat-next,
.collection-nav-btn {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.96);
  border:          1.5px solid var(--gray-200);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gray-900);
  box-shadow:      var(--shadow-sm);
  transition:      background var(--t-normal),
                   color var(--t-normal),
                   border-color var(--t-normal),
                   transform var(--t-normal),
                   box-shadow var(--t-normal);
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
  flex-shrink:     0;
}

.nav-arrow:hover:not(:disabled),
.nav-btn:hover:not(:disabled),
.slider-nav:hover,
.carousel-nav:hover,
.testimonial-nav:hover,
#cat-prev:hover, #cat-next:hover {
  background:    var(--primary);
  color:         var(--white);
  border-color:  var(--primary);
  transform:     translateY(-50%) scale(1.06);
  box-shadow:    var(--shadow-blue);
}

.nav-arrow:disabled,
.nav-btn:disabled {
  opacity: 0.3;
  cursor:  not-allowed;
}

/* ========================================
   8. ANNOUNCEMENT BAR
   ======================================== */
.ann-bar,
.announcement-bar {
  font-family: var(--font);
  background:  var(--primary);
  color:       var(--white);
  padding:     10px 0;
  overflow:    hidden;
  position:    relative;
  z-index:     100;
  width:       100%;
  min-height:  38px;
}

.ann-track,
.announcement-content {
  display:     inline-flex;
  flex-wrap:   nowrap;
  white-space: nowrap;
  animation:   scroll-seamless 28s linear infinite;
  will-change: transform;
  align-items: center;
}

.ann-track span,
.announcement-content p {
  padding:        0 44px;
  display:        inline-block;
  font-size:      13.5px;
  font-weight:    500;
  letter-spacing: 0.4px;
  color:          var(--white);
  white-space:    nowrap;
  flex-shrink:    0;
}

.ann-bar:hover .ann-track,
.announcement-bar:hover .announcement-content { animation-play-state: paused; }

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

@media (max-width: 768px) {
  .ann-track span { padding: 0 28px; font-size: 12.5px; }
}

/* ========================================
   9. HERO SLIDER
   ======================================== */
.hero-slider,
.slider-wrap {
  padding:    20px var(--container-pad);
  background: var(--gray-50);
}

.hero-slider-inner,
.slider-wrap-inner,
.hero-slider .slider-container,
.slider-wrap .slider-container {
  position:      relative;
  width:         100%;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--gray-900);
}

/* Auto-height container — no fixed height so image is never cropped */
.slider-track {
  display:    flex;
  width:      100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.slider-track > .slide {
  display:   block !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex:      0 0 100% !important;
}

/* Images contain fully — no crop */
.hero-slider .slide img,
.slider-wrap .slide img,
.slider-track .slide img {
  width:       100%;
  height:      auto;
  display:     block;
  object-fit:  contain;
  object-position: center;
  border-radius: var(--radius-lg);
}

/* Fade mode */
.hero-slider .slide,
.slider-wrap .slide {
  display:  none;
  width:    100%;
  position: relative;
}

.hero-slider .slide.active,
.slider-wrap .slide.active { display: block; width: 100%; }

/* Desktop / Mobile image toggling */
.desk-img { display: block !important; }
.mob-img  { display: none  !important; }

@media (max-width: 768px) {
  .desk-img { display: none  !important; }
  .mob-img  { display: block !important; width: 100%; height: auto; }
}

/* Fade variant */
.slider-container {
  position: relative;
  width:    100%;
  overflow: hidden;
}

.slider-container > .slide {
  position:   absolute !important;
  top:        0; left: 0;
  width:      100%; height: 100%;
  opacity:    0;
  transition: opacity 0.5s ease;
  z-index:    1;
  display:    block !important;
}

.slider-container > .slide.active { opacity: 1; z-index: 2; }

/* Slider nav arrows — positioned relative to inner wrapper */
.hero-slider .slider-nav,
.slider-wrap .slider-nav {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255,255,255,0.92);
  border:          1.5px solid var(--gray-200);
  box-shadow:      var(--shadow-md);
  color:           var(--gray-900);
  cursor:          pointer;
  z-index:         10;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--t-normal);
}

.hero-slider .slider-nav:hover,
.slider-wrap .slider-nav:hover {
  background:   var(--primary);
  color:        var(--white);
  border-color: var(--primary);
  transform:    translateY(-50%) scale(1.06);
  box-shadow:   var(--shadow-blue);
}

.hero-slider .slider-nav.prev,
.slider-wrap .slider-nav.prev { left: 18px; }

.hero-slider .slider-nav.next,
.slider-wrap .slider-nav.next { right: 18px; }

.slider-dots { margin-top: 16px; padding: 4px 0; }

@media (max-width: 1024px) {
  .hero-slider, .slider-wrap {
    padding: 16px var(--container-pad-md);
  }
}

@media (max-width: 768px) {
  .hero-slider, .slider-wrap {
    padding: 12px var(--container-pad-sm);
  }

  .hero-slider-inner,
  .slider-wrap-inner,
  .hero-slider .slider-container,
  .slider-wrap .slider-container {
    border-radius: var(--radius-md);
  }

  .hero-slider .slider-nav { width: 36px; height: 36px; }
  .hero-slider .slider-nav.prev { left: 10px; }
  .hero-slider .slider-nav.next { right: 10px; }
}

@media (max-width: 480px) {
  .hero-slider, .slider-wrap {
    padding: 10px var(--container-pad-xs);
  }

  .hero-slider-inner,
  .slider-wrap-inner,
  .hero-slider .slider-container,
  .slider-wrap .slider-container {
    border-radius: var(--radius-sm);
  }
}

/* ========================================
   10. SHOP BY CATEGORY — 3×3 Grid, 1:1 cards
   ======================================== */
.category-carousel,
.category-section {
  padding:    var(--section-pad-y) 0;
  background: var(--white);
}

.category-carousel .carousel-wrapper,
.category-section .inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--container-pad);
}

/* Section heading for category */
.category-carousel .sec-title,
.category-section .sec-title {
  margin-bottom: 36px;
}

/* 3-column grid on desktop */
.category-grid,
#cat-track,
.carousel-container,
.category-carousel .carousel-container {
  display:                grid !important;
  grid-template-columns:  repeat(3, 1fr) !important;
  gap:                    20px !important;
  overflow:               visible !important;
  padding:                8px 0 !important;
  width:                  100% !important;
  flex-direction:         unset !important;
  flex-wrap:              unset !important;
  list-style:             none !important;
}

/* Category card — 1:1 square */
.category-item-link {
  display:         block !important;
  text-decoration: none !important;
  color:           inherit;
  border-radius:   var(--radius-lg);
  overflow:        hidden;
}

.category-item {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    center !important;
  gap:            0 !important;
  width:          100% !important;
  min-width:      0 !important;
  max-width:      100% !important;
}

/* 1:1 square image card with overlay */
.category-icon {
  position:      relative !important;
  width:         100% !important;
  height:        auto !important;
  min-width:     0 !important;
  min-height:    0 !important;
  aspect-ratio:  1 / 1 !important;
  border-radius: var(--radius-lg) !important;
  overflow:      hidden;
  background:    var(--gray-100);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-normal), transform var(--t-normal);
  flex-shrink:   0 !important;
}

/* Gradient overlay */
.category-icon::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      linear-gradient(to top, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.08) 55%, transparent 100%);
  border-radius:   var(--radius-lg);
  pointer-events:  none;
  transition:      opacity var(--t-normal);
}

.category-item-link:hover .category-icon {
  box-shadow: var(--shadow-blue);
  transform:  translateY(-4px);
}

.category-item-link:hover .category-icon::after {
  opacity: 0.85;
}

.category-icon img {
  position:        absolute !important;
  inset:           0 !important;
  width:           100% !important;
  height:          100% !important;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 0.5s ease;
}

.category-item-link:hover .category-icon img {
  transform: scale(1.06);
}

/* Category label overlaid on image */
.category-item span,
.category-item .cat-label {
  position:       absolute !important;
  bottom:         14px;
  left:           0; right: 0;
  z-index:        2;
  font-family:    var(--font) !important;
  font-size:      0.95rem !important;
  font-weight:    700 !important;
  color:          var(--white) !important;
  text-align:     center;
  line-height:    1.35;
  padding:        0 10px;
  display:        block !important;
  white-space:    normal;
  word-break:     break-word;
  text-shadow:    0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.01em;
}

/* Hide carousel nav arrows — grid replaces carousel */
.category-carousel .carousel-nav,
#cat-prev, #cat-next { display: none !important; }

.category-carousel .carousel-dots { margin-top: 24px; }

@media (max-width: 1023px) {
  .category-carousel .carousel-wrapper,
  .category-section .inner { padding: 0 var(--container-pad-md); }

  .category-grid,
  #cat-track,
  .carousel-container,
  .category-carousel .carousel-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .category-carousel { padding: var(--section-pad-y-sm) 0; }

  .category-carousel .carousel-wrapper,
  .category-section .inner { padding: 0 var(--container-pad-sm); }

  .category-grid,
  #cat-track,
  .carousel-container,
  .category-carousel .carousel-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .category-icon {
    border-radius: var(--radius-md) !important;
  }

  .category-icon::after {
    border-radius: var(--radius-md) !important;
  }

  .category-item span {
    font-size: 0.85rem !important;
    bottom:    10px;
  }
}

@media (max-width: 480px) {
  .category-carousel .carousel-wrapper,
  .category-section .inner { padding: 0 var(--container-pad-xs); }

  .category-grid,
  #cat-track,
  .carousel-container,
  .category-carousel .carousel-container { gap: 10px !important; }

  .category-icon { border-radius: var(--radius-sm) !important; }
  .category-item span { font-size: 0.78rem !important; }
}

/* ========================================
   11. SHOP BY COLLECTION
   ======================================== */
.shop-by-collection { padding: var(--section-pad-y) 0; background: var(--gray-50); }

.shop-by-collection .section-header { margin-bottom: 40px; padding: 0 var(--container-pad-sm); }

.shop-by-collection .section-header h2,
.shop-by-collection .sec-title { font-family: var(--font) !important; }

.collections-carousel {
  position:   static !important;
  max-width:  1400px;
  margin:     0 auto;
  padding:    0 var(--container-pad);
}

.collections-viewport { overflow: visible !important; width: 100%; }

.collections-track {
  display:        flex !important;
  flex-direction: column !important;
  flex-wrap:      wrap !important;
  gap:            24px !important;
  transform:      none !important;
  transition:     none !important;
  width:          100% !important;
}

.collection-slide {
  flex:      0 0 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  width:     100% !important;
}

.collection-nav-btn,
.collections-dots { display: none !important; }

.collection-card {
  text-decoration: none;
  color:           inherit;
  display:         block;
  width:           100%;
  border-radius:   var(--radius-lg);
  overflow:        hidden;
  cursor:          pointer;
  position:        relative;
  background:      var(--gray-900);
  box-shadow:      var(--shadow-md);
  transition:      box-shadow var(--t-normal), transform var(--t-normal);
}

.collection-card:hover {
  box-shadow: var(--shadow-blue-lg);
  transform:  translateY(-2px);
}

.collection-image {
  position:      relative;
  width:         100%;
  aspect-ratio:  21 / 9;
  background:    var(--gray-100);
  overflow:      hidden;
  border-radius: var(--radius-lg);
}

.collection-image img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
  display:          block;
  border-radius:    var(--radius-lg);
  transition:       transform 0.6s ease;
}

.collection-card:hover .collection-image img { transform: scale(1.03); }

.collection-image::after {
  content:         '';
  position:        absolute;
  bottom:          0; left: 0;
  width:           100%; height: 60%;
  background:      linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events:  none;
  border-radius:   0 0 var(--radius-lg) var(--radius-lg);
}

.collection-label {
  position: absolute;
  bottom:   28px; left: 32px;
  z-index:  2;
  color:    var(--white);
}

.collection-label span {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity:        0.85;
  display:        block;
  margin-bottom:  6px;
}

.collection-label h3 {
  font-family: var(--font) !important;
  font-size:   2rem !important;
  font-weight: 700 !important;
  color:       var(--white) !important;
  margin:      0;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  .shop-by-collection { padding: var(--section-pad-y-md) 0; }
  .collections-carousel { padding: 0 var(--container-pad-md); }
  .collection-image { aspect-ratio: 16 / 7; }
}

@media (max-width: 768px) {
  .shop-by-collection  { padding: var(--section-pad-y-sm) 0; }
  .collections-carousel { padding: 0 var(--container-pad-sm); }
  .collections-track   { gap: 16px !important; }
  .collection-image    { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
  .collection-card     { border-radius: var(--radius-md); }
  .collection-image img { border-radius: var(--radius-md); }
  .collection-image::after { border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .collection-label h3 { font-size: 1.4rem !important; }
  .collection-label    { bottom: 18px; left: 18px; }
}

@media (max-width: 480px) {
  .collections-carousel { padding: 0 var(--container-pad-xs); }
  .collections-track    { gap: 12px !important; }
  .collection-image     { aspect-ratio: 3 / 2; border-radius: var(--radius-sm); }
  .collection-card      { border-radius: var(--radius-sm); }
  .collection-image img { border-radius: var(--radius-sm); }
  .collection-label h3  { font-size: 1.15rem !important; }
  .collection-label     { bottom: 14px; left: 14px; }
}

/* ========================================
   12. WATCH & SHOP — INSTAGRAM REELS
   ======================================== */
.watch-shop-section { padding: var(--section-pad-y) 0; background: var(--white); }

.watch-shop-container {
  max-width: 1280px;
  margin:    0 auto;
  padding:   0 var(--container-pad);
  position:  relative;
}

.reels-carousel  { position: relative; width: 100%; }
.reels-viewport  { overflow: hidden; position: relative; width: 100%; border-radius: var(--radius-lg); }

.reels-track {
  display:     flex;
  gap:         24px;
  transition:  transform var(--t-slow);
  will-change: transform;
}

.reel-slide {
  flex:      0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

/* Reel card — fully rounded */
.reel-card {
  background:    var(--white);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  border:        1.5px solid var(--border);
  transition:    box-shadow var(--t-normal), transform var(--t-normal), border-color var(--t-normal);
}

.reel-card:hover {
  box-shadow:   var(--shadow-blue);
  transform:    translateY(-3px);
  border-color: var(--primary);
}

/* Video container — rounded top corners */
.reel-media {
  position:        relative;
  width:           100%;
  aspect-ratio:    9 / 16;
  background:      var(--black);
  overflow:        hidden;
  border-radius:   var(--radius-lg) var(--radius-lg) 0 0;
}

.reel-video {
  width:         100%;
  height:        100%;
  object-fit:    contain;
  display:       block;
  background:    var(--black);
}

.reel-description {
  padding:    16px 18px;
  background: var(--white);
}

.reel-description p {
  margin:      0;
  font-size:   0.875rem;
  color:       var(--gray-500);
  line-height: 1.55;
}

/* Nav arrows for reels */
.nav-btn.prev { left:  -60px; }
.nav-btn.next { right: -60px; }
.nav-btn i    { font-size: 17px; }
.reels-dots   { margin-top: 32px; }

@media (max-width: 1024px) {
  .watch-shop-section   { padding: var(--section-pad-y-md) 0; }
  .watch-shop-container { padding: 0 var(--container-pad-md); }
  .reels-track  { gap: 20px; }
  .reel-slide   { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }
  .nav-btn.prev { left: -16px; }
  .nav-btn.next { right: -16px; }
}

@media (max-width: 768px) {
  .watch-shop-section   { padding: var(--section-pad-y-sm) 0; }
  .watch-shop-container { padding: 0 var(--container-pad-sm); }
  .reels-track  { gap: 16px; }
  .reel-slide   { flex: 0 0 calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  .reel-card    { border-radius: var(--radius-md); }
  .reel-media   { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .nav-btn      { display: none; }
  .reels-dots   { margin-top: 24px; }
  .reels-viewport { border-radius: var(--radius-md); }
}

@media (max-width: 480px) {
  .watch-shop-container { padding: 0 var(--container-pad-xs); }
  .reel-description     { padding: 12px 14px; }
  .reel-description p   { font-size: 0.8125rem; }
}

/* ========================================
   13. FOLLOW OUR JOURNEY
   ======================================== */
.follow-our-journey {
  background:  var(--gray-50);
  padding:     var(--section-pad-y) 0;
  text-align:  center;
}

.follow-our-journey .section-header { margin-bottom: 36px; padding: 0 var(--container-pad-sm); }
.follow-our-journey .section-header p { font-size: 1rem; color: var(--gray-400); }

.follow-our-journey .image-grid {
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  align-items:     stretch;
  gap:             14px;
  width:           100%;
  max-width:       1400px;
  margin:          0 auto 36px;
  flex-wrap:       nowrap;
  padding:         0 var(--container-pad);
  box-sizing:      border-box;
}

.follow-our-journey .image-item {
  flex:          1 1 0;
  min-width:     0;
  max-width:     280px;
  aspect-ratio:  3 / 4;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--gray-900);
  position:      relative;
  box-shadow:    var(--shadow-md);
}

.follow-our-journey .image-item a {
  display:                  block;
  width:                    100%;
  height:                   100%;
  -webkit-tap-highlight-color: transparent;
}

.follow-our-journey .image-item img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
  display:          block;
  transition:       transform 0.4s ease;
}

.follow-our-journey .image-item:hover img { transform: scale(1.04); }

/* Social buttons */
.follow-our-journey .social-buttons {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             14px;
  margin-top:      8px;
  padding:         0 16px;
}

.follow-our-journey .social-button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 32px;
  font-size:       0.9rem;
  font-weight:     600;
  border-radius:   var(--radius-pill);
  text-decoration: none;
  transition:      all var(--t-normal);
  box-shadow:      var(--shadow-sm);
  white-space:     nowrap;
  letter-spacing:  0.015em;
}

.follow-our-journey .social-button.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color:      var(--white);
}

.follow-our-journey .social-button.instagram:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 22px rgba(220,39,67,0.35);
}

.follow-our-journey .social-button.facebook { background: #1877F2; color: var(--white); }

.follow-our-journey .social-button.facebook:hover {
  background: #145DBF;
  transform:  translateY(-3px);
  box-shadow: 0 8px 22px rgba(24,119,242,0.35);
}

@media (max-width: 1024px) {
  .follow-our-journey { padding: var(--section-pad-y-md) 0; }
  .follow-our-journey .image-grid { padding: 0 var(--container-pad-md); }
  .follow-our-journey .image-item { max-width: 220px; }
}

@media (max-width: 768px) {
  .follow-our-journey { padding: var(--section-pad-y-sm) 0; }
  .follow-our-journey .section-header { margin-bottom: 28px; }

  .follow-our-journey .image-grid {
    overflow-x:             auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:       x mandatory;
    scrollbar-width:        none;
    -ms-overflow-style:     none;
    justify-content:        flex-start;
    padding:                4px var(--container-pad-sm) 16px;
    margin:                 0 0 28px;
    max-width:              100%;
    gap:                    10px;
  }

  .follow-our-journey .image-grid::-webkit-scrollbar { display: none; }

  .follow-our-journey .image-item {
    flex:          0 0 160px;
    min-width:     160px;
    max-width:     160px;
    scroll-snap-align: start;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .follow-our-journey .image-grid { padding: 4px var(--container-pad-xs) 14px; gap: 8px; }
  .follow-our-journey .image-item { flex: 0 0 140px; min-width: 140px; max-width: 140px; }
  .follow-our-journey .social-button { padding: 10px 24px; font-size: 0.875rem; }
}

/* ========================================
   14. STEAL DEAL OFFERS
   ======================================== */
.steal-deal-section {
  background: var(--white);
  padding:    var(--section-pad-y-sm) 0;
  width:      100%;
  overflow:   hidden;
}

.steal-deal-container {
  width:           100%;
  max-width:       1300px;
  margin:          0 auto;
  padding:         0 var(--container-pad);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
}

.steal-deal-slider-wrapper { width: 100%; position: relative; }
.steal-deal-viewport       { width: 100%; overflow: hidden; position: relative; border-radius: var(--radius-lg); }

.steal-deal-track {
  display:     flex;
  transition:  transform var(--t-slow);
  will-change: transform;
  touch-action: pan-y pinch-zoom;
}

.steal-deal-slide {
  min-width:     100%;
  width:         100%;
  flex-shrink:   0;
  overflow:      hidden;
  border-radius: var(--radius-lg);
}

.steal-deal-slide a         { display: block; width: 100%; }
.steal-deal-slide img,
.steal-deal-desktop-image,
.steal-deal-mobile-image    { width: 100%; height: auto; display: block; object-fit: cover; }

.steal-deal-desktop-image   { display: block; }
.steal-deal-mobile-image    { display: none;  }

.steal-deal-nav,
.steal-deal-prev,
.steal-deal-next            { display: none !important; }
.steal-deal-dots            { display: flex; margin-top: 20px; justify-content: center; width: 100%; }

@media (max-width: 767px) {
  .steal-deal-desktop-image { display: none  !important; }
  .steal-deal-mobile-image  { display: block !important; }
  .steal-deal-section       { padding: 24px 0; }
  .steal-deal-container     { max-width: 100% !important; padding: 0 var(--container-pad-sm) !important; }
  .steal-deal-viewport      { border-radius: var(--radius-md); }
  .steal-deal-slide         { border-radius: var(--radius-md); }
}

@media (max-width: 480px) {
  .steal-deal-container { padding: 0 var(--container-pad-xs) !important; }
  .steal-deal-viewport  { border-radius: var(--radius-sm); }
  .steal-deal-slide     { border-radius: var(--radius-sm); }
}

/* ========================================
   15. TESTIMONIALS — Modern, clean, aesthetic
   ======================================== */
.testimonials-section {
  padding:    var(--section-pad-y) 20px;
  background: var(--gray-50);
  position:   relative;
  overflow:   hidden;
}

/* Subtle background decoration */
.testimonials-section::before {
  content:       '';
  position:      absolute;
  top:           -80px; right: -80px;
  width:         360px; height: 360px;
  border-radius: 50%;
  background:    radial-gradient(circle, var(--primary-ultra) 0%, transparent 70%);
  pointer-events: none;
}

.testimonials-section::after {
  content:       '';
  position:      absolute;
  bottom:        -80px; left: -80px;
  width:         280px; height: 280px;
  border-radius: 50%;
  background:    radial-gradient(circle, var(--primary-ultra) 0%, transparent 70%);
  pointer-events: none;
}

.testimonials-container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

.testimonials-carousel-wrapper {
  position:      relative;
  max-width:     820px;
  margin:        0 auto 28px;
}

.testimonials-carousel {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Testimonial slides */
.testimonial-slide {
  position:         absolute;
  top:              0; left: 0;
  width:            100%;
  opacity:          0;
  transform:        translateY(12px) scale(0.97);
  transition:       opacity 0.45s cubic-bezier(0.4,0,0.2,1),
                    transform 0.45s cubic-bezier(0.4,0,0.2,1);
  pointer-events:   none;
}

.testimonial-slide.active {
  position:       relative;
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
  z-index:        2;
}

/* Card */
.testimonial-card-front {
  background:      var(--white);
  border-radius:   var(--radius-lg);
  padding:         52px 44px 40px;
  box-shadow:      var(--shadow-lg);
  border:          1.5px solid var(--border);
  width:           100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  transition:      box-shadow var(--t-normal);
  position:        relative;
}

.testimonial-card-front:hover {
  box-shadow: var(--shadow-blue-lg);
}

/* Blue quote bubble centered at top */
.quote-icon {
  position:        absolute;
  top:             -24px;
  left:            50%;
  transform:       translateX(-50%);
  width:           48px;
  height:          48px;
  background:      var(--primary);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--white);
  font-size:       18px;
  box-shadow:      var(--shadow-blue);
  z-index:         3;
}

/* Star rating */
.testimonial-rating {
  display:       flex;
  justify-content: center;
  gap:           5px;
  margin-bottom: 20px;
}

.testimonial-rating .fa-star      { font-size: 16px; }
.testimonial-rating .fa-star.filled { color: var(--gold); }
.testimonial-rating .fa-star.empty  { color: var(--gray-200); }

/* Review text */
.testimonial-text {
  font-size:     1.05rem;
  line-height:   1.85;
  color:         var(--gray-600);
  font-style:    italic;
  font-weight:   400;
  margin-bottom: 28px;
  max-width:     580px;
}

/* Author row */
.testimonial-author {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-top:  auto;
}

.author-photo {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--primary);
  flex-shrink:   0;
}

.author-photo-placeholder {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      var(--primary-light);
  color:           var(--primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.25rem;
  font-weight:     700;
  flex-shrink:     0;
  border:          2px solid var(--primary);
}

.author-info h4 {
  font-size:     0.95rem;
  font-weight:   700;
  color:         var(--gray-900);
  margin-bottom: 3px;
  text-align:    left;
}

.author-location {
  font-size:   0.83rem;
  color:       var(--gray-400);
  display:     flex;
  align-items: center;
  gap:         4px;
}

.author-location i { color: var(--primary); font-size: 0.78rem; }

/* Nav arrows */
.testimonial-nav {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  width:           44px;
  height:          44px;
  background:      var(--white);
  border:          1.5px solid var(--gray-200);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  z-index:         10;
  color:           var(--gray-400);
  box-shadow:      var(--shadow-sm);
  transition:      all var(--t-normal);
}

.testimonial-nav:hover {
  background:   var(--primary);
  border-color: var(--primary);
  color:        var(--white);
  transform:    translateY(-50%) scale(1.08);
  box-shadow:   var(--shadow-blue);
}

.testimonial-prev { left:  -64px; }
.testimonial-next { right: -64px; }
.testimonial-dots { margin-top: 32px; }

@media (max-width: 1024px) {
  .testimonial-prev { left: 8px; }
  .testimonial-next { right: 8px; }
}

@media (max-width: 768px) {
  .testimonials-section { padding: var(--section-pad-y-sm) 16px; }
  .testimonials-carousel-wrapper { margin-bottom: 20px; }

  .testimonial-card-front {
    padding:       40px 22px 32px;
    border-radius: var(--radius-md);
  }

  .testimonial-text { font-size: 0.97rem; }
  .author-photo     { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .testimonials-section { padding: 48px 12px; }

  .testimonial-card-front { padding: 36px 18px 28px; }

  .testimonial-text { font-size: 0.93rem; }

  .testimonial-author { flex-direction: column; text-align: center; gap: 10px; }
  .author-info h4     { text-align: center; }
  .author-location    { justify-content: center; }
  .testimonial-prev,
  .testimonial-next   { display: none; }
}

/* ========================================
   16. FAQ SECTION — Card-per-item
   ======================================== */
.faq-section {
  padding:    var(--section-pad-y) 20px;
  background: var(--white);
}

.faq-container { max-width: 820px; margin: 0 auto; }

.faq-header { text-align: center; margin-bottom: 48px; }

.faq-header p {
  font-size:  1rem;
  color:      var(--gray-400);
  max-width:  520px;
  margin:     10px auto 0;
  line-height: 1.7;
}

/* Each FAQ in its own rounded card */
.faq-items {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.faq-item {
  background:    var(--white);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    border-color var(--t-normal), box-shadow var(--t-normal), background var(--t-normal);
  box-shadow:    var(--shadow-sm);
}

/* Active card: blue border + light bg */
.faq-item.active {
  border-color: var(--primary);
  background:   var(--primary-ultra);
  box-shadow:   0 0 0 3px var(--primary-light), var(--shadow-sm);
}

/* Question row */
.faq-question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         22px 24px;
  cursor:          pointer;
  background:      transparent;
  transition:      background var(--t-normal);
  gap:             16px;
  border:          none;
  width:           100%;
  text-align:      left;
}

.faq-question:hover { background: var(--primary-ultra); }

.faq-item.active .faq-question { background: transparent; }

.faq-question-text {
  font-family: var(--font) !important;
  font-size:   1rem;
  font-weight: 600;
  color:       var(--gray-900);
  flex:        1;
  line-height: 1.5;
}

/* Plus / minus icon via CSS */
.faq-icon {
  width:     28px;
  height:    28px;
  display:   flex;
  align-items:  center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  position:  relative;
}

.faq-icon i,
.faq-icon .fa-plus,
.faq-icon .fa-minus { display: none !important; }

.faq-icon::before,
.faq-icon::after {
  content:       '';
  position:      absolute;
  background:    var(--gray-400);
  border-radius: 2px;
  transition:    transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
}

.faq-icon::before { width: 16px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; }

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after { background: var(--primary); }

.faq-item.active .faq-icon::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0) rotate(90deg); }

/* Answer */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 900px; }

.faq-answer-content {
  padding:     4px 24px 24px;
  color:       var(--gray-600);
  line-height: 1.85;
  font-size:   0.95rem;
}

/* CTA card at bottom */
.faq-cta {
  margin-top:    36px;
  background:    var(--gray-50);
  border:        1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       44px 32px;
  text-align:    center;
  box-shadow:    var(--shadow-sm);
}

.faq-cta h3 {
  font-family:  var(--font) !important;
  font-size:    1.65rem !important;
  font-weight:  700 !important;
  color:        var(--gray-900);
  margin-bottom: 8px;
}

.faq-cta p {
  color:        var(--gray-500);
  margin-bottom: 24px;
  font-size:    1rem;
  max-width:    480px;
  margin-left:  auto;
  margin-right: auto;
  line-height:  1.7;
}

.faq-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         14px 40px;
  background:      var(--primary);
  color:           var(--white);
  border-radius:   var(--radius-pill);
  font-weight:     600;
  font-size:       0.95rem;
  letter-spacing:  0.025em;
  box-shadow:      var(--shadow-blue);
  transition:      background var(--t-normal), transform 0.15s ease, box-shadow var(--t-normal);
}

.faq-cta-btn:hover {
  background: var(--primary-dark);
  transform:  translateY(-2px);
  box-shadow: var(--shadow-blue-lg);
}

.faq-question:focus-visible,
.faq-cta-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 768px) {
  .faq-section        { padding: 56px 16px; }
  .faq-question       { padding: 18px 18px; }
  .faq-question-text  { font-size: 0.95rem; }
  .faq-answer-content { padding: 4px 18px 20px; }
  .faq-cta            { margin-top: 28px; padding: 32px 20px; border-radius: var(--radius-md); }
  .faq-cta h3         { font-size: 1.4rem !important; }
  .faq-cta-btn        { display: flex; width: 100%; justify-content: center; padding: 14px 24px; }
  .faq-items          { gap: 10px; }
}

@media (max-width: 480px) {
  .faq-question       { padding: 16px 16px; }
  .faq-answer-content { padding: 4px 16px 18px; }
  .faq-item           { border-radius: var(--radius-sm); }
}

/* ========================================
   17. SHOP BY BUDGET
   ======================================== */
.shop-by-budget { padding: var(--section-pad-y) 0; background: var(--gray-50); }

.sbb-inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--container-pad-sm); }

.sbb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.sbb-card {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: space-between;
  aspect-ratio:    1 / 1;
  border-radius:   var(--radius-lg);
  text-decoration: none;
  background:      var(--primary);
  cursor:          pointer;
  padding:         18% 10% 14%;
  transition:      transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow:      var(--shadow-blue);
  box-sizing:      border-box;
}

.sbb-card:hover {
  transform:  translateY(-5px);
  box-shadow: var(--shadow-blue-lg);
}

.sbb-top {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  width:           100%;
  flex:            1;
  gap:             0;
}

.sbb-under {
  font-family:    var(--font);
  font-size:      clamp(0.85rem, 2.2vw, 1.3rem);
  font-weight:    700;
  color:          rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display:        block;
  line-height:    1.3;
  margin-bottom:  4px;
}

.sbb-price {
  font-family:    var(--font);
  font-size:      clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight:    800;
  color:          var(--white);
  display:        block;
  line-height:    1.05;
  letter-spacing: -0.02em;
}

.sbb-arrow {
  width:           clamp(36px, 6vw, 52px);
  height:          clamp(36px, 6vw, 52px);
  border-radius:   50%;
  background:      rgba(255,255,255,0.96);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      transform 0.2s ease, background 0.2s ease;
  margin-top:      8%;
}

.sbb-arrow svg {
  width:            clamp(14px, 2.2vw, 22px);
  height:           clamp(14px, 2.2vw, 22px);
  fill:             none;
  stroke:           var(--primary);
  stroke-width:     2.8;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}

.sbb-card:hover .sbb-arrow { background: #fff; transform: scale(1.08); }

@media (max-width: 1024px) { .sbb-grid { gap: 16px; } }

@media (max-width: 768px) {
  .shop-by-budget { padding: var(--section-pad-y-sm) 0; }
  .sbb-inner      { padding: 0 14px; }
  .sbb-grid       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sbb-card       { border-radius: var(--radius-md); }
}

@media (max-width: 480px) {
  .sbb-inner   { padding: 0 10px; }
  .sbb-grid    { gap: 10px; }
  .sbb-card    { border-radius: var(--radius-sm); }
}

/* ========================================
   18. TRUST BADGES
   ======================================== */
.trust-badges-section {
  width:         100%;
  background:    var(--white);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding:       40px 0;
  box-sizing:    border-box;
  overflow:      hidden;
}

.trust-badges-container {
  width:                 100%;
  max-width:             1200px;
  margin:                0 auto;
  padding:               0 40px;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  align-items:           center;
  box-sizing:            border-box;
}

.trust-badge-item {
  display:     flex;
  flex-direction: row;
  align-items: center;
  gap:         14px;
  padding:     0 20px;
  position:    relative;
  box-sizing:  border-box;
}

.trust-badge-item + .trust-badge-item::before {
  content:    '';
  position:   absolute;
  left:       0; top: 50%;
  transform:  translateY(-50%);
  width:      1px; height: 44px;
  background: var(--border);
}

.trust-badge-icon {
  width:           44px;
  height:          44px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--primary);
}

.trust-badge-icon svg { width: 100%; height: 100%; }

.trust-badge-text  { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trust-badge-title { font-size: 13px; font-weight: 700; color: var(--gray-900); line-height: 1.3; }
.trust-badge-desc  { font-size: 12px; color: var(--gray-400); line-height: 1.5; }

@media (max-width: 1024px) {
  .trust-badges-container { grid-template-columns: repeat(2, 1fr); padding: 0; max-width: 100%; }
  .trust-badge-item { flex-direction: row; align-items: center; padding: 24px 20px; gap: 12px; }
  .trust-badge-item + .trust-badge-item::before { display: none; }
  .trust-badge-item:nth-child(odd)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border); }
  .trust-badge-item:nth-child(1),
  .trust-badge-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {
  .trust-badges-section { padding: 28px 0; }
  .trust-badges-container { grid-template-columns: repeat(2, 1fr); padding: 0; }

  .trust-badge-item,
  .trust-badge-item:nth-of-type(1),
  .trust-badge-item:nth-of-type(2),
  .trust-badge-item:nth-of-type(3),
  .trust-badge-item:nth-of-type(4) {
    flex-direction: column;
    align-items:    center;
    justify-content: flex-start;
    text-align:     center;
    padding:        20px 8px;
    gap:            8px;
    border:         none;
    width:          100%;
  }

  .trust-badge-item + .trust-badge-item::before { display: none; }
  .trust-badge-item:nth-child(odd)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border); }
  .trust-badge-item:nth-child(1),
  .trust-badge-item:nth-child(2) { border-bottom: 1px solid var(--border); }
  .trust-badge-item:nth-child(3),
  .trust-badge-item:nth-child(4) { border-bottom: none; }
  .trust-badge-icon  { width: 36px; height: 36px; margin: 0 auto; }
  .trust-badge-title { font-size: 12px; }
  .trust-badge-desc  { font-size: 11px; }
}

@media (max-width: 480px) {
  .trust-badges-section { padding: 22px 0; }
  .trust-badge-item,
  .trust-badge-item:nth-of-type(1),
  .trust-badge-item:nth-of-type(2),
  .trust-badge-item:nth-of-type(3),
  .trust-badge-item:nth-of-type(4) { padding: 16px 6px; }
  .trust-badge-icon  { width: 30px; height: 30px; }
  .trust-badge-title { font-size: 11px; }
  .trust-badge-desc  { font-size: 10px; }
}

/* ========================================
   19. PRODUCT CARDS — Shopify-friendly
   ======================================== */
.product-card,
.card--product,
.grid__item,
.product-item,
[class*="product-card"],
[class*="ProductCard"] {
  font-family:   var(--font);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.product-card__title, .card__heading, .card__heading a,
.card__heading h2, .card__heading h3, .card__heading h4,
.product-item__title, .product__title, .product__title h1,
.product__title h2, [class*="product-title"], [class*="ProductTitle"],
.card--product .card__heading, .card--product h2,
.card--product h3, .card--product h4,
.grid__item .card__heading, .grid__item h2, .grid__item h3,
.grid-product__title, .product-card h2, .product-card h3,
.product-card h4 {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size:   1rem !important;
  color:       var(--gray-900);
  line-height: 1.35;
}

.product-card__price, .price, .price__regular, .price__sale,
.price-item, .price-item--regular, .price-item--sale,
[class*="product-price"], [class*="ProductPrice"] {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size:   1rem !important;
  color:       var(--gray-900);
}

/* ========================================
   20. PERFORMANCE & ACCESSIBILITY
   ======================================== */
.ann-track,
.reels-track,
.steal-deal-track { will-change: transform; }

@media (prefers-contrast: high) {
  .reel-card, .collection-card { border: 2px solid var(--gray-900); }
  .faq-item { border-width: 2px; }
}

/* ========================================
   21. SCROLLBAR UTILITIES
   ======================================== */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }
/* ========================================
   OVERRIDES — Category & Hero Padding
   ======================================== */

/* 1. REMOVE hover/click effects on category items */
.category-item-link:hover .category-icon {
  box-shadow: var(--shadow-sm);
  transform: none;
}

.category-item-link:hover .category-icon::after {
  opacity: 1;
}

.category-item-link:hover .category-icon img {
  transform: none;
}

/* 2. REMOVE black gradient overlay on category cards */
.category-icon::after {
  display: none !important;
}

/* Since overlay is gone, move label styling — 
   text needs to stay visible without the dark bg */
.category-item span,
.category-item .cat-label {
  color: var(--gray-900) !important;
  text-shadow: none;
  bottom: 0;
  position: relative !important;
  padding: 10px 8px 4px;
  background: transparent;
}

/* Restructure card so label sits below image */
.category-icon {
  position: relative !important;
}

.category-item {
  gap: 0 !important;
}

/* 3. REDUCE hero slider side padding */
.hero-slider,
.slider-wrap {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (max-width: 1024px) {
  .hero-slider,
  .slider-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 768px) {
  .hero-slider,
  .slider-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 480px) {
  .hero-slider,
  .slider-wrap {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* ========================================
   SHOP BY BUDGET — Tighter, bigger text
   ======================================== */

.sbb-card {
  border-radius: 28px;
  padding: 10% 8% 10%;
}

/* Bigger "UNDER" label */
.sbb-under {
  font-size: clamp(1rem, 2.8vw, 1.55rem);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

/* Much bigger price */
.sbb-price {
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Bigger arrow circle */
.sbb-arrow {
  width:      clamp(48px, 8vw, 68px);
  height:     clamp(48px, 8vw, 68px);
  margin-top: 6%;
}

/* Bigger arrow SVG inside */
.sbb-arrow svg {
  width:        clamp(20px, 3vw, 30px);
  height:       clamp(20px, 3vw, 30px);
  stroke-width: 2.5;
}

@media (max-width: 768px) {
  .sbb-card {
    border-radius: 22px;
    padding: 12% 8% 10%;
  }

  .sbb-under {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  }

  .sbb-price {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
  }

  .sbb-arrow {
    width:  clamp(42px, 10vw, 56px);
    height: clamp(42px, 10vw, 56px);
  }

  .sbb-arrow svg {
    width:  clamp(18px, 4vw, 24px);
    height: clamp(18px, 4vw, 24px);
  }
}

@media (max-width: 480px) {
  .sbb-card     { border-radius: 18px; }
  .sbb-price    { font-size: clamp(2rem, 11vw, 2.8rem); }
  .sbb-under    { font-size: 0.88rem; letter-spacing: 0.1em; }
}
/* ============================================================
   OVERRIDE — Follow Our Journey mobile left padding fix
   ============================================================ */

@media (max-width: 768px) {
  .follow-our-journey .image-grid {
    padding-left: 16px !important;
  }
}

@media (max-width: 480px) {
  .follow-our-journey .image-grid {
    padding-left: 14px !important;
  }
}
/* ============================================================
   OVERRIDE — Follow Our Journey mobile left padding fix
   ============================================================ */

@media (max-width: 768px) {
  .follow-our-journey .image-grid,
  .follow-our-journey .image-grid::-webkit-scrollbar ~ *,
  section.follow-our-journey .image-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px !important;
  }

  .follow-our-journey .image-item:first-child {
    margin-left: 0 !important;
  }
}

@media (max-width: 480px) {
  section.follow-our-journey .image-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-left: 14px !important;
  }
}