/* SafeX custom CSS — source of truth for the Salla dashboard custom-CSS field.
   Repo: /Users/amr/safex (src/custom.css). Custom class names carry the
   .sfx- prefix. GATING (changed 2026-09-05, PageSpeed CLS work): rules used
   to be scoped under html.sfx-active, the flag custom.js sets at boot — which
   meant every layout rule here (PDP two-card skin, section rhythm, hero
   caption widths) landed seconds after first paint and shifted the page
   (Lighthouse desktop PDP CLS 0.38 from the skin alone). All rules are pure
   CSS with no JS dependency, so they are now ALWAYS ON via html:not(.sfx-off)
   — same specificity as the old gate (a class), and adding class "sfx-off"
   to the html element remains a one-line kill switch. custom.js still sets
   html.sfx-active (diagnostics / harness).
   NEVER write an HTML tag (anything in angle brackets) anywhere in this
   file, comments included: Salla sniffs the pasted text (libmagic) to pick
   the CDN Content-Type, a tag flips it to text/html and Chrome silently
   drops the WHOLE sheet — live ran with no custom CSS 2026-09-05→08 because
   the old header said "adding class sfx-off to [the html tag]". The perf
   harness now fails on that sniff (tools/perf-check.cjs). */

html:not(.sfx-off) {
  --sfx-red: #e11e26; /* matches Selia theme primary */
}

/* ================================================================
   == PDF-scale patch — hero (Advanced Slider, light DOM) ==
   Final reference 2026-08-04. The old Revision-4 hero skin (centered
   text, gradient, cart icon) was for the retired v1 design — removed;
   the native slider already matches the final mock except these two.
   NOTE: theme-id body-class scoping is DEAD (live + duplicate share
   salla-632105401). Sandbox isolation = paste this ONLY into the
   DUPLICATE theme's custom-code slot; live deploy only at publish.
   Verified live on the draft preview at 1440px, 2026-08-09.
   ================================================================ */
@media (min-width: 1024px) {
  /* mock breaks the heading over two lines */
  html:not(.sfx-off) .advanced-slider__caption__inner__content__heading {
    max-inline-size: 28rem;
  }
}
/* Global button recipe (client 2026-08-18): larger text in a smaller
   body — ~0.45 text:height ratio, colors untouched (inverted white
   pills stay white). Shadow-DOM buttons get the same recipe via the
   custom.js PATCH entries (what-is cta, offers, PDP offers). */
