/* SHAUNZ SPORTS — homepage section separation + consistent dark panels (Oct 2026)
   Loaded last on index.html. Remove this file + its <link> to undo. */

/* 1. Dark sections become separate rounded panels with a gap between them,
      matching the existing About / Contact panel style. */
body #product-directory,
body #customization,
body #how-it-works,
body #about,
body #quality,
body #faq,
body #contact{
  width:calc(100% - 32px)!important;
  max-width:1580px!important;
  margin:24px auto!important;
  border-radius:36px!important;
  overflow:hidden;
  position:relative;
}

/* 2. "How it works" — same navy as the rest of the site (was light/white). */
body #how-it-works{
  background:linear-gradient(135deg,#07182a 0%,#0c3152 100%)!important;
  color:#fff;
  padding:96px max(32px,calc((100% - 1336px)/2))!important;
}
#how-it-works .eyebrow{color:#22d3ee!important}
#how-it-works .process-heading h2{color:#fff!important}
#how-it-works .process-card{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
#how-it-works .process-card:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(34,211,238,.45)!important;
}
#how-it-works .process-card>span{
  background:none!important;
  color:#22d3ee!important;
  padding:0!important;
}
#how-it-works .process-card small{color:#22d3ee!important}
#how-it-works .process-card h3{color:#fff!important}
#how-it-works .process-card p{color:rgba(255,255,255,.72)!important}

/* 3. FAQ heading was dark-on-dark (almost invisible). */
#faq .faq-intro h2{color:#fff!important}
#faq .ss-home-faq-link a{color:#22d3ee!important}

/* 4. "View reviews" link was white on the light background (invisible). */
#reviews .button-secondary{color:#071b34!important;border:1px solid rgba(7,27,52,.25)!important;background:#fff!important}

/* Phones / small tablets: slightly smaller gap and corners. */
@media (max-width:760px){
  body #product-directory,
  body #customization,
  body #how-it-works,
  body #about,
  body #quality,
  body #faq,
  body #contact{
    width:calc(100% - 16px)!important;
    margin:14px auto!important;
    border-radius:24px!important;
  }
  body #how-it-works{padding:64px 20px!important}
}

/* 5. Homepage customer reviews (3 newest, with photos). */
body #reviews.ss-home-reviews{display:block!important;padding-top:88px!important;padding-bottom:88px!important}
#reviews .hr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap}
#reviews .hr-head h2{font-size:clamp(28px,4vw,46px)!important;line-height:1.05!important;letter-spacing:-.03em;margin:10px 0 8px!important;color:#071b34!important}
#reviews .hr-head p{margin:0!important}
#reviews .hr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
#reviews .hr-card{background:#fff;border:1px solid rgba(7,27,52,.08);border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(7,17,31,.06);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
#reviews .hr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(7,17,31,.12)}
#reviews .hr-photo{aspect-ratio:4/3;background:#eef3f7;overflow:hidden}
#reviews .hr-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
#reviews .hr-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
#reviews .hr-stars{color:#ffb020;font-size:18px;letter-spacing:2px}
#reviews .hr-body p{color:#10283f!important;font-size:16px!important;line-height:1.55!important;font-weight:600;margin:0!important;flex:1}
#reviews .hr-meta{display:flex;flex-direction:column;gap:3px;padding-top:12px;border-top:1px solid rgba(7,27,52,.08)}
#reviews .hr-meta b{color:#071b34;font-size:14px}
#reviews .hr-meta span{color:#5f7284;font-size:13px}
#product-directory .ss-dir-catalogue{margin-top:6px;color:#22d3ee!important}
@media (max-width:900px){#reviews .hr-grid{grid-template-columns:1fr;max-width:460px}}
@media (max-width:760px){body #reviews.ss-home-reviews{padding-top:56px!important;padding-bottom:56px!important}}

/* 6. Reviews: rating summary + auto-rotating carousel (only when 4+ reviews). */
#reviews .hr-summary{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid rgba(7,27,52,.1);box-shadow:0 6px 18px rgba(7,17,31,.05)}
#reviews .hr-summary[hidden]{display:none}
#reviews .hr-summary b{color:#f59e0b;font-size:16px}
#reviews .hr-summary span{color:#10283f;font-size:14px;font-weight:600}
#reviews .hr-viewport{overflow:hidden;padding:4px 2px 14px;margin:-4px -2px -14px}
#reviews.hr-is-carousel .hr-grid{display:flex!important;gap:22px;max-width:none!important;transition:transform .7s cubic-bezier(.22,.8,.25,1);will-change:transform}
#reviews.hr-is-carousel .hr-card{flex:0 0 calc((100% - 44px)/3)}
#reviews .hr-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
#reviews .hr-nav[hidden]{display:none}
#reviews .hr-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(7,27,52,.15);background:#fff;color:#071b34;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
#reviews .hr-arrow:hover{background:#071b34;color:#fff}
@media (max-width:900px){
  #reviews.hr-is-carousel .hr-card{flex:0 0 calc((100% - 22px)/2)}
}
@media (max-width:600px){
  #reviews.hr-is-carousel .hr-grid{gap:14px}
  #reviews.hr-is-carousel .hr-card{flex:0 0 100%}
  #reviews .hr-nav{justify-content:center}
}

/* 7. Header stays at the top while scrolling, with a frosted-glass look.
      (overflow-x:hidden on html/body was stopping position:sticky from working;
       "clip" still prevents sideways scrolling but lets the header stick.) */
html,body{overflow-x:clip!important}
body .site-header{position:sticky!important;top:0;z-index:1000;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
.site-header .announcement{max-height:60px;overflow:hidden;transition:max-height .3s ease,opacity .25s ease}
.site-header .navbar{transition:height .3s ease}
.site-header .brand img{transition:height .3s ease,width .3s ease}
body .site-header.is-scrolled{
  background:rgba(255,255,255,.62)!important;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 10px 30px rgba(7,17,31,.10)!important;
}
.site-header.is-scrolled .announcement{max-height:0;opacity:0}
@media (min-width:901px){.site-header.is-scrolled .navbar{height:74px!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .site-header.is-scrolled{background:rgba(255,255,255,.96)!important}
}

/* 8. WhatsApp/Email buttons always visible: give the product list extra room
      at the bottom on phones so its last rows can scroll clear of the buttons. */
@media (max-width:760px){body #product-directory{padding-bottom:130px!important}}