/* ═══════════════════════════════════════════════════════
   SPRINT DRIVES v11 — Responsive Fixes
   File: assets/v11-responsive-fixes.css

   Fixes:
   1. Hero carousel — cover + stable heights, no distortion
   2. Mobile search bar — white field, correct z-index
   3. Mobile header — logo left / icons right alignment
   4. Body padding-top — reconcile conflicting rules
   5. Trust/USP banner — sits below header with correct spacing
   6. Product badge stacking — flex-column, no overlap
   7. Responsive QA — no horizontal scroll, no clip
═════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   PART 1 — HERO CAROUSEL: COVER + STABLE HEIGHTS
   Root cause: hero-carousel.css used object-fit:contain
   which showed dark letterbox bars beside images.
   header-v8.css partially overrode this but still used
   clamp() heights that were too short on some screens.
   Fix: canonical cover rules in one place, proper vh
   heights, min-height prevents collapse on short screens.
═════════════════════════════════════════════════════════ */

/* Wrapper — full viewport width, no side gaps */
.sd-hero-imgonly {
  width: 100%;
  overflow: hidden;
  background: var(--N5);
}

/* Swiper container height — desktop */
.sd-hero-imgonly .sd-hero-swiper,
.sd-hero-swiper {
  height: 70vh;
  min-height: 500px;
  max-height: 800px;
}

/* Individual slides — full height, no overflow */
.sd-slide-img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--N5);
}

/* THE KEY FIX: cover fills slide edge-to-edge, no bars */
.sd-slide-fullimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills frame, never distorts */
  object-position: center center !important; /* keeps focal point */
  display: block !important;
  padding: 0 !important;              /* remove old contain padding */
  background: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .sd-hero-imgonly .sd-hero-swiper,
  .sd-hero-swiper {
    height: 60vh;
    min-height: 400px;
  }
}

/* Mobile — balanced compact hero, full-bleed image */
@media (max-width: 768px) {
  .sd-hero-imgonly .sd-hero-swiper,
  .sd-hero-swiper {
    height: 46vh;
    min-height: 280px;
    max-height: 420px;
  }
  /* On mobile keep focal centre — images designed centred */
  .sd-slide-fullimg {
    object-position: center center !important;
  }
}

@media (max-width: 480px) {
  .sd-hero-imgonly .sd-hero-swiper,
  .sd-hero-swiper {
    height: 42vh;
    min-height: 240px;
  }
}

/* Slide link covers full slide without disturbing image */
.sd-slide-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}


/* ═══════════════════════════════════════════════════════
   PART 2 — BODY PADDING-TOP: CANONICAL SINGLE SOURCE
   Root cause: style.css lines 84-86 AND 877-880 AND
   header-v8.css lines 11-16 all set body padding-top,
   creating a cascade of overrides. The mobile value
   (768px breakpoint) was set twice in style.css —
   first 104px, immediately overridden by 60px —
   leaving content hidden behind the fixed header.

   Correct heights:
   Desktop: hdr-top 68px + hdr-nav 44px       = 112px
   Tablet:  hdr-top 60px + mobile-search 48px = 108px
   Mobile:  hdr-top 60px + mobile-search 48px = 108px
   (mobile-search is 48px: 8px top-pad + 40px input + 8px bot-pad)
═════════════════════════════════════════════════════════ */

/* Desktop — 2-row header */
body {
  padding-top: 112px !important;
}

/* Tablet + mobile — 1-row header + mobile search bar */
@media (max-width: 1100px) {
  body {
    padding-top: 108px !important;
  }
}

/* Admin bar adjustments */
.admin-bar body {
  padding-top: calc(112px + 32px) !important;
}
@media (max-width: 1100px) {
  .admin-bar body {
    padding-top: calc(108px + 32px) !important;
  }
}
@media (max-width: 782px) {
  .admin-bar body {
    padding-top: calc(108px + 46px) !important;
  }
  .admin-bar #site-header {
    top: 46px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   PART 3 — MOBILE HEADER ALIGNMENT
   Root cause: .hdr-top-inner uses grid with
   grid-template-columns: auto 1fr auto — but at ≤1100px
   the middle column (search) is hidden, leaving an empty
   1fr column that pushes icons inconsistently.
   Also hdr-action-btn had no explicit row alignment on
   narrow viewports.
═════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /* Collapse grid to just logo | spacer | icon-group */
  .hdr-top-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    gap: 0 !important;
    height: 60px !important;
  }

  /* Logo — left, vertically centred */
  .hdr-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .hdr-logo img {
    height: 30px;
    width: auto;
    display: block;
  }

  /* Actions group — right, vertically centred, no wrap */
  .hdr-actions {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0;
    margin-left: auto;    /* push to right even if logo is small */
  }

  /* Individual icon buttons — consistent size */
  .hdr-action-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px !important;
    position: relative;
    height: 44px;
    min-width: 40px;
  }
  .hdr-action-btn svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Cart badge stays top-right of its button */
  .hdr-cart-badge {
    top: 4px !important;
    right: 2px !important;
  }
}

