/* ================================================================
RESPONSIVE.CSS v4 — COMPLETE FIX
Cache bust: 20260530-001
================================================================ */

/* ── GLOBAL BASE ── */
html, body { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
::selection { background: rgba(45,139,111,.15); color: var(--navy); }

/* ── SMOOTH PAGE ENTRY ── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#main-content { animation: pageFadeIn .5s cubic-bezier(.25,1,.3,1) both; }

/* ================================================================
1. LOGO FIX
================================================================ */
.logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0;
}
.logo img {
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block;
  flex-shrink: 0;
}
.logo img ~ .logo-text-wrap { margin-left: 0; }
.logo-text { font-size: 1.3rem !important; line-height: 1.15 !important; }
.logo-tagline { font-size: 0.56rem !important; }

/* ================================================================
2. MOBILE NAV
================================================================ */
.mob-nav {
  display: flex !important; pointer-events: none; visibility: hidden; opacity: 0;
  transform: translateY(-12px);
  transition: opacity .3s cubic-bezier(.25,1,.3,1), transform .3s cubic-bezier(.25,1,.3,1), visibility 0s linear .3s;
  border-top: 3px solid var(--emerald);
}
.mob-nav.open {
  pointer-events: all; visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .3s cubic-bezier(.25,1,.3,1), transform .3s cubic-bezier(.25,1,.3,1), visibility 0s linear 0s;
}

/* ================================================================
3. MOBILE NAV SEARCH
================================================================ */
.mob-nav-search { width: 100%; margin-bottom: 10px; }
.mob-nav-search form {
  display: flex; background: var(--ice); border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
}
.mob-nav-search input {
  flex: 1; background: none; border: none; outline: none; padding: 11px 14px;
  font-size: 16px !important; color: var(--text); font-family: inherit;
}
.mob-nav-search button {
  background: var(--navy); border: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  cursor: pointer; margin: 3px; border-radius: 8px; flex-shrink: 0; transition: background .2s;
}
.mob-nav-search button:hover { background: var(--emerald); }
.mob-nav-search svg { width: 15px; height: 15px; }

/* ================================================================
4. HERO BANNER — COMPACT HEIGHT
================================================================ */
@media (max-width: 900px) {
  .hero-fullscreen {
    height: auto !important;
    min-height: 60vh !important;
    max-height: 560px !important;
    margin-top: 56px !important;
    overflow: hidden !important;
  }
  .hfs-slides, .hfs-slide {
    position: absolute !important; inset: 0 !important; height: 100% !important;
  }
  .hfs-bg-img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    object-position: center 30% !important; min-height: unset !important;
  }
  .hfs-overlay {
    background: linear-gradient(to top,
      rgba(5,14,10,.97) 0%, rgba(5,14,10,.7) 30%, rgba(5,14,10,.3) 60%, transparent 100%
    ) !important;
  }
  .hfs-content-wrap {
    position: absolute !important; inset: auto 0 0 0 !important; top: auto !important;
    padding: 0 20px 80px !important; max-width: 100% !important; width: 100% !important;
  }
  .hfs-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.18 !important;
    word-break: break-word !important; margin-bottom: 10px !important;
  }
  .hfs-desc {
    font-size: .8rem !important; line-height: 1.65 !important; max-width: 100% !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 16px !important;
  }
  .hfs-btns {
    display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-bottom: 0 !important;
  }
  .hfs-btns .btn-emerald, .hfs-btns .btn-outline {
    font-size: .74rem !important; padding: 10px 20px !important; border-radius: 10px !important;
  }
  .hfs-kpis {
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    border-radius: 0 !important; background: rgba(5,14,10,.82) !important;
    backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important; display: flex !important;
    justify-content: space-around !important; align-items: center !important; padding: 10px 8px !important; gap: 0 !important;
  }
  .hfs-kpi { padding: 0 8px !important; text-align: center; }
  .hfs-kpi-val { font-size: .9rem !important; }
  .hfs-kpi-lbl { font-size: .5rem !important; display: block !important; }
  .hfs-kpi-sep { height: 20px !important; background: rgba(255,255,255,.12) !important; }
  .hfs-dots { bottom: 50px !important; left: 20px !important; z-index: 14 !important; }
  .hfs-dot { width: 7px !important; height: 7px !important; }
  .hfs-dot.active { width: 22px !important; }
}

@media (max-width: 480px) {
  .hfs-kpi-sep { display: none !important; }
  .hfs-kpi-val { font-size: .85rem !important; }
  .hfs-content-wrap { padding: 0 16px 76px !important; }
  .hfs-title { font-size: 1.45rem !important; }
}

