/* AL Sports Nutrition on Storeforge: the brand layer.
   Colours come from the AI builder's shop style (near-black page, white text, his electric
   blue), so the owner can still change them in the dashboard. This file adds what the builder
   can't: his tub-label type (Barlow Condensed italic), the label plate, angled slashes, the
   gym-banner hero with a scrim, and a dark treatment for every platform surface (header,
   cards, chips, stepper, cart, drawer, checkout, footer) so contrast holds everywhere.
   Every rule is scoped to .sf.al (the body), so it beats the platform's :root tokens. */

.sf.al {
  /* derived from the builder's --bg / --ink / --accent, so they follow a colour change */
  --raised: color-mix(in srgb, var(--ink) 6%, var(--bg));
  --raised-2: color-mix(in srgb, var(--ink) 10%, var(--bg));
  --paper: var(--raised);
  --tint: var(--raised);
  --line: color-mix(in srgb, var(--ink) 14%, var(--bg));
  --line-strong: color-mix(in srgb, var(--ink) 26%, var(--bg));
  --soft: color-mix(in srgb, var(--ink) 70%, var(--bg));
  --accent-text: color-mix(in srgb, var(--accent) 55%, #fff);
  --brand-strong: var(--accent);
  --on-accent: #fff;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
  --display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --r-card: 6px;
  --r-btn: 4px;
  --al-slash: repeating-linear-gradient(-60deg, var(--accent) 0 3px, transparent 3px 9px);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── type: his label headings ────────────────────────────────────────────── */
.sf.al h1, .sf.al h2, .sf.al h3, .sf.al .sfb-h, .sf.al .al-h {
  font-family: var(--display); font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1;
}
.sf.al h1 { font-size: clamp(40px, 6vw, 72px); }
.sf.al :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.sf.al ::selection { background: var(--accent); color: #fff; }

/* Section header with the slash mark, used on builder sections and the range */
.sf.al .sfb-h, .sf.al .al-h { display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 4.4vw, 48px); margin: 0 0 clamp(20px, 3vw, 32px); }
.sf.al .sfb-h::before, .sf.al .al-h::before {
  content: ""; flex: none; width: 34px; height: .62em; background: var(--accent);
  transform: skewX(-20deg); border-radius: 1px;
}
.al-kicker {
  margin: 0 0 10px; font: italic 700 15px/1 var(--display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text);
}

/* ── buttons: solid electric blue, white text ────────────────────────────── */
.sf.al .buybtn, .sf.al .sfb-btn, .sf.al .al-btn, .sf.al .btn,
.sf.al .onehero .onehero__cta, .sf.al .sfb-img .sfb-btn {
  background: var(--accent); color: #fff; border: 2px solid var(--accent); border-radius: var(--r-btn);
  font: italic 700 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sf.al .buybtn:hover, .sf.al .sfb-btn:hover, .sf.al .al-btn:hover, .sf.al .btn:hover,
.sf.al .sfb-img .sfb-btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: #fff;
}
.sf.al .buybtn:active, .sf.al .sfb-btn:active, .sf.al .al-btn:active { transform: translateY(1px); }
/* the secondary buttons: outline on dark */
.sf.al .buybtn.buybtn--ghost, .sf.al .btn--ghost, .sf.al .al-btn--line, .sf.al .shopsort__go, .sf.al .filters__apply, .sf.al .discountform button {
  background: transparent; color: var(--ink); border: 2px solid var(--line-strong); box-shadow: none;
}
.sf.al .buybtn.buybtn--ghost:hover, .sf.al .btn--ghost:hover, .sf.al .al-btn--line:hover, .sf.al .discountform button:hover {
  background: transparent; border-color: var(--ink); color: var(--ink);
}
.sf.al .al-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none; cursor: pointer; white-space: nowrap; }

/* ── the strips over the header ─────────────────────────────────────────── */
.sf.al .sfb-bar { font: italic 700 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.sf.al .announce { background: var(--raised); color: var(--soft); border-bottom: 1px solid var(--line); }
.sf.al .announce a { color: var(--ink); }

/* ── header ─────────────────────────────────────────────────────────────── */
.sf.al .shophead { background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.sf.al .shopbrand, .sf.al .shopbrand__name { color: var(--ink); }
.sf.al .shopbrand__logo { border-radius: 4px; }
.sf.al .shopnav__link { color: var(--soft); font: italic 700 17px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.sf.al .shopnav__link:hover { color: var(--ink); background: transparent; }
.sf.al .shopnav__link.is-on { color: var(--ink); }
.sf.al .shopnav__link.is-on::after { background: var(--accent); }
.sf.al .headsearch input { background: var(--raised); border-color: var(--line); color: var(--ink); }
.sf.al .headsearch input::placeholder { color: var(--soft); }
.sf.al .headsearch input:focus { background: var(--raised-2); border-color: var(--accent); }
.sf.al .cartlink { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.sf.al .cartlink:hover { border-color: var(--accent); }
.sf.al .cartlink__count { background: var(--accent); color: #fff; }
.sf.al .iconbtn { color: var(--ink); }
.sf.al .shopmenu__panel, .sf.al .shopnav__sub { background: var(--raised); border-color: var(--line); }
.sf.al .shopnav__sub a { color: var(--ink); }

/* ── hero: his gym banner, full bleed, dark scrim, label type ──────────── */
.sf.al .sfb-hero { overflow: hidden; isolation: isolate; }
.sf.al .sfb-hero.sfb-img {
  min-height: clamp(520px, 74vh, 760px); background-size: cover; background-position: 70% center;
  align-items: flex-end; padding-block: clamp(48px, 8vw, 96px);
}
.sf.al .sfb-hero.sfb-img::before {
  background:
    linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.86) 34%, rgba(5,7,10,.35) 64%, rgba(5,7,10,.1) 100%),
    linear-gradient(0deg, rgba(5,7,10,.9) 0%, rgba(5,7,10,0) 38%);
}
/* a fine diagonal texture and a blue light edge, like the tub label */
.sf.al .sfb-hero.sfb-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(-60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);
}
.sf.al .sfb-hero .sfb-in { position: relative; z-index: 1; max-width: 1120px; }
.sf.al .sfb-hero h2 {
  max-width: 11ch; margin: 0 0 18px; color: #fff;
  font: italic 800 clamp(48px, 8.6vw, 104px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.sf.al .sfb-hero p { max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,.88); opacity: 1; margin-bottom: 26px; }
.sf.al .sfb-hero .sfb-in::before {
  content: ""; display: block; width: 120px; height: 10px; margin-bottom: 22px; background: var(--al-slash);
}
.sf.al .sfb-hero .sfb-btn { min-height: 54px; padding: 0 30px; font-size: 21px; }
@media (max-width: 719px) {
  .sf.al .sfb-hero.sfb-img { min-height: 560px; background-position: 62% 30%; padding-inline: 16px; }
  .sf.al .sfb-hero.sfb-img::before {
    background: linear-gradient(0deg, rgba(5,7,10,.97) 0%, rgba(5,7,10,.9) 40%, rgba(5,7,10,.25) 75%, rgba(5,7,10,.15) 100%);
  }
}

/* ── builder sections ───────────────────────────────────────────────────── */
.sf.al .sfb-sec { border-top: 1px solid var(--line); }
.sf.al .sfb-hero, .sf.al .sfb-hero + .sfb-sec { border-top: 0; }
/* selling points: numbered label tiles */
.sf.al .sfb-feat { counter-reset: al; gap: 2px; background: var(--line); border: 1px solid var(--line); }
.sf.al .sfb-feat > div { counter-increment: al; position: relative; padding: 26px 22px 24px; background: var(--raised); }
.sf.al .sfb-feat > div::before {
  content: counter(al, decimal-leading-zero); display: block; margin-bottom: 14px;
  font: italic 800 15px/1 var(--display); color: var(--accent-text); letter-spacing: .08em;
}
.sf.al .sfb-feat strong { display: block; font: italic 800 23px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.sf.al .sfb-feat p { color: var(--soft); opacity: 1; margin-top: 8px; }
/* product pages: the strip under the product reads quieter */
.sf.al .productpage ~ .sfb-sec .sfb-feat > div::before { display: none; }
/* image with text: the Power Stack */
.sf.al .sfb-sec:has(.sfb-it) { background:
  radial-gradient(70% 90% at 100% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--bg); }
.sf.al .sfb-it img { border-radius: var(--r-card); aspect-ratio: 1 / 1; object-fit: contain; background: #000; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.sf.al .sfb-it .sfb-h { font-size: clamp(38px, 5vw, 64px); }
.sf.al .sfb-it p { color: var(--soft); font-size: 17px; max-width: 48ch; }
/* category tiles */
.sf.al .sfb-tile { border-radius: var(--r-card); background: #000; outline: 1px solid var(--line); }
.sf.al .sfb-tile span { font: italic 800 clamp(22px, 2.6vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-left: 14px; }
.sf.al .sfb-tile span::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 6px; background: var(--accent); transform: skewX(-20deg); }
.sf.al .sfb-tile:hover { outline-color: var(--accent); }
.sf.al .sfb-tile, .sf.al .sfb-tile.sfb-has-img { color: #fff; }
.sf.al .sfb-bar a { color: inherit; }
.sf.al .productpage__desc a, .sf.al .statuspage a, .sf.al .policy a { color: var(--accent-text); }
/* questions */
.sf.al .sfb-faq { border-bottom-color: var(--line); }
.sf.al .sfb-faq summary { color: var(--ink); font: italic 700 21px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; list-style: none; position: relative; padding-right: 36px; }
.sf.al .sfb-faq summary::-webkit-details-marker { display: none; }
.sf.al .sfb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--body); color: var(--accent-text); }
.sf.al .sfb-faq[open] summary::after { content: "\2212"; }
.sf.al .sfb-faq p { color: var(--soft); }

/* ── the label plate (from the tubs: 25G PROTEIN | 132 CALORIES | 5G CARBS) ── */
.al-plate { display: flex; flex-wrap: wrap; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; border: 1.5px solid var(--accent); border-radius: 3px; overflow: hidden; width: fit-content; max-width: 100%; }
.al-plate li {
  padding: 6px 10px; font: italic 700 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink);
  border-left: 1.5px solid var(--accent);
}
.al-plate li:first-child { border-left: 0; background: var(--accent); color: #fff; }
.al-plate--big { margin: 14px 0 6px; }
.al-plate--big li { padding: 9px 14px; font-size: 16px; }

/* ── the range: product cards ───────────────────────────────────────────── */
.al-wrap { max-width: var(--maxw, 1280px); margin: 0 auto; padding: 0 var(--gutter, 16px); }
.al-range { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.al-range__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(20px, 3vw, 32px); }
.al-range__head .al-h { margin: 0; }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf.al .al-chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-btn);
  color: var(--ink); text-decoration: none; font: italic 700 16px/1 var(--display); text-transform: uppercase; letter-spacing: .05em;
}
.sf.al .al-chips a:hover { border-color: var(--accent); }
.sf.al .al-chips a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.al-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 1080px) { .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .al-grid { grid-template-columns: 1fr; } }
.al-card { display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.al-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.al-card__img { position: relative; display: block; aspect-ratio: 1 / 1; background: #000; }
.al-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-flag {
  position: absolute; top: 12px; left: 12px; padding: 6px 10px 5px; background: var(--accent); color: #fff;
  font: italic 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; transform: skewX(-10deg);
}
.al-flag--out { background: #2a3140; }
.al-card__body { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 16px 16px 18px; }
.al-card__name { margin: 0; font-size: 24px !important; line-height: 1.02 !important; }
.sf.al .al-card__name a { color: var(--ink); text-decoration: none; }
.sf.al .al-card__name a:hover { color: var(--accent-text); }
.al-card .al-plate li { font-size: 12px; padding: 5px 8px; }
.al-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
.al-price { margin: 0; color: var(--ink); font: italic 800 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.al-price__from { font-size: 15px; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.al-price s { margin-left: 6px; font-size: 17px; font-weight: 600; color: var(--soft); }
.al-quickadd { margin: 0; }
.al-empty { color: var(--soft); }

/* ── platform pages on dark ─────────────────────────────────────────────── */
.sf.al .pcrumb, .sf.al .pcrumb a, .sf.al .backlink { color: var(--soft); }
.sf.al .pcrumb span[aria-current] { color: var(--ink); }
.sf.al .productpage > * { min-width: 0; } /* platform bug: 5+ thumbnails pushed the page sideways on phones */
.sf.al .productpage__img img, .sf.al .gallery__main img { background: #000; border-radius: var(--r-card); }
.sf.al .thumbs__item { background: #000; border-color: var(--line); }
.sf.al .thumbs__item--on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.sf.al .productpage__info h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 4px; }
.sf.al .pricetag, .sf.al .pricetag--big { color: var(--ink); font: italic 800 34px/1 var(--display); }
.sf.al .wasprice { color: var(--soft); font-size: .6em; margin-left: 8px; }
.sf.al .savebadge { display: inline-block; margin-left: 10px; padding: 5px 9px 4px; background: var(--accent); color: #fff; font: italic 800 16px/1 var(--display); text-transform: uppercase; vertical-align: middle; transform: skewX(-10deg); border-radius: 0; }
.sf.al .delivline, .sf.al .productpage__desc { color: var(--soft); }
.sf.al .productpage__desc :is(h1, h2, h3, h4) { color: var(--ink); font-size: 26px; margin-top: 1.4em; }
.sf.al .productpage__desc strong { color: var(--ink); }
/* flavour chips */
.sf.al .variantpick--chips legend, .sf.al .field__label, .sf.al .addform .qtyfield .field__label { color: var(--ink); font: italic 700 15px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.sf.al .addform .variantpick--chips .variantpick__opt, .sf.al .variantpick__opt, .sf.al .optionchip {
  background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--ink); border-radius: var(--r-btn);
}
.sf.al .variantpick__opt:hover, .sf.al .optionchip:hover { border-color: var(--ink); }
.sf.al .variantpick__opt:has(input:checked), .sf.al .sf .variantpick--chips .variantpick__opt:has(input:checked), .sf.al .optionchip--on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--bg)); box-shadow: inset 0 0 0 1px var(--accent); color: #fff;
}
.sf.al .addform .variantpick--chips .variantpick__opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* quantity stepper */
.sf.al .stepper { background: var(--raised); border-color: var(--line-strong); border-radius: var(--r-btn); }
.sf.al .stepper:focus-within { border-color: var(--accent); }
.sf.al .stepper__btn, .sf.al .stepper input { color: var(--ink); background: transparent; }
/* trust box, reviews, forms */
.sf.al .trustrow, .sf.al .sellerbox, .sf.al .paytrust, .sf.al .statuscard, .sf.al .panel, .sf.al .cartnotice, .sf.al .cartoffer {
  background: var(--raised); border-color: var(--line); color: var(--ink); box-shadow: none;
}
.sf.al .trustrow li, .sf.al .trustrow a, .sf.al .paytrust__head, .sf.al .paytrust__list a { color: var(--ink); }
.sf.al :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  background: var(--raised); color: var(--ink); border-color: var(--line-strong);
}
.sf.al :is(input, select, textarea)::placeholder { color: var(--soft); }
.sf.al :is(input, select, textarea):focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.sf.al select option { background: var(--raised); color: var(--ink); }
.sf.al .formerror { background: #3a1410; color: #ffb4a6; }
/* chips, pager, filter rail (collection pages and search) */
.sf.al .chip, .sf.al .pager__n, .sf.al .pager__step, .sf.al .afchip { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.sf.al .chip--on, .sf.al .pager__n--on, .sf.al .filters__n { background: var(--accent); color: #fff; border-color: var(--accent); }
.sf.al .facet__h, .sf.al .facet__opt { color: var(--ink); }
.sf.al .facet__opt input { accent-color: var(--accent); }
.sf.al .shopsort__sel { background: var(--raised); color: var(--ink); }
/* cart */
.sf.al .cartline { border-color: var(--line); }
.sf.al .cartline__variant, .sf.al .sumline--total, .sf.al .paysecured .yocoword { color: var(--ink); }
.sf.al .sumline { color: var(--soft); }
.sf.al .qtyform input, .sf.al .qtyform .qtybtn { background: var(--raised); color: var(--ink); border-color: var(--line-strong); }
.sf.al .qtyform .qtybtn:hover { border-color: var(--accent); }
.sf.al .cardmark { border-color: var(--line); }
/* slide-out cart (drawer) and phone buy bar */
.sf.al .minicart { background: var(--raised); color: var(--ink); border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.sf.al .minicart__info strong, .sf.al .minicart__close { color: var(--ink); }
.sf.al .minicart__close:hover { background: var(--raised-2); }
.sf.al .minicart__keep { color: var(--soft); }
.sf.al .buybar { background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.sf.al .buybar__price { color: var(--ink); }
/* checkout */
.sf.al .checkoutpage, .sf.al .cohead { background: var(--bg); color: var(--ink); --co-pick: color-mix(in srgb, var(--accent) 16%, var(--bg)); --co-rule: var(--line); }
.sf.al .checkoutpage .ordersummary, .sf.al .cofold { background: var(--raised); }
.sf.al .checkoutpage .payopt { background: var(--raised); border-color: var(--line); }
.sf.al .checkoutpage .payopt__icon, .sf.al .paytrust__list svg { stroke: var(--ink); }
.sf.al .coresult { background: var(--bg); }
.sf.al .bigmark--wait { background: var(--raised); color: var(--ink); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.sf.al .shopfoot { background: #000; border-top: 0; position: relative; color: var(--ink); }
.sf.al .shopfoot::before { content: ""; display: block; height: 8px; background: var(--al-slash); opacity: .9; }
.sf.al .shopfoot__name { color: var(--ink); font: italic 800 26px/1 var(--display); text-transform: uppercase; }
.sf.al .shopfoot__addr, .sf.al .shopfoot__mail, .sf.al .shopfoot__legal a, .sf.al .shopfoot__credit, .sf.al .shopfoot__credit a, .sf.al .shopfoot__base { color: var(--soft); }
.sf.al .shopfoot__addr:hover, .sf.al .shopfoot__mail:hover, .sf.al .shopfoot__legal a:hover { color: var(--ink); }
.sf.al .shopfoot__base { border-color: var(--line); }

/* ── contact page ───────────────────────────────────────────────────────── */
.sf.al .statuspage h1 { margin-bottom: 20px; }
.sf.al .statuspage ul { padding-left: 0; list-style: none; line-height: 2; }

@media (prefers-reduced-motion: reduce) {
  .sf.al *, .sf.al *::before, .sf.al *::after { transition: none !important; }
}
.sf.al .skiplink { background: var(--accent); color: #fff; }
.sf.al .qtyform__remove { background: none; border: 0; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 500 14px var(--body); }
.sf.al .qtyform__remove:hover { color: var(--ink); }
/* phone hero: let the tubs show above the words */
@media (max-width: 719px) {
  .sf.al .sfb-hero.sfb-img { min-height: 640px; background-size: auto 62%; background-position: 70% 0; background-repeat: no-repeat; }
  .sf.al .sfb-hero.sfb-img::before { background: linear-gradient(0deg, rgba(5,7,10,1) 0%, rgba(5,7,10,.96) 46%, rgba(5,7,10,.35) 62%, rgba(5,7,10,0) 78%); }
}
.sf.al .shopmenu__search button { background: var(--accent); color: #fff; }
/* Checkout, payment and order pages don't get the builder's shop style, so they would fall
   back to the platform's light page. Same colours as the shop style, set here for them. */
.sf.al.is-checkout { --bg: #07090c; --ink: #f4f7fb; --accent: #1767cf; --accent-dark: #0f4fa3; }
.sf.al.is-checkout .cohead { background: #000; border-bottom: 1px solid var(--line); }
.sf.al.is-checkout .checkoutpage .ordersummary, .sf.al.is-checkout .sumtoggle { background: var(--raised); }
.sf.al .checkoutpage .payopt:has(input:checked), .sf.al .checkoutpage .optgroup > .payopt:has(input:checked) { background: var(--co-pick); box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.sf.al .checkoutpage .sumitem__qty { background: var(--accent); color: #fff; }

/* ── reviews: product page (platform reviews) and the home page section ── */
.sf.al .reviews { padding-top: clamp(24px, 3vw, 40px); }
.sf.al .reviews h2 { font: italic 800 clamp(30px, 4vw, 44px)/1 var(--display); text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.sf.al .reviews h2::before { content: ""; flex: none; width: 34px; height: .62em; background: var(--accent); transform: skewX(-20deg); }
.sf.al .reviews__stars, .sf.al .sfb-stars { color: var(--accent-text); letter-spacing: 3px; }
.sf.al .reviews__avg { color: var(--soft); }
.sf.al .reviews__avg .reviews__stars { font-size: 26px; }
.sf.al .reviews__avg span:last-child { font: italic 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.sf.al .reviews__item {
  position: relative; padding: 18px 20px 18px 24px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--raised);
}
.sf.al .reviews__item::before, .sf.al .sfb-quote::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--accent); transform: skewY(-12deg);
}
.sf.al .reviews__item strong { color: var(--ink); font: italic 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.sf.al .reviews__item p { color: var(--soft); }
.sf.al .reviews__side > .muted { color: var(--soft); }
.sf.al .reviewwrite > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--line-strong); border-radius: var(--r-btn); color: var(--ink); font: italic 700 17px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.sf.al .reviewwrite > summary:hover { border-color: var(--ink); }
.sf.al .reviewform .starpick__stars label { color: var(--line-strong); }
.sf.al .reviewform .starpick__stars input:checked ~ label,
.sf.al .reviewform .starpick__stars label:hover,
.sf.al .reviewform .starpick__stars label:hover ~ label { color: var(--accent-text); }
.al-sampletag {
  display: inline-block; margin: 4px 0 6px; padding: 4px 8px 3px; border: 1.5px dashed var(--soft); border-radius: 3px;
  color: var(--ink); font: italic 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: .08em;
}
/* home: the builder's reviews block */
.sf.al .sfb-sec:has(.sfb-stars) .sfb-feat { background: transparent; border: 0; gap: clamp(12px, 1.6vw, 20px); }
.sf.al .sfb-quote { position: relative; padding: 22px 22px 20px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--raised); }
.sf.al .sfb-quote blockquote { color: var(--ink); font-size: 16px; }
.sf.al .sfb-quote figcaption { color: var(--ink); font: italic 700 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; opacity: 1; }
.sf.al .sfb-quote figcaption small { margin-top: 4px; color: var(--soft); font: 400 14px/1.4 var(--body); text-transform: none; letter-spacing: 0; opacity: 1; }
.sf.al .sfb-stars { font-size: 20px; }

/* ── Countdown deal bar (Storeforge "Countdown deal" app) ────────────────────
   His label look: black strip, electric blue edge, condensed italic caps, the
   timer digits on skewed blue plates like the stats on his tubs. */
.sf.al .sfx-deal {
  --sfx-deal-bg: #050608; --sfx-deal-fg: #f4f7fb; --sfx-deal-tag: var(--accent);
  border-bottom: 2px solid var(--accent);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 38%);
}
.sf.al .sfx-deal__in { min-height: 54px; gap: 6px 18px; }
.sf.al .sfx-deal__tag {
  font: italic 800 14px/1 var(--display); letter-spacing: .06em; border-radius: 0;
  padding: 7px 12px 6px; transform: skewX(-12deg);
}
.sf.al .sfx-deal__offer {
  font: italic 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em;
}
.sf.al .sfx-deal__sub { font-size: 13px; color: var(--soft); opacity: 1; }
.sf.al .sfx-deal__ends {
  font: italic 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent-text); opacity: 1;
}
.sf.al .sfx-deal__clock { gap: 6px; }
.sf.al .sfx-deal__seg {
  background: var(--accent); border-radius: 0; padding: 5px 9px 4px; transform: skewX(-12deg);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sf.al .sfx-deal__seg b { font: italic 800 22px/1 var(--display); min-width: 2ch; }
.sf.al .sfx-deal__seg i { font: italic 700 11px/1 var(--display); letter-spacing: .06em; opacity: .85; }
.sf.al .sfx-deal.is-ended .sfx-deal__offer { color: var(--soft); }
@media (max-width: 599px) {
  .sf.al .sfx-deal__in { min-height: 0; padding-top: 9px; padding-bottom: 9px; }
  .sf.al .sfx-deal__offer { font-size: 18px; }
  .sf.al .sfx-deal__sub { width: 100%; }
  .sf.al .sfx-deal__seg { padding: 4px 7px 3px; }
  .sf.al .sfx-deal__seg b { font-size: 19px; }
}