@media (max-width: 768px) {
  /* Hide action labels on small mobile */
  .hdr-action-label {
    display: none !important;
  }
  .hdr-action-btn {
    padding: 4px 6px !important;
    min-width: 36px;
    height: 40px;
  }
  .hdr-action-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════
   PART 4 — MOBILE SEARCH BAR: WHITE FIELD, CORRECT STACK
   Root cause: both .hdr-mobile-search (header-v8.css)
   and .nav-mobile-search (v6-additions.css) exist, both
   rendering a search bar at ≤1100px. The header.php likely
   uses one or the other. Both had dark/translucent
   backgrounds (rgba(255,255,255,0.08)) instead of white,
   and the 48px height wasn't being added to body
   padding-top correctly.

   Fix:
   - Make whichever bar is active render a WHITE input
   - Ensure it's below hdr-top (position: static in flow)
   - Correct z-index so it doesn't slip behind content
   - Fix the search button to be visibly clickable
═════════════════════════════════════════════════════════ */

/* ── hdr-mobile-search (used in header-v8 markup) ── */
@media (max-width: 1100px) {
  .hdr-mobile-search {
    display: block;
    background: var(--N5);
    padding: 6px 16px 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
    position: relative;
    z-index: 8999;   /* below header (9000) but above page content */
  }

  /* White pill search field */
  .hdr-mobile-search form {
    display: flex;
    align-items: center;
    background: #ffffff !important;       /* FIX: white, not dark translucent */
    border: none !important;
    border-radius: 6px;
    height: 40px;
    overflow: hidden;
    box-shadow: none;
  }

  /* Search icon inside field — dark on white bg */
  .hdr-mobile-search > form > svg:first-child,
  .hdr-mobile-search svg:first-of-type {
    stroke: #999 !important;              /* FIX: visible on white */
    margin: 0 10px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
  }

  /* Input text — dark on white */
  .hdr-mobile-search input[type="search"],
  .hdr-mobile-search input[type="text"] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--INK) !important;         /* FIX: dark text on white */
    font-family: var(--fb);
    font-size: 14px;
    padding: 0 8px;
    min-width: 0;
    -webkit-appearance: none;
    pointer-events: all !important;       /* FIX: ensure clicks register */
  }
  .hdr-mobile-search input::placeholder {
    color: #aaa !important;               /* FIX: visible placeholder on white */
  }

  /* Submit button — yellow brand button, right side */
  .hdr-mobile-search button[type="submit"],
  .hdr-mobile-search button:not([type]) {
    background: var(--L) !important;      /* yellow */
    border: none;
    width: 44px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: all !important;
  }
  .hdr-mobile-search button svg {
    stroke: var(--N4) !important;         /* dark icon on yellow */
    width: 15px;
    height: 15px;
  }
}