/* ================================================================
5. SLIDER DOTS & ARROWS
================================================================ */
.slider-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; flex-wrap: nowrap; }
.slider-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none;
  cursor: pointer; padding: 0; flex-shrink: 0; transition: all .35s cubic-bezier(.25,1,.3,1); display: block;
}
.slider-dot.active { background: var(--emerald); width: 24px; border-radius: 4px; }
.slider-dot:hover:not(.active) { background: var(--text-soft); }

.slider-arrow-btn {
  width: 38px; height: 38px; border-radius: 50%; background: var(--warm-white);
  border: 1.5px solid var(--border); box-shadow: 0 1px 4px rgba(15,25,35,.06);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .22s; color: var(--navy); flex-shrink: 0;
}
.slider-arrow-btn:hover { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.slider-arrow-btn:disabled { opacity: .28; pointer-events: none; }
.slider-arrow-btn svg { width: 16px; height: 16px; pointer-events: none; }

/* ================================================================
6. ALL MOBILE SLIDERS — EXACT 2 CARDS (NO PEEK)
================================================================ */

/* ── Desktop Grid Fallbacks (declare FIRST, mobile overrides below) ── */
.home-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1280px) { .home-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .home-prod-grid { grid-template-columns: repeat(2, 1fr); } }

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 900px) {

  /* ── Featured Products: exactly 2 cards, no 3rd peek ── */
  .home-prod-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
    /* No scroll-padding — cards fill 100% of visible area */
  }
  .home-prod-grid::-webkit-scrollbar { display: none !important; }
  .home-prod-grid .prod-card {
    /* Each card = full viewport width minus both side paddings (16px each = 32px) */
    /* 2 cards fill exactly 1 "page" of scroll */
    flex: 0 0 calc(50vw - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 12px !important;
  }
  .home-prod-grid .prod-card:last-child { margin-right: 0 !important; }

  /* ── Why Grid: exactly 1 card per view on mobile ── */
  .why-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
  }
  .why-grid::-webkit-scrollbar { display: none !important; }
  .why-grid .why-card {
    flex: 0 0 calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 14px !important;
  }
  .why-grid .why-card:last-child { margin-right: 0 !important; }

  /* ── Categories Side List: exactly 2 cards, no 3rd peek ── */
  .cats-side-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
  }
  .cats-side-list::-webkit-scrollbar { display: none !important; }
  .cats-side-list .cat-mini {
    flex: 0 0 calc(50vw - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 12px !important;
  }
  .cats-side-list .cat-mini:last-child { margin-right: 0 !important; }

  /* ── Related Products: exactly 2 cards, no 3rd peek ── */
  .related-sec .prod-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
  }
  .related-sec .prod-grid::-webkit-scrollbar { display: none !important; }
  .related-sec .prod-grid .prod-card {
    flex: 0 0 calc(50vw - 20px) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 14px !important;
  }
  .related-sec .prod-grid .prod-card:last-child { margin-right: 0 !important; }

}

