/* ============================================================
   SHS Scroll-Scrub — Smart Home Shop (Velvet Dusk)
   Styles for the scroll-driven film hero (front-page + product_cat).
   Engine: assets/js/shs-scrub.js. Markup contract: .scrub > sticky > canvas
   + .shs-block overlays + #shs-loader. Brand near-black letterbox #14110F.
   ============================================================ */

/* STICKY FIX (front page). Astra parent main.min.css + an inline cinematic-home
   rule used to clip html/body horizontally with the `hidden` keyword, which forces
   overflow-y:auto and makes them scroll containers -> position:sticky (scrub +
   finale) breaks and the sections scroll past instead of pinning. `clip` clips
   horizontal overflow WITHOUT creating a scroll container (proven on shop pages
   via l3-shop.css body.woocommerce-page{overflow-x:clip}). !important beats the
   parent + inline rule.
   NOTE (T4/P3.1, 20.07): the keyword is spelled out above instead of written as a
   literal declaration on purpose -- scan-mobile-traps.py greps source text and was
   flagging THIS COMMENT as an OVERFLOW-HIDDEN-BODY failure, i.e. the explanation
   of the bug was being reported as the bug. header.php now sets `clip` at source. */
html, body { overflow-x: clip !important; }

/* loader fade (markup sets inline base; this adds the transition) */
#shs-loader {
  transition: opacity .6s ease, visibility .6s ease;
  /* CSS-only failsafe: if shs-scrub.js never runs (asset 404, CSP, parse error),
     this clears the full-screen overlay after ~6s so the page stays usable.
     When JS runs, hideLoader() sets inline opacity/visibility within ~ms (delay 6s
     never reached as a visible state), so JS keeps controlling timing as today. */
  animation: shsLoaderFailsafe .4s linear 6s forwards;
}
@keyframes shsLoaderFailsafe {
  to { opacity: 0; visibility: hidden; }
}

/* scroll-hint drip line */
@keyframes shsDrip {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* overlay blocks fade/slide in across the scrub progress window */
.shs-block {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .55s cubic-bezier(.22,.8,.26,1),
              transform .55s cubic-bezier(.22,.8,.26,1);
}
.shs-block.on {
  opacity: 1;
  transform: none;
}

/* the scrub section never overflows the page width */
.scrub { position: relative; width: 100%; overflow: clip; }
.scrub canvas { display: block; }

@media (prefers-reduced-motion: reduce) {
  .shs-block { transition: none; }
}

/* ============================================================
   SHS FINALE — scroll-driven horizontal product conveyor (closing)
   ============================================================ */
.shs-finale { position: relative; background: #14110F; }
/* T4/P3.1 (20.07) -- audit nalazi #6 i #7, oba na istom pravilu:
   #6  100vh na iOS-u racuna viewport BEZ URL trake, pa je pinovana sekcija
       ~90px visa od vidljivog dela i dno (CTA / red proizvoda) ispada ispod
       ivice ekrana. svh = mali viewport = uvek vidljivi deo. Ostatak teme vec
       koristi svh (min-height:100svh u child.css) -- ovde nije bilo primenjeno.
   #7  top:0 je pinovao sekciju ISPOD fiksnog headera (104px = topbar 38 +
       header 66), pa je vertikalno centriran sadrzaj bio pomeren navise za
       pola visine headera. Sada se pin spusta za tacno tu visinu, a visina se
       za istu vrednost umanjuje -- inace bi dno opet ispalo.
   Varijable imaju fallback: ako se ime promeni, ponasanje je danasnje. */
.shs-finale-sticky {
  position: sticky;
  top: calc(var(--elx-topbar-h, 38px) + var(--elx-header-h, 66px));
  height: calc(100svh - (var(--elx-topbar-h, 38px) + var(--elx-header-h, 66px)));
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 38px;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(21,184,166,.10), transparent 60%),
    radial-gradient(820px 640px at 100% 100%, rgba(123,42,59,.22), transparent 58%),
    #14110F;
}
.shs-finale-head { text-align: center; padding: 0 6vw; flex: none; }
.shs-finale-head .eyebrow {
  display: block; font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase; color: #E7C79B; margin-bottom: 1rem;
}
.shs-finale-head h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.04;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem); color: #F4EEE7; margin: 0;
}
.shs-finale-head h2 em { font-style: italic; color: #E7C79B; }
.shs-finale-head p {
  color: #B6A99C; font-size: clamp(.98rem, 1.3vw, 1.15rem); margin: 1rem 0 0;
}
.shs-finale-track-wrap { width: 100%; overflow: hidden; }
.shs-finale-track {
  display: flex; gap: 22px; padding: 4px 6vw; will-change: transform;
}
.shs-finale-card {
  flex: 0 0 300px; display: flex; flex-direction: column;
  background: #221D19; border: 1px solid rgba(231,199,155,.18); border-radius: 18px;
  overflow: hidden; text-decoration: none; transition: border-color .25s, transform .25s;
}
.shs-finale-card:hover { border-color: rgba(21,184,166,.5); transform: translateY(-4px); }
.shs-finale-card .img {
  position: relative; aspect-ratio: 4/3; background: #14110F; overflow: hidden;
}
.shs-finale-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shs-finale-card .badge {
  position: absolute; top: 11px; left: 11px; background: #7B2A3B; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
}
.shs-finale-card .b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.shs-finale-card .t {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4;
  color: #F4EEE7; min-height: 42px;
}
.shs-finale-card .now { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #E7C79B; }
.shs-finale-card .old { font-size: 13px; color: #B6A99C; text-decoration: line-through; margin-left: 8px; }
.shs-finale-cta {
  flex: 0 0 300px; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, rgba(21,184,166,.16), rgba(21,184,166,.04));
  border: 1px dashed rgba(21,184,166,.5); color: #15B8A6; font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 1.05rem;
}
.shs-finale-cta:hover { background: rgba(21,184,166,.14); }
.shs-finale-pr {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: #15B8A6;
}
/* reduced-motion / no-JS: normal horizontal-scroll row (no pin) */
.shs-finale-static .shs-finale-sticky {
  position: static; height: auto; padding: 64px 0; gap: 28px;
}
.shs-finale-static .shs-finale-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  .shs-finale-sticky { gap: 26px; }
  .shs-finale-card, .shs-finale-cta { flex-basis: 230px; }
}