/* ── nav-mobile-search (used in v6/older markup) ── */
@media (max-width: 1100px) {
  .nav-mobile-search {
    background: var(--N5);
    padding: 6px 16px 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
    position: relative;
    z-index: 8999;
  }

  .nav-mobile-search form {
    background: #ffffff !important;
    border: none !important;
    border-radius: 6px;
    height: 40px;
    overflow: hidden;
  }

  .nav-mobile-search svg:first-child {
    stroke: #999 !important;
  }

  .nav-mobile-search input[type="search"] {
    color: var(--INK) !important;
    background: transparent !important;
    pointer-events: all !important;
  }
  .nav-mobile-search input::placeholder {
    color: #aaa !important;
  }

  .nav-mobile-search button {
    background: var(--L) !important;
    pointer-events: all !important;
  }
  .nav-mobile-search button svg {
    stroke: var(--N4) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   PART 5 — TRUST / USP BANNER SPACING
   Root cause: .usp-bar had position:relative z-index:2
   but no margin-top, so on pages where body padding-top
   was wrong the banner overlapped the header.
   Also homepage.css .trust section had conflicting rules.
   Fix: ensure the first section after fixed header has
   enough clearance, and usp-bar never goes under header.
═════════════════════════════════════════════════════════ */

/* USP / trust bar — sits in normal flow, never behind header */
.usp-bar {
  position: relative;
  z-index: 1;           /* below fixed header (9000), above content */
  margin-top: 0;        /* body padding-top already clears the header */
}

/* Scrolling trust ticker — must not clip against header */
.trust {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Homepage: first child after body padding = .sd-hero-imgonly
   or .usp-bar. Make sure neither has a top gap that
   double-spaces the hero. */
.sd-hero-imgonly,
.sd-hero-carousel {
  margin-top: 0 !important;
}

/* On mobile, ensure USP bar is readable below search */
@media (max-width: 1100px) {
  .usp-bar {
    border-top: none;  /* header already has border-bottom */
  }
  .usp-item {
    font-size: 11px;
    padding: 10px 12px;
  }
}


/* ═══════════════════════════════════════════════════════
   PART 6 — PRODUCT BADGE STACKING SYSTEM
   Root cause: badges used position:absolute individually
   at fixed top/left coords, so two badges landed exactly
   on top of each other. shop.css v10 added .sd-product-badges
   container but the old individual absolute rules in
   homepage.css / hero-carousel.css still fought it.
   Fix: canonical badge container system, all badges
   relative inside the flex-column container.
═════════════════════════════════════════════════════════ */

/* Container — top-left corner of image, flex column */
.sd-product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  max-width: calc(100% - 20px);  /* never overflows card */
}

/* Individual badge — relative inside container, never absolute */
.sd-product-badge {
  position: relative !important;  /* override any inherited absolute */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 3px;
  line-height: 1;
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Badge colours */
.sd-badge-sale    { background: #e63946; color: #fff; }
.sd-badge-oos     { background: rgba(0,0,0,0.75); color: #fff; }
.sd-badge-new     { background: var(--N); color: #fff; }
.sd-badge-hot     { background: #ff6b35; color: #fff; }
.sd-badge-featured { background: var(--L); color: var(--N4); }

/* Neutralise old individual absolute positioning rules
   that conflict with the container approach */
.sd-product-img-wrap > .sd-product-badge {
  /* Old code put badges directly in img-wrap — redirect to container */
  display: none !important;
}
/* But badges INSIDE .sd-product-badges are fine */
.sd-product-badges .sd-product-badge {
  display: inline-flex !important;
}

/* Mobile — slightly smaller badges to save space */
@media (max-width: 480px) {
  .sd-product-badges {
    top: 8px;
    left: 8px;
    gap: 4px;
  }
  .sd-product-badge {
    font-size: 9px;
    padding: 4px 8px;
  }
}

/* Single product page badges use sp-badge system — fix stacking there too */
.sp-main {
  position: relative;
}
/* sp-badge-sale sits top-left, sp-badge-oos stacks below it */
.sp-badge {
  position: absolute;
  left: 16px;
  z-index: 3;
}
.sp-badge-sale { top: 16px; }
.sp-badge-oos  { top: 46px; }  /* 16px + ~24px badge height + 6px gap */


/* ═══════════════════════════════════════════════════════
   PART 7 — RESPONSIVE QA: NO HORIZONTAL SCROLL
   Root cause: 100vw on .sd-hero-imgonly caused a 1-2px
   horizontal scrollbar when a vertical scrollbar was
   present. Some flex children also overflowed on narrow
   viewports.
═════════════════════════════════════════════════════════ */

/* Prevent any horizontal overflow on the document */
html {
  overflow-x: hidden;
}

/* Hero must never create horizontal scroll */
.sd-hero-imgonly,
.sd-hero-swiper,
.sd-slide-img {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure all carousels / fixed bars never exceed viewport */
.usp-bar,
.trust,
.hdr-top,
.hdr-nav,
#site-header {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Touch targets — minimum 44×44px for all interactive elements */
@media (max-width: 1100px) {
  .hdr-action-btn,
  .hdr-burger,
  .sd-nav-btn,
  .mob-nav-item {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Prevent USP bar from creating horizontal scroll on narrow screens */
@media (max-width: 480px) {
  .usp-bar-inner {
    padding: 0 12px;
  }
  .usp-item {
    padding: 10px 10px;
    font-size: 10.5px;
  }
}

/* Carousel nav buttons — never overflow card edges */
.sd-nav-btn--prev { left: 8px; }
.sd-nav-btn--next { right: 8px; }
@media (max-width: 768px) {
  .sd-nav-btn--prev { left: 4px; }
  .sd-nav-btn--next { right: 4px; }
}

/* Ensure mobile bottom nav never overlaps cart/checkout content */
.sd-mobile-bottom-nav {
  z-index: 9500;
}
body.is-cart .sd-mobile-bottom-nav,
body.is-checkout .sd-mobile-bottom-nav {
  display: none !important;
}

/* ── Swiper slide — no layout shift during transition ── */
.swiper-slide {
  /* Prevent slides from causing width jumps */
  flex-shrink: 0;
  width: 100% !important;
  height: 100%;
}



/* ═══════════════════════════════════════════════════════
   TRUST BAR v11
   Desktop: 5 items spread full-width, edge-to-edge, no container max-width
   Mobile:  auto-scrolling CSS carousel
═════════════════════════════════════════════════════════ */

/* Hide old trust ticker on pages where new bar is shown */
.trust { display: none !important; }

/* ── Outer wrapper ── */
.trust-bar-v11 {
  background: #fff;
  border-top: 3px solid var(--N);    /* navy top accent line */
  border-bottom: 1px solid var(--BD);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* ── DESKTOP: full-width flex, items fill the entire bar ── */
.trust-bar-desktop {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 52px;
}

.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;                           /* equal-width columns */
  justify-content: center;
  padding: 13px 16px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 500;
  color: var(--INK2);
  white-space: nowrap;
}

.trust-bar-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--N);
  stroke-width: 1.8;
  fill: none;
  flex-shrink: 0;
}

.trust-bar-item strong {
  color: var(--INK);
  font-weight: 700;
}

/* Separators between items */
.trust-bar-sep {
  width: 1px;
  background: var(--BD);
  flex-shrink: 0;
  align-self: stretch;
  margin: 10px 0;
}

/* Mobile carousel hidden on desktop */
.trust-bar-mobile { display: none; }

/* ── MOBILE: auto-scrolling CSS carousel ── */
@media (max-width: 768px) {
  .trust-bar-desktop { display: none; }

  .trust-bar-mobile {
    display: block;
    overflow: hidden;
    position: relative;
  }

  /* Fade edges so scroll feels natural */
  .trust-bar-mobile::before,
  .trust-bar-mobile::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
  }
  .trust-bar-mobile::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
  }
  .trust-bar-mobile::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
  }

  .trust-bar-track {
    display: flex;
    width: max-content;
    animation: trust-carousel 18s linear infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .trust-bar-track { animation: none; }
  }

  .trust-bar-mobile .trust-bar-item {
    flex: none;
    padding: 12px 20px;
    border-right: 1px solid var(--BD);
    font-size: 11px;
  }

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


/* ═══════════════════════════════════════════════════════
   WHY SECTION — 3-col grid (was 6-col, 3 cards removed)
═════════════════════════════════════════════════════════ */

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

@media (max-width: 768px) {
  .why-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* WHY section subtitle — remove em dash style */
.why-sub {
  font-size: 14px;
  color: var(--INK2);
  max-width: 560px;
  margin: 12px auto 0;
  line-height: 1.7;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════
   PRODUCT BADGE FIX — definitive cleanup
   The images show SALE overlapping FEATURED in the top-left.
   Root cause: .sd-badge-oos had top:auto/bottom:12px override
   fighting the container. Old individual absolute badges
   from content-product.php still rendering on top of new ones.
═════════════════════════════════════════════════════════ */

/* Card image wrapper must be relative for badge container */
.sd-product-card {
  position: relative;
}
.sd-product-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

/* Badge container — stacks vertically in top-left */
.sd-product-badges {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  bottom: auto !important;
  right: auto !important;
  z-index: 10;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  pointer-events: none;
  max-width: calc(100% - 20px);
}

/* All badges inside the container — relative, stacked */
.sd-product-badges .sd-product-badge,
.sd-product-badges > span,
.sd-product-badges > div {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 3px;
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Badge colours */
.sd-badge-sale    { background: #e63946 !important; color: #fff !important; }
.sd-badge-oos     { background: rgba(7,8,28,0.8) !important; color: #fff !important; }
.sd-badge-new     { background: var(--N) !important; color: #fff !important; }
.sd-badge-hot     { background: #ff6b35 !important; color: #fff !important; }
.sd-badge-featured { background: var(--L) !important; color: var(--N4) !important; }

/* Nuke any old-style badges placed directly in img-wrap (not in container) */
.sd-product-img-wrap > .sd-product-badge:not(.sd-product-badges *) {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════
   SHOP PAGE CATEGORY GRID — use homepage cat-card-sq style
   The shop-cats-v11 section now uses sec-cats-12 markup.
   Ensure it inherits the dark background and proper padding.
═════════════════════════════════════════════════════════ */

/* Shop page cats section — match homepage dark section */
.shop-cats-v11 {
  background: var(--N5) !important;
  padding: 56px 0 64px !important;
}

/* Heading colours for dark background */
.shop-cats-v11 .skicker {
  color: var(--L);
  border-color: rgba(211,214,58,0.25);
  background: rgba(211,214,58,0.08);
}

.shop-cats-v11 .sh2 {
  color: #fff;
}

.shop-cats-v11 .sh2 em {
  color: var(--L);
}

/* The cat cards already have all their styles from hero-carousel.css / homepage.css
   Nothing extra needed — they inherit .cat-card-sq rules */