/* ================================================================
7. TESTIMONIALS SLIDER — 1 CARD PER VIEW ON MOBILE
================================================================ */
.testi-slider-nav { display: none; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.testi-slider-nav.visible { display: flex; }
.testi-slider-nav .testi-dots { display: flex; gap: 7px; align-items: center; }

.testi-grid.testi-sliding {
  display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
  gap: 20px !important; padding-bottom: 6px !important; cursor: grab;
}
.testi-grid.testi-sliding:active { cursor: grabbing; }
.testi-grid.testi-sliding::-webkit-scrollbar { display: none; }
.testi-grid.testi-sliding .testi-card {
  flex: 0 0 100%; scroll-snap-align: start; flex-shrink: 0; min-width: 280px;
}
@media (min-width: 769px) { .testi-grid.testi-sliding .testi-card { flex: 0 0 calc(50% - 10px); } }
@media (min-width: 1100px) { .testi-grid.testi-sliding .testi-card { flex: 0 0 calc(33.333% - 14px); } }

@media (max-width: 768px) {
  .testi-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
    margin: 0 !important;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-grid .testi-card {
    /* 1 full card per view — no peek */
    flex: 0 0 calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: start !important;
    margin-right: 16px !important;
  }
  .testi-grid .testi-card:last-child { margin-right: 0 !important; }
  .testi-slider-nav { display: flex !important; }
}

/* ================================================================
8. CATEGORY LAYOUT MOBILE
================================================================ */
@media (max-width: 768px) {
  /* Category hero layout — stack vertically, equal heights, NO peek */
  .cats-hero-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .cat-card {
    min-height: 280px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  /* If category section uses a horizontal layout variant */
  .cats-hero-layout.horizontal {
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 16px 10px !important;
  }
  .cats-hero-layout.horizontal::-webkit-scrollbar { display: none; }
  .cats-hero-layout.horizontal .cat-card {
    flex: 0 0 calc(100vw - 32px) !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    margin-right: 12px !important;
  }
  .cats-hero-layout.horizontal .cat-card:last-child { margin-right: 0 !important; }
}

/* ================================================================
9. SCROLL REVEAL & MOTION
================================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .65s cubic-bezier(.25,1,.3,1), transform .65s cubic-bezier(.25,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: .07s; }
.rd2 { transition-delay: .14s; }
.rd3 { transition-delay: .21s; }
.rd4 { transition-delay: .28s; }

.prod-card, .why-card, .testi-card, .cat-card, .cat-mini, .coll-card {
  transition: transform .35s cubic-bezier(.25,1,.3,1), box-shadow .35s cubic-bezier(.25,1,.3,1), border-color .25s ease !important;
  will-change: transform;
}
@media (max-width: 900px) { .prod-card:hover, .why-card:hover { transform: none !important; } }

/* ================================================================
10. SHOP FILTER, TRUST BAR, BULK BANNER, THUMBS
================================================================ */
.mob-filter-btn {
  display: none; width: 100%; background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 11px 16px; font-size: .82rem; font-weight: 600; color: var(--navy);
  cursor: pointer; align-items: center; justify-content: space-between; gap: 8px; font-family: inherit; transition: all .2s;
}
.mob-filter-btn:hover { background: var(--ice); border-color: var(--emerald); }
.mob-filter-btn.open .mob-chevron { transform: rotate(180deg); }
.mob-chevron { transition: transform .25s; }
.shop-filters-body { display: block; }
@media (max-width: 900px) {
  .mob-filter-btn { display: flex; }
  .shop-filters-body { display: none; }
  .shop-filters-body.open { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 16px 0 0; }
  .shop-filters-body .f-group { flex: 1; min-width: 130px; margin-bottom: 0 !important; }
}
@media (max-width: 600px) {
  .trust-row { flex-direction: column; gap: 0; }
  .t-item { border-right: none !important; border-bottom: 1px solid var(--border); padding: 14px 0; }
  .t-item:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  .bulk-banner-inner { flex-direction: column; text-align: center; }
  .bulk-banner-inner > div:last-child { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  .bulk-banner-inner .btn-emerald, .bulk-banner-inner .btn-outline { width: 100% !important; justify-content: center; }
}
@media (max-width: 600px) {
  .pd-thumbs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; padding: 10px 14px; gap: 8px; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { min-width: 56px; flex: 0 0 56px; aspect-ratio: 1; }
}
@media (max-width: 480px) { .m-inner { animation-duration: 16s; } }

/* ================================================================
11. SECTION PADDING, HEADINGS & VIEW ALL BUTTON
================================================================ */
@media (max-width: 768px) {
  .sec { padding: 36px 16px !important; }
  .sec-hd { margin-bottom: 22px !important; }
  .h2 { font-size: 1.35rem !important; line-height: 1.25 !important; }
  
  /* View All Button Smaller */
  .sec-hd .btn-outline,
  .view-all-btn {
    padding: 8px 18px !important;
    font-size: 0.72rem !important;
  }
}
@media (max-width: 480px) {
  .sec { padding: 28px 14px !important; }
  .h2 { font-size: 1.2rem !important; }
  .hfs-title { font-size: 1.45rem !important; }
  .hfs-desc { font-size: 0.8rem !important; -webkit-line-clamp: 2 !important; }
}

/* ================================================================
12. iOS INPUT ZOOM & SCROLLBAR
================================================================ */
@media (max-width: 768px) {
  input, select, textarea, .fg input, .fg select, .fg textarea,
  .header-search-wrap input, .nl-form input, .form-input { font-size: 16px !important; }
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,139,111,.4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--emerald); }

/* ================================================================
13. HEADER, NEWSLETTER, FOOTER MOBILE
================================================================ */
@media (max-width: 900px) {
  .site-header { z-index: 1000 !important; }
  .header-top {
    height: 90px !important;
    padding: 0 16px !important;
  }
  .hero { padding-top: 56px !important; }
}
@media (max-width: 600px) {
  .nl-form { flex-direction: column; }
  .nl-form input, .nl-form button { width: 100%; }
  .ft-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ft-bottom { flex-direction: column; text-align: center; gap: 8px; }
}