html:not(.sfx-off) .advanced-slider__caption__inner__content__button {
  /* transition:none is LOAD-BEARING: the theme puts transition:all .3s
     on this button and the carousel's re-renders perpetually restart
     it — a running transition outranks even !important rules, so
     font/padding overrides never visually land (they read as "clamped").
     Verified live 2026-08-18: with transitions off, 18px/700 applies. */
  transition: none !important;
  border-radius: 999px;
  padding: 8px 27px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
/* Hero mobile (2026-08-18): companion to the hero-mobile-* slide images
   (src/assets/hero-mobile) — narrows the caption on phones so the
   right-anchored text stays inside each image's dark zone. Verified
   live at 390px with the swapped mobile crops. */
@media (max-width: 768px) {
  html:not(.sfx-off) .advanced-slider__caption__inner__content__heading { max-inline-size: 13rem; }
  html:not(.sfx-off) .advanced-slider__caption__inner__content__text { max-inline-size: 16rem; }
}

/* ================================================================
   == First-paint reservations (PageSpeed CLS fix, 2026-09-05) ==
   Deliberately NOT gated on html:not(.sfx-off): these must hold from the
   very first paint, before custom.js boots. Lighthouse (mobile) read
   CLS 1.2–1.6 on the live homepage, all from one mechanism: the AI
   sections are EMPTY until their bundles load (an undefined custom
   element has no height), so the footer painted right under the hero
   and everything below shifted as each element upgraded; the trust
   bar also rendered stacked full-screen for a frame before the shadow
   patch landed, and the theme reserved the slider at
   --mobileSliderHeight (80vh) until custom.js re-pinned it to
   100vh − header − trust (a ~50px jump on every phone).

   Mobile fold: --sfx-fold-h now DEFAULTS here to the same formula the
   JS computes (header 72 + trust 127 + 22 gap = 221 at 390px); the JS
   only corrects the var when the live geometry differs. The carousel
   RE-CLONES slides continuously (inline pins die with each clone), so
   heights land via this stylesheet rule; the slide wrapper div (never
   cloned) is pinned inline by the JS. Desktop keeps the builder height
   (the 1440×750 banners are composed for it) — mobile-only rule.

   Section placeholders: min-heights ~8% under the live measurements
   (2026-09-05, 390px / 1440px: trust 127/106, what-is 656/451,
   comparison 603/563, steps 582/480, offers 515/404, reviews 422/392)
   so the real content always wins and no gap appears if a section ends
   up shorter. Re-measure with tools/perf-check.cjs after layout work.
   Verified 2026-09-05 with tools/perf-check.cjs (CLS < 0.1).
   ================================================================ */
@media (max-width: 768px) {
  html { --sfx-fold-h: calc(100vh - 221px); --sfx-fold-h: calc(100svh - 221px); }
  section[class*="advanced-slider"],
  section[class*="advanced-slider"] salla-slider,
  .advanced-slider__slide,
  img.advanced-slider__image { height: var(--sfx-fold-h) !important; }
  body.index section.s-block--bundle-trust-badges { min-height: 127px; }
  body.index section.s-block--bundle-overlap-promo { min-height: 600px; }
  body.index section.s-block--bundle-dual-feature-cards { min-height: 555px; }
  body.index section.s-block--bundle-steps-video-showcase { min-height: 535px; }
  body.index section.s-block--bundle-product-offers { min-height: 470px; }
  body.index section.s-block--bundle-customer-reviews { min-height: 390px; }
}
@media (min-width: 1024px) {
  body.index section.s-block--bundle-trust-badges { min-height: 100px; }
  body.index section.s-block--bundle-overlap-promo { min-height: 415px; }
  body.index section.s-block--bundle-dual-feature-cards { min-height: 520px; }
  body.index section.s-block--bundle-steps-video-showcase { min-height: 440px; }
  body.index section.s-block--bundle-product-offers { min-height: 370px; }
  body.index section.s-block--bundle-customer-reviews { min-height: 360px; }
}

/* ================================================================
   == Anchor navigation (nav menu items -> /#section ids set by
   custom.js). Smooth jumps, offset clears the sticky header. ==
   ================================================================ */
html:not(.sfx-off) { scroll-behavior: smooth; }
html:not(.sfx-off) [id] { scroll-margin-top: 90px; }

/* ================================================================
   == PDP hero skin (Phase 2, design 2026-08-10) ==
   Shapes the native product block into the design's two-card layout:
   grey stage, gallery card LEFT with thumbs on the far left, info
   card RIGHT, availability as a green chip. Price/buy kept visible
   (client decision pending). Verified live on the draft preview at
   1440px, 2026-08-11.
   ================================================================ */
@media (min-width: 1024px) {
  html:not(.sfx-off) body.product-single div.product-single { background: #F6F6F8; border-radius: 28px; padding: 28px 24px 12px; }
  html:not(.sfx-off) body.product-single .product-single__inner > div.flex { flex-direction: row-reverse; }
  html:not(.sfx-off) body.product-single .product-single__slider__inner { background: #fff; border: 1px solid #ECECEE; border-radius: 20px; padding: 20px; }
  html:not(.sfx-off) body.product-single .product-single__info { background: #fff; border: 1px solid #ECECEE; border-radius: 20px; padding: 28px; }
  /* salla-slider is flex row-reverse (thumbs right); plain row in RTL
     puts the thumbs column on the far LEFT like the design */
  html:not(.sfx-off) body.product-single salla-slider.details-slider { flex-direction: row !important; gap: 16px; }
}
html:not(.sfx-off) body.product-single .inventory-content > div:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E9F8EF; color: #1D9E4F; border-radius: 999px;
  padding: 6px 14px; width: max-content; font-weight: 700;
}

/* == PDP section rhythm ==
   The AI sections shipped with 64px internal vertical padding AND the
   theme adds 64px margin per .s-block wrapper → ~192px between content.
   Compacted to ~56px desktop / ~40px mobile. PDP-scoped so the approved
   homepage rhythm is untouched. (Off-screen sections reporting 500px is
   content-visibility lazy rendering, not real spacing.) Verified live
   2026-08-11. */
/* PDP breadcrumb: the theme renders the container at 0px and the Twilight
   breadcrumb hydrates to 60px later, pushing the whole product block (CLS
   0.065 per Lighthouse mobile, 2026-09-05). Reserve it — NOT gated on
   html:not(.sfx-off) so it holds from the first paint. */
body.product-single .container--breadcrumbs { min-height: 60px; }
/* PDP first-paint geometry (v0.13.2, 2026-09-08). The theme's own
   product-details.css is NOT render-blocking and lands after first paint on
   slow connections; its mobile full-bleed rule then widens the gallery
   (392→412px at a 412px viewport) and the LCP image re-paints LARGER, so the
   browser's LCP candidate moves from first paint (~2s) to the swiper
   re-render after hydration (~10s on a 4x-throttled phone; PSI mobile LCP
   11–13s). Copying the theme's rule here (same class, same media query)
   makes the first paint already the final size, so the later re-render is
   not "larger" and LCP stays at first paint. Ungated: first-paint rule. */
@media (max-width: 767px) {
  body.product-single .product-single--full-bleed-mobile .product-single__main-media {
    border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    max-width: 100vw; width: 100vw;
  }
}
/* Installment widgets (Tabby + Tamara inside salla-installment) render
   0px → ~217px once their scripts arrive — above the fold on desktop (CLS
   0.24 in a 1440px probe). Reserve UNDER the real height. Drop this rule
   if the client removes the widgets. */
body.product-single salla-installment { display: block; min-height: 200px; } /* real: 217px at 390px */
@media (min-width: 768px) { body.product-single salla-installment { min-height: 160px; } } /* real: 174px at 1440px */
html:not(.sfx-off) body.product-single div.s-blocks-wrapper { margin-top: 8px !important; }
html:not(.sfx-off) body.product-single section[class*="s-block--bundle-"] { margin-top: 16px !important; }
html:not(.sfx-off) body.product-single section[class*="s-block--bundle-"] > * { padding-top: 20px !important; padding-bottom: 20px !important; }
@media (max-width: 768px) {
  html:not(.sfx-off) body.product-single section[class*="s-block--bundle-"] { margin-top: 12px !important; }
  html:not(.sfx-off) body.product-single section[class*="s-block--bundle-"] > * { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* == Homepage section rhythm (client call 2026-08-27: gaps too airy) ==
   Same disease as the PDP: theme adds 64px margin per .s-block AND the
   AI elements carry fat :host padding (what-is 128px!, comparison/steps
   80px, trust/reviews 64px) → up to ~250px of white between content.
   Mock rhythm (docs/design-refs/2026-08-04-final-homepage.jpg) is
   ~40-90px content-to-content. The `> *` padding override works because
   the padding sits on the elements' :host. Exceptions: the trust bar
   hugs the hero (mock shows it nearly flush), and the what-is section
   keeps extra top padding as headroom for the hand cutout that
   deliberately overhangs its panel (desktop) / tile (mobile).
   Offers-element internals (.title-strip 1200px padding clamp,
   .black-band 24px margins) are trimmed in the custom.js shadow patch —
   they're inside the shadow root, out of reach here.
   Verified 2026-08-27 in the preview at 1440 and 390 (iframe). */
html:not(.sfx-off) body.index section[class*="s-block--bundle-"] { margin-top: 32px !important; }
html:not(.sfx-off) body.index section[class*="s-block--bundle-"] > * { padding-top: 10px !important; padding-bottom: 10px !important; }
html:not(.sfx-off) body.index section.s-block--bundle-trust-badges { margin-top: 10px !important; }
html:not(.sfx-off) body.index section.s-block--bundle-overlap-promo > * { padding-top: 56px !important; }
@media (max-width: 768px) {
  html:not(.sfx-off) body.index section[class*="s-block--bundle-"] { margin-top: 22px !important; }
  html:not(.sfx-off) body.index section[class*="s-block--bundle-"] > * { padding-top: 8px !important; padding-bottom: 8px !important; }
  html:not(.sfx-off) body.index section.s-block--bundle-overlap-promo > * { padding-top: 44px !important; }
}

/* == PDP description-HTML styles (INERT until the per-product
   description is swapped at publish — see src/pdp/) == */
html:not(.sfx-off) .sfx-pdp-sub { color: #E11E26; font-weight: 800; font-size: 17px; margin-bottom: 10px; }
html:not(.sfx-off) .sfx-pdp-para { color: #555; font-size: 14.5px; line-height: 1.9; margin-bottom: 22px; }
html:not(.sfx-off) .sfx-pdp-feats { display: flex; gap: 26px; justify-content: space-between; max-width: 420px; margin-inline-start: auto; }
html:not(.sfx-off) .sfx-feat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
html:not(.sfx-off) .sfx-feat img { width: 30px; height: 30px; }
html:not(.sfx-off) .sfx-feat span { font-size: 12px; color: #222; font-weight: 600; line-height: 1.5; }

/* ================================================================
   == Native Selia footer skin — FINAL mock (2026-08-04 PDF) ==
   The final footer mock has NO red accents (the old Revision-4 skin
   ideas are dead). Native footer already matches except the logo:
   mock shows a plain bold SAFEX wordmark, the theme renders the boxed
   logo image. Verified live 2026-08-11. Payment/copyright strip is
   NOT in the mock crop — kept (Salla-standard trust) as a listed
   deviation pending client sign-off.
   ================================================================ */
html:not(.sfx-off) .store-footer .footer-logo img { display: none; }
html:not(.sfx-off) .store-footer .footer-logo::after {
  content: "SAFEX"; display: block; font-weight: 800;
  font-size: 30px; letter-spacing: 2px; color: #fff; line-height: 1;
}
@media (max-width: 780px) {
  html:not(.sfx-off) .store-footer .footer-logo::after { text-align: center; }
}