/** Shopify CDN: Minification failed

Line 2815:0 Unexpected "}"

**/
/* ==========================================================================
   KITS UK — Homepage Design System Overrides
   ==========================================================================
   Overrides ALL Prestige default styling on homepage sections.
   Mobile-first. Uses --ks-* design tokens from kits-design-system.css.
   Loaded globally in layout/theme.liquid AFTER theme.css + kits-design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL PAGE OVERRIDES
   -------------------------------------------------------------------------- */

/* Warm white page background per design system */
body.template-index,
body.template-index .shopify-section--trust-cards {
  background-color: var(--ks-white-soft, #FAFAF9);
}

/* Section spacing — remove outer padding on ALL sections.
   div.section-spacing inside each section provides correct internal padding.
   The outer <section> padding was doubling the whitespace. */
body.template-index .shopify-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY — Design System Font Overrides
   -------------------------------------------------------------------------- */

/* H1 — Hero / Page headings */
body.template-index .shopify-section--slideshow .slideshow__slide-heading,
body.template-index .shopify-section--slideshow .h1,
body.template-index .shopify-section--slideshow slideshow-carousel .prose h1 {
  font-family: var(--ks-font-heading, 'Exo 2', 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(28px, 5vw, 40px) !important;
  line-height: 1.2 !important;
}

/* H2 — Section headings */
body.template-index .section-header .h2,
body.template-index .section-header h2,
body.template-index .shopify-section .section-header h2 {
  font-family: var(--ks-font-heading, 'Exo 2', 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  line-height: 1.2 !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

/* Eyebrow / Overline text */
body.template-index .section-header .h6,
body.template-index .section-header h6,
body.template-index .shopify-section .section-header h6 {
  font-family: var(--ks-font-heading, 'Exo 2', 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  color: var(--ks-gold, #C9A227) !important;
  margin-bottom: 8px !important;
}

/* Slideshow subheading (h6 in Prestige) */
body.template-index .shopify-section--slideshow .prose h6,
body.template-index .shopify-section--slideshow slideshow-carousel .prose h6 {
  font-family: var(--ks-font-heading, 'Exo 2', 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  color: var(--ks-gold, #C9A227) !important;
}

/* Body text / RTE content */
body.template-index .shopify-section .prose p,
body.template-index .shopify-section .rte p,
body.template-index .section__text p {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ks-gray, #9CA3AF) !important;
}

/* --------------------------------------------------------------------------
   2. HERO — Clean video loop (text/buttons removed, see bottom of file)
   -------------------------------------------------------------------------- */
body.template-index .shopify-section--slideshow,
body.template-index .shopify-section--hero-video {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   HERO "Scroll Down" Button — Eye-catching with bounce animation
   ============================================================ */

/* Container positioning */
body.template-index .slideshow__next-section-button {
  position: absolute !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  
  /* Sizing */
  width: 56px !important;
  height: 56px !important;
  
  /* Styling */
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 50% !important;
  
  /* Animation */
  animation: heroScrollBounce 2s ease-in-out infinite !important;
  cursor: pointer !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}

body.template-index .slideshow__next-section-button:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  animation-play-state: paused !important;
  transform: translateX(-50%) scale(1.1) !important;
}

body.template-index .slideshow__next-section-button:active {
  transform: translateX(-50%) scale(0.95) !important;
}

/* SVG icon inside button */
body.template-index .slideshow__next-section-button svg,
body.template-index .slideshow__next-section-button .icon {
  width: 24px !important;
  height: 24px !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
  transition: transform 0.3s ease !important;
}

body.template-index .slideshow__next-section-button:hover svg,
body.template-index .slideshow__next-section-button:hover .icon {
  transform: translateY(3px) !important;
}

/* Bounce animation keyframes */
@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

/* Pulse ring effect */
body.template-index .slideshow__next-section-button::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  animation: heroPulseRing 2s ease-out infinite !important;
  pointer-events: none !important;
}

@keyframes heroPulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Mobile — slightly smaller */
@media (max-width: 749px) {
  body.template-index .slideshow__next-section-button {
    width: 48px !important;
    height: 48px !important;
    bottom: 16px !important;
  }
  
  body.template-index .slideshow__next-section-button svg,
  body.template-index .slideshow__next-section-button .icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Custom hero video section — pull up under transparent header */
.template-index .shopify-section--hero-video {
  margin-top: -148px !important;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. SCROLLING MARQUEE — Section 2 (trust bar)
   -------------------------------------------------------------------------- */

body.template-index .scrolling-content__text,
body.template-index .shopify-section--scrolling-content .scrolling-content__text {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

/* Scrolling content border separator */
body.template-index .shopify-section--scrolling-content {
  border-top: 0.5px solid var(--ks-smoke, #E8E6E3) !important;
  border-bottom: 0.5px solid var(--ks-smoke, #E8E6E3) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   4. COLLECTION LIST TILES (Browse by Make) — Section 4
   -------------------------------------------------------------------------- */

/* Collection card with image overlay */
body.template-index .shopify-section--collection-list .collection-card,
body.template-index .shopify-section--collection-list collection-list .collection-card {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.3s ease !important;
}

body.template-index .shopify-section--collection-list .content-over-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.3) 40%,
    rgba(10, 10, 10, 0.1) 100%
  );
  transition: background 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

body.template-index .shopify-section--collection-list .collection-card:hover .content-over-media::after,
body.template-index .shopify-section--collection-list collection-list .collection-card:hover .content-over-media::after {
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.6) 0%,
    rgba(10, 10, 10, 0.2) 40%,
    rgba(10, 10, 10, 0.05) 100%
  );
}

/* Collection card content — ensure it's above overlay */
body.template-index .shopify-section--collection-list .collection-card__content,
body.template-index .shopify-section--collection-list .collection-card .prose {
  position: relative;
  z-index: 5;
}

/* Collection card content — title styling */
body.template-index .shopify-section--collection-list .collection-card .prose h4,
body.template-index .shopify-section--collection-list .collection-card .prose h3,
body.template-index .shopify-section--collection-list .collection-card h4,
body.template-index .shopify-section--collection-list .collection-card h3 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
}

/* Collection card — button styling (matches design system secondary on dark bg) */
body.template-index .shopify-section--collection-list .collection-card .button,
body.template-index .shopify-section--collection-list .collection-card .button--solid,
body.template-index .shopify-section--collection-list .collection-card .button--outline {
  position: relative !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
}

body.template-index .shopify-section--collection-list .collection-card .button:hover,
body.template-index .shopify-section--collection-list .collection-card .button--solid:hover,
body.template-index .shopify-section--collection-list .collection-card .button--outline:hover {
  border-color: #FFFFFF !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Image zoom on hover */
body.template-index .shopify-section--collection-list .zoom-image img,
body.template-index .shopify-section--collection-list collection-list img {
  transition: transform 0.4s ease !important;
}

body.template-index .shopify-section--collection-list .collection-card:hover .zoom-image img,
body.template-index .shopify-section--collection-list .collection-card:hover img {
  transform: scale(1.05) !important;
}

/* Collection list — minimum heights */
@media (max-width: 749px) {
  body.template-index .shopify-section--collection-list .collection-card,
  body.template-index .shopify-section--collection-list .content-over-media {
    min-height: 200px !important;
  }
}

@media (min-width: 990px) {
  body.template-index .shopify-section--collection-list .collection-card,
  body.template-index .shopify-section--collection-list .content-over-media {
    min-height: 280px !important;
  }
}

/* --------------------------------------------------------------------------
   17. MANUAL TRANSPARENT HEADER — Homepage Only
   DO NOT touch .shopify-section--header position
   -------------------------------------------------------------------------- */

.template-index .shopify-section--header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
  transform: none !important;
  z-index: 1001 !important;
}

.template-index .header:not(.is-solid) {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.template-index .header:not(.is-solid) .header__logo-image {
  filter: brightness(0) invert(1) !important;
  transition: filter 0.3s ease;
}

.template-index .header__logo-image--transparent {
  display: none !important;
}

.template-index .header:not(.is-solid),
.template-index .header:not(.is-solid).color-scheme--scheme-2 {
  --text-color: 255 255 255 !important;
  color: #FFFFFF !important;
}

.template-index .header:not(.is-solid) .header__primary-nav > button,
.template-index .header:not(.is-solid) .header__primary-nav > button > svg,
.template-index .header:not(.is-solid) .header__secondary-nav .kits-header-link,
.template-index .header:not(.is-solid) .header__secondary-nav .kits-header-link__label,
.template-index .header:not(.is-solid) .header__secondary-nav .kits-header-link > svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  transition: color 0.3s ease, stroke 0.3s ease;
}

.template-index .header.is-solid {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid #E8E6E3 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  position: fixed !important;
  top: calc(var(--announcement-bar-is-sticky, 0) * var(--announcement-bar-height, 0px)) !important;
  inset-inline: 0 !important;
  width: 100% !important;
  z-index: 1001 !important;
}

.template-index .header.is-solid,
.template-index .header.is-solid.color-scheme--scheme-2 {
  --text-color: 28 28 28 !important;
  color: #1C1C1C !important;
}

.template-index .header.is-solid .header__logo-image {
  filter: none !important;
}

.template-index .header.is-solid .header__primary-nav > button,
.template-index .header.is-solid .header__primary-nav > button > svg,
.template-index .header.is-solid .header__secondary-nav .kits-header-link,
.template-index .header.is-solid .header__secondary-nav .kits-header-link__label,
.template-index .header.is-solid .header__secondary-nav .kits-header-link > svg {
  color: #1C1C1C !important;
  stroke: #1C1C1C !important;
}

/* Transparent homepage header — keep account/search/cart text explicitly white */
.template-index .header:not(.is-solid) .kits-header-link,
.template-index .header:not(.is-solid) .kits-header-link__label {
  color: var(--ks-white, #FFFFFF) !important;
}

.template-index .header:not(.is-solid) .kits-header-link svg,
.template-index .header:not(.is-solid) .header__primary-nav > button > svg {
  color: var(--ks-white, #FFFFFF) !important;
  stroke: var(--ks-white, #FFFFFF) !important;
}

/* ============================================================
   HEADER — Shadow/contrast enhancements for video background
   Extends transparent-state rules above — adds readability
   shadows on top of existing white color values.
   Does NOT affect .is-solid, sticky, or other pages.
   ============================================================ */

/* Logo — add drop-shadow so it's readable on light video frames */
.template-index .header:not(.is-solid) .header__logo-image {
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) !important;
}

/* Text links (LOGIN, SEARCH, BASKET label spans) — white in default state, NO shadow */
body.template-index .header:not(.is-solid) .header__secondary-nav .kits-header-link > .kits-header-link__label,
body.template-index .header:not(.is-solid) .header__secondary-nav a.kits-header-link > span.kits-header-link__label {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* SVG icons (search, cart, hamburger) — no drop-shadow */
.template-index .header:not(.is-solid) .kits-header-link svg,
.template-index .header:not(.is-solid) .header__primary-nav > button > svg {
  filter: none !important;
}

/* ============================================================
   HEADER — Non-solid state: force BASKET, SEARCH, hamburger to white
   Targets the exact DOM elements from the live header:
     - .kits-header-link--cart (BASKET link)
     - .kits-header-link--search (SEARCH link)
     - .header__primary-nav > button (hamburger)
   SCOPED TO HOMEPAGE ONLY (.template-index) to prevent leaking
   white text onto non-homepage pages with light backgrounds.
   ============================================================ */
.template-index .header:not(.is-solid) .kits-header-link--cart,
.template-index .header:not(.is-solid) .kits-header-link--cart .kits-header-link__label,
.template-index .header:not(.is-solid) .kits-header-link--search,
.template-index .header:not(.is-solid) .kits-header-link--search .kits-header-link__label,
.template-index .header:not(.is-solid) .header__primary-nav > button {
  color: #FFFFFF !important;
}

/* Hint tooltips — ALWAYS dark text on white background for readability */
.template-index .header:not(.is-solid) .kits-header-link--cart .kits-header-link__hint,
.template-index .header:not(.is-solid) .kits-header-link--search .kits-header-link__hint,
.template-index .header .kits-header-link__hint {
  color: #0A0A0A !important;
  background: #FFFFFF !important;
}
.template-index .header:not(.is-solid) .kits-header-link--cart svg,
.template-index .header:not(.is-solid) .kits-header-link--search svg,
.template-index .header:not(.is-solid) .header__primary-nav > button svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: currentColor;
}

/* Top gradient on hero — darkens header zone for readable text on any video frame */
.template-index .shopify-section--slideshow .slideshow__slide::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 200px !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.12) 55%,
    transparent 100%
  ) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Mobile sidebar menu — keep it above page content and restore PDP-style typography */
body.template-index header-sidebar.header-sidebar,
body.template-index .header-sidebar.drawer,
body.template-index #sidebar-menu {
  z-index: 2000 !important;
  background: var(--ks-white, #FFFFFF) !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

body.template-index header-sidebar.header-sidebar::part(base) {
  z-index: 2000 !important;
}

body.template-index header-sidebar.header-sidebar::part(overlay) {
  z-index: 1999 !important;
  background: rgba(10, 10, 10, 0.15) !important;
}

body.template-index header-sidebar.header-sidebar::part(content),
body.template-index header-sidebar.header-sidebar::part(header) {
  background: var(--ks-white, #FFFFFF) !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

body.template-index header-sidebar.header-sidebar::part(close-button) {
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  stroke: var(--ks-charcoal-light, #1C1C1C) !important;
}

body.template-index .header-sidebar .header-sidebar__linklist-button,
body.template-index .header-sidebar .header-sidebar__nested-linklist a,
body.template-index .header-sidebar .header-sidebar__back-button {
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  font-family: var(--ks-font-heading, 'Exo 2', 'Inter Tight', -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.template-index .header-sidebar .header-sidebar__linklist-button svg,
body.template-index .header-sidebar .header-sidebar__back-button svg,
body.template-index .header-sidebar .header-sidebar__nested-linklist svg {
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  stroke: var(--ks-charcoal-light, #1C1C1C) !important;
}

body.template-index .header-sidebar .header-sidebar__linklist-button .icon-chevron,
body.template-index .header-sidebar .header-sidebar__back-button .icon-chevron {
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  stroke: var(--ks-charcoal-light, #1C1C1C) !important;
}

.template-index #shopify-section-template--28232563229047__slideshow_hero {
  margin-top: -148px !important;
  position: relative;
  z-index: 1;
}

.shopify-section-group-overlay-group {
  padding: 0 !important;
}

/* Section header for collection list */
body.template-index .shopify-section--collection-list .section-header {
  margin-bottom: 32px !important;
}

@media (min-width: 990px) {
  body.template-index .shopify-section--collection-list .section-header {
    margin-bottom: 40px !important;
  }
}

/* --------------------------------------------------------------------------
   5. FEATURED COLLECTIONS (Product Cards) — Sections 3 & 5
   -------------------------------------------------------------------------- */

/* ============================================
   BEST SELLERS — Exact match to collection .ks-col-card
   ============================================ */

/* Card container */
.template-index product-card,
.template-index .product-card {
  background: #FFFFFF !important;
  border: 1px solid #E8E6E3 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: transform 0.2s cubic-bezier(0,0,0.2,1),
              box-shadow 0.2s cubic-bezier(0,0,0.2,1) !important;
}

.template-index .product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Media/figure area */
.template-index .product-card__figure {
  background: #F4F3F1 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Image — contain, not cover, with padding like collection */
.template-index .product-card__image {
  object-fit: contain !important;
  padding: 8px !important;
  border-radius: 0 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Secondary image on hover */
.template-index .product-card__image--secondary {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.template-index .product-card:hover .product-card__image--primary {
  opacity: 0 !important;
}

.template-index .product-card:hover .product-card__image--secondary {
  opacity: 1 !important;
}

/* Info/body area */
.template-index .product-card__info {
  padding: 12px 10px 14px !important;
}

.template-index .product-card__info .v-stack {
  gap: 8px !important;
}

/* HIDE vendor "KITS UK" — collection page doesn't show it */
.template-index .product-card .vendor {
  display: none !important;
}

/* Title */
.template-index .product-card__title,
.template-index .product-card .product-title {
  font-family: 'Inter Tight', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13px !important;
  color: #1C1C1C !important;
  line-height: 17.55px !important;
  text-decoration: none !important;
}

/* Price */
.template-index .product-card price-list,
.template-index .product-card .price-list {
  font-family: 'Inter Tight', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1C1C1C !important;
}

/* Sale price */
.template-index .product-card .price--on-sale,
.template-index .product-card .price-item--sale,
.template-index .product-card .text-on-sale {
  color: #C8102E !important;
  font-weight: 700 !important;
}

/* Compare price */
.template-index .product-card .price--compare,
.template-index .product-card .price-item--regular,
.template-index .product-card .line-through,
.template-index .product-card s {
  color: #4A4A4A !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
}

/* Sale badge */
.template-index .product-card .badge--on-sale,
.template-index .product-card on-sale-badge {
  background: #E32C2B !important;
  color: #FFFFFF !important;
  border-radius: 2px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Quick add button — base styles
   Mobile: always visible (opacity: 1)
   Desktop (990px+): hidden by default, revealed on hover/focus
   Uses viewport width instead of (pointer: fine) — more reliable for touch detection
   Touch target: 48x48px minimum per WCAG 2.5.5 */
.template-index .product-card__quick-add-button {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  border: none !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  min-width: 48px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
}

/* Desktop (990px+): hide by default, reveal on hover/focus */
@media (min-width: 990px) {
  .template-index .product-card__quick-add-button {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(4px) !important;
  }
  .template-index .product-card:hover .product-card__quick-add-button,
  .template-index .product-card:focus-within .product-card__quick-add-button {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Quick add icon */
.template-index .product-card__quick-add-button svg {
  width: 16px !important;
  height: 16px !important;
  color: #FFFFFF !important;
}

/* Rating stars */
.template-index .product-card .rating-badge {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
}

.template-index .product-card .rating-badge__stars svg {
  width: 12px !important;
  height: 12px !important;
}

/* Product list — gap */
body.template-index .featured-collections-carousel .product-list,
body.template-index .shopify-section--featured-collections product-list {
  gap: 16px !important;
}

@media (min-width: 990px) {
  body.template-index .featured-collections-carousel .product-list,
  body.template-index .shopify-section--featured-collections product-list {
    gap: 24px !important;
  }
}

/* Featured collections section header */
body.template-index .shopify-section--featured-collections .section-header {
  margin-bottom: 32px !important;
}

@media (min-width: 990px) {
  body.template-index .shopify-section--featured-collections .section-header {
    margin-bottom: 40px !important;
  }
}

/* "View all" link — matches design system secondary button */
body.template-index .shopify-section--featured-collections .section-header a,
body.template-index .shopify-section--featured-collections a[href*="collections"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  border: 2px solid var(--ks-silver, #D1D5DB) !important;
  border-radius: 8px !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  background: transparent !important;
  text-decoration: none !important;
}

body.template-index .shopify-section--featured-collections .section-header a:hover,
body.template-index .shopify-section--featured-collections a[href*="collections"]:hover {
  border-color: var(--ks-charcoal, #1A1A1A) !important;
  background: #f5f5f5 !important;
}

/* --------------------------------------------------------------------------
   6. BEFORE / AFTER SECTION — Section 7
   -------------------------------------------------------------------------- */

/* Section header */
body.template-index .shopify-section--before-after-image .section-header h2 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

body.template-index .shopify-section--before-after-image .section-header h6 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  color: var(--ks-gold, #C9A227) !important;
}

body.template-index .shopify-section--before-after-image .section-header p {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ks-gray, #9CA3AF) !important;
}

/* ============================================================
   BEFORE/AFTER SLIDER — Enhanced Catchability
   Prominent handle, visible divider line, better interaction
   ============================================================ */

/* Cursor handle — SVG-only, no double background */
body.template-index .before-after__cursor {
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border: none !important;
  cursor: ew-resize !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  z-index: 10 !important;
  /* Ensure cursor starts centered in the image area */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Horizontal before-after: center cursor at 50% by default */
body.template-index .before-after--horizontal .before-after__cursor {
  left: calc(var(--before-after-cursor-position, 50%) - 28px) !important;
}

body.template-index .before-after__cursor:hover {
  transform: translateY(-50%) scale(1.1) !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)) !important;
}

body.template-index .before-after__cursor:active {
  transform: translateY(-50%) scale(0.95) !important;
}

/* SVG icon inside cursor */
body.template-index .before-after__cursor svg {
  width: 56px !important;
  height: 56px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) !important;
}

body.template-index .before-after__cursor svg circle {
  fill: var(--ks-white, #FFFFFF) !important;
  stroke: var(--ks-black-rich, #0A0A0A) !important;
  stroke-width: 2 !important;
}

body.template-index .before-after__cursor svg path {
  stroke: var(--ks-black-rich, #0A0A0A) !important;
  stroke-width: 2.5 !important;
}

/* Divider line — full height of before-after container */
body.template-index .before-after--horizontal .before-after__cursor::before {
  content: '' !important;
  position: absolute !important;
  width: 3px !important;
  height: 200% !important;
  background: var(--ks-white, #FFFFFF) !important;
  box-shadow: 
    0 0 6px rgba(0, 0, 0, 0.35),
    -1px 0 0 rgba(0, 0, 0, 0.1),
    1px 0 0 rgba(0, 0, 0, 0.1) !important;
  left: 50% !important;
  transform: translate(-50%, -25%) !important;
  top: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Constrain line to image bounds — scoped to before-after-image */
body.template-index .before-after.before-after-image {
  overflow: hidden !important;
}

/* Mobile adjustments — slightly smaller but still prominent */
@media (max-width: 749px) {
  body.template-index .before-after__cursor {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Mobile: adjust left offset for smaller cursor (48px / 2 = 24px) */
  body.template-index .before-after--horizontal .before-after__cursor {
    left: calc(var(--before-after-cursor-position, 50%) - 24px) !important;
  }
  
  body.template-index .before-after__cursor svg {
    width: 48px !important;
    height: 48px !important;
  }
  
  body.template-index .before-after--horizontal .before-after__cursor::before {
    width: 3px !important;
  }
}

/* Drag hint text — "Drag to compare" tooltip
   Scoped to .before-after-image to avoid conflicts */
body.template-index .before-after.before-after-image::after {
  content: 'DRAG TO COMPARE' !important;
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: var(--ks-font-body, 'Inter Tight', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ks-white, #FFFFFF) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease !important;
}

/* Hide hint after interaction */
body.template-index .before-after.before-after-image.is-dragging::after,
body.template-index .before-after.before-after-image:active::after {
  opacity: 0 !important;
}

/* Before/After labels — handled in definitive block below (Section 7b) */

/* --------------------------------------------------------------------------
   7. MEDIA GRID / GALLERY — Section 8
   -------------------------------------------------------------------------- */

/* ============================================================
   HOMEPAGE GALLERY — Natural-ratio masonry layout
   Replaces Prestige's fixed-row-height CSS grid with CSS columns
   so every item displays at its actual media aspect ratio.
   Scoped to template-index only — does not affect other pages.
   ============================================================ */

/* Switch from CSS grid to CSS columns (masonry) */
body.template-index .shopify-section--media-grid media-grid.media-grid {
  display: block !important;
  columns: 3 !important;
  column-gap: var(--media-grid-gap, 1.5rem) !important;
  width: 100% !important;
}

/* Each item breaks column flow naturally, fills its column width */
body.template-index .shopify-section--media-grid .media-grid__item {
  display: block !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  margin-bottom: var(--media-grid-gap, 1.5rem) !important;
  width: 100% !important;
  grid-column: unset !important;
  grid-row: unset !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Remove fixed height from the content wrapper */
body.template-index .shopify-section--media-grid .content-over-media {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: unset !important;
}

/* Images: natural ratio — un-position from absolute fill pattern */
body.template-index .shopify-section--media-grid .content-over-media img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  inset: unset !important;
}

/* Videos: 16:9 natural ratio — loop/autoplay already set in Liquid */
body.template-index .shopify-section--media-grid .content-over-media video,
body.template-index .shopify-section--media-grid .content-over-media deferred-media,
body.template-index .shopify-section--media-grid .content-over-media .media {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  inset: unset !important;
}

/* Remove overlay — hide both pseudo-elements on image and video blocks */
body.template-index .shopify-section--media-grid .content-over-media::before,
body.template-index .shopify-section--media-grid .content-over-media::after {
  display: none !important;
}

/* Remove the prose/text overlay block — this is a visual-only gallery */
body.template-index .shopify-section--media-grid .content-over-media .prose {
  display: none !important;
}

/* Mobile: 2 columns */
@media (max-width: 749px) {
  body.template-index .shopify-section--media-grid media-grid.media-grid {
    columns: 2 !important;
    column-gap: 8px !important;
  }

  body.template-index .shopify-section--media-grid .media-grid__item {
    margin-bottom: 8px !important;
  }
}

/* Tablet: still 2 wide columns */
@media (min-width: 750px) and (max-width: 989px) {
  body.template-index .shopify-section--media-grid media-grid.media-grid {
    columns: 2 !important;
  }
}

/* Section heading — Hormozi direct response style */
body.template-index .shopify-section--media-grid .section-header h2 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: var(--ks-charcoal, #1C1C1C) !important;
  text-align: center !important;
}

/* Eyebrow "OUR WORK" */
body.template-index .shopify-section--media-grid .section-header h6 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--ks-gold, #C9A227) !important;
  text-align: center !important;
  margin-bottom: var(--ks-space-2, 8px) !important;
}

/* Description */
body.template-index .shopify-section--media-grid .section-header p {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ks-text-md, 16px) !important;
  color: var(--ks-gray-dark, #6B7280) !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: var(--ks-space-2, 8px) auto 0 !important;
}

/* --------------------------------------------------------------------------
   7b. BLOG POSTS — Latest from the blog
   -------------------------------------------------------------------------- */

/* Eyebrow */
body.template-index .shopify-section--blog-posts .section-header h6 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--ks-gold, #C9A227) !important;
  text-align: center !important;
  margin-bottom: var(--ks-space-2, 8px) !important;
}

/* Heading */
body.template-index .shopify-section--blog-posts .section-header h2 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: var(--ks-charcoal, #1C1C1C) !important;
  text-align: center !important;
}

/* Blog card */
body.template-index .shopify-section--blog-posts .blog-post-card {
  background: var(--ks-white, #FFFFFF) !important;
  border: 0.5px solid var(--ks-smoke, #E8E6E3) !important;
  border-radius: var(--ks-radius-card, 12px) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.template-index .shopify-section--blog-posts .blog-post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Blog card image */
body.template-index .shopify-section--blog-posts .blog-post-card img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Blog card info area */
body.template-index .shopify-section--blog-posts .blog-post-card__info {
  padding: var(--ks-space-4, 16px) !important;
}

/* Blog card title */
body.template-index .shopify-section--blog-posts .blog-post-card h3,
body.template-index .shopify-section--blog-posts .blog-post-card__title {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: var(--ks-charcoal, #1C1C1C) !important;
  line-height: 1.3 !important;
  margin-bottom: var(--ks-space-2, 8px) !important;
}

/* Blog card excerpt — clamp to 3 lines for equal card height */
body.template-index .shopify-section--blog-posts .blog-post-card__excerpt {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--ks-gray-dark, #6B7280) !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Blog card date */
body.template-index .shopify-section--blog-posts time {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--ks-gray, #9CA3AF) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* View More Posts button */
body.template-index .shopify-section--blog-posts .justify-self-center a,
body.template-index .shopify-section--blog-posts .justify-self-center button {
  background: transparent !important;
  color: var(--ks-charcoal, #1C1C1C) !important;
  border: 2px solid var(--ks-silver, #D1D5DB) !important;
  border-radius: var(--ks-radius-btn, 8px) !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

body.template-index .shopify-section--blog-posts .justify-self-center a:hover,
body.template-index .shopify-section--blog-posts .justify-self-center button:hover {
  border-color: var(--ks-charcoal, #0A0A0A) !important;
  background: var(--ks-cloud, #F4F3F1) !important;
  transform: translateY(-1px) !important;
}

/* Mobile adjustments */
@media (max-width: 749px) {
  body.template-index .shopify-section--blog-posts .blog-post-card h3,
  body.template-index .shopify-section--blog-posts .blog-post-card__title {
    font-size: 14px !important;
  }

  body.template-index .shopify-section--blog-posts .blog-post-card__excerpt {
    -webkit-line-clamp: 2 !important;
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   8. TESTIMONIALS — Section 9
   -------------------------------------------------------------------------- */

/* Testimonial item */
body.template-index .shopify-section--testimonials .testimonial-item {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  background: var(--ks-white, #FFFFFF) !important;
  border: 0.5px solid var(--ks-smoke, #E8E6E3) !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
}

/* Testimonial quote text */
body.template-index .shopify-section--testimonials .testimonial-item .prose p,
body.template-index .shopify-section--testimonials .testimonial-item p {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ks-steel, #4A4A4A) !important;
}

/* Testimonial author */
body.template-index .shopify-section--testimonials .testimonial-item .prose strong,
body.template-index .shopify-section--testimonials .testimonial-item .prose b,
body.template-index .shopify-section--testimonials .testimonial-item strong,
body.template-index .shopify-section--testimonials .testimonial-item b,
body.template-index .shopify-section--testimonials .testimonial-item .text-base,
body.template-index .shopify-section--testimonials .testimonial-list__thumbnail .text-base {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  font-style: normal !important;
}

/* Star ratings — amber color */
body.template-index .shopify-section--testimonials .testimonial-item .prose p:first-child,
body.template-index .shopify-section--testimonials .testimonial-item p:first-child {
  font-style: normal !important;
  color: var(--ks-amber, #D4850A) !important;
  letter-spacing: 2px !important;
  margin-bottom: 8px !important;
}

/* Testimonial navigation dots */
body.template-index .shopify-section--testimonials .page-dots button {
  background: rgba(10,10,10,0.2) !important;
}

body.template-index .shopify-section--testimonials .page-dots button[aria-current="true"],
body.template-index .shopify-section--testimonials .page-dots button.is-selected {
  background: var(--ks-amber, #D4850A) !important;
}

/* Thumbnail navigation */
body.template-index .shopify-section--testimonials .testimonial-list__thumbnail {
  border-radius: 8px !important;
  border: 1px solid var(--ks-smoke, #E8E6E3) !important;
  background: var(--ks-white, #FFFFFF) !important;
}

body.template-index .shopify-section--testimonials .testimonial-list__thumbnail[aria-current="true"],
body.template-index .shopify-section--testimonials .testimonial-list__thumbnail.is-selected {
  border-color: var(--ks-gold, #C9A227) !important;
}

/* --------------------------------------------------------------------------
   10. NEWSLETTER — Section 10
   -------------------------------------------------------------------------- */

/* Section header on dark (scheme-3) */
body.template-index .shopify-section--newsletter .section-header h2 {
  color: #FFFFFF !important;
}

body.template-index .shopify-section--newsletter .section-header h6 {
  color: var(--ks-gold, #C9A227) !important;
}

body.template-index .shopify-section--newsletter .prose p {
  color: rgba(255,255,255,0.7) !important;
}

/* Newsletter input */
body.template-index .shopify-section--newsletter input[type="email"] {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #FFFFFF !important;
  min-height: 48px !important;
  padding: 0 16px !important;
}

body.template-index .shopify-section--newsletter input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

body.template-index .shopify-section--newsletter input[type="email"]:focus {
  border-color: var(--ks-gold, #C9A227) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.2) !important;
}

/* Newsletter submit button — matches design system primary sizing */
body.template-index .shopify-section--newsletter .button,
body.template-index .shopify-section--newsletter button[type="submit"] {
  background: var(--ks-gold, #C9A227) !important;
  color: var(--ks-black-rich, #0A0A0A) !important;
  border: none !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border-radius: 8px !important;
  min-height: 52px !important;
  padding: 16px 24px !important;
  transition: background 0.2s ease !important;
}

body.template-index .shopify-section--newsletter .button:hover,
body.template-index .shopify-section--newsletter button[type="submit"]:hover {
  background: var(--ks-gold-light, #D4B73D) !important;
}

/* --------------------------------------------------------------------------
   11. BLOG POSTS — Section 10
   -------------------------------------------------------------------------- */

/* Blog post card */
body.template-index .blog-post-card {
  background: var(--ks-white, #FFFFFF) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 0.5px solid var(--ks-smoke, #E8E6E3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.template-index .blog-post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
}

/* Blog post image */
body.template-index .blog-post-card__image {
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
}

/* Blog post category tag */
body.template-index .blog-post-card__category {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ks-gold, #C9A227) !important;
}

/* Blog post title */
body.template-index .blog-post-card__title {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
}

/* Blog post excerpt */
body.template-index .blog-post-card__excerpt {
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ks-gray-dark, #6B7280) !important;
}

/* Blog post read more — matches design system secondary */
body.template-index .blog-post-card__read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  border: 2px solid var(--ks-silver, #D1D5DB) !important;
  border-radius: 8px !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

body.template-index .blog-post-card__read-more:hover {
  color: var(--ks-charcoal-light, #1C1C1C) !important;
  border-color: var(--ks-charcoal, #1A1A1A) !important;
  background: #f5f5f5 !important;
}

/* Blog posts section header */
body.template-index .shopify-section--blog-posts .section-header h2 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

body.template-index .shopify-section--blog-posts .section-header h6 {
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  color: var(--ks-gold, #C9A227) !important;
}

/* Blog post list gap */
body.template-index .blog-post-list {
  gap: 24px !important;
}

/* --------------------------------------------------------------------------
   12. GLOBAL BUTTON OVERRIDES — Exact PDP .ks-atc-btn Match (FIX 1)
   -------------------------------------------------------------------------- */

/* Link-styled buttons */
body.template-index .link {
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY — Focus States & Touch Targets
   -------------------------------------------------------------------------- */

/* Focus visible — gold ring */
body.template-index :focus-visible {
  outline: 2px solid var(--ks-gold, #C9A227) !important;
  outline-offset: 2px !important;
}

body.template-index button:focus-visible,
body.template-index a:focus-visible,
body.template-index .button:focus-visible {
  outline: 2px solid var(--ks-gold, #C9A227) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

/* Mobile touch targets */
@media (max-width: 749px) {
  body.template-index .button,
  body.template-index a.button,
  body.template-index .product-card__quick-add-button,
  body.template-index .quick-buy__button,
  body.template-index [class*="btn"],
  body.template-index button {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

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

/* --------------------------------------------------------------------------
   14. SECTION HEADER SPACING — Consistent across all homepage sections
   -------------------------------------------------------------------------- */

body.template-index .section-header {
  margin-bottom: 24px !important;
}

@media (min-width: 990px) {
  body.template-index .section-header {
    margin-bottom: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   16. CRITICAL FIXES — Homepage pass
   -------------------------------------------------------------------------- */

body.template-index .shopify-section-group-header-group,
body.template-index .shopify-section-group-footer-group {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.template-index .shopify-section .container,
body.template-index .shopify-section .container--lg,
body.template-index .shopify-section .container--md {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
}

@media (min-width: 990px) {
  body.template-index .shopify-section .container,
  body.template-index .shopify-section .container--lg,
  body.template-index .shopify-section .container--md {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

body.template-index .shopify-section .section-header,
body.template-index .shopify-section .section-stack,
body.template-index .shopify-section .prose {
  text-align: inherit;
}

body.template-index .shopify-section .section-stack {
  width: 100% !important;
  justify-items: stretch !important;
}

body.template-index .shopify-section--slideshow,
body.template-index .shopify-section--slideshow slideshow-carousel,
body.template-index .shopify-section--slideshow .slideshow__slide,
body.template-index .color-scheme--scheme-3,
body.template-index .color-scheme--scheme-5 {
  background-color: var(--ks-black-rich, #0A0A0A) !important;
}

/* (Hero overlay + slide-content removed — video-only hero, see bottom of file) */

/* (Featured-collections card styles consolidated into section 5 above) */

body.template-index .shopify-section--before-after-image .section-header {
  text-align: center !important;
  margin-bottom: 32px !important;
}

body.template-index .shopify-section-group-footer-group,
body.template-index .shopify-section--footer,
body.template-index footer,
body.template-index .ks-footer,
body.template-index [data-color-scheme="scheme-3"],
body.template-index [data-color-scheme="scheme-5"],
body.template-index .section--dark {
  background-color: var(--ks-black-rich, #0A0A0A) !important;
}

body.template-index .shopify-section--collection-list .collection-card,
body.template-index .shopify-section--collection-list .content-over-media {
  min-height: 200px !important;
}

@media (min-width: 990px) {
  body.template-index .shopify-section--collection-list .collection-card,
  body.template-index .shopify-section--collection-list .content-over-media {
    min-height: 280px !important;
  }
}

/* --------------------------------------------------------------------------
   17. VISUAL FIXES — Homepage parity and section polish
   -------------------------------------------------------------------------- */

/* (All product-card overrides consolidated into section 5 — single source of truth) */

/* ============================================
   BEFORE/AFTER — Single source of truth
   DO NOT add before-after CSS anywhere else.

   ROOT CAUSE: Prestige theme.css uses logical properties
   (inset-inline-start, inset-inline-end, inset-block-end)
   which are SEPARATE from left/right/bottom. We must reset
   BOTH physical AND logical properties, and match Prestige's
   3-class specificity: .before-after--horizontal .before-after__*-image .before-after__content-wrapper
   ============================================ */

/* Containers — ensure identical sizing and positioning */
.before-after__before-image,
.before-after__after-image {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fix grid placement for both containers */
.before-after.before-after-image .before-after__before-image,
.before-after.before-after-image .before-after__after-image {
  grid-area: 1 / -1 !important;
}

/* Image alignment — both images must fill and align identically */
.before-after__before-image img,
.before-after__after-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  display: block !important;
}

/* Reset image-background class that Prestige applies only to after image */
.before-after__after-image img.image-background {
  position: relative !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
}

/* BEFORE image container — clip from right side as slider moves left
   When cursor-position is 20%, the before image shows only left 20%
   clip-path: inset(top right bottom left)
   Right value = 100% - cursor-position (e.g., 80% when cursor is at 20%) */
.before-after--horizontal .before-after__before-image {
  clip-path: inset(0 calc(100% - var(--before-after-cursor-position, 50%)) 0 0) !important;
  overflow: hidden !important;
}

/* BEFORE label — bottom LEFT */
.before-after--horizontal .before-after__before-image .before-after__content-wrapper {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  top: auto !important;
  inset-block-start: auto !important;
  inset-block-end: 16px !important;
  inset-inline-start: 16px !important;
  inset-inline-end: auto !important;
  z-index: 10 !important;
  width: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* AFTER label + button — bottom RIGHT */
.before-after--horizontal .before-after__after-image .before-after__content-wrapper {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  inset-block-start: auto !important;
  inset-block-end: 16px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 16px !important;
  z-index: 10 !important;
  width: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

/* Label pills */
.before-after .before-after__content-wrapper > *:not(.button):not(a) {
  background: rgba(14, 15, 20, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 6px 16px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* BOOK A FITTING button */
.before-after__after-image a.button,
.before-after__after-image .button {
  background: linear-gradient(135deg, #E53935 0%, #C62828 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  border-radius: 6px !important;
  border: none !important;
  min-height: 40px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.25) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.before-after__after-image .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200, 16, 46, 0.35) !important;
}

/* Mobile */
@media (max-width: 749px) {
  .before-after, .before-after-image {
    min-height: 250px !important;
  }
  .before-after--horizontal .before-after__before-image .before-after__content-wrapper {
    bottom: 10px !important;
    left: 10px !important;
    inset-block-end: 10px !important;
    inset-inline-start: 10px !important;
  }
  .before-after--horizontal .before-after__after-image .before-after__content-wrapper {
    bottom: 10px !important;
    right: 10px !important;
    inset-block-end: 10px !important;
    inset-inline-end: 10px !important;
  }
  .before-after .before-after__content-wrapper > *:not(.button):not(a) {
    font-size: 10px !important;
    padding: 4px 12px !important;
  }
  .before-after__after-image .button {
    font-size: 10px !important;
    min-height: 34px !important;
    padding: 8px 14px !important;
  }
}

/* Shop by Vehicle buttons — normalize to design system primary */
body.template-index .shopify-section--collection-list .button,
body.template-index .shopify-section--collection-list .collection-item .button,
body.template-index .shopify-section--collection-list .collection-card .button,
body.template-index [data-section-type="collection-list"] .button {
  background: linear-gradient(135deg, var(--ks-charcoal, #1A1A1A) 0%, var(--ks-black-soft, #0D0D0D) 100%) !important;
  color: var(--ks-white, #FFFFFF) !important;
  border: none !important;
  border-radius: var(--ks-radius-button, 8px) !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  font-family: var(--ks-font-heading, 'Exo 2', -apple-system, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition:
    transform var(--ks-duration-normal, 200ms) var(--ks-ease-out, ease),
    box-shadow var(--ks-duration-normal, 200ms) var(--ks-ease-out, ease),
    background var(--ks-duration-normal, 200ms) var(--ks-ease-out, ease) !important;
}

@media (hover: hover) {
  body.template-index .shopify-section--collection-list .button:hover,
  body.template-index .shopify-section--collection-list .collection-item .button:hover,
  body.template-index .shopify-section--collection-list .collection-card .button:hover,
  body.template-index [data-section-type="collection-list"] .button:hover {
    background: var(--ks-iron, #374151) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  }
}


/* (Legacy universal button block removed — see section 18 for consolidated PDP-match buttons) */

/* (Slideshow button styles removed — hero has no buttons, only JS-injected EXPLORE) */

/* Vendor badge cleanup */
body.template-index .product-item__vendor,
body.template-index .product-item__vendor a,
body.template-index .product-item__vendor .button,
body.template-index .product-item__vendor-badge,
body.template-index .shopify-section--featured-collections .vendor,
body.template-index .shopify-section--featured-collections .smallcaps,
body.template-index .featured-collection .vendor,
body.template-index .featured-collection .smallcaps {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 4px 0 !important;
  font-family: var(--ks-font-body, 'Inter Tight', -apple-system, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--ks-gray, #9CA3AF) !important;
  display: inline !important;
}

/* ============================================
   18. HOMEPAGE BUTTONS — Exact PDP .ks-atc-btn Match
   Unified button system: same style, contrast, font, effects
   ============================================ */

/* ── PRIMARY BUTTON: Dark gradient (SHOP NOW, VIEW ALL, Quick Add) ── */
.template-index .button:not(.button--secondary):not(.button--outline),
.template-index a.button:not(.button--secondary),
.template-index .blog-post-card .button,
.template-index .blog-post-card a.button,
.template-index .product-item .button,
.template-index .collection-item .button,
.template-index .collection-card .button,
.template-index .ba-service-card__cta,
.template-index .before-after .button {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  border: none !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover: lift + glow + lighten gradient */
.template-index .button:not(.button--secondary):not(.button--outline):hover,
.template-index a.button:not(.button--secondary):hover,
.template-index .blog-post-card .button:hover,
.template-index .product-item .button:hover,
.template-index .collection-item .button:hover,
.template-index .collection-card .button:hover,
.template-index .ba-service-card__cta:hover,
.template-index .before-after .button:hover {
  background: linear-gradient(135deg, #2D2D2D 0%, #404040 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Active: press down */
.template-index .button:not(.button--secondary):not(.button--outline):active,
.template-index a.button:not(.button--secondary):active,
.template-index .ba-service-card__cta:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ── SECONDARY BUTTON: Outline style (VIEW MORE POSTS) ── */
.template-index .button--secondary,
.template-index .button--outline:not(.slideshow .button--outline),
.template-index .ks-blog-cta {
  background: transparent !important;
  color: #1A1A1A !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  border: 2px solid #1A1A1A !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.template-index .button--secondary:hover,
.template-index .button--outline:not(.slideshow .button--outline):hover,
.template-index .ks-blog-cta:hover {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ── HERO BUTTONS: White on dark video ── */
/* ── HERO PRIMARY BUTTON: White on dark video (SHOP NOW) ── */
.template-index .slideshow .button:not(.button--outline),
.template-index .slideshow a.button:not(.button--outline),
.template-index .slideshow__slide-content .button:not(.button--outline),
.template-index .shopify-section--slideshow .button:not(.button--outline) {
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%) !important;
  color: #0A0A0A !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  border-radius: 8px !important;
  border: none !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Reset inline style variables */
  --button-background: 255 255 255 !important;
  --button-text-color: 0 0 0 !important;
}

.template-index .slideshow .button:not(.button--outline):hover,
.template-index .slideshow a.button:not(.button--outline):hover,
.template-index .slideshow__slide-content .button:not(.button--outline):hover,
.template-index .shopify-section--slideshow .button:not(.button--outline):hover {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.template-index .slideshow .button:not(.button--outline):active,
.template-index .slideshow a.button:not(.button--outline):active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Hero outline button — "BOOK A FITTING" on dark video */
.template-index .slideshow .button--outline,
.template-index .slideshow a.button.button--outline,
.template-index .slideshow__slide-content .button--outline,
.template-index .shopify-section--slideshow .button--outline {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: none !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  /* Reset any inline style variables */
  --button-background: transparent !important;
  --button-text-color: 255 255 255 !important;
}

.template-index .slideshow .button--outline:hover,
.template-index .slideshow a.button.button--outline:hover,
.template-index .slideshow__slide-content .button--outline:hover,
.template-index .shopify-section--slideshow .button--outline:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 
    0 4px 20px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.template-index .slideshow .button--outline:active,
.template-index .slideshow a.button.button--outline:active,
.template-index .slideshow__slide-content .button--outline:active {
  transform: translateY(0) scale(0.98) !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ── COLLECTION CARD BUTTONS (SHOP BMW, SHOP AUDI, etc) ── */
.template-index .collection-list .button,
.template-index .collection-card .button,
.template-index .collection-item .button {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 6px !important;
  border: none !important;
  min-height: 44px !important;
  padding: 12px 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.template-index .collection-list .button:hover,
.template-index .collection-card .button:hover,
.template-index .collection-item .button:hover {
  background: linear-gradient(135deg, #2D2D2D 0%, #404040 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* ── SERVICE CARD CTA (EXPLORE buttons) ── */
.template-index .ba-service-card__cta {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 6px !important;
  border: none !important;
  min-height: 40px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.template-index .ba-service-card:hover .ba-service-card__cta {
  background: linear-gradient(135deg, #2D2D2D 0%, #404040 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* ── BEFORE/AFTER "BOOK A FITTING" BUTTON ── */
.template-index .before-after .button,
.template-index .before-after a.button {
  background: linear-gradient(135deg, #C8102E 0%, #A50D24 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 8px !important;
  border: none !important;
  min-height: 48px !important;
  padding: 14px 24px !important;
  box-shadow: 0 4px 16px rgba(200, 16, 46, 0.35) !important;
}

.template-index .before-after .button:hover,
.template-index .before-after a.button:hover {
  background: linear-gradient(135deg, #E53935 0%, #C8102E 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 8px 28px rgba(200, 16, 46, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* ACTION: red (BOOK A FITTING) — handled in definitive before/after block above */

/* (Hero button styles removed — video-only hero with JS EXPLORE button) */

/* Dark scheme overrides */
.template-index [data-color-scheme="scheme-3"] .button--primary,
.template-index [data-color-scheme="scheme-5"] .button--primary,
.template-index .section--dark .button--primary {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

.template-index [data-color-scheme="scheme-3"] .button--primary:hover,
.template-index .section--dark .button--primary:hover {
  background: #F4F3F1 !important;
}

/* ============================================
   19. SECTION SPACING — Tighter layout (FIX 2)
   ============================================ */

.template-index .section-spacing {
  padding-block-start: 40px !important;
  padding-block-end: 40px !important;
}

.template-index #main > .shopify-section + .shopify-section {
  margin-top: 0 !important;
}

.template-index .shopify-section--slideshow + .shopify-section,
.template-index .shopify-section--hero-video + .shopify-section {
  padding-block-start: 24px !important;
}

/* EXCEPTION: Trust cards directly after hero — NO whitespace */
.template-index .shopify-section--slideshow + .shopify-section--trust-cards,
.template-index .shopify-section--hero-video + .shopify-section--trust-cards {
  padding-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Trust/Objection Cards — remove ALL whitespace above */
.template-index .shopify-section--trust-cards {
  margin: 0 !important;
  padding: 0 !important;
}

.template-index .shopify-section--trust-cards .section-spacing {
  padding-block: 24px !important;
}

.template-index .shopify-section--trust-cards .objection-cards {
  margin-top: 0 !important;
}

.template-index .shopify-section--scrolling-content .section-spacing {
  padding-block: 16px !important;
}

.template-index .shopify-section--before-after-image .section-spacing {
  padding-block: 32px !important;
}

.template-index .shopify-section--media-grid .section-spacing {
  padding-block: 32px !important;
}

.template-index .shopify-section--apps .section-spacing {
  padding-block: 40px !important;
}

.template-index .shopify-section--blog-posts .section-spacing {
  padding-block: 40px !important;
}

.template-index .bordered-section {
  border-block-start: none !important;
  border-block-end: none !important;
}

.template-index .section-stack {
  gap: 24px !important;
}

@media (max-width: 749px) {
  .template-index .section-spacing {
    padding-block-start: 32px !important;
    padding-block-end: 32px !important;
  }
  .template-index .shopify-section--trust-cards .section-spacing {
    padding-block: 16px !important;
  }
  .template-index .shopify-section--scrolling-content .section-spacing {
    padding-block: 12px !important;
  }
}

/* ============================================
   20. BLOG CARD REFINEMENTS (FIX 3)
   ============================================ */

.template-index .blog-post-card {
  background: #FFFFFF !important;
  border: 0.5px solid #E8E6E3 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.template-index .blog-post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.template-index .blog-post-card img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
}

.template-index .blog-post-card__info {
  padding: 16px !important;
}

.template-index .blog-post-card .badge,
.template-index .blog-post-card [class*='category'],
.template-index .blog-post-card [class*='tag'] {
  color: #C9A227 !important;
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

.template-index .blog-post-card time,
.template-index .blog-post-card [class*='date'] {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
}

.template-index .blog-post-card__title {
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: #1C1C1C !important;
  line-height: 1.3 !important;
  margin: 8px 0 !important;
}

.template-index .blog-post-card__excerpt {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  color: #6B7280 !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.template-index .blog-post-card .button {
  margin-top: auto !important;
}

/* ============================================
   BLOG CARDS — Hide meta, keep only image + title + excerpt + button
   ============================================ */

/* Hide the meta line (category + date) completely */
.template-index .blog-post-card__meta,
.template-index .blog-post-card .blog-post-card__meta {
  display: none !important;
}

/* Ensure all cards are same height with flex */
.template-index .blog-post-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 989px) {
  .template-index .blog-post-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 599px) {
  .template-index .blog-post-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.template-index .blog-post-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.template-index .blog-post-card__info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px !important;
}

.template-index .blog-post-card__title {
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

.template-index .blog-post-card__excerpt {
  flex: 1 !important;
  margin-bottom: 16px !important;
}

/* ============================================
   21. FOOTER WHITESPACE FIX (FIX 4)
   ============================================ */

.template-index #main > .shopify-section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.template-index .shopify-section-group-footer-group {
  margin-top: 0 !important;
}

/* ============================================
   GOOGLE REVIEWS SECTION — Match Footer Background
   ============================================ */

/* Force section background to match footer exactly */
body.template-index [id*="google_reviews"],
body.template-index .shopify-section--apps:has(.reputon-google-reviews-widget),
body.template-index .shopify-section--apps:has(.reputon-google-review) {
  background: var(--ks-black, #0A0A0A) !important;
}

body.template-index [id*="google_reviews"] > .section-spacing,
body.template-index [id*="google_reviews"] > .color-scheme,
body.template-index .shopify-section--apps:has(.reputon-google-reviews-widget) > div {
  background: var(--ks-black, #0A0A0A) !important;
  background-color: var(--ks-black, #0A0A0A) !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Reduce container spacing inside Google Reviews */
body.template-index [id*="google_reviews"] .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================
   SHOP BY VEHICLE - Hide titles, style buttons
   ============================================ */

/* Hide the car name text (BMW, MERCEDES, TESLA, AUDI) */
.template-index .collection-item__title,
.template-index .collection-list .h3,
.template-index .collection-list p.h3,
.template-index .collection-list .collection-item .heading {
  display: none !important;
}

/* Buttons - match PDP style exactly */
.template-index .collection-item .button,
.template-index .collection-list .button {
  background: linear-gradient(135deg, #1A1A1A 0%, #2D2D2D 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.68px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  min-height: 52px !important;
  padding: 16px 24px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.template-index .collection-item .button:hover,
.template-index .collection-list .button:hover {
  background: linear-gradient(135deg, #2D2D2D 0%, #404040 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Collection tile image - LIGHT overlay for text contrast while showing image colors */
.template-index .collection-item .collection-item__image-wrapper::after,
.template-index .collection-item .content-over-media::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 35%,
    rgba(0, 0, 0, 0.05) 70%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 0.3s ease !important;
}

/* Slightly reduce overlay on hover to show more of image */
.template-index .collection-item:hover .collection-item__image-wrapper::after,
.template-index .collection-item:hover .content-over-media::after {
  opacity: 0.85 !important;
}

/* Button sits well above overlay */
.template-index .collection-item .button {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Tile border-radius */
.template-index .collection-item {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ============================================
   HERO — Video loop, dark overlay, EXPLORE button
   Single slide, no text, no Prestige buttons
   ============================================ */

/* ============================================
   HERO — Full width fix
   Root cause: .container rule (line ~1249) applies max-width: 1400px
   and 16px padding to ALL sections, including the slideshow.
   These rules punch through for the hero only.
   ============================================ */

/* Section wrapper + its known direct child — strip all width constraints */
.template-index .shopify-section--slideshow,
.template-index .shopify-section--slideshow > slideshow-carousel {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Any .container or .page-width Prestige wraps inside the slideshow */
.template-index .shopify-section--slideshow .container,
.template-index .shopify-section--slideshow .page-width,
.template-index .shopify-section--slideshow .section-spacing,
.template-index .shopify-section--slideshow .bordered-section {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Carousel + slide — full viewport width, no bleed trick needed */
.template-index slideshow-carousel,
.template-index .slideshow,
.template-index .slideshow__slide,
.template-index .shopify-section--slideshow .content-over-media {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Container — 16:9, max 80vh */
.template-index .slideshow,
.template-index slideshow-carousel,
.template-index .slideshow__slide,
.template-index .shopify-section--slideshow .content-over-media {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 80vh !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Video fills container */
.template-index .slideshow video,
.template-index .shopify-section--slideshow .content-over-media video,
.template-index .slideshow__slide video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* Dark overlay on video */
.template-index .slideshow__slide::after,
.template-index .shopify-section--slideshow .content-over-media::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Show hero content — text, buttons, and CTAs are visible */
.template-index .slideshow__slide-content,
.template-index .shopify-section--slideshow .content-over-media__content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  z-index: 5 !important;
  position: relative !important;
  padding: 24px 32px !important;
  max-width: 680px !important;
}

/* Desktop: Bottom-right positioning */
@media (min-width: 750px) {
  .template-index .slideshow__slide-content {
    align-items: flex-end !important;
    text-align: right !important;
    padding: 40px 48px !important;
  }
  
  .template-index .slideshow__slide-content .prose {
    text-align: right !important;
  }
  
  .template-index .slideshow__slide-content .button-group {
    justify-content: flex-end !important;
  }
}

/* Hero text styling */
.template-index .slideshow__slide-content .prose {
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Hero subheading — supporting copy (appears FIRST visually) */
.template-index .slideshow__slide-content h6,
.template-index .slideshow__slide-content .h6,
.template-index .slideshow__slide-content .content-over-media__subheading {
  color: var(--ks-gold, #C9A227) !important;
  font-family: 'Inter Tight', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 12px !important;
  order: -1 !important;
}

/* Hero title — stronger impact */
.template-index .slideshow__slide-content h1,
.template-index .slideshow__slide-content .h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-family: 'Exo 2', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px !important;
}

/* Hero buttons — LARGER and more prominent */
.template-index .slideshow__slide-content .button {
  min-height: 52px !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Primary button (solid) — white bg, dark text */
.template-index .slideshow__slide-content .button:not(.button--outline) {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.template-index .slideshow__slide-content .button:not(.button--outline):hover {
  background: #F5F5F5 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Secondary button (outline) — transparent with white border */
.template-index .slideshow__slide-content .button--outline {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
}

.template-index .slideshow__slide-content .button--outline:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-3px) !important;
}

/* Button group spacing */
.template-index .slideshow__slide-content .button-group {
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
  display: flex !important;
}

/* Hide slideshow navigation dots (only 1 slide) */
.template-index .slideshow__nav,
.template-index .slideshow__pagination,
.template-index [class*="slideshow__nav"],
.template-index [class*="slideshow-pagination"] {
  display: none !important;
}

/* Show SVG placeholder when no video/image is set */
.template-index .slideshow__slide svg.placeholder {
  display: block !important;
  opacity: 0.3 !important;
}

/* EXPLORE button styles moved to sections/homepage-hero-video.liquid
   The button is now part of the hero section, not a fixed-position overlay. */

/* Mobile hero adjustments */
@media (max-width: 749px) {
  .template-index .slideshow,
  .template-index slideshow-carousel,
  .template-index .slideshow__slide,
  .template-index .shopify-section--slideshow .content-over-media {
    aspect-ratio: 9 / 16 !important;
    max-height: 80vh !important;
    min-height: 480px !important;
  }

  .template-index .slideshow__slide-content {
    padding: 24px 20px 40px !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  .template-index .slideshow__slide-content .prose {
    text-align: center !important;
    align-items: center !important;
  }

  .template-index .slideshow__slide-content h1,
  .template-index .slideshow__slide-content .h1 {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
  }

  .template-index .slideshow__slide-content h6,
  .template-index .slideshow__slide-content .h6,
  .template-index .slideshow__slide-content .content-over-media__subheading {
    font-size: 0.7rem !important;
    margin-bottom: 10px !important;
  }

  .template-index .slideshow__slide-content .button {
    padding: 14px 24px !important;
    font-size: 13px !important;
    min-height: 48px !important;
    font-weight: 700 !important;
  }

  .template-index .slideshow__slide-content .button-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .template-index .slideshow__slide-content .button-group .button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   SCROLLING TRUST BAR — Angled / Tilted Variants
   --------------------------------------------------------------------------
   Three instances:
   1. scrolling_trust_top_bestsellers — horizontal (0deg), above bestsellers
   2. scrolling_trust_top_before_after — horizontal (0deg), above before/after
   3. scrolling_trust — tilted (-2deg), between gallery and blog
   
   CSS uses attribute selectors [id*="..."] to match dynamic section IDs.
   -------------------------------------------------------------------------- */

/* ── Generic styling for ALL scrolling trust bars ── */
/* Unified sizing for all three bars: Klarna, Trustpilot, Refund */
body.template-index .shopify-section--scrolling-content .section-spacing {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

body.template-index .shopify-section--scrolling-content .scrolling-content__text {
  font-family: var(--ks-font-heading, 'Exo 2', sans-serif) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (min-width: 750px) {
  body.template-index .shopify-section--scrolling-content .scrolling-content__text {
    font-size: 15px !important;
    gap: 12px !important;
  }
}

/* ── Badge icon before each trust text item — unified sizing ── */
body.template-index .shopify-section--scrolling-content .scrolling-content__text::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* Larger badge on desktop */
@media (min-width: 750px) {
  body.template-index .shopify-section--scrolling-content .scrolling-content__text::before {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }
}

/* Remove default badge from specific branded bars — they have their own icons */
body.template-index [id*="scrolling_trust_top_bestsellers"] .scrolling-content__text::before,
body.template-index [id*="scrolling_trust_top_before_after"] .scrolling-content__text::before,
body.template-index [id$="__scrolling_trust"]:not([id*="scrolling_trust_top"]) .scrolling-content__text::before {
  background-image: none !important;
}

/* Placeholder for gap only (icons set per-section below) */
body.template-index .shopify-section--scrolling-content .scrolling-content__text {
    gap: 10px !important;
  }
}

/* ── All scrolling trust bars — consistent styling ── */
body.template-index [id*="scrolling_trust_klarna"],
body.template-index [id*="scrolling_trust_trustpilot"],
body.template-index [id*="scrolling_trust_refund"] {
  position: relative;
  z-index: 5;
}

body.template-index [id*="scrolling_trust_klarna"] .section-spacing,
body.template-index [id*="scrolling_trust_trustpilot"] .section-spacing,
body.template-index [id*="scrolling_trust_refund"] .section-spacing {
  position: relative;
  overflow: hidden;
  transform: rotate(0deg);
}

/* ── Klarna Pay in 3 Bar — Pink background with Klarna branding ── */
body.template-index [id*="scrolling_trust_klarna"] .section-spacing {
  background: #F4B6C7 !important;
  background-color: #F4B6C7 !important;
}

body.template-index [id*="scrolling_trust_klarna"] .scrolling-content,
body.template-index [id*="scrolling_trust_klarna"] .scrolling-content__text {
  color: #17120F !important;
}

/* Klarna logo before text */
body.template-index [id*="scrolling_trust_klarna"] .scrolling-content__text::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 40' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.41299 25.7963H5V15H7.41299V25.7963ZM13.4398 15H11.0784C11.0784 16.9868 10.1885 18.8104 8.63709 20.0034L7.70155 20.7226L11.3264 25.7967H14.3068L10.9714 21.1277C12.5525 19.5116 13.4398 17.3373 13.4398 15ZM17.289 25.7933H15.0102V15.0021H17.289V25.7933ZM24.1766 18.3286V18.8061C23.5616 18.3754 22.8192 18.1223 22.0185 18.1223C19.8993 18.1223 18.1815 19.8857 18.1815 22.0611C18.1815 24.2365 19.8993 26 22.0185 26C22.8192 26 23.5616 25.7469 24.1766 25.3163V25.7933H26.3539V18.3286H24.1766ZM24.1694 22.0611C24.1694 23.1218 23.2861 23.9818 22.1966 23.9818C21.1071 23.9818 20.2238 23.1218 20.2238 22.0611C20.2238 21.0004 21.1071 20.1407 22.1966 20.1407C23.2861 20.1407 24.1694 21.0004 24.1694 22.0611ZM47.1454 18.8061V18.3286H49.3226V25.7933H47.1454V25.3163C46.5304 25.7469 45.788 26 44.9872 26C42.868 26 41.1502 24.2365 41.1502 22.0611C41.1502 19.8857 42.868 18.1223 44.9872 18.1223C45.788 18.1223 46.5304 18.3754 47.1454 18.8061ZM45.1654 23.9818C46.255 23.9818 47.1381 23.1218 47.1381 22.0611C47.1381 21.0004 46.255 20.1407 45.1654 20.1407C44.0758 20.1407 43.1926 21.0004 43.1926 22.0611C43.1926 23.1218 44.0758 23.9818 45.1654 23.9818ZM50.2675 24.5482C50.2675 23.7736 50.8792 23.1457 51.6337 23.1457C52.3882 23.1457 53 23.7736 53 24.5482C53 25.3227 52.3882 25.9507 51.6337 25.9507C50.8792 25.9507 50.2675 25.3227 50.2675 24.5482ZM37.2814 18.1278C36.4117 18.1278 35.5887 18.405 35.0384 19.1697V18.329H32.8706V25.7933H35.065V21.8706C35.065 20.7354 35.8065 20.1796 36.6993 20.1796C37.6562 20.1796 38.2063 20.7663 38.2063 21.8551V25.7933H40.3809V21.0463C40.3809 19.3092 39.0354 18.1278 37.2814 18.1278ZM29.7219 18.3287V19.3009C30.1583 18.7177 30.9715 18.3291 31.8557 18.3291V20.5013L31.8487 20.501L31.8435 20.5008L31.8379 20.5005L31.8298 20.5003C30.9684 20.5003 29.7269 21.1323 29.7269 22.3082V25.7933H27.4928V18.3287H29.7219Z' fill='%2317120F'/%3E%3C/svg%3E") !important;
  width: 50px !important;
  min-width: 50px !important;
}

@media (min-width: 750px) {
  body.template-index [id*="scrolling_trust_klarna"] .scrolling-content__text::before {
    width: 55px !important;
    min-width: 55px !important;
  }
}

/* ── Trustpilot Bar — Green background with Trustpilot branding ── */
body.template-index [id*="scrolling_trust_trustpilot"] .section-spacing {
  background: #00B67A !important;
  background-color: #00B67A !important;
}

body.template-index [id*="scrolling_trust_trustpilot"] .scrolling-content,
body.template-index [id*="scrolling_trust_trustpilot"] .scrolling-content__text {
  color: #FFFFFF !important;
}

/* Trustpilot logo before text */
body.template-index [id*="scrolling_trust_trustpilot"] .scrolling-content__text::before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.964l5.214-1.321l2.179,6.714L12,17.964z M24,9.286h-9.179L12,0.643L9.179,9.286 H0l7.429,5.357l-2.821,8.643l7.429-5.357l4.571-3.286L24,9.286L24,9.286L24,9.286L24,9.286z'/%3E%3C/svg%3E") !important;
}

/* ── Refund Guarantee Bar — Dark background with refund icon ── */
body.template-index [id*="scrolling_trust_refund"] .section-spacing {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
}

body.template-index [id*="scrolling_trust_refund"] .scrolling-content,
body.template-index [id*="scrolling_trust_refund"] .scrolling-content__text {
  color: #FFFFFF !important;
}

body.template-index [id*="scrolling_trust_refund"] .scrolling-content__text::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' stroke-width='3' stroke='%23ffffff' fill='none'%3E%3Cpath d='M53.79,40.85a23.82,23.82,0,0,1-2.63,4.78A23.51,23.51,0,0,1,8.87,36.22' stroke-linecap='round'/%3E%3Cpath d='M10.37,22.77A23.51,23.51,0,0,1,55.1,27.64' stroke-linecap='round'/%3E%3Cpolyline points='45.9 22.36 55.23 28.02 60.45 19.22' stroke-linecap='round'/%3E%3Cpolyline points='17.99 41.2 8.66 35.53 3.44 44.34' stroke-linecap='round'/%3E%3Cpath d='M40.32,43.14H24.79a.12.12,0,0,1-.1-.2c1.06-1.14,6.15-7,4.2-12.19-2.16-5.84-.76-15.11,9.72-10.8' stroke-linecap='round'/%3E%3Cline x1='22.33' y1='30.9' x2='36.83' y2='30.9' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}