/* She's Back custom CSS. Deployed by bin/deploy.sh. One section per spec point. */

/* deploy marker: bin/deploy.sh greps for this after each deploy, keep */
body.sb-css-loaded-marker { content: "shesback.css"; }

/* ------------------------------------------------------------------
   Point 7 decided 2026-09-21 (Kertu): no lines, static gradient glow behind
   the cards, tones matched to each section's imagery (pink for pink, etc.).
   Reusable glow; per-section colours are set on the homepage in Day 2.
   ------------------------------------------------------------------ */
.sb-glow {
    background-color: #000;
    background-image:
        radial-gradient(ellipse 60% 70% at 18% 25%, var(--sb-glow-1, rgba(140, 30, 100, 0.55)), transparent 70%),
        radial-gradient(ellipse 55% 60% at 85% 80%, var(--sb-glow-2, rgba(90, 20, 80, 0.5)), transparent 70%);
}

/* ------------------------------------------------------------------
   Sale prices everywhere (shop loops, category archives, single product):
   draw the strike on the amount span, not on the <del> wrapper. On Android
   Chrome the inner span gets font-boosted while the wrapper keeps its
   size, so a wrapper-level line floats above the digits (Pixel 6a, 2026-09-21).
   ------------------------------------------------------------------ */
.price del,
.woocommerce-Price-amount del,
del.woocommerce-Price-amount {
    text-decoration: none;
}
.price del .woocommerce-Price-amount,
.price del .amount {
    text-decoration: line-through;
}
/* end sale price strike */

/* ------------------------------------------------------------------
   Buttons (fix list 2, 5, 6). One pill style for the whole homepage.
   Flatsome [button class="sb-btn ..."] renders <a class="button ... sb-btn">.
   Canva: 1px outline in the section accent, uppercase label, long arrow
   on the right; hover = arrow slides right, outline and text brighten.
   ------------------------------------------------------------------ */
.sb-btn, .sb-btn.button, input.sb-btn {
    --sb-btn-accent: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 210px;
    height: 52px;
    margin: 0;
    padding: 0 22px 0 26px;
    border: 1px solid var(--sb-btn-accent);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: none;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.sb-btn:not(input)::after, .sb-btn.button::after {
    content: "\27F6";              /* long rightwards arrow */
    font-size: 22px;
    line-height: 1;
    transform: translateX(0);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.sb-btn:hover, .sb-btn.button:hover, input.sb-btn:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.sb-btn:not(input):hover::after, .sb-btn.button:hover::after { transform: translateX(6px); }
.sb-btn.sb-btn--lime    { --sb-btn-accent: #a2ff5a; }
.sb-btn.sb-btn--magenta { --sb-btn-accent: #ff2fb3; }
.sb-btn.sb-btn--purple  { --sb-btn-accent: #7b3fe4; }
.sb-btn.sb-btn--red     { --sb-btn-accent: #e0141e; }
.sb-btn.sb-btn--white   { --sb-btn-accent: #fff; }
button.sb-btn { font-family: inherit; cursor: pointer; }
input.sb-btn { justify-content: center; text-align: center; }
/* Round arrow-only button on the category cards */
.sb-btn--icon, .sb-btn--icon.button {
    min-width: 0;
    width: 72px;
    height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
}
.sb-btn--icon > span { display: none; }
/* Flatsome wraps the label in a span; kill its own hover effects */
.sb-btn.button > span { padding: 0; }
.sb-btn.button:hover { transform: none; }

/* ------------------------------------------------------------------
   Page width (Paul 23.09 + client i, 26.09; R3). Content lives in a
   centred 1440px band (the Canva frame); section backgrounds, glows and
   background images bleed to the window edge, like raivojuhanson.ee.
   Survey at 1920/2560 (Day 3): the only content wider than 1440 was the
   full-width rows (Sinu pilk, both category card rows, Join the Club);
   Flatsome's default rows stay in their 1080 container, the header and
   footer containers are 1080/1110, reviews caps itself at 1325, and the
   hero's banner layers are capped in the Hero block. Flatsome sets
   .row-full-width { max-width: 100% !important }, hence !important here.
   Rows nested in a column are left alone (their margins are Flatsome's
   negative gutters). Section backgrounds need nothing: .section-bg is
   the section's full width and its img.bg is already object-fit: cover.
   The steps carousel track is the one deliberate exception: its tiles
   are cut by the window edges by design (see Steps carousel).
   ------------------------------------------------------------------ */
:root { --sb-page-max: 1440px; }
@media (min-width: 850px) {
    #main .row-full-width:not(.col .row-full-width) { max-width: var(--sb-page-max) !important; margin-left: auto !important; margin-right: auto !important; }
}
/* H6 (Day 11): the standalone "Built by" image (600, text baked in) and the hero art stay inside the band on wide screens.
   The hero layer is div.banner > div.banner-inner.fill > div.banner-bg.fill > img.bg (Flatsome 3.20); .fill sets
   left:0 + right:0, so right:auto + width:100% are needed for max-width + translate to centre it. */
@media (min-width: 850px) {
    #main .img.sb-builtby { max-width: var(--sb-page-max); margin-left: auto; margin-right: auto; }
    /* Day 15: between 850 and 1440 px the hero art simply spans the viewport (it is never wider than the 1440 column there);
       above 1440 the "Day 15" block at the end of this file takes over (1440 art + ambient fill). */
    .sb-hero .banner .banner-bg { max-width: none; width: 100%; right: 0; left: 0; transform: none; }
    .sb-hero .banner { background: #000; }
}

/* ------------------------------------------------------------------
   Hero (section 1), Day 3: Flatsome fade slider with Kertu's three
   text-free slides (Drive 24.09) and the copy from TEKSTID/AVALEHT.
   No Canva frame for these slides (R2): headline 64px 900 uppercase
   (LOOK AGAIN's size), lead 24/1.3 600, black on the light images,
   copy bottom-left at x 50 / bottom 90 (Canva's copy block), buttons
   stacked bottom-right, right edge 53px in, as on the Day 2 hero.
   ------------------------------------------------------------------ */
/* H7 (Day 11): the hero is the first screen. Height = viewport minus the 100px header
   (header_height), floor 560 so the copy and the 2-button stack (144 tall, bottom 90) fit,
   ceiling 1000 so a 1920x1080 screen is filled without a 133px underflow. Flatsome sizes the
   banner with padding-top on .banner itself (its per-banner <style> tag prints
   #banner-<rand> { padding-top: 815px }, the [ux_banner height] value; ID specificity (1,0,0),
   answered with :not(#sb-x) as in the phone object-position rules; .banner-inner.fill is absolute
   and follows), and Flickity's adaptiveHeight writes an inline height on .flickity-viewport (hence
   !important there, and only there), so all get the same clamp. */
:root { --sb-hero-h: clamp(560px, calc(100svh - 100px), 1000px); }
/* svh fallback: browsers without svh would otherwise unset the variable and the banner (padding-top 0)
   would collapse to 0. */
@supports not (height: 100svh) { :root { --sb-hero-h: clamp(560px, calc(100vh - 100px), 1000px); } }
.sb-hero .banner, .sb-hero .sb-hero__slide { height: var(--sb-hero-h); min-height: 0; }
.sb-hero .banner:not(#sb-x), .sb-hero .sb-hero__slide:not(#sb-x) { padding-top: 0; }
.sb-hero .slider-wrapper { min-height: 0; height: var(--sb-hero-h); }
.sb-hero .flickity-viewport { min-height: 0; height: var(--sb-hero-h) !important; }
/* Content band: the background bleeds, the copy and buttons live in the
   1440 frame (R3). .banner-layers is Flatsome's full-height layer wrapper
   and also carries .container (max-width 1080), which is what this widens. */
.sb-hero .banner-layers { max-width: var(--sb-page-max); margin: 0 auto; }
/* Flatsome 3.20 positions a text_box with left/right/top/bottom classes
   (.x0 .y100 ...); pin ours (the translate/top overrides cover older markup).
   Selectors below are scoped to .sb-hero: Flatsome's .banner h1 (3.5em/400),
   .dark h1 / .dark p (white) and .banner p (margin 1em 0) are (0,1,1) and
   beat a lone class; the Customizer prints .banner h1 { font-weight: 800 }
   after this sheet. */
/* Width comes from Flatsome's inline style (width="60" → 60%); not set here. */
.sb-hero .sb-hero__copy.banner-layer { left: 50px !important; right: auto !important; bottom: 90px !important; top: auto !important; transform: none !important; }
/* R2b: slide 1's art is dark bottom-left and empty on the right, so its copy
   and button form one right-aligned block at right 53 / bottom 90. */
.sb-hero .sb-hero__copy--right.banner-layer { right: 53px !important; left: auto !important; }
.sb-hero .sb-hero__copy--right .sb-hero__lead { margin-left: auto; }
.sb-hero .sb-hero__copy--right .sb-btn { margin: 26px 0 0 auto; }
/* Slide 1 at short desktop viewports (FHD at 125% = 1512x~790, hero ~690): the 2560x1147 art is
   barely cropped, so the tweezers tip sat under the "S" of the right-aligned headline and it read
   "HE'S BACK" (Paul, 2026-10-06). Anchoring the art to its right edge spends the whole crop on the
   left, moving the tweezers away from the copy; the right side of the art is empty grey. */
.sb-hero .sb-hero__slide--1 .bg:not(#sb-x) { object-position: 100% 50%; }
.sb-hero .sb-hero__ctas.banner-layer { right: 53px !important; left: auto !important; bottom: 90px !important; top: auto !important; transform: none !important; width: 240px; }
.sb-hero .sb-hero__kicker { margin: 0 0 10px; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000; }
.sb-hero .sb-hero__title { margin: 0 0 18px; font-size: clamp(44px, 4.45vw, 64px); line-height: 1; font-weight: 900; letter-spacing: 0; text-transform: uppercase; color: #000; }
/* Title 64px only from ~1440 up, scaling down to 44px at 990 (2026-10-06, Paul). Below ~1500 the 1440 frame
   is the viewport, the art is width-bound (no horizontal crop, so object-position cannot help) and the
   tweezers tip sits at 34-40% of the frame; a 64px "SHE'S BACK ON KOHAL" right-aligned at 53px reaches
   down to 38% at 1260 wide (FHD at 150%), so the S disappeared into the tweezers ("HE'S BACK"). At 4.45vw
   the text starts at 45% (1260) / 43% (1024). The phone block below sets its own 34px. */
.sb-hero .sb-hero__lead { margin: 0; max-width: 520px; font-size: 24px; line-height: 1.3; font-weight: 600; color: #000; }
/* Black modifier, same pattern as .sb-btn.sb-btn--lime; the label needs three
   classes because Flatsome's .dark .banner a (0,2,1) paints banner links white,
   and the system's .sb-btn.button:hover brightens to white, so hover is restated. */
.sb-btn.sb-btn--black { --sb-btn-accent: #000; }
.sb-btn.sb-btn--black.button { color: #000; }
.sb-btn.sb-btn--black.button:hover { border-color: #000; background: rgba(0, 0, 0, .06); color: #000; }
/* R2b: slide 3's bottom band is dark (mean luminance ~52/255): white copy and
   the white system button there. 0,3,0 so white wins over the black
   copy rules by specificity, not by source order. */
.sb-hero .sb-hero__slide--3 .sb-hero__kicker, .sb-hero .sb-hero__slide--3 .sb-hero__title, .sb-hero .sb-hero__slide--3 .sb-hero__lead { color: #fff; }
/* 240 wide like the Day 2 hero, but "TUTVU VALIKUGA" needs ~145px of label
   and the pill leaves 142: never wrap, let a long label widen the pill
   (margin-left:auto keeps the right edge at 53). */
.sb-hero .sb-btn { display: flex; width: max-content; min-width: 240px; margin: 0 0 40px auto; white-space: nowrap; }
.sb-hero .sb-btn:last-child { margin-bottom: 0; }
/* Bullets: white on the light slides, bottom centre as in Canva (y 755). */
.sb-hero .flickity-page-dots { bottom: 40px; }
.sb-hero .flickity-page-dots .dot { background: #fff; opacity: .43; border: 0; }
.sb-hero .flickity-page-dots .dot.is-selected { opacity: 1; }
/* H7 phones/tablets: same three slides (Kertu's text-free art; her 866x1357 phone crops are a
   Paul upload, followups D11-P1), viewport height minus the 70px header, copy over a bottom shade.
   object-position: Flatsome prints #banner-<rand> .banner-bg img { object-position: center center }
   (1,1,1); :not(#sb-x) lifts ours to (1,3,0)+ without an ID in the markup or an !important. */
@media (max-width: 849px) {
    /* Cap 920 (was 760): a Pixel 6a is 412x915, so 760 left an 85px black band between the dots and
       the next section (Paul, 2026-10-06). 920 covers every phone up to 990 tall; taller just crops more. */
    :root { --sb-hero-h: clamp(480px, calc(100svh - 70px), 920px); }
    @supports not (height: 100svh) { :root { --sb-hero-h: clamp(480px, calc(100vh - 70px), 920px); } }
    .sb-hero .banner .bg:not(#sb-x) { object-position: 50% 20%; }
    /* Slide 1's lashes + tweezers sit in the left 5-40% of the 2560x1147 art and a 390-wide cover crop
       shows ~23% of its width: 18% keeps two lash clusters in frame (60% showed empty grey). On phones the
       art is wider than the box, so only x moves; y matters for portrait tablets, where the box is taller than wide. */
    .sb-hero .sb-hero__slide--1 .bg:not(#sb-x) { object-position: 18% 20%; }
    .sb-hero .sb-hero__slide--3 .bg:not(#sb-x) { object-position: 40% 25%; }
    .sb-hero .banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 55%, rgba(0,0,0,.92) 100%); pointer-events: none; z-index: 1; }
    .sb-hero .banner-layers { z-index: 2; }
    .sb-hero .sb-hero__copy.banner-layer, .sb-hero .sb-hero__copy--right.banner-layer { left: 24px !important; right: 24px !important; bottom: 150px !important; width: auto !important; max-width: none !important; text-align: left; }
    /* width !important: Flatsome prints the text_box width (30%) as an inline style, as on the copy box. */
    /* Vertical rhythm from the bottom (2026-10-06, Paul: the copy sat on the dots, then a 124px void under the
       buttons): dots 16 from the edge, buttons end 32 above the dots (bottom 64), copy 16-18 above the buttons:
       one CTA (slide 3) → copy at 64+52+18 = 134 → 150 with the lead's margin; two CTAs (slide 2) → 64+114+18 = 196 → 200;
       slide 1 keeps its button inside the copy box, so that box sits at 64. Gradient 72% keeps the whole stack readable. */
    .sb-hero .sb-hero__ctas.banner-layer { left: 24px !important; right: 24px !important; bottom: 64px !important; width: auto !important; }
    .sb-hero .sb-hero__kicker { font-size: 14px; margin-bottom: 6px; color: #fff; }
    .sb-hero .sb-hero__title { font-size: 34px; margin-bottom: 10px; color: #fff; }
    .sb-hero .sb-hero__lead { font-size: 16px; line-height: 1.35; max-width: none; color: #fff; }
    .sb-hero .sb-hero__copy--right .sb-hero__lead { margin-left: 0; }
    /* Slide 1's text_box has text_align="right" (.text-inner.text-right, Flatsome .text-right { text-align: right }). */
    .sb-hero .sb-hero__copy .text-inner { text-align: left; }
    .sb-hero .sb-btn, .sb-hero .sb-hero__copy--right .sb-btn { display: flex; width: 100%; min-width: 0; margin: 0 0 10px; }
    .sb-hero .sb-btn.sb-btn--black { --sb-btn-accent: #fff; }
    .sb-hero .sb-btn.sb-btn--black.button { color: #fff; }
    .sb-hero .sb-hero__copy--right .sb-btn { margin-top: 16px; }
    .sb-hero .flickity-page-dots { bottom: 16px; }
    /* Per-slide bottoms, at every phone height (0,4,0 !important, so they beat the (0,3,0) max-height
       rule below by specificity): slide 2 has two CTAs, 52 + 10 + 52 = 114 tall from bottom 24, so its
       copy sits at 24 + 114 + 16 = 154; slide 1's button lives inside its copy box, so that box goes to
       bottom 24 to put the button where slides 2 and 3 have theirs. */
    .sb-hero .sb-hero__slide--2 .sb-hero__copy.banner-layer { bottom: 200px !important; }
    .sb-hero .sb-hero__slide--1 .sb-hero__copy--right.banner-layer { bottom: 64px !important; }
    .sb-hero .sb-hero__slide--1 .sb-hero__copy--right .sb-btn { margin-bottom: 0; }
}
@media (max-width: 849px) and (max-height: 700px) {
    .sb-hero .sb-hero__lead { display: none; }
    .sb-hero .sb-hero__copy.banner-layer, .sb-hero .sb-hero__copy--right.banner-layer { bottom: 118px !important; }
    .sb-hero .sb-hero__slide--2 .sb-hero__copy.banner-layer { bottom: 180px !important; }
    .sb-hero .sb-hero__ctas.banner-layer, .sb-hero .sb-hero__slide--1 .sb-hero__copy--right.banner-layer { bottom: 48px !important; }
    .sb-hero .flickity-page-dots { bottom: 10px; }
}
/* Tablets 550-849 (Day 11 final fix A5): copy and CTA boxes 420 wide at left 24 instead of ~720 px
   wide pills. !important answers the phone block's own left/right ... !important and Flatsome's
   inline text_box style (width:30%); after the phone block, same (0,3,0) specificity. */
@media (min-width: 550px) and (max-width: 849px) {
    .sb-hero .sb-hero__copy.banner-layer, .sb-hero .sb-hero__copy--right.banner-layer, .sb-hero .sb-hero__ctas.banner-layer { right: auto !important; width: 420px !important; }
}

/* ------------------------------------------------------------------
   Sinu pilk (section 2). Canva: badge bottom-left, heading + copy +
   KATALOOG right, copy 16px/1.45 max 420px.
   ------------------------------------------------------------------ */
.sb-pilk .row { min-height: 780px; }
.sb-pilk__copy p { max-width: 420px; margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: #fff; }
/* Right-aligned under the left-aligned copy, as in Canva; same box as the hero buttons. */
.sb-pilk .sb-btn { display: flex; width: 240px; margin: 30px 0 0 auto; }
/* Badge ([shb_usp]): styles and motion in the USP badge and list block below. */

/* ------------------------------------------------------------------
   USP badge and list (fix list 4 and 12, Day 3). [shb_usp] (Sinu pilk
   badge) and [shb_usp_list] (staircase), inc/usp.php + sb-usp.js;
   replace Code Snippets 12 and 15. Static geometry is the snippets'
   verbatim (box, padding, border, D size, list offsets from inline
   styles); only the motion is new. The badge text has no opacity:0 of
   its own any more (Day 2 blank frames): only the whole item rolls,
   and the entering item starts on the same frame the leaving one does.
   ------------------------------------------------------------------ */
.shb-usp-widget { position: relative; display: inline-flex; align-items: center; gap: 16px; min-height: 78px; max-width: 420px; width: 100%; box-sizing: border-box; padding: 18px 28px 18px 46px; border-top: 1px solid #ff4ee3; border-right: 1px solid #ff4ee3; border-bottom: 1px solid #ff4ee3; border-left: none; border-radius: 0 999px 999px 0; background: rgba(5, 5, 9, .55); margin-left: 0; overflow: visible; }
.shb-usp-widget__circle { position: absolute; left: 0; top: 50%; width: 18px; height: 36px; border-radius: 0 999px 999px 0; background: #ff4ee3; transform: translateY(-50%); transform-origin: left center; }
.shb-usp-widget__items { flex: 1 1 auto; }
.shb-usp-widget__heading { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: #fff; }
.shb-usp-widget__subheading { display: block; font-size: .85rem; line-height: 1.3; color: rgba(255, 255, 255, .7); }
@media (max-width: 480px) {
    .shb-usp-widget { max-width: 100%; padding: 14px 22px 14px 40px; min-height: 68px; gap: 12px; }
    .shb-usp-widget__circle { width: 16px; height: 32px; }
    .shb-usp-widget__heading { font-size: .95rem; }
    .shb-usp-widget__subheading { font-size: .8rem; }
}
.shb-usp-list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.shb-usp-list__item { position: relative; display: flex; align-items: center; box-sizing: border-box; padding: 16px 30px 16px 46px; border-top: 1px solid #ee20ae; border-right: 1px solid #ee20ae; border-bottom: 1px solid #ee20ae; border-left: none; border-radius: 0 999px 999px 0; background: rgba(5, 5, 9, .45); }
.shb-usp-list__circle { position: absolute; left: 0; top: 50%; width: 16px; height: 32px; border-radius: 0 999px 999px 0; background: #ee20ae; transform-origin: left center; }
.shb-usp-list__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; overflow: hidden; }
.shb-usp-list__heading { font-weight: 700; font-size: 1rem; line-height: 1.3; color: #fff; overflow-wrap: break-word; }
.shb-usp-list__subheading { font-size: .85rem; line-height: 1.3; color: rgba(255, 255, 255, .75); overflow-wrap: break-word; }
/* !important beats the rows' inline margin-left/width (as in the snippet). */
/* R5b: each pill grows to its own text instead of wrapping (inline width:70%
   stays the floor, so short rows keep the 70% pill). */
.shb-usp-list__item { min-width: max-content; }
.shb-usp-list__text { flex-wrap: nowrap; white-space: nowrap; }
/* 850-1100: the column is too narrow for max-content pills plus their
   staircase offsets (the list clips), so rows wrap again below 1101. */
@media (max-width: 1100px) {
    .shb-usp-list__item { min-width: 0; }
    .shb-usp-list__text { white-space: normal; flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .shb-usp-list__item { margin-left: 0 !important; width: 100% !important; min-width: 0; padding: 14px 22px 14px 38px; }
    .shb-usp-list__text { white-space: normal; flex-wrap: wrap; }
}
/* Badge: the items box clips; the leaving line rolls up and out, the
   entering line rolls in from below; the outline and the D pulse pink. */
.shb-usp-widget__items { position: relative; min-height: 44px; overflow: hidden; }
.shb-usp-widget__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; opacity: 0; transform: translateY(100%); pointer-events: none; }
.shb-usp-widget__item.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.shb-usp-widget__item.is-leaving { position: absolute; animation: shbUspRollOut .5s cubic-bezier(.22,.61,.36,1) forwards; }
.shb-usp-widget__item.is-entering { animation: shbUspRollIn .55s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes shbUspRollOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }
@keyframes shbUspRollIn { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
.shb-usp-widget.is-switching { animation: shbUspPulse .9s ease-out; }
@keyframes shbUspPulse { 0% { box-shadow: 0 0 0 0 rgba(255,78,227,.7); } 100% { box-shadow: 0 0 26px 6px rgba(255,78,227,0); } }
.shb-usp-widget.is-switching .shb-usp-widget__circle { animation: shbUspDot .6s ease-out; }
@keyframes shbUspDot { 0% { transform: translateY(-50%) scale(1); } 40% { transform: translateY(-50%) scale(1.35); } 100% { transform: translateY(-50%) scale(1); } }
/* Staircase: rows roll in from the left one after another; the D pops. */
.shb-usp-list__item { opacity: 0; transform: translateX(-40px); }
.shb-usp-list__item.is-visible { animation: shbUspListIn .55s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--shb-delay, 0s); }
@keyframes shbUspListIn { to { opacity: 1; transform: none; } }
.shb-usp-list__circle { opacity: 0; transform: translateY(-50%) scale(.4); }
.shb-usp-list__item.is-visible .shb-usp-list__circle { animation: shbUspListDot .45s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: calc(var(--shb-delay, 0s) + .12s); }
@keyframes shbUspListDot { to { opacity: 1; transform: translateY(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .shb-usp-widget__item, .shb-usp-widget, .shb-usp-widget__circle, .shb-usp-list__item, .shb-usp-list__circle { animation: none !important; }
    .shb-usp-list__item, .shb-usp-list__circle { opacity: 1; transform: none; }
    .shb-usp-list__circle { transform: translateY(-50%); }
}

/* ------------------------------------------------------------------
   Join the Club band (section 6), fix list 9, Day 3. Canva: 287px purple
   band (the coral pink is gone), word list left with a thin rule, the
   middle word highlighted while the list rolls like film credits
   (sb-club.js), the JOIN THE CLUB art + tagline + email pill with an
   arrow button right. Reference: docs/design/home-desktop-2026-09-22-p7.jpg
   rows 5641-5928. Gradient stops are the Canva band's column means.
   Width: the row is already capped at --sb-page-max by the Page width
   block, so no max-width here. The section is hide-for-medium; nothing
   below applies a width that matters under 850.
   Since the Day 3 final fix the band also renders site-wide in the footer
   block (post 261, inside #footer, NOT hide-for-medium), so every form
   rule here is scoped under .sb-club (nothing styles a form-15 instance
   outside the band), the footer row gets the same 1440 cap as #main's
   full-width rows, and a plain phone layout sits at the end of the block.
   The title PNG (image 299, 1573x212) has 87px of transparent space
   above the letters: at 925px wide the letters are Canva's 837px
   (x 470-1307) and the -36px top margin puts them at band y+42.
   CF7 autop wraps the form fields in <p> with a <br>, so the flex row
   is .sb-club__form > p. Validation tip and response sit absolute
   under the pills, so an error never moves the band. The submit's
   "\2192" value is kept (screen readers get the JS aria-label) but drawn
   transparent; Canva's long thin arrow is an inline SVG background.
   ------------------------------------------------------------------ */
.sb-club { background: linear-gradient(90deg, #544657 0%, #483758 8%, #442e54 25%, #432557 50%, #473056 75%, #4d3451 100%); }
.sb-club .sb-club__row { min-height: 287px; }
/* .row-collapse > .col zeroes column padding with !important (0,2,0). */
.sb-club .row-collapse > .col.sb-club__list-col { padding-left: 50px !important; }
.sb-club__list { --sb-club-row: 42px; position: relative; height: calc(5 * var(--sb-club-row)); padding-left: 12px; border-left: 1px solid rgba(255,255,255,.45); overflow: hidden; }
/* Brighter segment of the rule next to the fixed highlight slot (row 3). */
.sb-club__list::before { content: ""; position: absolute; z-index: 1; left: -1px; top: calc(2 * var(--sb-club-row) + 4px); width: 2px; height: calc(var(--sb-club-row) - 8px); background: #fff; }
.sb-club__words { list-style: none; margin: 0; padding: 0; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
/* .sb-club prefix beats Flatsome's .col-inner ul li { margin-left: 1.3em }. */
.sb-club .sb-club__words li { height: var(--sb-club-row); line-height: var(--sb-club-row); margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; transition: font-size .3s, letter-spacing .3s, color .3s; }
.sb-club .sb-club__words li.is-active { font-size: 27px; letter-spacing: .1em; color: #fff; }
/* Loop reset: no transition on the list or the words, so jumping back one
   copy (same words in the same slots) is invisible. */
.sb-club__list.is-static .sb-club__words, .sb-club__list.is-static .sb-club__words li { transition: none; }
.sb-club .row-collapse > .col.sb-club__form-col { padding-left: 0 !important; padding-right: 20px !important; }
/* Beats Flatsome's .col + .col .col-inner { margin-left: 0 }: title and pills start at Canva's x 470. */
.sb-club .col + .sb-club__form-col > .col-inner { margin-left: -10px; }
/* #main/#footer + classes beat Flatsome's inline #image_... { width: 55% }
   (the footer band of block 261 renders in #footer, outside #main). */
#main .sb-club .sb-club__title, #footer .sb-club .sb-club__title { width: 925px; max-width: 100%; margin: -36px 0 0; }
.sb-club__tagline { margin: 12px 0 38px; font-size: 42px; line-height: 1.1; font-weight: 400; color: #fff; }
.sb-club__tagline strong { font-weight: 700; }
.sb-club .wpcf7 { position: relative; }
.sb-club .wpcf7-form { margin: 0; }
.sb-club .sb-club__form { max-width: 700px; }
.sb-club .sb-club__form > p { display: flex; align-items: center; gap: 15px; margin: 0; }
.sb-club .sb-club__form br, .sb-club .wpcf7-spinner { display: none; }
.sb-club .sb-club__form .wpcf7-form-control-wrap { position: relative; flex: 1 1 auto; display: block; }
.sb-club .sb-club__form input[type="email"] { width: 100%; height: 46px; min-height: 0; margin: 0; padding: 0 24px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; font-weight: 400; font-style: italic; letter-spacing: .15em; text-align: center; box-shadow: none; }
.sb-club .sb-club__form input[type="email"]::placeholder { color: rgba(255,255,255,.7); }
.sb-club .sb-club__form input[type="email"]:focus { border-color: #fff; outline: none; box-shadow: none; }
/* input.… beats Flatsome's .dark input[type="submit"] { color: #fff }. */
.sb-club .sb-club__form input.sb-club__submit { flex: 0 0 125px; width: 125px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'%3E%3Cpath d='M0 6h62M56 1l6 5-6 5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center / 64px 12px no-repeat; color: transparent; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color .25s, border-color .25s; }
.sb-club .sb-club__form input.sb-club__submit:hover, .sb-club .sb-club__form input.sb-club__submit:focus-visible { border-color: #fff; background-color: rgba(255,255,255,.2); outline: none; }
/* Flatsome draws the tip as a light tooltip box with an arrow; plain white text here. */
.sb-club .wpcf7 .wpcf7-not-valid-tip { position: absolute; left: 24px; top: 100%; margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; color: #fff; font-size: 13px; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.sb-club .wpcf7 .wpcf7-not-valid-tip::after, .sb-club .wpcf7 .wpcf7-not-valid-tip::before { display: none; }
.sb-club .wpcf7-response-output { position: absolute; left: 24px; top: 100%; margin: 6px 0 0 !important; border: 0 !important; padding: 0 !important; color: #fff; font-size: 13px; }
.sb-club .wpcf7-form.invalid .wpcf7-response-output { display: none; }
/* Honeypot (inc/klaviyo.php, Day 8): forms 15 and 910 get a sb_hp trap field; off-screen, not display:none. */
.sb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sb-club .sb-club__words, .sb-club .sb-club__words li { transition: none; } }
/* The Page width block caps #main's full-width rows only; same cap for the footer band and the footer row. */
@media (min-width: 850px) {
    #footer .row-full-width:not(.col .row-full-width) { max-width: var(--sb-page-max) !important; margin-left: auto !important; margin-right: auto !important; }
}
/* Phones/tablets (footer band, and since Day 13 the homepage band too; the footer copy is hidden on the homepage below 850, see Phone homepage):
   plain stacked layout, no word roll (sb-club.js sees row height 0). */
@media (max-width: 849px) {
    .sb-club .sb-club__row { min-height: auto; }
    .sb-club .sb-club__list, .sb-club .sb-club__list-col { display: none; }
    .sb-club .row-collapse > .col.sb-club__form-col { padding: 24px !important; }
    .sb-club .col + .sb-club__form-col > .col-inner { margin-left: 0; }
    #main .sb-club .sb-club__title, #footer .sb-club .sb-club__title { width: 90%; margin: -10px 0 0; }
    .sb-club .sb-club__tagline { margin: 8px 0 20px; font-size: 22px; }
    .sb-club .sb-club__form > p { flex-wrap: wrap; gap: 10px; }
    .sb-club .sb-club__form .wpcf7-form-control-wrap { flex: 1 1 100%; }
    .sb-club .sb-club__form input[type="email"] { font-size: 16px; letter-spacing: .05em; }
    .sb-club .sb-club__form input.sb-club__submit { flex: 0 0 auto; width: 100%; }
    .sb-club .wpcf7 .wpcf7-not-valid-tip { position: static; margin-top: 6px; white-space: normal; }
    .sb-club .wpcf7-response-output { position: static; }
}

/* ------------------------------------------------------------------
   Ripsmeid igale maitsele tiles (section 9), fix list 11, Day 3: one of
   the five blurred tiles is sharp at a time and the sharp one moves on
   every 3 s (sb-tiles.js); hovering a tile makes it the sharp one and
   pauses the rotation. Beats the Customizer's .blur-reveal img blur and
   .21s transition (0,1,1) with 0,2,1 / 0,3,1.
   ------------------------------------------------------------------ */
.sb-tiles .blur-reveal img { transition: filter .6s ease, transform .6s ease; }
.sb-tiles .blur-reveal.is-clear img { filter: blur(0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .sb-tiles .blur-reveal img { transition: none; } }

/* ------------------------------------------------------------------
   Category cards (section 3), fix list 6 and 7. Gradient glow instead
   of the magenta lines; red tones because the card art is red/pink.
   ------------------------------------------------------------------ */
.sb-cards {
    --sb-glow-1: rgba(190, 8, 24, .85);
    --sb-glow-2: rgba(150, 10, 40, .6);
    --sb-cards-top-fade: linear-gradient(to bottom, #000 0, rgba(0,0,0,.85) 70px, rgba(0,0,0,.3) 180px, transparent 300px);
}
/* Day 2b: blobs where Canva has them (strong bloom left of the top-left card,
   a second one bottom-right), overriding the generic .sb-glow positions. */
.sb-cards.sb-glow {
    background-image:
        var(--sb-cards-top-fade),
        radial-gradient(ellipse 55% 45% at 8% 22%, var(--sb-glow-1), transparent 70%),
        radial-gradient(ellipse 50% 40% at 92% 78%, var(--sb-glow-2), transparent 70%);
}
.sb-cards .rounded-banner { border-radius: 14px; overflow: hidden; }
.sb-cards .rounded-banner .banner-layers { border-radius: 14px; }
/* Fix list 6: the arrow slides when the whole card is hovered, not only the button. */
.sb-cards .rounded-banner:hover .sb-btn--icon::after { transform: translateX(6px); }
/* .sb-btn.button (system) sets margin:0 at two classes; three classes here. */
/* Day 2b: tarvikud card sits 240px lower (gap), so 240 - 52 = 188 puts POODI's
   bottom edge level with the tarvikud card's bottom edge. */
.sb-cards .sb-btn.sb-cards__poodi { margin-top: 188px; }
/* [text_box position_x="90"] is a 60%-wide box with a centred .text-inner,
   which left the arrow 200px in from the card's right edge. Right-align it
   so it sits in the bottom-right corner (~60px from the edge). */
.sb-cards .rounded-banner .text-inner { text-align: right; }
/* Canva (1440 design): cards 596px wide, outer gutter 44/60px, 146px
   between the columns. The 1080px container would start the left cards
   at x=188, so the rows are full-width with the gutters on the columns
   (45 outside, 73 inside). Flatsome's own col padding is 0 15px 30px. */
.sb-cards .row > .col:first-child { padding-left: 45px; padding-right: 73px; }
.sb-cards .row > .col:last-child  { padding-left: 73px; padding-right: 45px; }
/* Day 3 (R5): Kertu's label-free card images; the two-line label is text,
   placed where Canva bakes it: 52px in, small line top 94px below the card
   top, big line ~44px 900 uppercase. Flatsome's text_box is absolute
   (.x0 .y0 = left/top 0); pin it. The label rules are scoped to .sb-cards
   because Flatsome's .banner p (margin 1em 0) and .dark p (#f1f1f1) are
   (0,1,1) and beat a lone class. */
.sb-cards .sb-cards__label.banner-layer { left: 52px !important; top: 94px !important; right: auto !important; transform: none !important; width: auto; max-width: 80%; }
.sb-cards .sb-cards__label .text-inner { text-align: left; }
.sb-cards .sb-cards__label-small { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 500; color: #fff; }
.sb-cards .sb-cards__label-big { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; color: #fff; }

/* ------------------------------------------------------------------
   Phone homepage (Day 13). Spec: docs/superpowers/specs/2026-10-07-day13-mobile-homepage-design.md,
   Kertu's Canva phone strip (docs/mockups/canva-2026-10-05/mobile/). Below 850 the Day 3 sections
   render for the first time; headings with baked-in text are swapped for phone cuts of the frame
   (show-for-medium images, see docs/design/README.md Day 13). Rhythm: 48 section padding; side
   gutter --sb-m-gutter = 40 at 412 as measured on the frame (cards 36/38, tiles 40/43, the tiles
   heading's baked text starts at 45), scaling down to 24 on narrow phones; 24 between stacked cards.
   ------------------------------------------------------------------ */
@media (max-width: 849px) {
    /* Order. DOM (Task 2): hero, pilk, cards, calc, tiles, builtby, teab, club, steps, kogemus, insta,
       usp, reviews, blog, top5, cat. Kertu's phone order puts the steps before the mail: flex column on
       #content with order on the two; desktop keeps display:block. The steps rule repeats the ~ rule's
       selector so it outranks it (1,3,0 against 1,2,0). */
    .home #content { --sb-m-gutter: clamp(24px, 9.7vw, 40px); display: flex; flex-direction: column; }
    .home #content > * { order: 0; }
    .home #content > .sb-club { order: 2; }
    .home #content > .sb-club ~ * { order: 3; }
    .home #content > .sb-club ~ .sb-steps { order: 1; }
    /* One Join the Club per page: the mid-page band shows, the footer copy hides on the homepage. */
    .home #footer .sb-club { display: none; }
    /* Flatsome prints #section_<rand> { padding-top: 90px; padding-bottom: 90px } inline (pilk: 0px): !important. */
    .sb-pilk, .sb-cards, .sb-calc-section, .sb-tiles, .sb-teab, .sb-steps { padding-top: 48px !important; padding-bottom: 48px !important; }
    /* Same inline rule; the photo cut carries its own 9 px black strip, the frame has ~33 above the photo. */
    .sb-pilk { padding-top: 24px !important; }

    /* 2. Sinu pilk: black, full-bleed photo (corners and top strip baked into the cut) → heading →
       copy → KATALOOG, centred (slice 02). */
    .sb-pilk .section-bg { display: none; }
    .sb-pilk .row { min-height: 0; }
    /* Flatsome prints #row-<rand> > .col > .col-inner { padding: 120px 35px 60px 35px } for the row padding: !important. */
    .sb-pilk .row > .col > .col-inner { padding: 0 !important; }
    .sb-pilk .row > .col:nth-child(1), .sb-pilk .row > .col:nth-child(2) { display: none; } /* 420 gap + badge, spacer */
    .sb-pilk .row > .col:nth-child(3) { padding: 0; }
    .sb-pilk .sb-m-pilk-photo { margin: 0 0 16px; }
    /* The frame fades the photo into the black under the heading (slice 02); the cut ends in a hard edge. */
    .sb-pilk .sb-m-pilk-photo img { -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
    /* ux_image width="100" prints #image_<rand> { width: 100% }: !important. 72 % = the frame's heading width. */
    .sb-pilk .sb-pilk__heading { width: 72% !important; margin: 0 auto 24px; }
    .sb-pilk__copy { padding: 0 var(--sb-m-gutter); }
    .sb-pilk__copy p { max-width: 34ch; margin: 0 auto 10px; text-align: center; }
    /* 196 = the frame's button; min-width too, the base .sb-btn has min-width 210. */
    .sb-pilk .sb-btn { width: 196px; min-width: 196px; margin: 32px auto 0; }

    /* 3. Category cards: four stacked 3:2 cards inside the gutters (slice 03); gaps and POODI are
       hide-for-medium. :first-child/:last-child to outrank the desktop column gutters (0,4,0). */
    .sb-cards .row > .col:first-child, .sb-cards .row > .col:last-child { padding: 0 var(--sb-m-gutter) 24px; }
    .sb-cards .row:last-child > .col:last-child { padding-bottom: 0; }
    /* ux_banner prints its height inline as #banner-<rand> { padding-top: 450px }: !important. */
    .sb-cards .rounded-banner { padding-top: 0 !important; height: auto; aspect-ratio: 3 / 2; border-radius: 16px; }
    .sb-cards .rounded-banner .banner-layers { border-radius: 16px; }
    .sb-cards .sb-cards__label.banner-layer { left: 24px !important; top: 24px !important; } /* desktop rule is !important */
    .sb-cards .sb-cards__label-small { font-size: 18px; }
    .sb-cards .sb-cards__label-big { font-size: 26px; }

    /* 4. Calculator: phone heading row full width, then the card inside the gutters (slice 04). The
       collapse row's first column only holds the desktop heading (328, hide-for-medium). */
    .sb-calc-section .sb-calc-section__m-head > .col { padding: 0; }
    .sb-calc-section .sb-m-calc-heading { margin: 0; }
    /* The cut's purple glow runs into its bottom edge; continue it under the heading (same colour and
       falloff as the cut's last row, measured: peak rgb(72,39,90) at 25 %, gone by ~78 %) so there is no seam.
       The card's glass shows it through, as in the frame; 1 px overlap hides the image's antialiased last row. */
    .sb-calc-section .sb-calc-section__m-head > .col { position: relative; }
    .sb-calc-section .sb-calc-section__m-head > .col::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 180px; z-index: 0; pointer-events: none;
        background: radial-gradient(ellipse 55% 100% at 25% 0, rgb(72, 39, 90) 0%, rgba(72, 39, 90, .6) 45%, rgba(72, 39, 90, .2) 80%, transparent 100%); }
    /* 32 under the heading on the row, not on the image: the column is a flex item, so an image margin
       would stretch it and push the glow 32 px down. */
    .sb-calc-section .row-collapse { position: relative; z-index: 1; margin-top: 32px; }
    .sb-calc-section .row-collapse > .col:first-child { display: none; }
    /* .row-collapse > .col { padding: 0 !important } (Flatsome): the gutter goes on the col-inner. */
    .sb-calc-section .row-collapse > .col:last-child > .col-inner { padding: 0 var(--sb-m-gutter); }
    .sb-calc-section .row-collapse > .col:last-child p:last-child { margin-bottom: 0; }

    /* 5. Ripsmeid igale maitsele: phone heading, then five stacked tiles, sharp (slice 05).
       The Customizer blurs .blur-reveal img (0,1,1); .sb-tiles in front gives (0,2,1).
       The live tile art is a square box on a transparent margin (38/400 each side) with the style
       name at its bottom edge, so the tile scales the box to the tile width and shows its lower
       part at 4:3 (Kertu's 1.71 crop would cut the name off). */
    .sb-tiles .row > .col { padding: 0 var(--sb-m-gutter) 24px; }
    .sb-tiles .sb-tiles__m-head > .col { padding: 0 0 16px; }
    .sb-tiles .row:last-child > .col:nth-child(2) { padding-bottom: 0; }
    .sb-tiles .blur-reveal img, .sb-tiles .blur-reveal:hover img, .sb-tiles .blur-reveal.is-clear img { filter: none; transform: none; transition: none; }
    .sb-tiles .blur-reveal .img-inner { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; }
    /* width 400/324; left -38/324; top 0.75 - 362/324 of the tile width. */
    .sb-tiles .blur-reveal img { display: block; width: 123.46%; max-width: none; height: auto; margin: -36.73% 0 0 -11.73%; }

    /* 6. Built by: the phone cut, full width, margins baked in; 48 above, the teab follows directly (slice 06).
       .img has Flatsome's 1em bottom margin. */
    .home #content > .sb-builtby--m { margin: 0; padding-top: 48px; background: #000; }
    .sb-builtby--m img { display: block; width: 100%; }

    /* 7. Teab: black, phone cut (logo, copy, photo, copy), then KÕIGEST TÄPSEMALT left-aligned with the
       cut's baked copy (x 64/1200 = 5.33 %), 32 under the cut (+12 of black baked in = 44, as slice 07). */
    .sb-teab .section-bg { display: none; }
    .sb-teab { background-color: #000; padding-top: 0 !important; } /* inline #section_<rand> { padding-top: 90px } (Built by's 48 sits above) */
    .sb-teab .section-content > .row > .col:first-child { padding: 0; }
    .sb-teab .section-content > .row > .col:first-child > .col-inner { padding: 0 !important; } /* col padding="100px 0 0 0" prints #col-<rand> > .col-inner inline */
    .sb-teab .sb-m-teab { margin: 0; }
    .sb-teab .sb-m-teab img { display: block; width: 100%; }
    .sb-teab .row .row { margin: 32px 0 0; }
    .sb-teab .row .row > .col { padding: 0 0 0 5.33%; }
    .sb-teab .sb-btn { margin: 0; }

    /* 8. Steps: four stacked 5:4 tiles inside the gutters, number + caption over a bottom shade (slice 08).
       sb-steps.js only builds the carousel at 850+, so a page loaded below 850 has no .steps-carousel-shell
       and no arrows; a page loaded at 850+ and then narrowed keeps the shell and arrows sb-steps.js made,
       hence the shell's max-width: none below and the hidden arrows. The
       Customizer's STEPS CAROUSEL base and (max-width: 849px)/(max-width: 549px) rules make a horizontal
       scroller; each property is repeated with .sb-steps in front (0,2,0+ beats 0,1,0 / 0,2,0),
       !important where the Customizer has it. Radius 8: the frame's tile corners measure ~5-8 px (as the
       style tiles above), not the cards' 16. */
    .sb-steps .steps-carousel-shell { max-width: none; }
    .sb-steps .steps-carousel { display: block !important; overflow: visible !important; scroll-snap-type: none; gap: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 var(--sb-m-gutter) !important; }
    .sb-steps .steps-carousel > .col { flex: none !important; width: 100% !important; max-width: none !important; padding: 0 0 24px !important; scroll-snap-align: none; }
    .sb-steps .steps-carousel > .col:last-child { padding-bottom: 0 !important; }
    .sb-steps .steps-carousel > .col > .col-inner { padding: 0; }
    .sb-steps .steps-carousel .box { border-radius: 8px; }
    /* ux_image_box image_height="100%" prints style="padding-top:100%" inline on .image-cover: !important. The GIFs are 1350x1080 (5:4). */
    .sb-steps .steps-carousel .box-image .image-cover { padding-top: 80% !important; }
    /* Shade over the lower 55 %, transparent to black; replaces the Customizer's 58 % ramp (same properties). */
    .sb-steps .steps-carousel .box-image::after { height: 55%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.88) 100%); }
    /* Customizer: position relative, margin-top -105 / -90, padding, min-height 105, all !important. */
    .sb-steps .steps-carousel .box-text { position: absolute !important; left: 20px; right: 20px; bottom: 18px; top: auto; width: auto; margin: 0 !important; padding: 0 !important; min-height: 0 !important; text-align: left; }
    .sb-steps .steps-carousel .box-text::after { display: none; } /* the Customizer's black block under the text */
    .sb-steps .sb-step { display: flex; align-items: flex-end; gap: 12px; }
    .sb-steps .sb-step__num { font-size: 56px; line-height: .8; font-weight: 300; color: #fff; }
    .sb-steps .sb-step__cap { font-size: 20px; line-height: 1.15; font-weight: 500; color: #fff; text-align: left; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

    /* 9. Join the Club mid-page: the band's phone rules (Join the Club block) apply, with the frame's
       composition on top (slice 09, measured at 412): everything centred, title 305 px wide at 412 (74 % of the band), tagline
       24 px on two lines, ~40 between title, tagline and pill, a small arrow pill under the email field,
       48 above and below. #main + .home outrank the band's own phone rules (1,2,0 / 0,4,0 !important). */
    .home #main .sb-club .row-collapse > .col.sb-club__form-col { padding: 48px var(--sb-m-gutter) !important; } /* band rule is !important */
    /* The live art is one line (1573x212), the frame's is two: 92 % of the inner width = the frame's 305 px at 412. */
    .home #main .sb-club .sb-club__title { width: 92%; margin: 0 auto; }
    .home #main .sb-club .sb-club__tagline { max-width: 205px; margin: 36px auto; font-size: 24px; line-height: 1.3; text-align: center; }
    .home #main .sb-club .sb-club__form > p { justify-content: center; gap: 28px; }
    .home #main .sb-club .sb-club__form input[type="email"] { height: 54px; text-align: center; }
    .home #main .sb-club .sb-club__form input.sb-club__submit { flex: 0 0 72px; width: 72px; min-width: 0; height: 54px; background-size: 32px auto; }
}
/* Tablets 550–849: the phone strip has no tablet frame; stack as on phones (Flatsome's medium-4/-6 would keep
   two and three columns from 550), cap the stacks and the full-width cuts at 600 and centre them. */
@media (min-width: 550px) and (max-width: 849px) {
    .sb-pilk .row > .col:nth-child(3), .sb-cards .row > .col, .sb-calc-section .row > .col, .sb-tiles .row > .col,
    .sb-teab .section-content > .row > .col:first-child { flex-basis: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
    .home #content > .sb-builtby--m { max-width: 600px; margin: 0 auto; }
    .sb-steps .steps-carousel { max-width: 600px !important; margin: 0 auto !important; } /* the phone rule above is !important */
    /* The band's form column keeps Flatsome's medium-8 (512 at 768) with the word list hidden: full row, capped, centred. */
    .home #main .sb-club .row-collapse > .col.sb-club__form-col { flex-basis: 100%; max-width: 600px; margin: 0 auto; }
}

/* ------------------------------------------------------------------
   she's back teab (section 5) and blog teaser (section 14), Day 3 polish.
   Flatsome gives every .col (the outer column and the button's col_inner)
   padding-bottom 30px, which stacked 60px of empty band under KÕIGEST
   TÄPSEMALT and BLOGI before the section's own 90px padding. Zero them;
   the row heights come from the page ([gap] 440 = the teab left column's
   content, [gap] 40 above BLOGI in place of the last card row's padding).
   ------------------------------------------------------------------ */
.sb-teab .col { padding-bottom: 0; }
/* The band is now 620px, the 16:9 photo (img.bg, object-fit cover) is 801px
   tall at 1440: bias the crop downwards so her head keeps its headroom and
   the 181px overflow comes off her lower torso (before: 20/20, now 45/136). */
.sb-teab .section-bg img.bg { object-position: 50% 25%; }
/* Desktop only: .sb-blog also renders on phones (no hide-for-medium), where the
   posts stack one per row and that padding is the space between them; the
   page's [gap] carries hide-for-medium for the same reason. Flatsome turns the
   [blog_posts] row into a Flickity slider once it scrolls into view, moving the
   post cols under .flickity-slider: cover both states (a horizontal slider
   needs no row spacing, so every cell drops the padding there). */
@media (min-width: 850px) {
    .sb-blog .section-content > .row > .col, .sb-blog .sb-blog__cta > .col,
    .sb-blog .sb-blog-list > .col:nth-last-child(-n+2), .sb-blog .sb-blog-list .flickity-slider > .col { padding-bottom: 0; }
}

/* ------------------------------------------------------------------
   Calculator (section 4), fix list 8. Markup from [sb_kalkulaator]
   (inc/calculator.php), logic in assets/js/sb-calc.js. Ported from the
   Calculator 3 snippet (rk3- -> sb-calc-); the glass card with the purple
   glow is kept from the first Calculator snippet ("that glass effect is
   cool"), the pill button is replaced by the shared .sb-btn arrow button,
   question text is 20px white with the key word in #c77dff, answer 22px.
   Day 3 (client h, R4): Kertu's spec (TEKSTID/AVALEHT 24.09) - three
   questions (days between visits, price, time per visit), then the yearly
   cost in EUR and hours and what She's Back saves (EUR, hours, % badge).
   The card is centred (text, arrow under the answer, POODI) and has no
   border, as in Canva; the glass blur and the glow stay.
   ------------------------------------------------------------------ */
/* Flatsome rows are flex; centre the card against the taller heading image (Canva). */
.sb-calc-section .row { align-items: center; }
.sb-calc-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 0 60px rgba(124, 58, 237, .35);
    color: #fff;
    font-family: inherit;
    overflow: hidden;
    box-sizing: border-box;
}
.sb-calc-wrapper * { box-sizing: border-box; }
/* Purple glow blobs in the corners, behind the steps (z-index 1 below) */
.sb-calc-wrapper::before, .sb-calc-wrapper::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    pointer-events: none;
}
.sb-calc-wrapper::before {
    top: -70px;
    left: -70px;
    background: radial-gradient(circle, rgba(199, 125, 255, .38) 0%, rgba(0, 0, 0, 0) 70%);
}
.sb-calc-wrapper::after {
    right: -70px;
    bottom: -70px;
    background: radial-gradient(circle, rgba(124, 58, 237, .45) 0%, rgba(0, 0, 0, 0) 70%);
}

.sb-calc-body { padding: 40px 40px 44px; }

.sb-calc-step { display: none; position: relative; z-index: 1; }
.sb-calc-step.sb-calc-active { display: block; animation: sbCalcFade .25s ease; }
@keyframes sbCalcFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Question */
.sb-calc-question {
    margin: 0 0 28px;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}
.sb-calc-highlight { color: #c77dff; font-weight: 700; }
.sb-calc-question, .sb-calc-answer-text, .sb-calc-result-intro { text-align: center; }

/* Slider: pink-to-purple track, diamond thumb (Canva) */
.sb-calc-slider-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 70px;   /* "20 min" / "225 min" */
    align-items: center;
    column-gap: 18px;
    width: 100%;
    margin-bottom: 30px;
}
.sb-calc-min, .sb-calc-max {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
}
.sb-calc-max { text-align: right; }
.sb-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    outline: none;
    background: linear-gradient(90deg, #ff2fb3, #c77dff, #7b3fe4);
    cursor: pointer;
}
.sb-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff9ad9 0%, #c77dff 100%);
    transform: rotate(45deg);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 14px rgba(199, 125, 255, .55);
}
.sb-calc-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff9ad9 0%, #c77dff 100%);
    transform: rotate(45deg);
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 14px rgba(199, 125, 255, .55);
}
.sb-calc-slider::-moz-range-track {
    height: 5px;
    border-radius: 10px;
    background: linear-gradient(90deg, #ff2fb3, #c77dff, #7b3fe4);
}

/* Answer line + arrow button (.sb-btn system; only spacing here) */
.sb-calc-answer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.sb-calc-answer-text {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 600;
}
.sb-calc-answer-text span {
    display: inline-block;
    min-width: 45px;
    padding: 0 7px 3px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-bottom: 2px solid #c77dff;
}
.sb-calc-answer-row .sb-btn { flex-shrink: 0; }

/* Result step */
.sb-calc-result-intro { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 600; color: #fff; }
.sb-calc-result { font-size: 44px; font-weight: 800; line-height: 1.1; color: #fff; }
.sb-calc-result-sep { margin: 0 14px; font-size: 22px; font-weight: 500; }
.sb-calc-result { margin-bottom: 0; text-align: center; }   /* Flatsome p margin would double the gap */
.sb-calc-step[data-step="4"] { text-align: center; }
.sb-calc-step[data-step="4"] .sb-btn { display: inline-flex; }
/* Flatsome's .dark p (0,1,1) beats a lone class (0,1,0) and left the figure
   #f1f1f1 instead of white; win with an element selector here (Day 9 C6) and
   two classes below for the --save variant. */
.sb-calc-wrapper p, .sb-calc-wrapper .sb-calc-result { color: #fff; }
.sb-calc-wrapper .sb-calc-result--save { color: #c77dff; }
.sb-calc-result-intro--save { margin-top: 26px; }
.sb-calc-result--save + .sb-btn { margin-top: 26px; }
/* Savings share badge; hidden by sb-calc.js when there is no saving */
.sb-calc-pct { display: inline-block; vertical-align: middle; margin-left: 12px; padding: 4px 12px 5px; border-radius: 999px; background: #c77dff; color: #000; font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: .02em; }
.sb-calc-pct[hidden] { display: none; }

/* Mobile (Day 4 will revisit; carried over from the snippet minus the pill button) */
@media (max-width: 600px) {
    .sb-calc-body { padding: 26px 20px 30px; }
    .sb-calc-question { margin-bottom: 26px; }
    /* "20 min" / "225 min" at 15px (R4); the old 28/42px columns only fit "1"/"45" */
    .sb-calc-slider-row { grid-template-columns: 50px minmax(0, 1fr) 60px; column-gap: 10px; margin-bottom: 28px; }
    .sb-calc-min, .sb-calc-max { font-size: 15px; }
    .sb-calc-slider { height: 4px; }
    .sb-calc-slider::-webkit-slider-thumb { width: 22px; height: 22px; }
    .sb-calc-slider::-moz-range-thumb { width: 22px; height: 22px; }
    .sb-calc-answer-row { gap: 16px; }
    .sb-calc-answer-text { font-size: 20px; }
    .sb-calc-answer-text span { min-width: 35px; padding: 0 5px 2px; }
    .sb-calc-result { font-size: 34px; }
}
@media (max-width: 390px) {
    .sb-calc-body { padding-left: 16px; padding-right: 16px; }
    .sb-calc-answer-text { font-size: 18px; }
}

/* ------------------------------------------------------------------
   Steps carousel (section 7), fix list 10, rebuilt Day 2c to the Canva
   measurements (docs/design/home-desktop-attributes.md, "Steps carousel
   (Day 2c reference)"; design px at 1440) and made proportional to the
   viewport on Day 2d (Paul's review 2026-09-23: on a laptop narrower than
   Canva's 1440 frame the fixed 450px tiles were cut far more than in the
   design and the side "2." disappeared).
   Every length that came from the Canva sheet is written as
   calc(N * var(--sb-u)), where --sb-u is one Canva design px: the shell
   width (the viewport without the scrollbar, capped at the page's 1440
   band, --sb-page-max) over Canva's 1440 frame. So the section is the
   Canva frame scaled to the window up to 1440: u = 0.889 at 1280, 0.833
   at 1200, and u = 1 from 1440 up (tiles stay 450). From 1440 up the
   section is the 1440 frame itself, centred, with black either side
   (R3b). The
   numbers below are therefore the Canva design px, unchanged since Day 2c.
   Tiles 450 x 358, pitch 548 (gap 98), square corners, no border, the
   photo bleeding to a black section. The active tile is centred in the
   shell (the viewport, or the 1440 band from 1440 up) and the neighbours
   are cut by the shell edges: the track
   carries calc(50% - 225 * u) of padding at both ends, so scrollLeft =
   index * 548u centres tile `index`. sb-steps.js needs no number of its
   own: it measures the pitch as the distance between two tiles' offsetLeft
   and maxScroll from scrollWidth, so both follow u by themselves.
   Each tile has a bottom shade (tile y + 128 to the bottom, transparent
   to black) and, when it is not the active one, a black linear-gradient
   overlay over photo and text alike (Day 2e; Canva's own side fade).
   The step number (123.5px, left edge 6px left of the tile, em-box top
   72px above the tile bottom = baseline 52px below it) and the 3-line
   caption (32/31, x = tile + 96, first line top 45px above the tile
   bottom) hang off the bottom of the photo, so .box-text is an absolute
   overlay on the tile and .box must not clip it.
   Section height 523 = 68 above the tiles + 358 + 97 below (the number
   hangs 52 below the tile and Canva leaves 45 under its baseline); the
   97 sits on the track as padding-bottom, not on the section, because
   the track is a scroll container and clips outside its padding box, and
   the 68 sits on the shell (see .sb-steps).
   No font-family: the site has no Greycliff, only the Canva sizes (R5).
   The Customizer CSS (site/custom-css.css, "STEPS CAROUSEL") boxes the
   shell at 1080, sets gap/col widths/paddings with !important, keeps the
   box overflow hidden, pulls .box-text up by -105 and paints its own
   58 % bottom gradient, so every override below repeats the Customizer
   selector with .steps-carousel-shell in front and !important where the
   Customizer uses it. Everything is inside the min-width:850px query:
   the section is hide-for-medium today, and if it is ever unhidden the
   Customizer's own tablet/mobile rules should be what applies there.
   ------------------------------------------------------------------ */
/* One Canva design px. --sb-steps-vw is documentElement.clientWidth,
   written on this element by sb-steps.js; 100vw is only the fallback (it
   includes the scrollbar). Capped at the page's 1440 band (Day 3): past
   that the tiles stop growing, as the rest of the content does, while
   the black section and the track still span the window. Defined here,
   outside the desktop query, because a custom property costs nothing where it is
   unused and every rule below - including the shell's own padding-top -
   has to be able to read it. */
.steps-carousel-shell { position: relative; --sb-u: calc(min(var(--sb-steps-vw, 100vw), var(--sb-page-max)) / 1440); }
/* The Customizer gives .box-text z-index 4; make the track a stacking
   context so nothing escapes above the arrows. */
.steps-carousel-shell > .steps-carousel { z-index: 1; }
/* hide the old thin chevrons from the Customizer CSS */
.steps-carousel-shell .steps-carousel-arrow { display: none; }
/* Below the desktop breakpoint the row is the Customizer's again, so the
   arrows sb-steps.js appends would be unstyled buttons. */
@media (max-width: 849px) {
    .sb-steps-arrow { display: none; }
}

@media (min-width: 850px) {
    /* Canva: 68 above the tiles, 45 under the number baseline, which sits
       52 below the tile: 358 + 68 + 97 = 523, all in design px, so the
       section is 523u tall. Flatsome prints the section padding as an
       inline #id rule, so !important is needed to zero it.
       Neither 68 nor 97 can sit on the section: --sb-u is defined on the
       shell, the only element that sees the --sb-steps-vw sb-steps.js
       writes there, so a rule on the section could not scale with it. The
       97 below the tiles has a second reason to be the track's padding:
       the Customizer makes the track a scroll container (overflow-x auto),
       and a scroll container clips everything outside its padding box, so
       the number and caption that hang 52 below the photo were cut off at
       the tile bottom when the 97 sat on the section. The 68 above them
       goes on the shell, which is the section's only content. */
    .sb-steps { padding-top: 0 !important; padding-bottom: 0 !important; background-color: #000; }
    /* Out of Flatsome's 1080 container to the viewport, capped at the
       page's 1440 band and centred (R3b), plus the 68 above the tiles.
       --sb-steps-vw is written by sb-steps.js from
       documentElement.clientWidth, so below 1440 the row is exactly as wide
       as the viewport without the scrollbar (plain 100vw includes it and
       would add a horizontal scrollbar); 100vw is only the fallback. From
       1440 up the shell is the 1440 frame: the track, side tiles and
       arrows (absolute on the shell) are clipped/placed at the band edges
       and the black section fills the rest. */
    .section .steps-carousel-shell {
        --sb-steps-w: min(var(--sb-steps-vw, 100vw), var(--sb-page-max));
        max-width: none; width: var(--sb-steps-w); margin-left: calc(50% - var(--sb-steps-w) / 2);
        padding-top: calc(68 * var(--sb-u));
    }
    /* Tighter 40u gap; the edge cards stop 100u short of centre, symmetrically.
       The script measures actual card centres and clamps to the scroll bounds. */
    .steps-carousel-shell .steps-carousel {
        gap: calc(40 * var(--sb-u)) !important;
        scroll-snap-type: none;
        padding-left: max(0px, calc(50% - 325 * var(--sb-u))) !important;
        padding-right: max(0px, calc(50% - 325 * var(--sb-u))) !important;
        /* The section's 97 below the tiles (see .sb-steps). It is also the
           clipping budget: the hang below the photo must stay under 97u or
           the track clips it. Number box bottom today: 308 + 123.5 = 431.5
           of the 455 padding box (design px). */
        padding-bottom: calc(97 * var(--sb-u)) !important;
    }
    /* Flatsome's .row carries a clearfix ::after (content:""; display:table).
       In a flex row that is a fifth, zero-width flex item, so the gap adds
       one trailing 98u to the track's scrollable width (maxScroll measured
       1742 instead of 3 x 548 = 1644) and the row could be dragged 98 past
       the last tile's centred position. Useless in flex; drop it. */
    .steps-carousel-shell .steps-carousel::after { display: none !important; }
    .steps-carousel-shell .steps-carousel > .col {
        flex: 0 0 calc(450 * var(--sb-u)) !important;
        width: calc(450 * var(--sb-u)) !important;
        max-width: calc(450 * var(--sb-u)) !important;
        padding: 0 !important;
        scroll-snap-align: none;
        /* the side-fade overlay (::after, further down) anchors here */
        position: relative;
    }
    /* The tile: exactly 450u x 358u whatever the source aspect, square
       corners, and overflow visible so the number and caption can hang
       below the photo. */
    .steps-carousel-shell .steps-carousel .box {
        overflow: visible !important; background: transparent !important; border-radius: 0 !important;
    }
    .steps-carousel-shell .steps-carousel .box-image {
        position: relative !important; width: calc(450 * var(--sb-u)) !important; height: calc(358 * var(--sb-u)) !important;
        overflow: hidden !important; border-radius: 0 !important;
    }
    .steps-carousel-shell .steps-carousel .box-image .image-cover {
        padding-top: 0 !important; height: calc(358 * var(--sb-u)) !important;
    }
    .steps-carousel-shell .steps-carousel .box-image img {
        width: calc(450 * var(--sb-u)) !important; height: calc(358 * var(--sb-u)) !important;
        object-fit: cover !important; border-radius: 0 !important;
    }
    /* Bottom shade: 230 tall (tile y + 128 to the tile bottom), transparent
       to black. Canva samples at x 730: 6300 #372d2a, 6324 #231d1b,
       6340 #110d0d, 6356 #000. Replaces the Customizer's 58 % gradient. */
    .steps-carousel-shell .steps-carousel .box-image::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
        height: calc(230 * var(--sb-u)); z-index: 2; pointer-events: none;
        background: linear-gradient(to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.10) 30%,
            rgba(0,0,0,.28) 55%,
            rgba(0,0,0,.55) 72%,
            rgba(0,0,0,.80) 85%,
            rgba(0,0,0,.95) 94%,
            #000 100%);
    }
    /* Side tiles: a linear gradient, not a flat panel (Day 2e, Paul: "fading
       still, it's not gradual, it's the whole card equally"). Canva dims the
       neighbours with black images that carry a linear alpha ramp and lie
       ABOVE the number and the caption, so photo and text fade together:
       left neighbour opaque at x 1 of the tile box (10 % of the 450 width)
       running to alpha 0 at x 315 (79.8 %), right neighbour alpha 0 at 5.1 %
       running to opaque at 85.1 %. Everything past those points is
       undimmed, which is why Canva's "4." is white and its "2." is nearly
       gone. The overlay sits on the col, not on the photo box, so it also
       covers the number and caption hanging below the photo, and it reaches
       97u down - the track's padding-box bottom, so it adds no scrollable
       overflow. It is painted at z-index 5, above .box-text's 4; the arrows
       stay above it because the whole track is a z-index 1 stacking context
       and they are the shell's children. See the overlay rules below. */
    .steps-carousel-shell .steps-carousel > .col::after {
        content: ""; position: absolute; left: 0; right: 0; top: 0;
        bottom: calc(-97 * var(--sb-u));
        z-index: 5; pointer-events: none; opacity: 0;
        transition: opacity .45s ease;
    }
    /* Everything left of the active tile; the immediate neighbour is the one
       on screen. Without :has() support the left tile simply stays undimmed. */
    .steps-carousel-shell .steps-carousel > .col:has(~ .is-active)::after {
        background: linear-gradient(to right, #000 10%, transparent 79.8%);
        opacity: 1;
    }
    .steps-carousel-shell .steps-carousel > .is-active ~ .col::after {
        background: linear-gradient(to right, transparent 5.1%, #000 85.1%);
        opacity: 1;
    }
    /* The gradient itself must not animate (only the opacity does), and the
       fade follows the same reduced-motion rule as the text nudge. */
    @media (prefers-reduced-motion: reduce) {
        .steps-carousel-shell .steps-carousel > .col::after { transition: none; }
    }
    /* Number + caption overlay, positioned on the tile itself. */
    .steps-carousel-shell .steps-carousel .box-text {
        position: absolute !important; left: 0 !important; top: 0 !important;
        width: calc(450 * var(--sb-u)) !important; height: calc(358 * var(--sb-u)) !important;
        margin: 0 !important; padding: 0 !important; min-height: 0 !important;
        z-index: 4 !important; background: transparent !important; pointer-events: none; color: #fff !important;
    }
    .steps-carousel-shell .steps-carousel .box-text::after { display: none !important; }
    /* The tile left of the active one is the one the viewport cuts, and
       Canva nudges exactly that tile's text group right so the number stays
       on screen: in the p7 element list the centre tile's "3." sits at
       tile - 6 and its caption at tile + 96, while the cut left tile's "2."
       sits at tile + 51 and its caption at tile + 153 - the same group,
       moved 57 right. Without it the "2." Paul asked for is ~60px off the
       left edge at every width, because a real carousel cannot hand-place
       each tile the way the mockup does. The transition makes it slide with
       the scroll instead of jumping when .is-active moves. */
    .steps-carousel-shell .steps-carousel > .col:has(+ .is-active) .box-text {
        transform: translateX(calc(57 * var(--sb-u)));
    }
    .steps-carousel-shell .steps-carousel > .col .box-text { transition: transform .45s ease; }
    /* sb-steps.js makes every move instant under reduced motion; the nudge
       has to follow, or the text would still slide. */
    @media (prefers-reduced-motion: reduce) {
        .steps-carousel-shell .steps-carousel > .col .box-text { transition: none; }
    }
    /* top is NOT the Canva em-box top (286 = 358 - 72): it is set so the
       ink bottom of "N." lands 52px below the photo bottom, as in Canva
       (baseline 6407 vs photo bottom 6355). Nunito's baseline sits ~21px
       higher in its em box than Greycliff's: with fontBoundingBox
       125 up / 44 down in a 123.5 line box the baseline is at top + 102.25,
       so 286 put the ink 31 below the photo; 308 measures 52 on a
       screenshot crop (307 measured 51.4). Day 2c review fix 1. The ink
       relation is linear in the font size, so scaling both by u keeps it. */
    .steps-carousel-shell .steps-carousel .sb-step__num {
        position: absolute; left: calc(-6 * var(--sb-u)); top: calc(308 * var(--sb-u));
        font-size: calc(123.5 * var(--sb-u)); line-height: calc(123.5 * var(--sb-u));
        font-weight: 400; letter-spacing: 0;
        color: #fff; white-space: nowrap;
    }
    /* top likewise set by ink, not by the Canva line-box top (313): in
       Canva the first line's cap top is ~36px above the photo bottom and
       the last line's ink bottom (descender included) ~2px below the
       number's ink bottom. Nunito 32/31 puts each baseline at top + 26 and
       the cap height is 23, so 318 gives ink top 37 above the photo bottom
       and the last baseline 48 below it (54 with a p/j descender).
       left is Canva's 96 + 19: Nunito's "3." is 19px wider in ink than
       Greycliff's, so at 96 the air between the number and the caption was
       ~10px where Canva has 31. The gap wins over the caption's absolute x
       (Task 7 ruling). Measured as ink columns on a DPR 1.5 screenshot
       (column projection over the number + caption band, brightness
       threshold, glyph-internal gaps merged): 26px live against 29-30 in
       the Canva render by the same method, i.e. within the +-4 tolerance;
       the sheet's "10 -> 31" reads ~3px wider than this method. */
    .steps-carousel-shell .steps-carousel .sb-step__cap {
        position: absolute; left: calc(115 * var(--sb-u)); top: calc(318 * var(--sb-u));
        font-size: calc(32 * var(--sb-u)); line-height: calc(31 * var(--sb-u));
        font-weight: 600; text-align: left;
        color: #fff; white-space: nowrap;
    }
    /* No dimmed colour for the side number and caption any more (Day 2e):
       they are white like the active tile's and the gradient overlay above
       them does the fading, which is what makes it gradual instead of one
       flat step per tile. */
    /* Arrows: solid white, 31 x 41 design px, 63 from the left edge of the
       shell (viewport or 1440 band) and 73 from the right, centred on tile top + 155.
       sb-steps.js writes --sb-steps-img-top (the active photo's offset from
       the shell's top) because the shell's own top is not the photo's.
       The shape is Canva's own arrow (docs/design/steps-arrow-canva.png,
       extracted from the PDF at 517 x 800): a triangle with a concave back
       and rounded tips, not the plain CSS triangle of Day 2c. The polygon
       is the outline inset by half the 48-wide stroke, and the stroke's
       round joins are what round the three corners. It is a mask, so the
       colour stays the painted element's.
       The data URI is percent-encoded with single-quoted attributes and no
       ;utf8, parameter, like the avatar SVG further down: WP Fastest Cache's
       CSS minifier mangles a raw <svg ...> inside url(). */
    .sb-steps-arrow {
        --sb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 517 800'%3E%3Cpolygon points='24,40 486,400 24,760 118,400' fill='%23fff' stroke='%23fff' stroke-width='48' stroke-linejoin='round'/%3E%3C/svg%3E");
        position: absolute; z-index: 5;
        width: calc(31 * var(--sb-u)); height: calc(41 * var(--sb-u));
        min-height: 0; padding: 0; margin: 0; border: 0;
        background: transparent !important; box-shadow: none; -webkit-appearance: none; appearance: none;
        font-size: 0; line-height: 0; cursor: pointer; opacity: 1;
        top: calc(var(--sb-steps-img-top, 0px) + 155 * var(--sb-u)); transform: translateY(-50%);
        transition: opacity .2s ease;
    }
    /* The mask paints a ::before that fills the button, not the button
       itself: a mask on the button clips its own focus ring away, so a
       keyboard user tabbing to the arrow saw nothing. The button keeps its
       full 31u x 41u hit area and a transparent background; the white shape
       and the mask live on the pseudo-element, which inherits the --prev
       mirroring from the button's transform. */
    .sb-steps-arrow::before {
        content: ""; position: absolute; inset: 0; background: #fff;
        -webkit-mask-image: var(--sb-arrow); mask-image: var(--sb-arrow);
        -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
    .sb-steps-arrow:hover { opacity: .8; }
    /* Keyboard focus only: sb-steps.js blurs the arrow on a real mouse click
       (so the autoplay can resume), and :focus-visible would not fire there
       anyway. */
    .sb-steps-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    /* The SVG points right; the left arrow is the same shape mirrored. */
    .sb-steps-arrow--prev { left: calc(63 * var(--sb-u)); transform: translateY(-50%) scaleX(-1); }
    .sb-steps-arrow--next { right: calc(73 * var(--sb-u)); }
}

/* ------------------------------------------------------------------
   Typography (fix list 1). Body copy on the homepage: Lato 16px/1.45.
   Section rhythm is set per section in the page file (padding="90px")
   because Flatsome prints each section's padding as an inline #id rule.
   ------------------------------------------------------------------ */
/* Body copy is sized per section copy class (.sb-pilk__copy p: 16px/1.45; the
   Day 3 hero has its own scale, .sb-hero__lead 24px). Flatsome renders [ux_text] as div.text; a global .text p rule
   would also catch the Join the Club tagline, so none is set. */

/* ------------------------------------------------------------------
   Testimonials (section 15), fix list 13, rebuilt Day 2c to the Canva
   measurements (docs/design/home-desktop-attributes.md, "Testimonials
   (Day 2c reference)"; design px at 1440).
   Content box 1325 centred; six cards in three rows of two; card =
   #000 fill, 2px #b57fc8 border, radius 7 (Canva's border is a radial
   gradient #96669b/#e0a3f6, #b57fc8 is its midpoint - a gradient border
   cannot keep the 7px radius cheaply). Card chrome: border 2 + padding
   38 = 40 side, 2 + 14 = 16 top (the quote's first line), 2 + 8 = 10
   bottom (the avatar). Quote 18/25 centred, author row centred with a
   66px avatar (1px #ed94ff ring, 4px black gap, 56px photo).
   No font-family anywhere: the site has no Greycliff, so the Canva
   sizes are mapped onto the site's own stack (R5).
   The Customizer block "SHE'S BACK - TESTIMONIAL CARD"
   (site/custom-css.css) gives .sb-testimonial a pink gradient border,
   32/38 padding, left-aligned text and an absolutely positioned avatar
   with !important, so every rule that touches those repeats the
   Customizer selector with .sb-reviews in front and !important.
   ------------------------------------------------------------------ */
.sb-reviews {
    --sb-glow-1: rgba(72, 26, 68, .95);
    --sb-glow-2: rgba(80, 28, 42, .85);
}
/* Canva's two glows behind the cards: a 757px purple-pink circle centred
   at (134, 36% of the section) and a 1003px dark red one at (1190, 51%). */
.sb-reviews.sb-glow {
    background-color: #000;
    background-image:
        radial-gradient(circle 379px at 9.3% 36%, var(--sb-glow-1), transparent 72%),
        radial-gradient(circle 502px at 82.6% 51%, var(--sb-glow-2), transparent 72%);
}
/* Canva: 138 above row 1, 150 below row 3. The shortcode carries
   padding="138px", which Flatsome 3.20 emits as one inline #section_x rule
   for both sides (its [section] has no padding_bottom attribute), so the
   bottom is set here; !important because the inline rule is an id selector. */
.sb-reviews.sb-glow { padding-bottom: 150px !important; }
/* Content box: Flatsome's .row is 1080, Canva's is 1325. The cols carry no
   padding of their own; sb-reviews.js places the rows inside this box.
   Below 1325 + gutters the box shrinks with the viewport instead of touching
   the edges: min() keeps a 50px gutter either side (the same gutter the hero
   and the cards use), so in a 1200px window (1186 of content once the
   scrollbar is off) the box is 1086 wide at x 50 and sb-reviews.js reseeds
   the pairs to that width. */
.sb-reviews .row { max-width: min(1325px, calc(100% - 100px)); padding: 0; }
.sb-reviews .row > .col { width: auto; max-width: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
/* Fallback while sb-reviews.js has not run (or is blocked): the old grid. */
.sb-reviews:not(.sb-reviews--js) .row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 849px) { .sb-reviews:not(.sb-reviews--js) .row { grid-template-columns: 1fr; } }

/* The card. min-height 228 is Canva's card height: 16 + 5 lines x 25 + 11
   + 66 avatar + 10 = 228, so a five-line quote fills it exactly and a
   shorter one still keeps the Canva height. */
.sb-reviews .col-inner {
    flex: 1 1 auto;
    min-height: 228px;
    padding: 14px 38px 8px;
    background-color: #000 !important;
    border: 2px solid #b57fc8;
    border-radius: 7px !important;
    display: flex;
    flex-direction: column;
}
/* Two SVG dashes travel at constant speed along the actual rounded outline.
   Fade affects brightness only; each highlight covers half the perimeter. */
.sb-reviews .col-inner { position: relative; }
.sb-review-border-glow {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: 2;
    overflow: visible;
    pointer-events: none;
}
.sb-review-border-glow path {
    fill: none;
    stroke: #ed94ff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 60 940;
    stroke-dashoffset: calc(30px - var(--sb-review-entry, 0) * 1px);
    filter: drop-shadow(0 0 3px rgba(240,130,185,.25));
    opacity: 0;
}
.sb-review-border-glow__reverse { stroke: #f6afcf !important; }
@keyframes sb-review-glow-forward {
    from { stroke-dashoffset: calc(30px - var(--sb-review-entry, 0) * 1px); }
    to { stroke-dashoffset: calc(-470px - var(--sb-review-entry, 0) * 1px); }
}
@keyframes sb-review-glow-reverse {
    from { stroke-dashoffset: calc(30px - var(--sb-review-entry, 0) * 1px); }
    to { stroke-dashoffset: calc(530px - var(--sb-review-entry, 0) * 1px); }
}
@keyframes sb-review-glow-fade {
    0%, 100% { opacity: 0; }
    15%, 75% { opacity: .65; }
}
@media (hover: hover) and (pointer: fine) {
    .sb-reviews .col-inner:hover .sb-review-border-glow__forward {
        animation: sb-review-glow-forward 1.4s linear both, sb-review-glow-fade 1.4s linear both;
    }
    .sb-reviews .col-inner:hover .sb-review-border-glow__reverse {
        animation: sb-review-glow-reverse 1.4s linear both, sb-review-glow-fade 1.4s linear both;
    }
}
.sb-reviews .col-inner:focus-within .sb-review-border-glow__forward {
    animation: sb-review-glow-forward 1.4s linear both, sb-review-glow-fade 1.4s linear both;
}
.sb-reviews .col-inner:focus-within .sb-review-border-glow__reverse {
    animation: sb-review-glow-reverse 1.4s linear both, sb-review-glow-fade 1.4s linear both;
}
@media (prefers-reduced-motion: reduce) {
    .sb-reviews .sb-review-border-glow path { animation: none !important; }
}

/* Strip the Customizer's card chrome; lay the card out as quote on top,
   avatar + name centred at the bottom. .icon-box-text is unwrapped so the
   avatar (its sibling in Flatsome's markup) can sit next to the meta. */
.sb-reviews .sb-testimonial {
    flex: 1 1 auto; margin: 0; padding: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    display: flex; flex-wrap: wrap; justify-content: center; align-content: space-between; align-items: center;
}
.sb-reviews .sb-testimonial .icon-box-text { display: contents; }
.sb-reviews .sb-testimonial .testimonial-text { flex: 0 0 100%; order: 1; margin: 0 0 11px; }
.sb-reviews .sb-testimonial .testimonial-text p {
    font-size: 18px; line-height: 25px; font-weight: 400; text-align: center !important;
    color: #fff !important; margin: 0; font-style: normal !important;
}
/* Avatar: 66 outer = 1px #ed94ff ring + 4px black gap + 56px photo. */
.sb-reviews .sb-testimonial .testimonial-image {
    position: static !important; order: 2; flex: 0 0 auto;
    width: 66px !important; height: 66px !important;
    margin: 0 8px 0 0 !important; padding: 4px !important;
    border: 1px solid #ed94ff; border-radius: 50%; background: #000; box-sizing: border-box;
}
.sb-reviews .sb-testimonial .testimonial-image img {
    width: 56px !important; height: 56px !important; min-width: 0;
    margin: 0 !important; display: block; border-radius: 50%; object-fit: cover;
}
/* Name 20 italic at avatar + 15, style label 11.4 italic at avatar + 37:
   a 22 + 13 = 35 tall column centred in the 66 avatar lands both exactly. */
.sb-reviews .sb-testimonial .testimonial-meta {
    order: 3; display: flex !important; flex-direction: column;
    align-items: flex-start !important; justify-content: center; gap: 0;
    padding: 0 !important; margin: 0 !important; min-height: 0 !important; text-align: left !important;
}
.sb-reviews .sb-testimonial .testimonial-name-divider { display: none; }
.sb-reviews .sb-testimonial .testimonial-name,
.sb-reviews .sb-testimonial .testimonial-meta strong {
    font-style: italic; font-weight: 400; font-size: 20px; line-height: 22px; color: #fff !important;
}
.sb-reviews .sb-testimonial .testimonial-company {
    font-style: italic; font-weight: 400; font-size: 11.4px; line-height: 13px; color: #fff !important; opacity: 1;
}

/* The feedback card ("You"/"Sina"): Canva has an inner box inset 15,
   390x127, radius 7, rgba(223,223,223,.13), grey #525252 text. The card
   has to carry a working CF7 form (form 910: textarea, email, SAADA), so
   the box grows past 127 and the card past 228 - Paul's "needs buttons
   obviously, so can't be perfect". Everything else is Canva-exact.
   sb-reviews.js builds .sb-reviews__you-box around the intro + the form
   and .sb-reviews__you-meta around the avatar + "Sina". */
.sb-reviews__you .col-inner { padding: 13px; gap: 0; }
.sb-reviews__you-box {
    flex: 1 1 auto; min-height: 127px; border-radius: 7px;
    background: rgba(223, 223, 223, .13);
    padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
/* One regular weight for the whole intro, as in Canva: without this the
   plain run inherited the page body's 700 while the strong sat at 400 (inverted). */
.sb-reviews__you-box .sb-reviews__you-intro p {
    margin: 0; text-align: center; font-size: 18.6px; line-height: 25px; font-weight: 400; color: #525252;
}
.sb-reviews__you-box .sb-reviews__you-intro strong { font-weight: 400; color: #525252; }
/* Two columns so the email field and SAADA share a line and the box stays
   as close to Canva's 127 as a real form can: textarea across the top,
   email bottom-left, submit bottom-right, any CF7 message across the foot. */
.sb-reviews__you-box .wpcf7 { width: 100%; }
.sb-reviews__you-box .wpcf7-form { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; margin: 0; }
.sb-reviews__you-box .wpcf7-form > p { margin: 0; }
.sb-reviews__you-box .wpcf7-form > p:nth-of-type(1) { grid-column: 1 / -1; }
.sb-reviews__you-box .wpcf7-form .wpcf7-response-output {
    grid-column: 1 / -1; margin: 0; padding: 4px 8px; border-radius: 6px;
    font-size: 12px; line-height: 16px; text-align: center;
}
.sb-reviews__you-box textarea,
.sb-reviews__you-box input[type="email"] {
    width: 100%; margin: 0; padding: 4px 8px; box-shadow: none;
    background: transparent; border: 1px solid rgba(82, 82, 82, .55); border-radius: 6px;
    color: #cfcfcf; font-size: 14px; line-height: 20px;
}
.sb-reviews__you-box textarea { min-height: 44px; height: 44px; resize: none; }
.sb-reviews__you-box input[type="email"] { height: 30px; }
.sb-reviews__you-box ::placeholder { color: #525252; opacity: 1; }
.sb-reviews__you-box input.wpcf7-submit {
    min-width: 0; height: 30px; padding: 0 14px; font-size: 12px; letter-spacing: .06em;
    --sb-btn-accent: #b57fc8;
}
.sb-reviews__you-box .wpcf7-spinner { margin: 0 0 0 6px; }
/* Author row of the feedback card: the same 66px ring, a pink silhouette
   (#ff4ee3 on black) instead of a photo, name "Sina" 20px italic. */
.sb-reviews__you-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; }
.sb-reviews__you-avatar {
    flex: 0 0 auto; width: 66px; height: 66px; padding: 4px; box-sizing: border-box;
    border: 1px solid #ed94ff; border-radius: 50%; background: #000;
}
.sb-reviews__you-avatar::before {
    content: ""; display: block; width: 56px; height: 56px; border-radius: 50%;
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23000'/%3E%3Ccircle cx='28' cy='21' r='11' fill='%23ff4ee3'/%3E%3Cpath d='M28 34c-11 0-19 8-20 22h40c-1-14-9-22-20-22z' fill='%23ff4ee3'/%3E%3C/svg%3E") center / 56px 56px no-repeat;
}
.sb-reviews__you-name p {
    margin: 0; text-align: left; font-style: italic; font-weight: 400;
    font-size: 20px; line-height: 22px; color: #fff;
}

/* ------------------------------------------------------------------
   Testimonials layout (Day 2c), point 13: the Canva rows.
   assets/js/sb-reviews.js wraps each pair of cols in
   div.sb-reviews__row.sb-reviews__row--r<n> inside the existing .row and
   writes each card's flex-basis; the section gets .sb-reviews--js.
   Row totals (Canva): r1 1324, r2 1262, r3 1008 out of the 1325 box; the
   gap is 40/1325 = 3.0189% so the whole block scales with the box below
   1440. r1 and r2 are flush right (r2's 63px left inset falls out of
   that), r3 is flush left. The wrapped cols are no longer .row > .col, so
   the width/padding/flex resets are repeated here.
   ------------------------------------------------------------------ */
.sb-reviews--js .row { display: block; }
.sb-reviews--js .sb-reviews__row {
    display: flex; align-items: stretch;
    gap: 3.0189%;
    margin: 0 0 40px;
}
.sb-reviews--js .sb-reviews__row:last-child { margin-bottom: 0; }
.sb-reviews--js .sb-reviews__row--r1,
.sb-reviews--js .sb-reviews__row--r2 { justify-content: flex-end; }
.sb-reviews--js .sb-reviews__row--r3 { justify-content: flex-start; }
.sb-reviews--js .sb-reviews__row > .col {
    flex: 0 0 auto; width: auto; max-width: none; min-width: 0;
    padding: 0; margin: 0; display: flex; flex-direction: column;
}
/* Even testimonial count (the live page has five, so this is the generic
   fallback, not a Canva row): the feedback card takes a whole row on its
   own - intro top left, avatar + "Sina" under it, the CF7 form down the
   right half. sb-reviews.js only adds .sb-reviews__you--wide; the card's
   children are placed by area here and the box (Canva's grey inset, which
   has no wide counterpart) is display: contents, so the intro, the form
   and the meta become the grid items. The DOM is unchanged by that, so
   the .sb-reviews__you-box field rules above still match the form. */
.sb-reviews--js .sb-reviews__row > .col:only-child { flex-basis: 100%; }
.sb-reviews--js .sb-reviews__you--wide .col-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-areas: "intro form" "meta form";
    gap: 11px 28px; align-items: center;
}
.sb-reviews--js .sb-reviews__you--wide .sb-reviews__you-box { display: contents; }
.sb-reviews--js .sb-reviews__you--wide .sb-reviews__you-intro { grid-area: intro; }
.sb-reviews--js .sb-reviews__you--wide .wpcf7 { grid-area: form; }
.sb-reviews--js .sb-reviews__you--wide .sb-reviews__you-meta { grid-area: meta; margin-top: 0; }
@media (max-width: 849px) {
    .sb-reviews--js .sb-reviews__row { flex-direction: column; gap: 28px; }
    .sb-reviews--js .sb-reviews__row > .col { flex-basis: auto !important; }
    /* Paul 2026-10-07: on phones the feedback card goes last. sb-reviews.js puts it first in the
       last row (r3); order 1 moves it behind its sibling, so it ends the stack. */
    .sb-reviews--js .sb-reviews__row > .sb-reviews__you { order: 1; }
    .sb-reviews--js .sb-reviews__you--wide .col-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "intro" "form" "meta";
    }
}
/* Category slider (section 18), fix list 15: the tiles carry their labels
   in the artwork, so Flatsome's category title under a tile is a duplicate.
   The section also carries class sb-cat-slider for a tighter selector. */
.sb-cat-slider .product-category .box-text { display: none; }

/* ------------------------------------------------------------------
   Reviews slider ([sb_reviews_slider], Day 5a S3; shop + product page).
   docs/design/shop-product-attributes.md "Testimonial slider (shop)" and
   "(product)" for the progress bar; design px at 1440. The shortcode sits
   in a full-width row, so the Page width block caps it at the 1440 band.
   Flatsome's [ux_slider] writes slide_width as max-width on each cell:
   63.89% = 920px pitch = 861.4 card + 2 x 29.3 padding (Canva gap 58.6).
   Card: #000, radius 7, 2px red-pink horizontal gradient border drawn as
   a border-box background under a padding-box fill (keeps the radius).
   Quote 17.9/24.9 centred, first line at card top + 15 (2 border + 13),
   44 to the sides (2 + 42); author group (the Day 2c ring: 66 = 1px
   #ed94ff + 4px black gap + 56 photo) at card bottom - 76 (2 + 8 below).
   No font-family: Nunito comes from the site stack (R5).
   ------------------------------------------------------------------ */
.sb-rslider-shell { position: relative; }
.sb-rslider .flickity-slider > .sb-rslider__slide { width: 100%; padding: 0 29.3px; box-sizing: border-box; }
.sb-rslider .sb-rslider__card {
    min-height: 228px; box-sizing: border-box;
    padding: 13px 42px 8px;
    border: 2px solid transparent; border-radius: 7px;
    background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(90deg, #781335, #9b2d52, #b5395e, #be5269, #b35b5a, #764244) border-box;
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.sb-rslider .sb-rslider__quote {
    margin: 0 0 11px; font-size: 17.9px; line-height: 24.9px; font-weight: 400; font-style: normal;
    text-align: center; color: #fff;
}
.sb-rslider .sb-rslider__author { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sb-rslider .sb-rslider__ring {
    flex: 0 0 auto; width: 66px; height: 66px; padding: 4px; box-sizing: border-box;
    border: 1px solid #ed94ff; border-radius: 50%; background: #000;
}
.sb-rslider .sb-rslider__ring img {
    display: block; width: 56px; height: 56px; max-width: none; margin: 0;
    border-radius: 50%; object-fit: cover;
}
/* Name 20 italic at ring + 14, style 11.3 italic alpha .57 at ring + 37. */
.sb-rslider .sb-rslider__meta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.sb-rslider .sb-rslider__name { font-style: italic; font-weight: 400; font-size: 20px; line-height: 22px; color: #fff; }
.sb-rslider .sb-rslider__style { font-style: italic; font-weight: 400; font-size: 11.3px; line-height: 13px; color: rgba(255, 255, 255, .57); }
/* Side cards clipped under black fades 469 wide (32.6% of the band);
   Canva stacks each fade twice, hence the dense start and early end. */
.sb-rslider::before,
.sb-rslider::after {
    content: ""; position: absolute; top: -14px; bottom: -14px; width: 32.6%;
    z-index: 2; pointer-events: none;
}
.sb-rslider::before { left: 0; background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 60%); }
.sb-rslider::after { right: 0; background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 60%); }
/* Arrows: white chevrons 30.7 x 46 at x 51 / right 56, centred on the
   cards, always visible; Flickity's thin svg arrow is replaced by a
   background chevron per side (no transform: Flatsome animates and, under
   reduced motion, resets the buttons' transform with !important). */
.sb-rslider .flickity-prev-next-button {
    top: 50%; bottom: auto; width: 31px; height: 46px; margin-top: -23px;
    opacity: 1; transform: none !important; z-index: 3; box-shadow: none;
    background: center / 31px 46px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M27 3 4 23l23 20c1 1 3 0 3-2l-5-18 5-18c0-2-2-3-3-2z' fill='%23fff'/%3E%3C/svg%3E");
}
.sb-rslider .flickity-prev-next-button.previous { left: 51px; right: auto; }
.sb-rslider .flickity-prev-next-button.next {
    right: 56px; left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M4 3 27 23 4 43c-1 1-3 0-3-2l5-18-5-18c0-2 2-3 3-2z' fill='%23fff'/%3E%3C/svg%3E");
}
.sb-rslider .slider:hover .flickity-prev-next-button { opacity: 1; transform: none !important; }
.sb-rslider .flickity-prev-next-button svg { display: none; }
/* An inline site stylesheet (not shesback.css, not the Customizer file)
   sets every .flickity-prev-next-button to background: transparent,
   36 x 36 !important and draws pink ::after triangles; found live in
   Task 3. Win back the chevrons for this slider only. */
.sb-rslider .flickity-prev-next-button.previous,
.sb-rslider .flickity-prev-next-button.next {
    width: 31px !important; height: 46px !important;
    background-color: transparent !important; background-position: center !important;
    background-size: 31px 46px !important; background-repeat: no-repeat !important;
}
.sb-rslider .flickity-prev-next-button.previous { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M27 3 4 23l23 20c1 1 3 0 3-2l-5-18 5-18c0-2-2-3-3-2z' fill='%23fff'/%3E%3C/svg%3E") !important; }
.sb-rslider .flickity-prev-next-button.next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M4 3 27 23 4 43c-1 1-3 0-3-2l5-18-5-18c0-2 2-3 3-2z' fill='%23fff'/%3E%3C/svg%3E") !important; }
.sb-rslider .flickity-prev-next-button::after { display: none; }
.sb-rslider .flickity-prev-next-button:focus-visible { outline: 2px solid #ff005c; outline-offset: 4px; }
/* Progress bar: track 304.5 x 12.8 white alpha .24, 41 below the cards;
   active 42.4 #ff005c alpha .79, left set by sb-reviews-slider.js. */
.sb-rslider__bar {
    position: relative; width: 304.5px; height: 12.8px; margin: 41px auto 0;
    border-radius: 6.4px; background: rgba(255, 255, 255, .24);
}
.sb-rslider__bar-active {
    position: absolute; top: 0; width: 42.4px; height: 100%; border-radius: 6.4px;
    background: rgba(255, 0, 92, .79);
    left: calc((100% - 42.4px) * var(--sb-rslider-pos, 0));
    transition: left .4s ease;
}
@media (prefers-reduced-motion: reduce) { .sb-rslider__bar-active { transition: none; } }
/* Tablets and phones: one card at 90% (slide_width__md/__sm), a peek
   either side, no fades (Flatsome hides the arrows below 550). */
@media (max-width: 849px) {
    .sb-rslider::before, .sb-rslider::after { display: none; }
    .sb-rslider .flickity-slider > .sb-rslider__slide { padding: 0 8px; }
    .sb-rslider .flickity-prev-next-button.previous { left: 8px; }
    .sb-rslider .flickity-prev-next-button.next { right: 8px; }
}
@media (max-width: 549px) {
    .sb-rslider .sb-rslider__card { padding: 12px 18px 8px; }
    .sb-rslider .sb-rslider__quote { font-size: 15px; line-height: 21px; }
}

/* ------------------------------------------------------------------
   Video block ([sb_video_block], "Ole ise enda RIPSMETEHNIK", Day 5a S4).
   docs/design/shop-product-attributes.md "Ole ise enda RIPSMETEHNIK
   (shop)"; design px at 1440 via --sb-u (1px at >= 1440, scales down to
   850 so the absolute layout never overflows the band).
   Frame: #ff005c 6.4 stroke, r 34.5, from off the left edge to x 950,
   526 tall; Canva masks its right side so only the two right corners
   show (61px each). Drawn as two corner pieces (::before top, ::after
   bottom); their left end runs past the band to the window edge on wide
   screens. Poster 791 x 449 r 8.3 at (54, 40) under a black .59 overlay,
   play triangle 58 x 66 centred. Text column at x 880: kicker 600 53.7,
   title 900 82.6 #ff005c uppercase line-height .91, body 400 28.1/1.0.
   ------------------------------------------------------------------ */
.sb-vblock { --sb-u: min(1px, calc(100vw / 1440)); position: relative; height: calc(526 * var(--sb-u)); }
.sb-vblock::before,
.sb-vblock::after {
    content: ""; position: absolute; height: calc(61 * var(--sb-u)); box-sizing: border-box;
    left: calc(-31 * var(--sb-u) - max(0px, (100vw - 1440px) / 2));
    right: calc(100% - 950 * var(--sb-u));
    border: 6.4px solid #ff005c; border-left: 0; pointer-events: none;
}
.sb-vblock::before { top: 0; border-bottom: 0; border-top-right-radius: calc(34.5 * var(--sb-u)); }
.sb-vblock::after { bottom: 0; border-top: 0; border-bottom-right-radius: calc(34.5 * var(--sb-u)); }
.sb-vblock__media {
    position: absolute; left: calc(54.3 * var(--sb-u)); top: calc(39.6 * var(--sb-u));
    width: calc(791.1 * var(--sb-u)); height: calc(448.7 * var(--sb-u));
}
.sb-vblock__poster {
    position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
    border: 0; border-radius: 8.3px; overflow: hidden; background: #000; cursor: pointer;
}
.sb-vblock__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-vblock__poster::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .59); }
.sb-vblock__play {
    position: absolute; left: 50%; top: 50%; z-index: 1; line-height: 0;
    width: calc(58 * var(--sb-u)); height: calc(66 * var(--sb-u)); transform: translate(-50%, -50%);
}
.sb-vblock__play svg { width: 100%; height: 100%; }
.sb-vblock__poster:focus-visible { outline: 3px solid #ff005c; outline-offset: 4px; }
.sb-vblock__video { display: block; width: 100%; height: 100%; border-radius: 8.3px; background: #000; object-fit: contain; }
.sb-vblock [hidden] { display: none !important; }
.sb-vblock__text { position: absolute; left: calc(879.7 * var(--sb-u)); top: calc(78.5 * var(--sb-u)); color: #fff; }
.sb-vblock .sb-vblock__kicker {
    margin: 0; font-size: calc(53.7 * var(--sb-u)); line-height: calc(45.6 * var(--sb-u)); font-weight: 600;
    color: #fff; text-shadow: 0 2px 6px #000;
}
.sb-vblock .sb-vblock__title {
    margin: 0; padding: 0; font-size: calc(82.6 * var(--sb-u)); line-height: .91; font-weight: 900;
    letter-spacing: 0; text-transform: uppercase; color: #ff005c;
}
.sb-vblock .sb-vblock__body {
    margin: calc(32.5 * var(--sb-u)) 0 0; max-width: calc(400.4 * var(--sb-u));
    font-size: calc(28.1 * var(--sb-u)); line-height: 1; font-weight: 400; color: #fff;
}
/* Tablets and phones: stacked, poster full width, no frame. */
@media (max-width: 849px) {
    .sb-vblock { height: auto; padding: 0 16px; }
    .sb-vblock::before, .sb-vblock::after { display: none; }
    .sb-vblock__media { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 791 / 449; }
    .sb-vblock__play { width: 44px; height: 50px; }
    .sb-vblock__text { position: static; margin-top: 24px; }
    .sb-vblock .sb-vblock__kicker { font-size: 30px; line-height: 30px; }
    .sb-vblock .sb-vblock__title { font-size: 46px; }
    .sb-vblock .sb-vblock__body { margin-top: 16px; max-width: none; font-size: 18px; line-height: 1.3; }
}

/* ------------------------------------------------------------------
   Reel ([sb_reel], Day 5a S5). docs/design/shop-product-attributes.md
   "Video reel (shop)"; design px at 1440 via --sb-u as in the Video block.
   Five tiles 271.4 x 532.9 r 10.2, gap 20.2, the first at x 35.4; the
   fifth runs off the band's right edge (clipped). Tiles 2-4 at .37 on
   black, 1 and 5 at full strength under the side fades (412 / 405 wide,
   each drawn twice in Canva). Play icon 33.5 x 45.7 white, centred.
   The playing tile (.is-playing, sb-reel.js) is lifted above the fade.
   ------------------------------------------------------------------ */
.sb-reel { --sb-u: min(1px, calc(100vw / 1440)); position: relative; overflow: hidden; }
.sb-reel__track { display: flex; gap: calc(20.2 * var(--sb-u)); padding-left: calc(35.4 * var(--sb-u)); }
.sb-reel__tile {
    position: relative; flex: 0 0 auto;
    width: calc(271.4 * var(--sb-u)); height: calc(532.9 * var(--sb-u));
    border-radius: 10.2px; overflow: hidden; background: #000;
}
.sb-reel__tile:nth-child(n+2):nth-child(-n+4) > .sb-reel__link { opacity: .37; transition: opacity .3s; }
.sb-reel__tile:nth-child(n+2):nth-child(-n+4) > .sb-reel__link:hover,
.sb-reel__tile:nth-child(n+2):nth-child(-n+4) > .sb-reel__link:focus-visible { opacity: .7; }
.sb-reel__play-btn,
.sb-reel__link {
    position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
    border: 0; background: #000; cursor: pointer;
}
.sb-reel__play-btn img,
.sb-reel__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-reel__play {
    position: absolute; left: 50%; top: 50%; line-height: 0;
    width: calc(33.5 * var(--sb-u)); height: calc(45.7 * var(--sb-u)); transform: translate(-50%, -50%);
}
.sb-reel__play svg { width: 100%; height: 100%; }
.sb-reel__play-btn:focus-visible,
.sb-reel__link:focus-visible { outline: 3px solid #ff005c; outline-offset: -3px; }
.sb-reel__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.sb-reel [hidden] { display: none !important; }
.sb-reel::before,
.sb-reel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.sb-reel::before { left: 0; width: calc(412 * var(--sb-u)); background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 100%); }
.sb-reel::after { right: 0; width: calc(405 * var(--sb-u)); background: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .7) 40%, transparent 100%); }
.sb-reel__tile.is-playing { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .sb-reel__link { transition: none !important; } }
/* Tablets and phones: the track scrolls sideways with snap, tiles 60vw,
   no fades, no dimming. */
@media (max-width: 849px) {
    .sb-reel::before, .sb-reel::after { display: none; }
    .sb-reel__track {
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        gap: 12px; padding: 0 16px; scroll-padding: 0 16px;
    }
    .sb-reel__tile { width: 60vw; height: calc(60vw * 532.9 / 271.4); scroll-snap-align: start; }
    .sb-reel__tile:nth-child(n+2):nth-child(-n+4) > .sb-reel__link { opacity: 1; }
    .sb-reel__play { width: 34px; height: 46px; }
}

/* ------------------------------------------------------------------
   Shop page (block 807, Day 5a S1/S7/S9). docs/design/shop-product-attributes.md
   "1. Shop frame"; design px at 1440 via --sb-u as in the Video block
   (1px at >= 1440, scales down to 850). The four sections are
   full-width collapsed rows with 0 column padding, capped at the 1440
   band by the Page width block; the Join the Club band below the reel
   is the footer's (block 261), not part of 807.
   Vertical rhythm is measured from the header bottom (frame y 130):
   title baseline 85.2 below it (Nunito 900 at line-height 1 puts the
   baseline .829em below the line top, so the line starts 32.2 below),
   tiles at 140.5, slider cards at 691.7 (156.1 below the tiles), video
   frame 93.6 below the progress bar, reel tiles 97.3 below the frame.
   Title: "ÜHE KUU" solid #ff3ac2 + "KOMPLEKTID" 2px outline, word gap 35
   (flex gap minus the trailing letter-spacing of the first run);
   Monument Extended is far wider than Nunito; .231em letter-spacing
   stretches "ÜHE KUU" to Canva's 380.6 so KOMPLEKTID starts at x 466.6
   (it then runs ~550 wide vs Canva's 535.4: one tracking value cannot
   match both runs, the start x was the brief's check).
   Grid: five tracks 411.2 / 53.8 / 411.2 / 49.1 / 411.2 so both of
   Canva's column gaps are exact (the brief's single 51 gap would put
   column 2 2.8px off), rows 178.2 with a 38.7 gap. The right column
   (sixth cell) is 3.7 wider on the left than the tiles (x 972.5, w
   414.9): three switch bars sharing 178.2 with 11.2 gaps (Canva 12.4 /
   10), so the last bar ends level with VOLUME. Bars are strips of the
   set-3 tiles under a .6 black veil, text 700 27.4 tracked .06em (Nunito
   at Canva's .1em ran ~7% wider than Greycliff; .06em gives KOLME KUU
   KOMPLEKTID 374 vs 373.7); Canva has no hover state, a
   brighten on hover/focus is added. sb-shop.js swaps title, tile links
   and bars per kit.
   ------------------------------------------------------------------ */
.sb-shop, .sb-shop-reviews, .sb-shop-video, .sb-shop-reel { --sb-u: min(1px, calc(100vw / 1440)); background-color: #000; }
.sb-shop-reviews .col, .sb-shop-video .col, .sb-shop-reel .col, .sb-shop .col { padding: 0 !important; }
.sb-shop .sb-shop__inner {
    max-width: 1440px; margin: 0 auto; box-sizing: border-box;
    padding: calc(32.2 * var(--sb-u)) calc(52.6 * var(--sb-u)) calc(156.1 * var(--sb-u)) calc(50.9 * var(--sb-u));
}
.sb-shop .sb-shop__title {
    margin: 0; padding: 0; font-size: calc(63.9 * var(--sb-u)); line-height: 1; font-weight: 900;
    --sb-shop-ls: .231em; letter-spacing: var(--sb-shop-ls); text-transform: uppercase; color: #ff3ac2; white-space: nowrap;
    display: flex; flex-wrap: wrap; column-gap: calc(35 * var(--sb-u) - var(--sb-shop-ls));
}
.sb-shop .sb-shop__t1 { color: #ff3ac2; }
.sb-shop .sb-shop__t2 { color: transparent; -webkit-text-stroke: 2px #ff3ac2; }
.sb-shop .sb-shop__t2[hidden] { display: none; }
/* Direct ?kit= loads: functions.php marks <html> .sb-kit-pending in the head, sb-shop.js clears it after apply(). */
.sb-kit-pending .sb-shop__title, .sb-kit-pending .sb-shop__bars button { visibility: hidden; animation: sb-kit-reveal 0s 1.5s forwards; }
/* CSS-only fallback (Day 5a final review): if sb-shop.js never runs, the title and bars reappear after 1.5 s anyway. */
@keyframes sb-kit-reveal { to { visibility: visible; } }
.sb-shop .sb-shop__grid {
    display: grid; margin-top: calc(44.4 * var(--sb-u));
    grid-template-columns: calc(411.2 * var(--sb-u)) calc(53.8 * var(--sb-u)) calc(411.2 * var(--sb-u)) calc(49.1 * var(--sb-u)) calc(411.2 * var(--sb-u));
    grid-template-rows: calc(178.2 * var(--sb-u)) calc(38.7 * var(--sb-u)) calc(178.2 * var(--sb-u));
}
.sb-shop .sb-shop__tile:nth-child(1) { grid-area: 1 / 1; }
.sb-shop .sb-shop__tile:nth-child(2) { grid-area: 1 / 3; }
.sb-shop .sb-shop__tile:nth-child(3) { grid-area: 1 / 5; }
.sb-shop .sb-shop__tile:nth-child(4) { grid-area: 3 / 1; }
.sb-shop .sb-shop__tile:nth-child(5) { grid-area: 3 / 3; }
.sb-shop .sb-shop__bars { grid-area: 3 / 5; }
.sb-shop .sb-shop__tile {
    position: relative; display: flex; align-items: center; justify-content: center;
    border-radius: 3.6px; overflow: hidden; background: #000; text-decoration: none;
}
.sb-shop .sb-shop__tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; object-position: center; transition: transform .4s ease;
}
.sb-shop .sb-shop__tile:hover img, .sb-shop .sb-shop__tile:focus-visible img { transform: scale(1.04); }
.sb-shop .sb-shop__tile:focus-visible { outline: 3px solid #ff3ac2; outline-offset: 3px; }
.sb-shop .sb-shop__label {
    position: relative; font-size: calc(40.7 * var(--sb-u)); line-height: 1; font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase; color: #fff; text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
.sb-shop .sb-shop__bars {
    display: flex; flex-direction: column; gap: calc(11.2 * var(--sb-u));
    margin-left: calc(-3.7 * var(--sb-u));
}
.sb-shop .sb-shop__bar {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 100%; min-height: 0; height: auto; margin: 0; padding: 0 8px; border: 0; border-radius: 6.4px;
    font-family: inherit; font-size: calc(27.4 * var(--sb-u)); line-height: 1; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-shadow: none; white-space: nowrap;
    color: #fff; box-shadow: none; cursor: pointer; opacity: .85; transition: opacity .2s;
    /* Day 14: bars use the WebP attachment files (the .jpg is only original_image and may be cleaned up) */
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), center / cover no-repeat url("/wp-content/uploads/2026/09/tile-hybrid.webp");
}
.sb-shop .sb-shop__bar:nth-child(2) { background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url("/wp-content/uploads/2026/09/tile-classic.webp"); }
.sb-shop .sb-shop__bar:nth-child(3) { background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url("/wp-content/uploads/2026/09/tile-tools-kit.webp"); }
.sb-shop .sb-shop__bar:hover, .sb-shop .sb-shop__bar:focus-visible { opacity: 1; color: #fff; }
.sb-shop .sb-shop__bar:focus-visible { outline: 3px solid #ff3ac2; outline-offset: 2px; }
.sb-shop-reviews .sb-rslider-shell { padding-bottom: calc(93.6 * var(--sb-u)); }
.sb-shop-reel .sb-reel { margin-top: calc(97.3 * var(--sb-u)); }
@media (prefers-reduced-motion: reduce) {
    .sb-shop .sb-shop__tile img, .sb-shop .sb-shop__bar { transition: none; }
    .sb-shop .sb-shop__tile:hover img, .sb-shop .sb-shop__tile:focus-visible img { transform: none; }
}
/* Tablets: two tiles per row, the three bars as one full-width row. */
@media (max-width: 849px) {
    .sb-shop .sb-shop__inner { padding: 24px 16px 56px; }
    .sb-shop .sb-shop__title { font-size: 40px; --sb-shop-ls: .04em; white-space: normal; }
    .sb-shop .sb-shop__title { column-gap: .3em; }
    .sb-shop .sb-shop__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 16px; margin-top: 24px; }
    .sb-shop .sb-shop__tile:nth-child(n), .sb-shop .sb-shop__bars { grid-area: auto; }
    .sb-shop .sb-shop__tile { aspect-ratio: 411 / 178; }
    .sb-shop .sb-shop__label { font-size: 26px; }
    .sb-shop .sb-shop__bars { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-left: 0; }
    .sb-shop .sb-shop__bar { flex: 1 1 200px; min-height: 52px; font-size: 16px; white-space: normal; text-align: center; }
    .sb-shop-reviews .sb-rslider-shell { padding-bottom: 56px; }
    .sb-shop-reel .sb-reel { margin: 56px 0 40px; }
}
/* Phones: one tile per row, bars stacked full width. */
@media (max-width: 549px) {
    .sb-shop .sb-shop__title { font-size: 30px; }
    .sb-shop .sb-shop__grid { grid-template-columns: 1fr; }
    .sb-shop .sb-shop__bars { flex-direction: column; }
    .sb-shop .sb-shop__bar { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------
   Product page (shared UX block "sb-product-page", Day 5b P1).
   [sb_product_hero] and [sb_product_alternatives] (inc/product-page.php),
   reviews slider and reel from the shop components. Canva product frame,
   design px at 1440 via --sb-u as in the Shop page block.
   Hero: photo frame x 49.5 w 463.9 (gradient pad 27/29/24/31, square
   slider inside), buy column x 542.2 to 1225; photo top 35 below the
   header, the kicker 12.7 above the photo top, the big word touching it.
   Arrows: white chevrons 10.2 x 15.3 on the frame band (the Reviews
   slider chevron rule, copied and resized, not a wider selector).
   Section rhythm (P12, section classes from the block): slider cards 82
   below the hero, alternatives 71 below the progress bar, reel tiles 130
   below the alternatives frame. The slider shell and the reel start at
   their own top edge, so nothing is subtracted.
   Alternatives: 1359.8 x 477.9 red frame running off the left page edge,
   "äkki / hoopis.." at 53.6 / 153.5, 2 x 2 tiles 440 x 184 at x 493.
   Sale price: strike on the amount span, as in the Sale prices block.
   ------------------------------------------------------------------ */
.sb-product-hero, .sb-product-reviews, .sb-product-alt, .sb-product-reel,
.sb-phero, .sb-alt { --sb-u: min(1px, calc(100vw / 1440)); }
.sb-product-hero, .sb-product-reviews, .sb-product-alt, .sb-product-reel { background-color: #000; }
.sb-product-hero .col, .sb-product-reviews .col, .sb-product-alt .col, .sb-product-reel .col { padding: 0 !important; }
.sb-phero {
    display: grid; grid-template-columns: calc(463.9 * var(--sb-u)) minmax(0, 1fr); column-gap: calc(29.8 * var(--sb-u));
    max-width: 1440px; margin: 0 auto; box-sizing: border-box;
    padding: 0 calc(215 * var(--sb-u)) 0 calc(49.5 * var(--sb-u));
}
/* Hero: the photo frame */
.sb-phero__frame {
    padding: calc(27 * var(--sb-u)) calc(29 * var(--sb-u)) calc(24 * var(--sb-u)) calc(31 * var(--sb-u));
    border-radius: calc(6.4 * var(--sb-u));
    background: linear-gradient(90deg, #ff659d 0%, #fa3079 50%, #fc015e 100%);
}
.sb-phero__frame .slider-wrapper { margin: 0; }
.sb-phero__slider, .sb-phero__slide { aspect-ratio: 1 / 1; }
.sb-phero__slide { width: 100%; }
.sb-phero__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.sb-phero__frame .flickity-prev-next-button {
    top: 50%; bottom: auto; width: calc(10.2 * var(--sb-u)); height: calc(15.3 * var(--sb-u));
    margin-top: calc(-22.5 * var(--sb-u)); /* Canva tops 373.3 / 371.6: ~14 above the photo centre */ padding: 0; min-width: 0; min-height: 0; /* Flatsome button min sizes made it 24 x 38.8 */
    opacity: 1; transform: none !important; z-index: 3; box-shadow: none;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M27 3 4 23l23 20c1 1 3 0 3-2l-5-18 5-18c0-2-2-3-3-2z' fill='%23fff'/%3E%3C/svg%3E");
}
.sb-phero__frame .flickity-prev-next-button.previous { left: calc(-21.5 * var(--sb-u)); right: auto; }
.sb-phero__frame .flickity-prev-next-button.next {
    right: calc(-21.5 * var(--sb-u)); left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 46'%3E%3Cpath d='M4 3 27 23 4 43c-1 1-3 0-3-2l5-18-5-18c0-2 2-3 3-2z' fill='%23fff'/%3E%3C/svg%3E");
}
.sb-phero__frame .slider:hover .flickity-prev-next-button { opacity: 1; transform: none !important; }
.sb-phero__frame .flickity-prev-next-button svg { display: none; }
.sb-phero__frame .flickity-prev-next-button::after { display: none; }
.sb-phero__frame .flickity-prev-next-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Hero: cross-link thumbnails to the style's other two kinds */
.sb-phero__thumbs {
    display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--sb-u));
    margin-top: calc(33 * var(--sb-u));
}
.sb-phero__thumb { position: relative; display: block; aspect-ratio: 220 / 122.7; overflow: hidden; text-decoration: none; }
.sb-phero__thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; transition: transform .4s ease;
}
.sb-phero__thumb:hover img, .sb-phero__thumb:focus-visible img { transform: scale(1.04); }
.sb-phero__thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sb-phero__thumb-label {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: Nunito, sans-serif; font-size: calc(20 * var(--sb-u)); line-height: 1; font-weight: 800;
    color: #fff; text-transform: lowercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
/* Hero: title, words, copy */
.sb-phero__buy { min-width: 0; }
.sb-phero__title {
    display: flex; flex-direction: column; margin: calc(-12.7 * var(--sb-u)) 0 0; padding: 0;
    font-family: Nunito, sans-serif; font-weight: 400; letter-spacing: 0;
}
.sb-phero__kicker { font-size: calc(37.5 * var(--sb-u)); line-height: 1; font-weight: 400; color: #fff; }
.sb-phero__word {
    margin-top: calc(-2 * var(--sb-u)); font-size: calc(74.9 * var(--sb-u)); line-height: 1; font-weight: 900;
    color: #ff005c; text-transform: lowercase; text-shadow: 0 0 24px rgba(255, 0, 92, .55);
}
.sb-phero__words {
    display: flex; align-items: center; gap: calc(23.5 * var(--sb-u));
    width: calc(357.2 * var(--sb-u)); max-width: 100%; box-sizing: border-box;
    margin: calc(27.6 * var(--sb-u)) 0 0; padding: calc(11.3 * var(--sb-u)) 0 calc(12.4 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(22.2 * var(--sb-u)); line-height: 1; font-weight: 300; font-style: italic; color: #fff;
    border-style: solid; border-width: calc(1.9 * var(--sb-u)) 0 calc(3.8 * var(--sb-u));
    border-image: linear-gradient(90deg, rgba(255, 255, 255, .15), transparent) 1;
}
.sb-phero__star {
    flex: 0 0 auto; width: calc(13.2 * var(--sb-u)); height: calc(13.2 * var(--sb-u)); background: #fff;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.sb-phero__desc {
    max-width: calc(680 * var(--sb-u)); margin-top: calc(14.3 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(23.2 * var(--sb-u)); line-height: 1.2; font-weight: 400; color: #fff;
}
.sb-phero__desc p { margin: 0; }
.sb-phero__desc p + p { margin-top: .37em; }
.sb-phero__desc strong { font-weight: 800; }
.sb-phero__desc .sb-phero__accent { color: #ff005c; }
.sb-phero__desc .sb-phero__shout { text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
/* Hero: kit contents (1 and 3 kuu only) */
.sb-phero__contents {
    margin-top: calc(12 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(18 * var(--sb-u)); line-height: 1.3; font-weight: 600; color: #fff;
}
.sb-phero__contents summary { cursor: pointer; list-style: none; }
.sb-phero__contents summary::-webkit-details-marker { display: none; }
.sb-phero__contents summary::after { content: " +"; }
.sb-phero__contents[open] summary::after { content: " \2212"; }
.sb-phero__contents summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sb-phero__contents ul { margin: calc(6 * var(--sb-u)) 0 0 1.2em; padding: 0; font-weight: 400; }
.sb-phero__contents li { margin: 0; }
/* Hero: price */
.sb-phero__price {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(18 * var(--sb-u));
    margin: calc(27.9 * var(--sb-u)) 0 0;
    font-family: Nunito, sans-serif; font-size: calc(50.1 * var(--sb-u)); line-height: 1; font-weight: 400; color: #fff;
}
.sb-phero__price del { font-size: calc(24.6 * var(--sb-u)); opacity: .55; text-decoration: none; color: inherit; }
.sb-phero__price del .amount { text-decoration: line-through; }
.sb-phero__price ins { text-decoration: none; font-weight: inherit; color: inherit; }
.sb-phero__price .amount { color: inherit; }
.sb-phero__vat { font-size: calc(24.6 * var(--sb-u)); }
.sb-phero .stock.in-stock { display: none; }
/* Hero: quantity + add to cart (Flatsome's div.ux-quantity.quantity.buttons_added > input.minus + input.qty + input.plus) */
.sb-phero__cart { margin-top: calc(33 * var(--sb-u)); }
/* WooPayments' express checkout wrapper sits after the form with margin 16px 0 even when no
   wallet button renders (0 tall), which added 32 px under the buy row; the section rhythm
   (slider cards 82 below the row) is measured from the row. A rendered wallet button (not seen in
   the test browser) gets room and the buy row's width once WooPayments marks the element
   .is-ready (its own class, express-checkout.css) or a WooPay button is present:
   gap 21 as between qty and button, width 504.9 = qty 163.2 + gap 21 + button 319.7 + 1. */
.sb-phero .sb-phero__cart form.cart + .wcpay-express-checkout-wrapper, .sb-phero .sb-phero__cart .wcpay-express-checkout-wrapper { margin: 0; }
.sb-phero .sb-phero__cart .wcpay-express-checkout-wrapper:has(#wcpay-express-checkout-element.is-ready, #wcpay-woopay-button:not(:empty)) {
    margin-top: calc(21 * var(--sb-u)); max-width: calc(504.9 * var(--sb-u));
}
.sb-phero form.cart:not(.bundle_form) { display: flex; flex-wrap: wrap; align-items: center; gap: calc(21 * var(--sb-u)); width: auto; margin: 0; }
.sb-phero form.cart > * { margin: 0; }
.sb-phero form.cart .quantity {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: calc(163.2 * var(--sb-u)); height: calc(66.2 * var(--sb-u)); margin: 0; padding: 0 calc(22 * var(--sb-u));
    box-sizing: border-box; border: calc(3.83 * var(--sb-u)) solid #fb0660; border-radius: calc(23.4 * var(--sb-u)); background: none;
}
.sb-phero form.cart .quantity .minus,
.sb-phero form.cart .quantity .plus {
    width: auto; height: auto; min-height: 0; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none;
    font-family: Nunito, sans-serif; font-size: calc(35.7 * var(--sb-u)); line-height: 1; font-weight: 800; color: #fff; cursor: pointer;
}
.sb-phero form.cart .quantity .minus:focus-visible,
.sb-phero form.cart .quantity .plus:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sb-phero form.cart .quantity .qty {
    width: calc(49.4 * var(--sb-u)); max-width: none; height: calc(47.7 * var(--sb-u)); margin: 0; padding: 0;
    border: 0; border-radius: calc(11.3 * var(--sb-u)) !important; background: rgba(255, 0, 92, .12); box-shadow: none;
    font-family: Nunito, sans-serif; font-size: calc(35.7 * var(--sb-u)); line-height: 1; font-weight: 500; color: #fff; text-align: center;
    -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;
}
.sb-phero form.cart .quantity .qty::-webkit-inner-spin-button,
.sb-phero form.cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sb-phero form.cart .single_add_to_cart_button {
    display: inline-flex; align-items: center; gap: calc(17.9 * var(--sb-u));
    height: calc(66.2 * var(--sb-u)); min-height: 0; margin: 0; padding: 0 calc(25.8 * var(--sb-u)) 0 calc(30 * var(--sb-u));
    border: calc(3.83 * var(--sb-u)) solid #fb0660; border-radius: calc(23.4 * var(--sb-u)); background: none; box-shadow: none; text-shadow: none;
    font-family: Nunito, sans-serif; font-size: calc(26.9 * var(--sb-u)); line-height: 1; font-weight: 800;
    color: #fff; text-transform: uppercase; letter-spacing: 0; transition: background-color .2s;
}
.sb-phero form.cart .single_add_to_cart_button::after {
    content: ""; flex: 0 0 auto; width: calc(35.8 * var(--sb-u)); height: calc(30.7 * var(--sb-u));
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 22a1 1 0 100-2 1 1 0 000 2zM20 22a1 1 0 100-2 1 1 0 000 2zM1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E");
}
/* The Customizer's inline CSS fills .single_add_to_cart_button.button with #f0287b !important. */
.sb-phero form.cart .single_add_to_cart_button { background-color: transparent !important; }
.sb-phero form.cart .single_add_to_cart_button:hover { background-color: rgba(255, 0, 92, .15) !important; color: #fff; }
.sb-phero form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Bundles (Day 10, rulings B4/B5): the kit bundles print form.cart.bundle_form with the
   hidden bundled items first and the container quantity + button nested in
   div.bundle_data > div.bundle_wrap > div.bundle_button. The flex row above is for simple
   forms; here the same row (gap 21) is rebuilt on .bundle_button, so the quantity and
   button sit where they sit on a simple product. The quantity and button rules above
   already match the nested elements. margin 0 beats Product Bundles'
   .theme-flatsome form.bundle_form { margin-top: 1.3em }. */
.sb-phero form.cart.bundle_form { display: block; width: auto; margin: 0; }
.sb-phero form.cart.bundle_form .bundled_product { display: none; } /* B4: contents shown in cart/order, not in the hero (the plugin also hides them inline) */
.sb-phero .bundle_data .bundle_button { display: flex; flex-wrap: wrap; align-items: center; gap: calc(21 * var(--sb-u)); margin: 0; }
.sb-phero .bundle_data .bundle_price { display: none; } /* the hero already prints the price, so this rule is what keeps the plugin's bundle price hidden (the plugin does not re-add an inline display:none when the quantity changes) */
.sb-phero form.bundle_form .bundle_data .bundle_availability p.stock { margin: 0 0 calc(12 * var(--sb-u)); font: 700 calc(16 * var(--sb-u)) / 1.2 Nunito, sans-serif; color: #ff005c; } /* out-of-stock text only (in stock is hidden by .sb-phero .stock.in-stock); form.bundle_form outranks the plugin's .single-product .bundle_form .bundle_availability p.stock, which loads after this file */
.sb-phero .bundle_data .bundle_error { font-family: Nunito, sans-serif; font-size: calc(14 * var(--sb-u)); line-height: 1.3; color: #ff005c; }
.sb-phero .bundle_data .bundle_error .woocommerce-info { margin: 0 0 calc(12 * var(--sb-u)); padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.sb-phero .bundle_data .bundle_error .message-container { padding: 0; }
.sb-phero .bundle_data .bundle_error ul { text-align: left; } /* on the list: Flatsome's .medium-text-center on the container is !important under 850 */
.sb-phero .bundle_data .bundle_error li { margin-left: 0; } /* Flatsome indents list items 1.3em */
/* Alternatives ("äkki hoopis..") */
.sb-alt { position: relative; max-width: 1440px; height: calc(477.9 * var(--sb-u)); margin: 0 auto; }
.sb-alt__frame {
    position: absolute; top: 0; height: 100%; box-sizing: border-box; pointer-events: none;
    left: calc(-15.5 * var(--sb-u) - max(0px, (100vw - 1440px) / 2));
    width: calc(1359.8 * var(--sb-u) + max(0px, (100vw - 1440px) / 2));
    border: calc(2.56 * var(--sb-u)) solid #ff005c; border-radius: calc(14.9 * var(--sb-u));
}
.sb-alt__title {
    position: absolute; left: calc(53.6 * var(--sb-u)); top: calc(153.5 * var(--sb-u)); margin: 0; padding: 0;
    font-family: Nunito, sans-serif; font-size: calc(76.7 * var(--sb-u)); line-height: 1.008; font-weight: 900;
    letter-spacing: 0; text-transform: lowercase;
}
.sb-alt__t1 { display: block; color: #fff; }
.sb-alt__t2 { display: block; color: #ff005c; }
.sb-alt__grid {
    position: absolute; left: calc(493 * var(--sb-u)); top: calc(37.2 * var(--sb-u));
    display: grid; grid-template-columns: calc(440 * var(--sb-u)) calc(440 * var(--sb-u));
    column-gap: calc(19 * var(--sb-u)); row-gap: calc(34.5 * var(--sb-u));
}
.sb-alt__tile {
    position: relative; display: block; width: calc(440 * var(--sb-u)); height: calc(184 * var(--sb-u));
    overflow: hidden; text-decoration: none; background: #000;
}
.sb-alt__tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; transition: transform .4s ease;
}
.sb-alt__tile:hover img, .sb-alt__tile:focus-visible img { transform: scale(1.04); }
.sb-alt__tile:focus-visible { outline: 3px solid #ff005c; outline-offset: 3px; }
.sb-alt__label {
    position: absolute; left: calc(16.4 * var(--sb-u)); top: 50%; transform: translateY(-50%);
    font-family: Nunito, sans-serif; font-size: calc(45.1 * var(--sb-u)); line-height: 1; font-weight: 900;
    color: #e8e8e8; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
/* Section rhythm (P12). Flatsome writes section padding as #id rules, so
   the spacing sits on the components inside the section classes. */
.sb-product-hero .sb-phero { padding-top: calc(35 * var(--sb-u)); }
.sb-product-reviews .sb-rslider-shell { padding-top: calc(82 * var(--sb-u)); }
.sb-product-alt .sb-alt { margin-top: calc(71 * var(--sb-u)); }
.sb-product-reel .sb-reel { margin-top: calc(130 * var(--sb-u)); }
@media (prefers-reduced-motion: reduce) {
    .sb-phero__thumb img, .sb-alt__tile img, .sb-phero form.cart .single_add_to_cart_button { transition: none; }
    .sb-phero__thumb:hover img, .sb-phero__thumb:focus-visible img,
    .sb-alt__tile:hover img, .sb-alt__tile:focus-visible img { transform: none; }
}
/* Tablets and phones: one column (photo, thumbs, then the buy column),
   alternatives as a static 2 x 2 grid inside the frame. */
@media (max-width: 849px) {
    .sb-phero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 0; }
    .sb-product-hero .sb-phero { padding-top: 24px; }
    .sb-phero__frame { padding: 12px; border-radius: 6px; }
    .sb-phero__frame .flickity-prev-next-button { width: 14px; height: 21px; margin-top: -10.5px; }
    .sb-phero__frame .flickity-prev-next-button.previous { left: -13px; }
    .sb-phero__frame .flickity-prev-next-button.next { right: -13px; }
    .sb-phero__thumbs { gap: 12px; margin-top: 12px; }
    .sb-phero__thumb-label { font-size: 16px; }
    .sb-phero__title { margin-top: 0; }
    .sb-phero__kicker { font-size: 20px; }
    .sb-phero__word { margin-top: 0; font-size: 40px; }
    .sb-phero__words {
        flex-wrap: wrap; gap: 8px 14px; width: auto; margin-top: 16px; padding: 8px 0 9px;
        font-size: 16px; border-width: 1px 0 2px;
    }
    .sb-phero__star { width: 10px; height: 10px; }
    .sb-phero__desc { max-width: none; margin-top: 12px; font-size: 16px; line-height: 1.4; }
    .sb-phero__contents { margin-top: 12px; font-size: 15px; }
    .sb-phero__contents ul { margin-top: 6px; }
    .sb-phero__price { gap: 12px; margin-top: 20px; font-size: 32px; }
    .sb-phero__price del, .sb-phero__vat { font-size: 16px; }
    .sb-phero__cart { margin-top: 20px; }
    .sb-phero .sb-phero__cart .wcpay-express-checkout-wrapper:has(#wcpay-express-checkout-element.is-ready, #wcpay-woopay-button:not(:empty)) { margin-top: 12px; max-width: none; } /* full width like the stacked button, 12 = qty-to-button gap */
    .sb-phero form.cart:not(.bundle_form), .sb-phero .bundle_data .bundle_button { gap: 12px; }
    .sb-phero form.bundle_form .bundle_data .bundle_availability p.stock { margin-bottom: 12px; font-size: 16px; }
    .sb-phero .bundle_data .bundle_error { font-size: 14px; }
    .sb-phero .bundle_data .bundle_error .woocommerce-info { margin-bottom: 12px; }
    .sb-phero form.cart .quantity { width: 140px; height: 52px; padding: 0 16px; border-width: 3px; border-radius: 18px; }
    .sb-phero form.cart .quantity .minus, .sb-phero form.cart .quantity .plus { font-size: 28px; }
    .sb-phero form.cart .quantity .qty { width: 42px; height: 38px; border-radius: 9px !important; font-size: 26px; }
    .sb-phero form.cart .single_add_to_cart_button {
        flex: 1 1 100%; justify-content: center; gap: 12px; height: 52px; padding: 0 20px;
        border-width: 3px; border-radius: 18px; font-size: 20px;
    }
    .sb-phero form.cart .single_add_to_cart_button::after { width: 28px; height: 24px; }
    .sb-alt { height: auto; padding: 24px 16px; }
    .sb-product-alt .sb-alt { margin-top: 48px; }
    .sb-alt__frame { left: -16px; width: calc(100% + 16px); border-width: 2px; border-radius: 12px; }
    .sb-alt__title { position: static; font-size: 40px; }
    .sb-alt__grid { position: static; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
    .sb-alt__tile { width: auto; height: auto; aspect-ratio: 440 / 184; }
    .sb-alt__label { left: 12px; font-size: 20px; }
    .sb-product-reviews .sb-rslider-shell { padding-top: 48px; }
    .sb-product-reel .sb-reel { margin: 56px 0 40px; }
}
/* Phones: alternatives one per row. */
@media (max-width: 549px) {
    .sb-alt__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Page title ([sb_page_title], Day 6: Blogi "HOT / TOPIC", Meie lugu
   "ALATES / ALGUSEST"; inc/post-grid.php). docs/design/blog-abc-attributes.md
   "Heading + intro"; design px at 1440 via --sb-u as in the Shop page block.
   Monument Extended Bold 76.9 -> Nunito 900 uppercase, line pitch 75.1
   (0.977 x 76.9); first word solid, second hollow (2px stroke).
   Title + intro row: page markup (Task 3) wraps the title and the intro in
   .sb-lead / .sb-lead__intro. Heading top 168 = header bottom 130 + 38;
   intro 100 right of the heading (ruling B4), 695 wide, Greycliff 28.2 ->
   Nunito 400, paragraph gap 54.4 - line 33.3 = 21.
   Accent (ruling B1): purple #b03eff on Blogi, red #ff0036 on Meie lugu;
   the components read it through --sb-accent.
   ------------------------------------------------------------------ */
.sb-accent--purple { --sb-accent: #b03eff; }
.sb-accent--red { --sb-accent: #ff0036; }
/* h1 + class: out-specifies Flatsome's ".dark h1 { color:#fff }" and its "h1 { width:100% }" */
h1.sb-ptitle {
    --sb-u: min(1px, calc(100vw / 1440));
    margin: 0; padding: 0; flex: 0 0 auto; width: auto;
    font-family: Nunito, sans-serif; font-size: calc(76.9 * var(--sb-u)); line-height: .977; font-weight: 900;
    letter-spacing: 0; text-transform: uppercase; color: var(--sb-accent);
}
.sb-ptitle span { display: block; }
.sb-ptitle__hollow { color: transparent; -webkit-text-stroke: 2px var(--sb-accent); }
.sb-lead {
    --sb-u: min(1px, calc(100vw / 1440));
    display: flex; align-items: flex-start; gap: calc(100 * var(--sb-u));
    max-width: 1440px; margin: 0 auto; box-sizing: border-box;
    padding: calc(38 * var(--sb-u)) calc(50 * var(--sb-u)) 0 calc(50.1 * var(--sb-u));
}
.sb-lead__intro {
    width: calc(695 * var(--sb-u)); max-width: 100%; margin-top: calc(11.8 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(28.2 * var(--sb-u)); line-height: 1.18; font-weight: 400; color: #fff;
}
.sb-lead__intro p { margin: 0; font: inherit; color: inherit; }
.sb-lead__intro p + p { margin-top: calc(21 * var(--sb-u)); }
.sb-lead__intro strong { font-weight: 800; }
@media (max-width: 849px) {
    .sb-lead { flex-direction: column; gap: 16px; padding: 24px 16px 0; }
    h1.sb-ptitle { font-size: 40px; }
    .sb-lead__intro { width: 100%; margin-top: 0; font-size: 16px; line-height: 1.4; }
    .sb-lead__intro p + p { margin-top: 12px; }
}

/* ------------------------------------------------------------------
   Post grid ([sb_post_grid], Day 6; inc/post-grid.php). docs/design/
   blog-abc-attributes.md "Post grid (8 tiles)", "Connector lines + glow",
   "VAATA ROHKEM"; design px at 1440 via --sb-u.
   Grid top 414 (intro bottom 320 + 94). Three virtual columns x 50.1 /
   514.5 / 977, tile 412.8 x 311.7; Canva's second column gap is 49.5, both
   gaps are 51.6 here (column 3 at 978.9, 1.9 px drift, inside the tolerance).
   Rows of two alternate cols 1-2 / 2-3 (ruling B2); row gaps 117 (1 -> 2,
   the 85 row gap + 32 on row 2) then 85. r5-r8 exist for posts="16".
   Tile: black under the photo (no featured image = black tile with its
   title), bottom gradient from 17 % down, title 700 28.2 two lines max
   (line clamp), outlined arrow button 59.6 x 58 r 20.5 at tile right - 72.7,
   bottom - 60, white arrow 28 x 20.
   Lines and glow (ruling B10; the shortcode prints only the ones whose rows
   exist) are positioned from the grid box: Canva x as is (the box starts
   at page x 0 at 1440), Canva y - 414. They run past both page edges; the
   section (class sb-blog-grid-section, Task 3) clips them horizontally.
   VAATA ROHKEM (ruling B9, server-side ?pg=N pager): 121 below row 4,
   x 794.4 (744.3 inside the 50.1 padding), text 48.2 and arrow 38.9 from
   the outer edges (border 3.84 included).
   ------------------------------------------------------------------ */
.sb-blog-grid-section { overflow-x: clip; }
.sb-pgrid {
    --sb-u: min(1px, calc(100vw / 1440));
    --sb-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 10h22M16 3l8 7-8 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: relative; max-width: 1440px; margin: calc(94 * var(--sb-u)) auto 0; box-sizing: border-box;
    padding: 0 calc(50 * var(--sb-u)) 0 calc(50.1 * var(--sb-u));
}
.sb-pgrid__tiles {
    position: relative; z-index: 1; display: grid; align-items: start;
    grid-template-columns: repeat(3, calc(412.8 * var(--sb-u)));
    column-gap: calc(51.6 * var(--sb-u)); row-gap: calc(85 * var(--sb-u));
}
.sb-pgrid__tile--c1 { grid-column: 1; }
.sb-pgrid__tile--c2 { grid-column: 2; }
.sb-pgrid__tile--c3 { grid-column: 3; }
.sb-pgrid__tile--r1 { grid-row: 1; }
.sb-pgrid__tile--r2 { grid-row: 2; margin-top: calc(32 * var(--sb-u)); }
.sb-pgrid__tile--r3 { grid-row: 3; }
.sb-pgrid__tile--r4 { grid-row: 4; }
.sb-pgrid__tile--r5 { grid-row: 5; }
.sb-pgrid__tile--r6 { grid-row: 6; }
.sb-pgrid__tile--r7 { grid-row: 7; }
.sb-pgrid__tile--r8 { grid-row: 8; }
.sb-pgrid__tile {
    position: relative; display: block; height: calc(311.7 * var(--sb-u)); overflow: hidden;
    background: #000; color: #fff; text-decoration: none;
}
.sb-pgrid__tile::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, .92) 100%);
}
.sb-pgrid__img {
    display: block; width: 100%; height: 100%; max-width: none; margin: 0;
    object-fit: cover; transition: transform .4s ease;
}
.sb-pgrid__title {
    position: absolute; z-index: 2; left: calc(13.2 * var(--sb-u)); right: calc(85 * var(--sb-u)); bottom: calc(6 * var(--sb-u));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-family: Nunito, sans-serif; font-size: calc(28.2 * var(--sb-u)); line-height: 1; font-weight: 700;
    color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); overflow-wrap: anywhere;
}
.sb-pgrid__arrow {
    position: absolute; z-index: 2; right: calc(13.1 * var(--sb-u)); bottom: calc(2 * var(--sb-u));
    width: calc(59.6 * var(--sb-u)); height: calc(58 * var(--sb-u)); box-sizing: border-box;
    border: calc(3.84 * var(--sb-u)) solid var(--sb-accent); border-radius: calc(20.5 * var(--sb-u));
    transition: background-color .2s;
}
.sb-pgrid__arrow::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: calc(28 * var(--sb-u)); height: calc(20 * var(--sb-u)); transform: translate(-50%, -50%);
    background: center / contain no-repeat var(--sb-arrow-white);
}
.sb-pgrid__tile:hover .sb-pgrid__arrow, .sb-pgrid__tile:focus-visible .sb-pgrid__arrow { background-color: rgba(255, 255, 255, .1); }
.sb-pgrid__tile:hover .sb-pgrid__img, .sb-pgrid__tile:focus-visible .sb-pgrid__img { transform: scale(1.04); }
.sb-pgrid__tile:focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 3px; }
/* Connector lines (rounded outlines, stroke 6.4 r 14.1) and the glow, behind the tiles. */
.sb-pgrid__line {
    position: absolute; z-index: 0; box-sizing: border-box; pointer-events: none;
    border: calc(6.4 * var(--sb-u)) solid var(--sb-accent); border-radius: calc(14.1 * var(--sb-u));
}
/* Wider than 1440 the band is centred: --sb-bleed (the band's side margin)
   stretches the lines' off-page ends to the viewport edge, where the
   section's overflow-x clip cuts them, so no closed rounded end shows. */
.sb-pgrid { --sb-bleed: max(0px, (100vw - 1440px) / 2); }
.sb-pgrid__line--1 { left: calc(256.6 * var(--sb-u)); top: calc(115.3 * var(--sb-u)); width: calc(1202.9 * var(--sb-u) + var(--sb-bleed)); height: calc(394 * var(--sb-u)); }
.sb-pgrid__line--2 { left: calc(-15 * var(--sb-u) - var(--sb-bleed)); top: calc(719.4 * var(--sb-u)); width: calc(748.6 * var(--sb-u) + var(--sb-bleed)); height: calc(479 * var(--sb-u)); }
.sb-pgrid__line--3 { left: calc(695.4 * var(--sb-u)); top: calc(1483.9 * var(--sb-u)); width: calc(745 * var(--sb-u) + var(--sb-bleed)); height: calc(340.6 * var(--sb-u)); }
.sb-pgrid__glow {
    position: absolute; z-index: 0; pointer-events: none;
    left: calc(-240.5 * var(--sb-u)); top: calc(478.8 * var(--sb-u));
    width: calc(1393.6 * var(--sb-u)); height: calc(1393.6 * var(--sb-u));
    background: radial-gradient(circle, rgba(130, 60, 220, .38) 0%, rgba(130, 60, 220, 0) 60%);
}
/* Fewer rows than Canva's 4 (Task 3 live check): the 4-row glow would fade
   out ~450 px below the last row, over the steps strip. Square glows centred
   on the rows they sit behind, sized so the visible fade (60 % of the
   half-diagonal = 0.424 x side) ends inside the grid box. Rows 3: 1000 px
   centred on rows 2-3 (x centre 456.3 as Canva, y 783). The 85 px bottom
   padding (the row gap row 4 would start at) keeps line 2's bottom leg
   (60.7 below row 3) inside the grid section; with the pager, line 3's
   loop ends 94 below the button. */
.sb-pgrid--rows-2 .sb-pgrid__glow { left: calc(176.3 * var(--sb-u)); top: calc(220 * var(--sb-u)); width: calc(560 * var(--sb-u)); height: calc(560 * var(--sb-u)); }
.sb-pgrid--rows-3 .sb-pgrid__glow { left: calc(-43.7 * var(--sb-u)); top: calc(283 * var(--sb-u)); width: calc(1000 * var(--sb-u)); height: calc(1000 * var(--sb-u)); }
.sb-pgrid--rows-3 { padding-bottom: calc(85 * var(--sb-u)); }
.sb-pgrid--more { padding-bottom: calc(100 * var(--sb-u)); }
/* VAATA ROHKEM */
.sb-pgrid__more {
    position: relative; z-index: 1; display: flex; align-items: center; width: max-content; gap: calc(49 * var(--sb-u));
    height: calc(74.2 * var(--sb-u)); margin: calc(121 * var(--sb-u)) 0 0 calc(744.3 * var(--sb-u));
    padding: 0 calc(35.1 * var(--sb-u)) 0 calc(44.4 * var(--sb-u)); box-sizing: border-box;
    border: calc(3.84 * var(--sb-u)) solid var(--sb-accent); border-radius: calc(26.2 * var(--sb-u)); background: #000;
    font-family: Nunito, sans-serif; font-size: calc(26.9 * var(--sb-u)); line-height: 1; font-weight: 800;
    color: #fff; text-transform: uppercase; text-decoration: none; transition: background-color .2s;
}
.sb-pgrid__more-arrow {
    flex: 0 0 auto; width: calc(35.9 * var(--sb-u)); height: calc(25.6 * var(--sb-u));
    background: center / contain no-repeat var(--sb-arrow-white);
}
.sb-pgrid__more:hover, .sb-pgrid__more:focus-visible { background-color: #1a1a1a; color: #fff; }
.sb-pgrid__more:focus-visible { outline: 3px solid var(--sb-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .sb-pgrid__img, .sb-pgrid__arrow, .sb-pgrid__more { transition: none; }
    .sb-pgrid__tile:hover .sb-pgrid__img, .sb-pgrid__tile:focus-visible .sb-pgrid__img { transform: none; }
}
/* Tablets and phones (ruling B13): tiles stack, no lines or glow,
   VAATA ROHKEM full width. Two per row on tablets, one on phones. */
@media (max-width: 849px) {
    .sb-pgrid { margin-top: 32px; padding: 0 16px; }
    .sb-pgrid__tiles { grid-template-columns: 1fr; gap: 16px; }
    .sb-pgrid__tile[class*="sb-pgrid__tile--"] { grid-column: auto; grid-row: auto; margin-top: 0; }
    .sb-pgrid__tile { height: auto; aspect-ratio: 412.8 / 311.7; }
    .sb-pgrid__title { left: 12px; right: 64px; bottom: 8px; font-size: 20px; }
    .sb-pgrid__arrow { right: 10px; bottom: 6px; width: 44px; height: 43px; border-width: 3px; border-radius: 15px; }
    .sb-pgrid__arrow::after { width: 21px; height: 15px; }
    .sb-pgrid__line, .sb-pgrid__glow { display: none; }
    .sb-pgrid__more {
        justify-content: center; width: 100%; height: 56px; margin: 24px 0 0; padding: 0 20px; gap: 16px;
        border-width: 3px; border-radius: 20px; font-size: 20px;
    }
    .sb-pgrid__more-arrow { width: 28px; height: 20px; }
}
@media (min-width: 550px) and (max-width: 849px) {
    .sb-pgrid__tiles { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------
   Story body (Day 6, ruling B12): readability for the Meie lugu story
   posts on Flatsome's default single template. Scoped to the category
   class post_class() prints on the article (category-meie-lugu), so the
   blog posts 636/643 and their custom markup are untouched.
   ------------------------------------------------------------------ */
.single-post .category-meie-lugu .entry-content {
    max-width: 760px; margin: 0 auto;
    font-family: Nunito, sans-serif; font-size: 18px; line-height: 1.65; font-weight: 400;
}
.single-post .category-meie-lugu .entry-content h2 {
    margin: 1.6em 0 .6em;
    font-family: Nunito, sans-serif; font-size: 26px; line-height: 1.2; font-weight: 900; text-transform: uppercase;
}

/* ------------------------------------------------------------------
   ABC page ([sb_abc_title], [sb_abc_steps], [sb_tutorial_video], [sb_kkk];
   Day 7, inc/abc.php + inc/kkk-data.php). docs/design/blog-abc-attributes.md
   part 1; rulings A3-A7, A9, A10. Design px at 1440 via --sb-u on each
   component root; the page (Task 3) stacks them in full-width collapsed
   rows, each component is its own centred 1440 band.
   Title: header bottom + 60 (Canva em top; Nunito baseline matched to Canva's
   254.3 via padding 71.6), 64.1, word gap 37.7, ABC hollow (2px stroke).
   Task 3 live pass: text is matched on Canva BASELINES (Canva em top + size;
   Nunito's baseline sits at .829em of a line-height-1 box), boxes on edges.
   Steps (A3): 3 x 389.5 tiles, edges 54 -> 1388, gaps 82.7, rows 359.3 /
   874.1 (title bottom 265.6 + 93.4; tile pitch 514.8 = 393.1 tile+caption
   box (caption lifted 4.1) + 121.9 grid gap), fade over the lower half, number baseline 12 above
   the tile bottom, caption baseline 19 below it (Canva row 1).
   Video (A4/A5): heading pitch 82.7 (line 1 right edge 1271, line 2 from
   x 338), poster 1167.1 x 604.9 at 136.1, top fade + .59 overlay, play
   86.8 x 99.7 centred; TEISED VIDEOD 381.3 x 74.2, right edge 1304 = the
   poster's, text 49.2 and arrow 39 from the outer edges (border included).
   KKK (A6): heading centred, rows pitch 54.7 (1 px divider + 53.7 summary),
   question x 205.3, "+" x 1185.6 (right padding 1389 - 1185.6 - 29.9 measured glyph ≈ 178),
   open answer 20/1.5, text width max 846.
   ------------------------------------------------------------------ */
/* h1/h2 + class: out-specify Flatsome's ".dark h1/h2 { color }" and "h1 { width:100% }" */
h1.sb-abc-title {
    --sb-u: min(1px, calc(100vw / 1440));
    display: flex; flex-wrap: nowrap; gap: calc(37.7 * var(--sb-u));
    max-width: 1440px; width: auto; margin: 0 auto; box-sizing: border-box;
    padding: calc(71.6 * var(--sb-u)) 0 0 calc(55.7 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(64.1 * var(--sb-u)); line-height: 1; font-weight: 900;
    letter-spacing: 0; text-transform: uppercase; color: #ff005c;
}
.sb-abc-title__hollow { color: transparent; -webkit-text-stroke: 2px #ff005c; }

/* Step tiles */
ol.sb-abc-steps {
    --sb-u: min(1px, calc(100vw / 1440));
    list-style: none; display: grid; align-items: start;
    grid-template-columns: repeat(3, calc(389.5 * var(--sb-u)));
    column-gap: calc(82.7 * var(--sb-u)); row-gap: calc(121.9 * var(--sb-u));
    max-width: 1440px; margin: calc(93.4 * var(--sb-u)) auto 0; box-sizing: border-box;
    padding: 0 calc(52 * var(--sb-u)) 0 calc(54 * var(--sb-u));
}
.sb-abc-steps .sb-abc-step { position: relative; margin: 0; padding: 0; list-style: none; }
.sb-abc-step__tile {
    position: relative; height: calc(312.6 * var(--sb-u)); overflow: hidden;
    border-radius: calc(8.3 * var(--sb-u)); background: #000;
}
.sb-abc-step__tile img.sb-abc-step__img {
    display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover;
}
.sb-abc-step__tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 54%, #000 100%);
}
.sb-abc-step__num {
    position: absolute; z-index: 1; left: calc(5.4 * var(--sb-u)); top: calc(267.7 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(40.3 * var(--sb-u)); line-height: 1; font-weight: 900;
    color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
/* negative top margin: Canva's caption baseline is 19 below the tile bottom; relative + z-index paints it over the tile's black edge */
.sb-abc-steps p.sb-abc-step__cap {
    position: relative; z-index: 1;
    margin: calc(-4.1 * var(--sb-u)) 0 0 calc(9 * var(--sb-u)); padding: 0; max-width: calc(382 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(28.2 * var(--sb-u)); line-height: 1; font-weight: 400;
    color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
.sb-abc-step__cap strong { font-weight: 700; color: #ff005c; }

/* Tutorial video block (id="opetusvideo", the KKK answer links here) */
.sb-tvideo {
    --sb-u: min(1px, calc(100vw / 1440));
    --sb-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 10h22M16 3l8 7-8 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: relative; max-width: 1440px; margin: calc(106.8 * var(--sb-u)) auto 0; box-sizing: border-box;
    scroll-margin-top: 100px; /* #opetusvideo target: clears Flatsome's sticky header */
    padding: 0 calc(136.9 * var(--sb-u)) 0 calc(136.1 * var(--sb-u));
}
.sb-tvideo [hidden] { display: none !important; }
/* margin-bottom -12.7: the poster starts 3.3 below the ÕPETUSVIDEOT baseline (Canva) */
h2.sb-tvideo__title {
    margin: 0 0 calc(-12.7 * var(--sb-u)); padding: 0; width: auto;
    font-family: Nunito, sans-serif; font-size: calc(76.9 * var(--sb-u)); line-height: 1.075; font-weight: 900;
    letter-spacing: 0; text-transform: uppercase;
}
.sb-tvideo__t1 { display: block; text-align: right; color: #fff; margin-right: calc(32.3 * var(--sb-u)); }
.sb-tvideo__t2 { display: block; color: #ff005c; margin-left: calc(201.5 * var(--sb-u)); text-shadow: 0 0 24px rgba(255, 0, 92, .38); }
.sb-tvideo__media {
    position: relative; height: calc(604.9 * var(--sb-u)); overflow: hidden;
    border-radius: calc(8.3 * var(--sb-u)); background: #000;
}
.sb-tvideo .sb-tvideo__poster {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; line-height: 0;
    letter-spacing: 0; text-transform: none; box-shadow: none; cursor: pointer;
}
.sb-tvideo__poster img.sb-tvideo__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.sb-tvideo__poster::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0, rgba(0, 0, 0, .59) calc(57 * var(--sb-u)), rgba(0, 0, 0, .59) 100%);
}
.sb-tvideo__play {
    position: absolute; left: 50%; top: 50%;
    width: calc(86.8 * var(--sb-u)); height: calc(99.7 * var(--sb-u)); transform: translate(-50%, -50%);
    background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 3px; transition: transform .2s;
}
.sb-tvideo__poster:hover .sb-tvideo__play, .sb-tvideo__poster:focus-visible .sb-tvideo__play { transform: translate(-50%, -50%) scale(1.06); }
.sb-tvideo__poster:focus-visible { outline: 3px solid #ff005c; outline-offset: -3px; }
.sb-tvideo__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
/* TEISED VIDEOD: fixed Canva width, text and arrow pinned to the edges
   (Nunito's text width differs from Greycliff's 192.4). */
a.sb-tvideo__more {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    width: calc(381.3 * var(--sb-u)); height: calc(74.2 * var(--sb-u));
    margin: calc(48 * var(--sb-u)) 0 0 calc(786.6 * var(--sb-u));
    /* 4.2: Nunito baseline sat 2.1 lower than Canva's 2226.4 */
    padding: calc(4.2 * var(--sb-u)) calc(35.2 * var(--sb-u)) 0 calc(45.4 * var(--sb-u)); box-sizing: border-box;
    background: #1a0209; border: calc(3.84 * var(--sb-u)) solid #ff005c; border-radius: calc(26.2 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: calc(26.9 * var(--sb-u)); line-height: 1; font-weight: 800;
    letter-spacing: 0; text-transform: uppercase; color: #fff; text-decoration: none; transition: background-color .2s;
}
.sb-tvideo__arrow {
    flex: 0 0 auto; width: calc(35.9 * var(--sb-u)); height: calc(25.6 * var(--sb-u));
    background: center / contain no-repeat var(--sb-arrow-white);
}
a.sb-tvideo__more:hover, a.sb-tvideo__more:focus-visible { background-color: #3a0414; color: #fff; }
a.sb-tvideo__more:focus-visible { outline: 3px solid #ff005c; outline-offset: 3px; }

/* KKK accordion (native <details>; nothing interactive inside <summary>) */
.sb-kkk {
    --sb-u: min(1px, calc(100vw / 1440));
    /* bottom +5: Canva's Join the Club band starts 55 below the closing line; the
       footer block opens with a 50 gap (`[gap height="50px"]`, site/pages/261-footer-block.txt
       line 1). Dependency: change one, re-measure the other. */
    max-width: 1440px; margin: calc(95.4 * var(--sb-u)) auto calc(5 * var(--sb-u)); box-sizing: border-box;
    padding: 0 calc(51 * var(--sb-u)) 0 calc(172 * var(--sb-u));
}
/* negative side margins = the .sb-kkk padding: centred on the page (A6), not the list */
h2.sb-kkk__title {
    margin: 0 calc(-51 * var(--sb-u)) calc(45.2 * var(--sb-u)) calc(-172 * var(--sb-u)); padding: 0; width: auto; text-align: center;
    font-family: Nunito, sans-serif; font-size: calc(76.9 * var(--sb-u)); line-height: 1; font-weight: 900;
    letter-spacing: 0; text-transform: uppercase; color: #ff005c;
}
/* hairlines as 1px backgrounds + 1px padding, not borders: Chrome snaps a 1px border to .667 at 150 % scaling, which shrank the pitch to 54.4 */
.sb-kkk__list { padding-bottom: 1px; background: linear-gradient(90deg, #666, #000) left bottom / 100% 1px no-repeat; }
.sb-kkk__item { margin: 0; padding-top: 1px; background: linear-gradient(90deg, #666, #000) left top / 100% 1px no-repeat; }
.sb-kkk__q {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: calc(53.7 * var(--sb-u)); box-sizing: border-box;
    padding: calc(5.3 * var(--sb-u)) calc(178 * var(--sb-u)) calc(8.7 * var(--sb-u)) calc(33.3 * var(--sb-u)); /* 5.3/8.7: question baseline 35.4 below its divider (Canva) */
    font-family: Nunito, sans-serif; font-size: calc(28.2 * var(--sb-u)); line-height: 1; font-weight: 400;
    color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}
.sb-kkk__q::-webkit-details-marker { display: none; }
.sb-kkk__q::marker { content: ""; }
/* line-height .5: the 49.8 glyph must not grow the 53.7 row */
.sb-kkk__plus {
    flex: 0 0 auto; font-size: calc(49.8 * var(--sb-u)); line-height: .5; opacity: .66; transition: transform .2s;
}
.sb-kkk__item[open] .sb-kkk__plus { transform: rotate(45deg); }
.sb-kkk__q:focus-visible { outline: 2px solid #ff005c; outline-offset: -2px; }
.sb-kkk__a {
    padding: calc(14 * var(--sb-u)) calc(182 * var(--sb-u)) calc(22 * var(--sb-u)) calc(33.3 * var(--sb-u));
    font-family: Nunito, sans-serif; font-size: max(15px, calc(20 * var(--sb-u))); line-height: 1.5; font-weight: 400;
    color: rgba(255, 255, 255, .85);
}
.sb-kkk__a p { max-width: calc(846 * var(--sb-u)); margin: 0; font: inherit; color: inherit; }
.sb-kkk__a p + p { margin-top: .6em; }
.sb-kkk__a a { color: #ff005c; text-decoration: underline; }
.sb-kkk__a a:hover, .sb-kkk__a a:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .sb-kkk__plus, .sb-tvideo__play, a.sb-tvideo__more { transition: none; }
    .sb-tvideo__poster:hover .sb-tvideo__play, .sb-tvideo__poster:focus-visible .sb-tvideo__play { transform: translate(-50%, -50%); }
}
/* Tablets and phones (ruling A10): stacking, fixed px. The step number
   joins the flow under the tile and a negative margin lifts it onto the
   tile bottom (the tile height follows its width here). */
@media (max-width: 849px) {
    h1.sb-abc-title { flex-wrap: wrap; gap: 0 12px; padding: 24px 16px 0; font-size: 32px; }
    ol.sb-abc-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; padding: 0 16px; }
    .sb-abc-step__tile { height: auto; aspect-ratio: 900 / 720; }
    .sb-abc-step__num { position: relative; top: auto; left: auto; display: block; margin: -32px 0 0 8px; font-size: 24px; }
    .sb-abc-steps p.sb-abc-step__cap { max-width: none; margin: 10px 0 0 8px; font-size: 16px; line-height: 1.3; }
    .sb-tvideo { margin-top: 32px; padding: 0 16px; }
    h2.sb-tvideo__title { margin-bottom: 12px; font-size: 32px; }
    .sb-tvideo__t1, .sb-tvideo__t2 { text-align: left; margin: 0; }
    .sb-tvideo__media { height: auto; aspect-ratio: 1167 / 605; border-radius: 8px; }
    .sb-tvideo__play { width: 44px; height: 50px; }
    a.sb-tvideo__more {
        justify-content: center; gap: 16px; width: 100%; height: 52px; margin: 16px 0 0; padding: 0 20px;
        border-width: 3px; border-radius: 20px; font-size: 16px;
    }
    .sb-tvideo__arrow { width: 28px; height: 20px; }
    .sb-kkk { margin-top: 32px; margin-bottom: 0; padding: 0 16px; }
    h2.sb-kkk__title { margin: 0 0 16px; font-size: 40px; }
    .sb-kkk__q { min-height: 48px; padding: 12px 8px 12px 0; font-size: 18px; line-height: 1.25; }
    .sb-kkk__plus { font-size: 28px; }
    .sb-kkk__a { padding: 0 0 14px; font-size: 15px; }
    .sb-kkk__a p { max-width: none; }
}
@media (min-width: 550px) and (max-width: 849px) {
    ol.sb-abc-steps { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------
   Checkout (Day 9): dark checkout theme, ported from Code Snippet 9
   "Cart and checkout visuals" (archived in site/snippets/09-cart-and-
   checkout-visuals.php), which printed these rules in wp_head on
   is_checkout() only. Every selector is scoped to .woocommerce-checkout
   (the checkout body class, also on the order-pay/order-received
   endpoints the snippet covered); the cart page's rules live in the
   "Cart (Day 11)" block below. The !importants are the snippet's own,
   against WooCommerce/Flatsome/WooPayments form rules. The unused
   .tra-logo-box helper was dropped.
   ------------------------------------------------------------------ */
/* 1. Page background and text */
.woocommerce-checkout,
.woocommerce-checkout #main,
.woocommerce-page.woocommerce-checkout {
    background-color: #0d0d0d !important;
    color: #ffffff !important;
}
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout label,
.woocommerce-checkout p,
.woocommerce-checkout .woocommerce-billing-fields h3 {
    color: #ffffff !important;
}
/* Section headings (billing details, your order) */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
/* 2. Inputs: transparent fill, light border */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
    border-color: #c0577a !important;
    outline: none !important;
}
/* Select2 (country) text and arrow */
.woocommerce-checkout .select2-selection__rendered {
    color: #ffffff !important;
}
.woocommerce-checkout .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}
/* Checkbox labels */
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
    color: #ffffff !important;
}
/* 3. Coupon row */
.woocommerce-checkout .checkout-coupon-toggle a,
.woocommerce-checkout .woocommerce-info {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}
/* 4. Order review box */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    background-color: transparent !important;
    border: none !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    border-top: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    background: transparent !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .amount {
    color: #c0577a !important;
    font-weight: 700;
}
/* 4b. Bundle child rows (Day 11, H3): no divider above a child, muted, label from inc/bundles.php. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.bundled_table_item td { border-top: 0 !important; padding-top: 4px; padding-bottom: 8px; opacity: .7; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.bundled_table_item .bundled-product-name { font-size: 13px; font-weight: 600; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.bundled_table_item .product-quantity { font-weight: 600; }
/* Inline after "NAME × n" (final fix B1): display:block pushed "× n" onto a third line. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.bundled_table_item .sb-bundled-label { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
/* 5. Payment methods as pills in a row */
.woocommerce-checkout ul.wc_payment_methods {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none !important;
    padding: 0 !important;
    border: none !important;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
    flex: 1 1 auto;
    min-width: 120px;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 30px !important;
    padding: 10px 18px !important;
    background: transparent !important;
    text-align: center;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label {
    color: #ffffff !important;
    font-weight: 600;
}
.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
    accent-color: #c0577a;
}
/* Payment method description box */
.woocommerce-checkout .payment_box {
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    border: none !important;
}
/* 6. Place order button: pill with an arrow */
.woocommerce-checkout #place_order {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    border-radius: 40px !important;
    color: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 40px !important;
    letter-spacing: 1px;
    transition: all 0.25s ease;
}
.woocommerce-checkout #place_order:hover {
    background-color: #ffffff !important;
    color: #0d0d0d !important;
}
.woocommerce-checkout #place_order::after {
    content: " \2192"; /* right arrow */
    margin-left: 8px;
}
/* 7. Quantity stepper as a rounded capsule */
.woocommerce-checkout .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px;
    overflow: hidden;
}
.woocommerce-checkout .quantity input.qty,
.woocommerce-checkout .quantity .plus,
.woocommerce-checkout .quantity .minus {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}
/* 8. Section dividers */
.woocommerce-checkout .checkout-billing-details,
.woocommerce-checkout .checkout-order-review {
    border-color: rgba(255,255,255,0.15) !important;
}
/* 9. Shipping methods and the MultiParcels locker picker (Day 12). Flatsome prints the
   methods as ul#shipping_method radios; the plugin renders #mp-wc-pickup-point-shipping once
   before #payment and turns its <select> into select2 via selectWoo (inc/shipping.php, S9).
   The dropdown is appended to <body>, which carries .woocommerce-checkout, so the prefix still
   reaches .select2-dropdown. Colours as the rest of the block. */
.woocommerce-checkout ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-checkout ul#shipping_method li.shipping__list_item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.woocommerce-checkout ul#shipping_method li.shipping__list_item:first-child { border-top: 0; }
.woocommerce-checkout ul#shipping_method input.shipping_method { margin: 0; accent-color: #c0577a; }
.woocommerce-checkout ul#shipping_method label.shipping__list_label { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.woocommerce-checkout ul#shipping_method label.shipping__list_label .amount,
.woocommerce-checkout ul#shipping_method label.shipping__list_label .sb-ship-free { color: #c0577a; font-weight: 700; } /* .sb-ship-free: inc/shipping.php appends ": Tasuta" to zero-cost methods */
.woocommerce-checkout #mp-wc-pickup-point-shipping { padding: 16px 0 8px; }
.woocommerce-checkout .mp-please-select-location { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default .select2-selection--single { height: 46px; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; background: transparent; }
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding: 0 40px 0 14px; color: #fff; font-size: 14px; }
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(255,255,255,.5); }
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; right: 8px; }
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #fff transparent transparent transparent; }
/* !important: rule 2's ".select2-selection { border: … !important }" would keep the open box grey. */
.woocommerce-checkout #mp-wc-pickup-point-shipping .select2-container--default.select2-container--open .select2-selection--single { border-color: #c0577a !important; }
.woocommerce-checkout .mp-selected-pickup-point-info { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.7); }
/* The dropdown lives in <body>; scope the options by the results list id. */
.woocommerce-checkout .select2-dropdown { background: #0d0d0d; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; color: #fff; }
.woocommerce-checkout .select2-search--dropdown .select2-search__field { background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; color: #fff; padding: 8px 12px; }
.woocommerce-checkout #select2-mp-wc-pickup-point-shipping-select-results .select2-results__group { color: #c0577a; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-checkout #select2-mp-wc-pickup-point-shipping-select-results .select2-results__option { margin: 0; color: #fff; font-size: 14px; padding: 8px 12px; } /* margin: Flatsome's li { margin-bottom: .6em } */
.woocommerce-checkout #select2-mp-wc-pickup-point-shipping-select-results .select2-results__option small { font-size: 12px; color: rgba(255,255,255,.6); }
/* selectWoo marks the chosen option with data-selected and the keyboard/hover one with
   aria-selected + --highlighted, and moves focus onto it; the pink tint is the focus indicator,
   so the browser's dark focus ring is dropped. Highlighted last so it wins over the chosen tint. */
.woocommerce-checkout #select2-mp-wc-pickup-point-shipping-select-results .select2-results__option[data-selected="true"] { background: rgba(255,255,255,.08); }
.woocommerce-checkout #select2-mp-wc-pickup-point-shipping-select-results .select2-results__option--highlighted { background: rgba(192,87,122,.35); color: #fff; outline: none; }
@media (max-width: 849px) {
    .woocommerce-checkout ul#shipping_method li.shipping__list_item { align-items: flex-start; }
    /* Top-aligned for two-line labels: Flatsome pads the label 7px, line-height 18.2px, radio 13px. */
    .woocommerce-checkout ul#shipping_method input.shipping_method { margin-top: 10px; }
    .woocommerce-checkout ul#shipping_method label.shipping__list_label { font-size: 14px; line-height: 1.3; }
}

/* ------------------------------------------------------------------
   Cart (Day 11, rulings H3/H4). Flatsome's cart template on the black
   page: child rows of a kit read as children, the quantity stepper is
   the product-page capsule at fixed px, the coupon and update buttons
   are visible white-outline pills, "Mine maksma" is the site pill with
   the long arrow. Scoped to .woocommerce-cart (the cart page body).
   Measured 2026-10-01: stepper 84x36 grey boxes, coupon button black on
   black, update button disabled #000 at .6, checkout button square pink.
   !important causes: Flatsome's .lowercase/.expand !important on the coupon button; the Customizer's .checkout-button.button.alt fill !important.
   ------------------------------------------------------------------ */
/* Bundle child rows: Flatsome's mobile "qty x price" line would print "3 x" with no price (Day 10). */
.woocommerce-cart .bundled_table_item .mobile-product-price { display: none; }
/* Child row: smaller thumbnail pushed right, muted text, label under the name. */
.woocommerce-cart tr.bundled_table_item td.product-thumbnail { padding-left: 32px; }
.woocommerce-cart tr.bundled_table_item td.product-thumbnail img { width: 48px; height: 48px; max-width: 48px; }
.woocommerce-cart tr.bundled_table_item td.product-name,
.woocommerce-cart tr.bundled_table_item td.product-quantity { opacity: .7; }
.woocommerce-cart tr.bundled_table_item .bundled-product-name.bundled_table_item_indent { padding-left: 0; }
.woocommerce-cart tr.bundled_table_item td.product-name a { font-size: 13px; font-weight: 600; }
.woocommerce-cart tr.bundled_table_item td, .woocommerce-cart tr.bundled_table_item + tr.bundled_table_item td { border-top: 0 !important; padding-top: 6px; padding-bottom: 6px; }
.woocommerce-cart .sb-bundled-label { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
/* Quantity stepper: compact copy of the product-page capsule (shesback.css "Hero: quantity"). */
.woocommerce-cart .quantity.buttons_added {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 112px; height: 40px; padding: 0 10px; box-sizing: border-box;
    border: 2px solid #fb0660; border-radius: 14px; background: none;
}
/* input.minus/.plus + .buttons_added: Flatsome's ".dark input[type=button].is-form" (0,3,1) sets them #000. */
.woocommerce-cart .quantity.buttons_added input.minus, .woocommerce-cart .quantity.buttons_added input.plus {
    width: auto; height: auto; min-height: 0; margin: 0; padding: 0 2px;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    font-family: Nunito, sans-serif; font-size: 22px; line-height: 1; font-weight: 800; color: #fff; cursor: pointer;
}
.woocommerce-cart .quantity.buttons_added input.minus:hover, .woocommerce-cart .quantity.buttons_added input.plus:hover { background: none; color: #fb0660; }
.woocommerce-cart .quantity.buttons_added input.minus:focus-visible, .woocommerce-cart .quantity.buttons_added input.plus:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.woocommerce-cart .quantity input.qty {
    width: 36px; max-width: none; height: 30px; margin: 0; padding: 0;
    border: 0; border-radius: 7px !important; background: rgba(255, 0, 92, .12); box-shadow: none;
    font-family: Nunito, sans-serif; font-size: 16px; line-height: 1; font-weight: 600; color: #fff; text-align: center;
    -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button, .woocommerce-cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Remove x: white ring, pink on hover. */
.woocommerce-cart a.remove { color: #fff; border-color: rgba(255,255,255,.6); }
.woocommerce-cart a.remove:hover { color: #fb0660; border-color: #fb0660; background: none; }
/* Coupon field (club band input) and the two outline pills. */
.woocommerce-cart .coupon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.woocommerce-cart .coupon input#coupon_code {
    flex: 1 1 220px; height: 46px; min-height: 0; margin: 0; padding: 0 22px;
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.08);
    color: #fff; font-size: 15px; box-shadow: none;
}
.woocommerce-cart .coupon input#coupon_code::placeholder { color: rgba(255,255,255,.6); }
.woocommerce-cart .coupon input#coupon_code:focus { border-color: #fff; outline: none; box-shadow: none; }
/* .return-to-shop .button: the empty cart's "Tagasi poodi" (Flatsome .button.primary black fill), Day 11 H1. */
.woocommerce-cart .coupon button[name="apply_coupon"], .woocommerce-cart button[name="update_cart"], .woocommerce-cart .return-to-shop .button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; min-height: 0; margin: 0; padding: 0 26px;
    border: 1px solid #fff; border-radius: 999px; background: transparent; box-shadow: none;
    color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
    transition: background-color .25s ease;
}
.woocommerce-cart .coupon button[name="apply_coupon"]:hover, .woocommerce-cart button[name="update_cart"]:hover, .woocommerce-cart .return-to-shop .button:hover { background: rgba(255,255,255,.1); color: #fff; }
.woocommerce-cart button[name="update_cart"][disabled] { opacity: .45; }
/* The coupon button carries Flatsome's .lowercase (text-transform: none !important) and .expand
   (padding-left/right: 0 !important), so those two properties need !important here too. */
.woocommerce-cart .coupon button[name="apply_coupon"] { padding-left: 26px !important; padding-right: 26px !important; text-transform: uppercase !important; }
/* "Mine maksma": the site pill with the long arrow, full column width. */
.woocommerce-cart a.checkout-button {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    width: 100%; height: 52px; min-height: 0; margin: 0 0 16px; padding: 0 22px 0 26px;
    border: 1px solid #fff; border-radius: 999px; background: transparent !important; box-shadow: none;
    color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
    transition: background-color .25s ease;
}
.woocommerce-cart a.checkout-button::after { content: "\27F6"; font-size: 22px; line-height: 1; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.woocommerce-cart a.checkout-button:hover { background: rgba(255,255,255,.08) !important; color: #fff; }
.woocommerce-cart a.checkout-button:hover::after { transform: translateX(6px); }
/* Table rules a touch brighter than Flatsome's .08 so rows separate on black. */
.woocommerce-cart .shop_table thead th { border-bottom-color: rgba(255,255,255,.2); }
.woocommerce-cart .shop_table td { border-top-color: rgba(255,255,255,.12); }
@media (max-width: 849px) {
    .woocommerce-cart tr.bundled_table_item td.product-thumbnail { padding-left: 16px; }
    /* Flatsome nests the field and the button in div.flex-row > div.flex-col: stack the two columns. */
    .woocommerce-cart .coupon .flex-row { flex-wrap: wrap; }
    .woocommerce-cart .coupon .flex-row > .flex-col { flex: 1 1 100%; }
    .woocommerce-cart .coupon button[name="apply_coupon"], .woocommerce-cart button[name="update_cart"] { width: 100%; }
}

/* ------------------------------------------------------------------
   Mini-cart (Day 11, ruling H1). Flatsome's dropdown (.nav-dropdown,
   white, with --fs-color-base #fff text from color_texts) and the mobile
   off-canvas panel (#cart-popup in .mfp-content, white .95) were white
   on white. Both go dark #0d0d0d; the buttons become the site pills.
   Measured 2026-10-02: the toggle's data-class="off-canvas-cart" lands on
   .mfp-content itself (not on .mfp-wrap), and .mfp-close is a direct child
   of .mfp-wrap, hence .mfp-content.off-canvas-cart and the :has() below.
   ------------------------------------------------------------------ */
.header .cart-item .nav-dropdown.nav-dropdown-default { background: #0d0d0d; border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 16px; }
.header .cart-item .nav-dropdown .widget_shopping_cart_content { color: #fff; }
/* Dropdown arrow: Flatsome ".nav-dropdown-has-arrow li.has-dropdown::after" (white fill) and
   ".nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown::before" (#ddd edge) would leave a white tip. */
.nav-dropdown-has-arrow .header li.cart-item.has-dropdown::after { border-bottom-color: #0d0d0d; }
.nav-dropdown-has-arrow.nav-dropdown-has-border .header li.cart-item.has-dropdown::before { border-bottom-color: rgba(255,255,255,.15); }
.mfp-content.off-canvas-cart, .off-canvas-cart .cart-popup-inner { background: #0d0d0d; color: #fff; }
.mfp-content.off-canvas-cart .cart-popup-title { color: #fff; }
/* Sticky bottom block (total + buttons) is div.ux-mini-cart-footer: Flatsome-shop
   ".cart-popup-inner--sticky .ux-mini-cart-footer" paints it #fff with a #f1f1f1 rule. */
.mfp-content.off-canvas-cart .cart-popup-inner--sticky .ux-mini-cart-footer { background: #0d0d0d; border-top-color: rgba(255,255,255,.15); }
/* Title divider: Flatsome ".is-divider" rgba(0,0,0,.1) is invisible on dark. */
.mfp-content.off-canvas-cart .cart-popup-title .is-divider { color: #fff; background-color: rgba(255,255,255,.15); }
.mfp-wrap:has(.off-canvas-cart) > .mfp-close { color: #fff; }
/* Items */
.widget_shopping_cart .woocommerce-mini-cart-item { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 12px; }
.widget_shopping_cart .woocommerce-mini-cart-item a:not(.remove) { color: #fff; font-weight: 700; }
.widget_shopping_cart .woocommerce-mini-cart-item .variation, .widget_shopping_cart .woocommerce-mini-cart-item .variation dt, .widget_shopping_cart .woocommerce-mini-cart-item .variation dd,
.widget_shopping_cart .woocommerce-mini-cart-item .quantity { color: rgba(255,255,255,.7); font-weight: 400; }
/* Line price: Flatsome-shop "span.amount" is #111; only the desktop header's dark context overrides it, not the off-canvas panel. */
.widget_shopping_cart .woocommerce-mini-cart-item .amount { color: #fff; }
.widget_shopping_cart .woocommerce-mini-cart-item a.remove { color: #fff; border-color: rgba(255,255,255,.6); }
.widget_shopping_cart .woocommerce-mini-cart-item a.remove:hover { color: #fb0660; border-color: #fb0660; background: none; }
/* Stepper (same look as the cart capsule, smaller) */
/* Full strength: Flatsome-shop "ul.product_list_widget li .quantity" (0,2,2) and ".nav-dropdown ul.woocommerce-mini-cart .price-wrapper" /
   ".cart-popup-inner .widget_shopping_cart_content .price-wrapper" (0,3,0) set opacity .6 (no !important), so the stepper read as disabled. */
.widget_shopping_cart .ux-mini-cart-qty span.price-wrapper { opacity: 1; }
.widget_shopping_cart .ux-mini-cart-qty .quantity { opacity: 1; display: inline-flex; align-items: center; justify-content: space-between; width: 96px; height: 32px; padding: 0 8px; box-sizing: border-box; border: 2px solid #fb0660; border-radius: 12px; background: none; }
.widget_shopping_cart .ux-mini-cart-qty .minus, .widget_shopping_cart .ux-mini-cart-qty .plus { width: auto; height: auto; min-height: 0; margin: 0; padding: 0 2px; border: 0; background: none; box-shadow: none; font-family: Nunito, sans-serif; font-size: 18px; line-height: 1; font-weight: 800; color: #fff; }
/* border-radius !important answers Flatsome-shop ".quantity input[type=number] { border-radius: 0 !important }". */
.widget_shopping_cart .ux-mini-cart-qty input.qty { width: 30px; max-width: none; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px !important; background: rgba(255, 0, 92, .12); box-shadow: none; font-family: Nunito, sans-serif; font-size: 14px; font-weight: 600; color: #fff; text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; }
/* Total and buttons */
/* p. prefix: Flatsome-shop ".widget_shopping_cart p.total" (0,2,1) sets 1px top / 2px bottom #ececec. */
.widget_shopping_cart p.woocommerce-mini-cart__total { border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); color: #fff; }
.widget_shopping_cart .woocommerce-mini-cart__total .amount { color: #fff; }
.widget_shopping_cart .woocommerce-mini-cart__buttons .button, .widget_shopping_cart .ux-mini-cart-empty .button {
    display: flex; align-items: center; justify-content: center;
    height: 46px; min-height: 0; margin: 0 0 10px; padding: 0 22px;
    border: 1px solid #fff; border-radius: 999px; background: transparent; box-shadow: none;
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout { border-color: #fb0660; }
/* !important answers the Customizer Additional CSS (custom-css, post 541, not editable here):
   ".button.checkout, .checkout-button, … { background-color: #f0287b !important }". Only the checkout pill needs it. */
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout { background-color: transparent !important; }
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout:hover { background-color: rgba(255,255,255,.08) !important; }
.widget_shopping_cart .woocommerce-mini-cart__buttons .button:hover, .widget_shopping_cart .ux-mini-cart-empty .button:hover { background: rgba(255,255,255,.08); }
/* Empty state */
.widget_shopping_cart .ux-mini-cart-empty .ux-mini-cart-empty-icon { color: #fff; opacity: .25; }
.widget_shopping_cart .woocommerce-mini-cart__empty-message { color: #fff; }

/* ------------------------------------------------------------------
   Legal pages (Day 11, ruling H9): Müügitingimused and Privaatsuspoliitika
   are plain HTML in div.sb-legal (Classic editor, Hendrik edits them).
   ------------------------------------------------------------------ */
.sb-legal { max-width: 800px; margin: 40px auto 80px; font-size: 16px; line-height: 1.6; color: #fff; }
.sb-legal h1 { margin: 0 0 20px; font-size: 40px; line-height: 1.1; font-weight: 900; text-transform: uppercase; color: #fff; }
.sb-legal .sb-legal-lead { font-size: 20px; line-height: 1.4; font-weight: 600; }
.sb-legal .sb-legal-updated { font-size: 13px; color: rgba(255,255,255,.6); }
.sb-legal h2 { margin: 36px 0 12px; font-size: 22px; line-height: 1.2; font-weight: 700; color: #f0287b; }
.sb-legal p, .sb-legal li { margin: 0 0 12px; }
.sb-legal ul { margin: 0 0 12px 20px; }
.sb-legal a { color: #a2ff5a; text-decoration: underline; }
@media (max-width: 849px) { .sb-legal { margin: 24px auto 48px; font-size: 15px; } .sb-legal h1 { font-size: 30px; } .sb-legal h2 { font-size: 20px; } }

/* ------------------------------------------------------------------
   Footer (Day 11, ruling H5). Block 261's footer row was a default 1080
   row (links at x 187 vs the club list at x 50; an empty inner column;
   a 350px spacer faking bottom alignment, also on phones). Now a
   full-width row in the 1440 band with the band's 50px side padding:
   logo + links left, KONTAKT bottom-right via flex.
   Col paddings use !important because Flatsome's `.row-collapse > .col { padding: 0 !important }` does.
   ------------------------------------------------------------------ */
.sb-footer .sb-footer__row { min-height: 485px; padding: 60px 0 40px; }
.sb-footer .row-collapse > .col.sb-footer__main { padding: 0 20px 0 50px !important; }
.sb-footer .row-collapse > .col.sb-footer__contact { padding: 0 50px 0 20px !important; display: flex; align-items: flex-end; justify-content: flex-end; }
.sb-footer .sb-footer__contact .col-inner { width: auto; }
#footer .sb-footer .sb-footer__logo { width: 233px; max-width: 100%; margin: 0 0 20px; }
.sb-footer .sb-footer__links p { margin: 0; font-size: 16px; line-height: 1.85; font-weight: 700; }
.sb-footer .sb-footer__links a, .sb-footer .sb-footer__kontakt a { color: #fff; }
.sb-footer .sb-footer__links a:hover, .sb-footer .sb-footer__kontakt a:hover { color: #a2ff5a; }
.sb-footer .sb-footer__kontakt { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 700; color: #fff; text-align: right; }
@media (max-width: 849px) {
    .sb-footer .sb-footer__row { min-height: 0; padding: 40px 0 32px; }
    .sb-footer .row-collapse > .col.sb-footer__main, .sb-footer .row-collapse > .col.sb-footer__contact { padding: 0 24px !important; }
    .sb-footer .row-collapse > .col.sb-footer__contact { justify-content: flex-start; margin-top: 28px; }
    #footer .sb-footer .sb-footer__logo { width: 180px; }
    .sb-footer .sb-footer__kontakt { text-align: left; }
}
/* Absolute footer (theme mods footer_bottom_color #000 / footer_bottom_text dark = Flatsome's light-text scheme, final fix A4): the legal line is plain text until the pages are published. */
.absolute-footer, .absolute-footer.dark { background: #000; color: rgba(255,255,255,.6); font-size: 13px; }
.absolute-footer .copyright-footer, .absolute-footer .footer-secondary { color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------------
   Cookie consent banner (Complianz 7.5 free, 2026-10-06). Colours and texts come from the plugin's
   banner editor (dark, pink accept); this only undoes what Flatsome's global button styling does to
   the plugin's <button>s and matches the site's pill CTAs. The id prefix (1,2,0) beats both
   Flatsome's .button rules and Complianz's own (0,3,0) banner CSS whatever the print order. */
#cmplz-cookiebanner-container .cmplz-cookiebanner { font-family: "Nunito", sans-serif; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 12px 22px; box-shadow: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background: #fff; border-color: #fff; color: #000; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background: #f0287b; border-color: #f0287b; color: #fff; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { background: transparent; border: 0; box-shadow: none; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; line-height: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg { fill: #fff; width: 16px; height: 16px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a { color: #f0287b; }

/* ====== Kept last on purpose: the min-width 1441 rules below must win over the per-section .sb-glow rules above. ====== */
/* Article headings: prevent long Estonian words and tight gradient lines
   from being clipped by the legacy article's overflow-hidden wrapper. */
.single-post article.sb-blog :is(h1, h2, h3) {
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.single-post article.sb-blog :is(h1, h2, h3) span {
    max-width: 100%;
    line-height: inherit;
    overflow-wrap: inherit;
}
.single-post article.sb-blog h1 { font-size: clamp(32px, 4vw, 58px); }
.single-post article.sb-blog h2 { font-size: clamp(24px, 2.6vw, 38px); }
.single-post article.sb-blog h3 { font-size: clamp(20px, 2vw, 28px); }
@media (max-width: 767px) {
    .single-post article.sb-blog h1 { font-size: clamp(26px, 7vw, 34px); }
    .single-post article.sb-blog h2 { font-size: clamp(22px, 5.8vw, 28px); }
}

/* Day 15 (Paul 2026-10-09, mockups docs/mockups/day15/wide-contact-sheet.png, option B): above the 1440 px design
   width the art of the hero and of the three art sections (Sinu pilk, teab, Kliendikogemus) stays at its design size,
   centred, its outer 120 px fading out, and behind it a blurred, enlarged copy of the same image fills the viewport —
   the letterbox of a landscape reel (hero and Sinu pilk only; teab and Kliendikogemus show faces, so they get the black
   surround instead). sb-ambient.js copies each <img class="bg"> src into --sb-amb on the slide/section.
   The glows (.sb-glow) keep their Canva positions relative to the 1440 column instead of the viewport, drawn on the
   full width so nothing is clipped. Below 1441 px none of this applies. */
@media (min-width: 1441px) {
    .sb-pilk, .sb-teab, .sb-kogemus { position: relative; }
    .sb-hero .banner, .sb-pilk, .sb-teab, .sb-kogemus { overflow: hidden; background-color: #000; }
    /* Ambient where the art has no faces (Paul): teab keeps the plain black surround; Kliendikogemus (lighter art, faces)
       gets the ambient as a tone only, blurred so hard that no feature survives. */
    .sb-hero .banner::before, .sb-pilk::before, .sb-kogemus::before {
        content: ""; position: absolute; inset: -120px; z-index: 0; pointer-events: none;
        background: var(--sb-amb, #000) center / cover no-repeat;
        filter: blur(70px) saturate(1.15); transform: scale(1.08);
    }
    .sb-kogemus::before { filter: blur(180px) saturate(1.1); transform: scale(1.3); }
    .sb-hero .banner .banner-bg, .sb-pilk > .section-bg, .sb-teab > .section-bg, .sb-kogemus > .section-bg {
        z-index: 1; max-width: var(--sb-page-max); width: 100%; right: auto; left: 50%; transform: translateX(-50%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    }
    .sb-hero .banner .banner-layers { z-index: 2; }
    .sb-pilk > .section-content, .sb-teab > .section-content, .sb-kogemus > .section-content { position: relative; z-index: 2; }
    /* Glows anchored to the 1440 column: the same percentages, converted to px from the viewport centre. */
    .sb-glow {
        background-image:
            radial-gradient(ellipse 864px 70% at calc(50% - 461px) 25%, var(--sb-glow-1, rgba(140, 30, 100, 0.55)), transparent 70%),
            radial-gradient(ellipse 792px 60% at calc(50% + 504px) 80%, var(--sb-glow-2, rgba(90, 20, 80, 0.5)), transparent 70%);
    }
    .sb-cards.sb-glow {
        background-image:
            var(--sb-cards-top-fade),
            radial-gradient(ellipse 792px 45% at calc(50% - 605px) 22%, var(--sb-glow-1), transparent 70%),
            radial-gradient(ellipse 720px 40% at calc(50% + 605px) 78%, var(--sb-glow-2), transparent 70%);
    }
    .sb-reviews.sb-glow {
        background-image:
            radial-gradient(circle 379px at calc(50% - 586px) 36%, var(--sb-glow-1), transparent 72%),
            radial-gradient(circle 502px at calc(50% + 469px) 51%, var(--sb-glow-2), transparent 72%);
    }
}

/* Kertu's October card heroes: contained art, live copy and responsive CTAs. */
.sb-hero.sb-hero--cards { --sb-hero-h: clamp(420px, 42vw, 650px); padding: 20px 32px 48px !important; background: #000; }
.sb-hero--cards > .section-content { max-width: 1440px; margin: auto; }
.sb-hero--cards .slider-wrapper { border-radius: 32px; overflow: hidden; }
.sb-hero.sb-hero--cards .banner::before { display: none; }
.sb-hero.sb-hero--cards .banner .banner-bg { max-width: none; left: 0; right: 0; width: 100%; transform: none; mask-image: none; -webkit-mask-image: none; }
.sb-hero--cards .banner-layers { width: 100%; }
.sb-hero--cards .sb-hero__title { font-size: clamp(32px, 4.3vw, 62px); line-height: .98; }
.sb-hero--cards .sb-hero__lead { font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; }
.sb-hero--cards .sb-hero__brand { display: block; text-transform: lowercase; font-size: 1.2em; letter-spacing: -.07em; }
.sb-hero--cards .sb-hero__accent { color: #59d780; display: block; }
.sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-hero__copy.banner-layer { width: 46% !important; left: auto !important; right: 5% !important; bottom: 8% !important; text-align: center; }
.sb-hero--cards .sb-hero__slide--1 .text-inner { text-align: center; }
.sb-hero--cards .sb-hero__slide--1 .sb-hero__lead { color: #279b50; margin: 28px auto; }
.sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-btn { background: #59d780; border-color: #59d780; color: #000; margin: 0 auto; --sb-btn-accent: #000; }
.sb-hero.sb-hero--cards .sb-hero__slide--2 .sb-hero__copy.banner-layer { width: 42% !important; left: 3% !important; bottom: 7% !important; }
.sb-hero--cards .sb-hero__slide--2 .sb-hero__lead { color: #fff; max-width: 330px; }
.sb-hero.sb-hero--cards .sb-hero__slide--2 .sb-hero__ctas.banner-layer { right: 5% !important; bottom: 7% !important; width: auto !important; }
.sb-hero--cards .sb-hero__slide--2 .sb-btn { background: #000; border-color: #000; color: #fff; --sb-btn-accent: #fff; margin-bottom: 12px; }
.sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__copy.banner-layer { left: 10% !important; right: 10% !important; width: 80% !important; bottom: 24% !important; text-align: center; }
.sb-hero--cards .sb-hero__slide--3 .text-inner { text-align: center; }
.sb-hero--cards .sb-hero__slide--3 .sb-hero__lead { margin: auto; max-width: 700px; }
.sb-hero--cards .sb-hero__slide--3 .sb-hero__accent { color: #ff087b; }
.sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__ctas.banner-layer { left: 0 !important; right: 0 !important; width: 100% !important; bottom: 5% !important; }
.sb-hero--cards .sb-hero__slide--3 .sb-btn { margin: auto; border-color: #ff087b; background: #1119; }
.sb-hero--cards .flickity-page-dots { bottom: 9px; }
@media(max-width:849px) {
 .sb-hero.sb-hero--cards { --sb-hero-h: clamp(600px, 165vw, 760px); padding: 12px 10px 28px !important; }
 .sb-hero--cards .slider-wrapper { border-radius: 24px; }
 .sb-hero--cards .sb-hero__title { font-size: clamp(30px, 8vw, 48px); }
 .sb-hero--cards .sb-hero__lead { display: block; font-size: 16px; line-height: 1.25; }
 .sb-hero--cards .sb-hero__kicker { font-size: 13px; }
 .sb-hero.sb-hero--cards .sb-hero__slide--1::after { display: none; }
 .sb-hero.sb-hero--cards .sb-hero__slide--1 .bg:not(#sb-x) { object-position: 22% center; }
 .sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-hero__copy.banner-layer { inset: 40px 16px 36px !important; width: auto !important; }
 .sb-hero--cards .sb-hero__slide--1 .text-inner { height: 100%; display: flex; flex-direction: column; align-items: center; }
 .sb-hero--cards .sb-hero__slide--1 .sb-hero__title { color: #000; }
 .sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-btn { margin-top: auto; width: max-content; }
 .sb-hero.sb-hero--cards .sb-hero__slide--2 .sb-hero__copy.banner-layer { left: 16px !important; right: 16px !important; width: auto !important; bottom: 112px !important; }
 .sb-hero--cards .sb-hero__slide--2 .sb-hero__title { color: #fff; }
 .sb-hero.sb-hero--cards .sb-hero__slide--2 .sb-hero__ctas.banner-layer { left: 14px !important; right: 14px !important; bottom: 30px !important; width: auto !important; }
 .sb-hero--cards .sb-hero__slide--2 .sb-hero__ctas .text-inner { display: flex; gap: 10px; }
 .sb-hero--cards .sb-hero__slide--2 .sb-btn { min-width: 0; width: auto; flex: 1; font-size: 12px; padding: 10px 14px; border-color: #fff; margin: 0; }
 .sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__copy.banner-layer { left: 16px !important; right: 16px !important; width: auto !important; bottom: 130px !important; }
 .sb-hero--cards .sb-hero__slide--3 .sb-hero__title { font-size: clamp(27px, 7vw, 44px); overflow-wrap: normal; }
 .sb-hero--cards .sb-hero__slide--3 .sb-btn { width: max-content; }
}
.sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-btn { margin-left: auto !important; margin-right: auto !important; }
@media(max-width:849px) {
 .sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-btn { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
 .sb-hero--cards .sb-hero__slide--1 .sb-hero__lead { color: #238442; }
}
@media(max-width:849px) {
 .sb-hero--cards .sb-hero__slide--2 .sb-btn { gap: 8px; letter-spacing: 0; font-size: 11px; }
 .sb-hero--cards .sb-hero__slide--2 .sb-btn:first-child { flex: 1.35; }
 .sb-hero--cards .sb-hero__slide--2 .sb-btn::after { font-size: 19px; flex-shrink: 0; }
}

/* Hero finish: neutralise Flatsome's right-aligned button wrapper at every width. */
.sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__ctas .text-inner {
    display: flex; justify-content: center; text-align: center; width: 100%;
}
.sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__ctas .sb-btn {
    margin: 0 !important; flex: 0 0 auto;
}
.sb-hero.sb-hero--cards .sb-hero__slide--1 .sb-hero__copy .text-inner { text-align: center; }
.sb-hero.sb-hero--cards .sb-hero__slide--2 .sb-hero__copy .text-inner { text-align: left; }
.sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__copy .text-inner { text-align: center; }
/* Keep the card proportions tied to its capped width when zooming out. */
@media(min-width:1504px) {
 .sb-hero.sb-hero--cards { --sb-hero-h: 633px; }
}
@media(min-width:850px) {
 .sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__copy.banner-layer { bottom: 22% !important; }
 .sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__ctas.banner-layer { bottom: 4% !important; }
}
@media(max-width:849px) {
 .sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__ctas.banner-layer { bottom: 30px !important; }
 .sb-hero.sb-hero--cards .sb-hero__slide--3 .sb-hero__copy.banner-layer { bottom: 112px !important; }
}

/* Hero controls: no dots; quiet side arrows clear of the lower CTA band. */
.sb-hero--cards .flickity-page-dots { display: none; }
.sb-hero.sb-hero--cards .flickity-prev-next-button {
    top: 40%; width: 40px; height: 40px; min-height: 0;
    margin: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.28);
    color: #fff; opacity: 0; transform: translateY(-50%);
    transition: opacity .2s ease, background-color .2s ease;
}
.sb-hero.sb-hero--cards .flickity-prev-next-button.previous { left: 10px; }
.sb-hero.sb-hero--cards .flickity-prev-next-button.next { right: 10px; }
.sb-hero--cards .flickity-prev-next-button svg { width: 45%; height: 45%; left: 27.5%; top: 27.5%; }
.sb-hero--cards .flickity-prev-next-button .arrow { fill: currentColor; }
@media(hover:hover) {
 .sb-hero.sb-hero--cards:hover .flickity-prev-next-button { opacity: .5; }
}
.sb-hero.sb-hero--cards:focus-within .flickity-prev-next-button { opacity: .65; }
.sb-hero.sb-hero--cards .flickity-prev-next-button:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.sb-hero.sb-hero--cards .flickity-prev-next-button:hover { opacity: 1; background: rgba(0,0,0,.5); }
@media(prefers-reduced-motion:reduce) {
 .sb-hero--cards .flickity-prev-next-button, .sb-hero--cards .slider-type-fade .slide { transition: none !important; }
}

/* Only immediate step neighbours peek in; farther cards retain layout space
   but disappear completely, including their protruding numbers/captions. */
@media (min-width:850px) {
 .steps-carousel-shell .steps-carousel > .col {
    opacity: 1; visibility: visible;
    transition: opacity .3s ease, visibility 0s;
 }
 .steps-carousel-shell .steps-carousel > .col.is-distant {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, visibility 0s .3s;
 }
}
@media (min-width:850px) and (prefers-reduced-motion:reduce) {
 .steps-carousel-shell .steps-carousel > .col,
 .steps-carousel-shell .steps-carousel > .col.is-distant { transition: none; }
}