/* ============================================================
 * SpOki Homepage Hero — isolated scoped asset (pilot 2026-07-19)
 * Wrapper class: .spoki-homepage-hero  (NEW canonical, replaces legacy .spoki-hero5-*)
 * All decoration is CSS-controlled (no inline SVG, no core/html).
 * Old .spoki-hero5-* rules remain in spoki-component-fixes.css for rollback
 * until visual parity is owner-approved, then cleaned up separately.
 * ============================================================ */

.spoki-homepage-hero{position:relative;overflow:hidden;
  padding:clamp(44px,5vw,72px) 0 clamp(76px,8.5vw,116px);
  background-color:#FCF5EA;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5.4 3.4 8 11 11-7.6 3-10 5.6-11 11-1-5.4-3.4-8-11-11 7.6-3 10-5.6 11-11z' fill='%23F6BE8A'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5.4 3.4 8 11 11-7.6 3-10 5.6-11 11-1-5.4-3.4-8-11-11 7.6-3 10-5.6 11-11z' fill='%23B7B0E6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 50%, #F6BE8A 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #B7B0E6 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #FFC38A 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #9AD9D0 58%, transparent 60%),
    radial-gradient(46% 44% at 84% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 64%),
    linear-gradient(180deg,#FDF9F3 0%,#FCF5EA 55%,#FAF0E1 100%);
  background-repeat:no-repeat;
  background-position:
    right 40% top 8%,
    left 12% bottom 28%,
    right 9% top 22%,
    right 30% bottom 18%,
    right 6% bottom 34%,
    right 22% top 34%,
    0 0, 0 0;
  background-size:
    12px 12px,
    10px 10px,
    14px 14px,
    11px 11px,
    7px 7px,
    6px 6px,
    100% 100%, 100% 100%}
/* blurred organic blob (bottom-left) - SAMO DESKTOP (03.10.2026, reshenie 5 na sobstvenika: po-semplo na mobilno;
   blur(110px) + bezkrayna animatsiya = render pass na vseki kadar na telefona) */
@media (min-width:1025px){
.spoki-homepage-hero::before{content:'';position:absolute;bottom:2%;left:-6%;
  width:min(340px,34vw);height:min(340px,34vw);
  background:radial-gradient(circle at 40% 40%,#FCE3CB,#F6D2AE);
  border-radius:58% 42% 47% 53%/46% 55% 45% 54%;
  filter:blur(110px);opacity:.2;z-index:0;pointer-events:none;
  animation:spokiHomeHeroDrift 34s ease-in-out infinite alternate}
}
/* bottom wave into next (white) section */
.spoki-homepage-hero::after{content:'';position:absolute;bottom:-1px;left:0;
  width:100%;height:clamp(52px,6vw,90px);z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C 260 118, 520 30, 760 58 C 1000 86, 1220 40, 1440 66 L1440 120 L0 120 Z' fill='%23fff'/%3E%3C/svg%3E") bottom center/100% 100% no-repeat}

@keyframes spokiHomeHeroSpin{to{transform:rotate(360deg)}}
@keyframes spokiHomeHeroDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(26px,-20px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){
  .spoki-homepage-hero::before,
  .spoki-homepage-hero__rings::before,
  .spoki-homepage-hero__rings::after{animation:none!important}}

/* ---- inner two-column layout ---- */
.spoki-homepage-hero__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,3vw,32px);gap:clamp(40px,5vw,70px)!important;align-items:center}
.spoki-homepage-hero__left{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(15px,1.9vw,20px);max-width:560px}

/* ---- eyebrow badge ---- */
.spoki-homepage-hero__badge{display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #F0E4D0;border-radius:999px;
  padding:10px 18px 10px 14px;box-shadow:0 3px 10px rgba(46,58,103,.07);
  font:800 14px/1 'Nunito',sans-serif;color:#00838A;margin:0}
.spoki-homepage-hero__badge::before{content:'';flex:0 0 auto;width:15px;height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.7L19.5 10l-5.6 1.3L12 17l-1.9-5.7L4.5 10l5.6-1.3L12 3z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- H1 + highlighted word underline ---- */
.spoki-homepage-hero__h1{margin:0;font-family:'Comfortaa',cursive;font-weight:700;
  font-size:clamp(30px,4.1vw,50px);line-height:1.2;color:#2E3A67;text-wrap:balance}
.spoki-homepage-hero__h1 mark{background:transparent;color:#00838A;position:relative;
  white-space:nowrap;padding:0}
.spoki-homepage-hero__h1 mark::after{content:'';position:absolute;left:1%;right:1%;bottom:-.14em;
  height:.22em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 50 3, 150 3, 197 9' stroke='%2319B0B6' stroke-width='5' stroke-linecap='round' fill='none' opacity='.65'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* ---- sub ---- */
.spoki-homepage-hero__sub{margin:0;font:600 clamp(15px,1.2vw,17.5px)/1.55 'Nunito',sans-serif;
  color:#6B7580;max-width:46ch}

/* ---- primary CTA (core button) ---- */
.spoki-homepage-hero__ctarow{margin-top:2px}
.spoki-homepage-hero__cta .wp-block-button__link{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;background:#FF8A00;color:#fff;border:none;border-radius:999px;
  font:800 16px/1 'Nunito',sans-serif;padding:16px 28px;min-height:52px;box-sizing:border-box;
  box-shadow:0 10px 24px rgba(255,138,0,.24);transition:transform .15s,filter .15s}
.spoki-homepage-hero__cta .wp-block-button__link::after{content:'';width:17px;height:17px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.spoki-homepage-hero__cta .wp-block-button__link:hover{filter:brightness(.95);transform:translateY(-1px);background:#FF8A00}

/* WoodMart button hardening (theme sets its own button height/padding) */
.spoki-homepage-hero .spoki-homepage-hero__cta .wp-block-button__link{
  background:#FF8A00!important;color:#fff!important;border:none!important;border-radius:999px!important;
  padding:16px 28px!important;min-height:52px!important;box-sizing:border-box!important;
  line-height:1.15!important;text-transform:none!important;font-weight:800!important;
  height:auto!important;box-shadow:0 10px 24px rgba(255,138,0,.24)!important}
.spoki-homepage-hero .spoki-homepage-hero__cta .wp-block-button__link:hover{background:#F07E00!important}

/* ---- trust stats ---- */
.spoki-homepage-hero__trust{display:flex;flex-wrap:nowrap;align-items:center;gap:10px!important;margin-top:4px}
.spoki-homepage-hero .spoki-homepage-hero__trust p{margin:0!important;font:700 13.5px/1.3 'Nunito',sans-serif;color:#54656B;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto}
.spoki-homepage-hero__trust strong{color:#2E3A67;font-weight:800}
.spoki-homepage-hero__trust p::before{content:'';flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background-position:center;background-repeat:no-repeat;background-size:17px 17px}
.spoki-homepage-hero__tstat--a::before{background-color:#17A9AF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
.spoki-homepage-hero__tstat--b::before{background-color:#F0A15C;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.2 2.5 2.2 15.5 0 18M12 3c-2.2 2.5-2.2 15.5 0 18'/%3E%3C/svg%3E")}
.spoki-homepage-hero__tstat--c::before{background-color:#A99FE0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2.05V18h6v-1.25c0-.85.4-1.55 1-2.05A7 7 0 0 0 12 2z'/%3E%3Cpath d='M9 21h6M10 18.5h4'/%3E%3C/svg%3E")}

/* ---- media / circular photo + rings + chips ---- */
.spoki-homepage-hero__mediacol{align-self:center}
.spoki-homepage-hero__media{position:relative;width:min(100%,470px);aspect-ratio:1/1;
  margin:0 auto!important}
/* kill WoodMart/core block-gap margins leaking onto absolutely-positioned decor children
   (rings/photo/chips) so every layer stays concentric on the one media wrapper */
.spoki-homepage-hero__media > *{margin:0!important}
/* conic ring behind photo */
.spoki-homepage-hero__media::before{content:'';position:absolute;inset:2%;border-radius:50%;z-index:1;
  background:conic-gradient(from 210deg,#42C3BC,#BDE9E1 28%,#FFD9AE 54%,#FFBE86 72%,#42C3BC 100%);
  box-shadow:0 24px 54px rgba(46,58,103,.16)}
/* soft white halo */
.spoki-homepage-hero__media::after{content:'';position:absolute;inset:-12%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,#fff 46%,rgba(255,255,255,0) 72%)}
/* two dotted orbit rings (via empty decorative group) */
.spoki-homepage-hero__rings{position:absolute;inset:0;z-index:1;pointer-events:none}
.spoki-homepage-hero__rings::before{content:'';position:absolute;inset:-5%;border-radius:50%;
  border:2px dotted rgba(20,164,170,.58)}
.spoki-homepage-hero__rings::after{content:'';position:absolute;inset:-1%;border-radius:50%;
  border:1.5px dotted rgba(255,138,0,.4)}
/* vartene na pragtenite - SAMO DESKTOP (03.10.2026, reshenie 5); na telefona ostavat nepodvizhni */
@media (min-width:1025px){
  .spoki-homepage-hero__rings::before{animation:spokiHomeHeroSpin 60s linear infinite}
  .spoki-homepage-hero__rings::after{animation:spokiHomeHeroSpin 90s linear infinite reverse}
}
/* the photo itself (core/image figure) = white-ringed circle */
.spoki-homepage-hero .spoki-homepage-hero__photo{position:absolute;inset:8%;z-index:2;margin:0!important;border-radius:50%;
  background:#fff;padding:8px;box-shadow:0 6px 18px rgba(46,58,103,.10)}
.spoki-homepage-hero__photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;aspect-ratio:1/1}
/* floating chips */
.spoki-homepage-hero__chip{position:absolute;z-index:4;background:#fff;border:1px solid #F0E4D0;
  border-radius:15px;box-shadow:0 12px 26px rgba(46,58,103,.13);padding:10px 16px 10px 48px;
  width:190px;min-height:58px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.spoki-homepage-hero__chip::before{content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:#E6F8F9;background-repeat:no-repeat;
  background-position:center;background-size:16px 16px}
.spoki-homepage-hero__chip-t{margin:0;font:800 12.5px/1.2 'Nunito',sans-serif;color:#2E3A67}
.spoki-homepage-hero__chip-s{margin:2px 0 0;font:600 11px/1.2 'Nunito',sans-serif;color:#54656B}
.spoki-homepage-hero__chip--a{top:6%;left:-6%}
.spoki-homepage-hero__chip--a::before{color:#00838A;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300838A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E")}
.spoki-homepage-hero__chip--b{bottom:8%;right:-6%}
.spoki-homepage-hero__chip--b::before{background:#FDEBDD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B25E00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px 16px}

/* ============ responsive ============ */
@media(max-width:900px){
  .spoki-homepage-hero__inner{flex-direction:column!important;gap:26px!important}
  .spoki-homepage-hero__inner>.wp-block-column{flex-basis:100%!important;width:100%!important}
  .spoki-homepage-hero__left{align-items:center;text-align:center;max-width:none}
  .spoki-homepage-hero__trust{justify-content:center}
  .spoki-homepage-hero__media{max-width:340px;order:9}
  .spoki-homepage-hero__chip--a{left:-2%;top:2%}
  .spoki-homepage-hero__chip--b{right:-2%;bottom:4%}
}
/* edge-to-edge full-bleed + calmer decoration on phones */
@media(max-width:480px){
  .spoki-homepage-hero{background-image:radial-gradient(46% 44% at 84% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 64%),linear-gradient(180deg,#FDF9F3 0%,#FCF5EA 55%,#FAF0E1 100%);background-position:0 0,0 0;background-size:100% 100%,100% 100%}
  /* keep a simplified orbit system on mobile (do NOT hide) */
  .spoki-homepage-hero__rings{display:block}
  .spoki-homepage-hero__rings::before{inset:-4%;border-width:1.5px}
  .spoki-homepage-hero__rings::after{inset:-1%;border-width:1.5px}
  .spoki-homepage-hero__media{max-width:264px}
  /* compact cards that hang mostly OUTSIDE the circle (<=20% photo coverage) */
  .spoki-homepage-hero__chip{width:152px;min-height:0;padding:7px 9px 7px 36px;border-radius:13px}
  /* anchor icon to the title row (not the whole card) so it stays level between the
     two chips even when a longer subtitle wraps to 2 lines on narrow widths */
  .spoki-homepage-hero__chip::before{width:24px;height:24px;left:7px;top:7px;transform:none;background-size:13px 13px}
  .spoki-homepage-hero__chip-t{font:800 11px/1.15 'Nunito',sans-serif}
  .spoki-homepage-hero__chip-s{font:600 9.5px/1.15 'Nunito',sans-serif;margin-top:1px}
  .spoki-homepage-hero__chip--a{top:-3%;left:-11%}
  .spoki-homepage-hero__chip--b{bottom:-3%;right:-11%}
  .spoki-homepage-hero__trust{gap:10px!important;flex-wrap:nowrap;justify-content:center;white-space:nowrap}
  .spoki-homepage-hero__trust p{font-size:11px;gap:6px}
  .spoki-homepage-hero__trust p::before{width:24px;height:24px;background-size:14px 14px}
  .spoki-homepage-hero__tdrop{display:none}
  .spoki-homepage-hero__cta,.spoki-homepage-hero__cta .wp-block-button__link{width:100%}
  .spoki-homepage-hero__cta .wp-block-button__link{font-size:14.5px;white-space:nowrap;padding:16px 18px}
}
@media(max-width:400px){
  .spoki-homepage-hero__media{max-width:266px}
}

/* ---- C.storybrand: secondary CTA (idea hub link) ---- */
.spoki-homepage-hero__ctarow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary .wp-block-button__link{background:transparent!important;color:#00838A!important;border:2px solid rgba(0,131,138,.45)!important;border-radius:999px!important;font:800 15px/1 'Nunito',sans-serif!important;padding:14px 26px!important;min-height:52px!important;box-sizing:border-box!important;text-transform:none!important;letter-spacing:normal!important;height:auto!important}
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover{border-color:#00838A!important;background:rgba(0,131,138,.06)!important}
@media(max-width:480px){.spoki-homepage-hero__ctarow{flex-direction:column;align-items:stretch}.spoki-homepage-hero__ctarow .wp-block-button{width:100%}}

/* ---- C.storybrand: trust row wraps to 2 lines under 340px to avoid overflow ---- */
@media(max-width:360px){
  .spoki-homepage-hero__trust{flex-wrap:wrap!important;white-space:normal!important;gap:8px 14px!important;justify-content:center!important}
  .spoki-homepage-hero__trust .spoki-homepage-hero__tstat{white-space:nowrap}
}

/* ---- C.storybrand: subhead contrast fix, was 4.32:1 (fails AA), now ~5.6:1 ---- */
.spoki-homepage-hero__sub{color:#54656B!important;font-size:16px!important;line-height:1.6!important}

/* ---- C.storybrand: a bit more breathing room around trust icons on mobile, per owner request ---- */
@media(max-width:480px){
  .spoki-homepage-hero .spoki-homepage-hero__trust p{gap:10px!important}
  .spoki-homepage-hero__trust{margin-top:10px!important}
}

/* ============================================================
 * SpOki Homepage Hero — 3-SLIDE CAROUSEL (added 2026-07-31)
 * One shared carousel. Slide 1 = existing approved hero (transparent,
 * shows the section cream+spark bg). Slide 2 = Back to School (blue).
 * Slide 3 = Outdoor Play (teal). Controls (arrows+dots) are injected
 * at runtime by spoki-homepage-hero-carousel.js — not in saved content.
 * ============================================================ */
.spoki-hero-carousel{position:relative}
.spoki-hero-carousel__viewport{position:relative;overflow:hidden;width:100%}
.spoki-hero-carousel__track{display:flex;width:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.spoki-hero-carousel__slide{flex:0 0 100%;min-width:100%;align-self:stretch;
  display:flex;align-items:center;
  min-height:clamp(430px,42vw,520px);
  padding:clamp(30px,4vw,54px) 0 clamp(56px,7vw,86px)}
/* slide 1 stays transparent so the section cream+sparks bg shows through */
.spoki-hero-slide--home{background:transparent}
/* slide 2 — Back to School — Deep Trust Blue */
.spoki-hero-slide--school{background:#2E3A67}
/* slide 3 — Outdoor Play — SpOki Teal */
.spoki-hero-slide--outdoor{background:#19B0B6}
.spoki-hero-carousel__slide>.spoki-homepage-hero__inner{width:100%}

/* ---- reduced motion: no autoplay transition jerk ---- */
@media(prefers-reduced-motion:reduce){
  .spoki-hero-carousel__track{transition:none!important}}

/* ---- campaign badge on dark slides ---- */
.spoki-hero-slide--school .spoki-homepage-hero__badge,
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);
  color:#FFF7EB;box-shadow:none}
.spoki-hero-slide--school .spoki-homepage-hero__badge::before,
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD86B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.7L19.5 10l-5.6 1.3L12 17l-1.9-5.7L4.5 10l5.6-1.3L12 3z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- headline + sub on dark slides ---- */
.spoki-hero-slide--school .spoki-homepage-hero__h1,
.spoki-hero-slide--outdoor .spoki-homepage-hero__h1{color:#fff}
.spoki-hero-slide--school .spoki-homepage-hero__sub,
.spoki-hero-slide--outdoor .spoki-homepage-hero__sub{color:#FFF7EB!important}

/* ---- secondary CTA readable on dark slides (teal outline would vanish) ---- */
.spoki-hero-slide--school .spoki-homepage-hero__cta-secondary .wp-block-button__link,
.spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary .wp-block-button__link{
  background:transparent!important;color:#fff!important;
  border:2px solid rgba(255,255,255,.6)!important}
.spoki-hero-slide--school .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover,
.spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover{
  border-color:#fff!important;background:rgba(255,255,255,.12)!important}

/* ---- small coral accent dot on the outdoor badge (brief: coral small accent) ---- */
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge{color:#2E3A67;background:#FFF7EB;border-color:#FFE4B0}
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge::after{content:'';width:8px;height:8px;border-radius:50%;background:#FF6B5B;margin-left:2px}

/* ============ controls (injected) ============ */
.spoki-hero-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:48px;height:48px;min-width:44px;min-height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;box-shadow:0 6px 18px rgba(46,58,103,.22);
  display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s,filter .15s}
.spoki-hero-carousel__arrow:hover{filter:brightness(.96);transform:translateY(-50%) scale(1.06)}
.spoki-hero-carousel__arrow:focus-visible{outline:3px solid #FF8A00;outline-offset:2px}
.spoki-hero-carousel__arrow svg{width:20px;height:20px;stroke:#2E3A67;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.spoki-hero-carousel__arrow--prev{left:14px}
.spoki-hero-carousel__arrow--next{right:14px}
.spoki-hero-carousel__dots{position:absolute;left:0;right:0;bottom:clamp(16px,2.4vw,26px);z-index:6;
  display:flex;gap:10px;justify-content:center;align-items:center;pointer-events:none}
.spoki-hero-carousel__dot{pointer-events:auto;width:44px;height:44px;min-width:44px;min-height:44px;
  border:none;background:transparent;cursor:pointer;padding:0;position:relative;border-radius:50%}
.spoki-hero-carousel__dot::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:11px;height:11px;border-radius:50%;background:rgba(46,58,103,.28);transition:background .2s,width .2s}
.spoki-hero-carousel__dot[aria-selected="true"]::before{background:#FF8A00;width:26px;border-radius:6px}
.spoki-hero-carousel__dot:focus-visible{outline:3px solid #FF8A00;outline-offset:0}
/* on dark slides give dots a light ground so they stay visible */
.spoki-hero-carousel[data-active="1"] .spoki-hero-carousel__dot::before,
.spoki-hero-carousel[data-active="2"] .spoki-hero-carousel__dot::before{background:rgba(255,255,255,.5)}
.spoki-hero-carousel[data-active="1"] .spoki-hero-carousel__dot[aria-selected="true"]::before,
.spoki-hero-carousel[data-active="2"] .spoki-hero-carousel__dot[aria-selected="true"]::before{background:#FF8A00}

/* keep the section bottom wave above slides, below controls already handled (wave z-index:3) */
.spoki-hero-carousel .spoki-homepage-hero__media{margin-left:auto;margin-right:auto}

@media(max-width:900px){
  .spoki-hero-carousel__slide{min-height:auto;padding-bottom:clamp(64px,10vw,86px)}
  .spoki-hero-carousel__arrow{width:44px;height:44px}
  .spoki-hero-carousel__arrow--prev{left:6px}
  .spoki-hero-carousel__arrow--next{right:6px}
  .spoki-hero-carousel__dots{bottom:10px}
}
@media(max-width:480px){
  /* arrows can crowd text on tiny screens — shrink + soften, dots remain primary control */
  .spoki-hero-carousel__arrow{width:40px;height:40px;background:rgba(255,255,255,.92)}
  .spoki-hero-carousel__arrow svg{width:18px;height:18px}
}
/* carousel: slides own the vertical padding, so remove the section's original padding to avoid double height + off-center arrows */
.spoki-homepage-hero.spoki-hero-carousel{padding-top:0!important;padding-bottom:0!important}
.spoki-hero-carousel__arrow{top:calc(50% - 6px)}

/* ---- WoodMart theme-button hardening for injected carousel controls ----
 * The theme's generic <button> rules override plain classes (position/bg/radius),
 * making arrows render as grey inline squares. Force our styles with scoped !important. */
.spoki-hero-carousel .spoki-hero-carousel__arrow{
  position:absolute!important;top:calc(50% - 6px)!important;transform:translateY(-50%)!important;
  width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  border-radius:50%!important;border:none!important;background:#fff!important;padding:0!important;
  box-shadow:0 6px 18px rgba(46,58,103,.22)!important;text-transform:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.spoki-hero-carousel .spoki-hero-carousel__arrow--prev{left:14px!important;right:auto!important}
.spoki-hero-carousel .spoki-hero-carousel__arrow--next{right:14px!important;left:auto!important}
.spoki-hero-carousel .spoki-hero-carousel__arrow:hover{background:#fff!important;filter:brightness(.96)}
.spoki-hero-carousel .spoki-hero-carousel__dot{
  background:transparent!important;border:none!important;box-shadow:none!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  padding:0!important;border-radius:50%!important}
@media(max-width:900px){
  .spoki-hero-carousel .spoki-hero-carousel__arrow--prev{left:6px!important}
  .spoki-hero-carousel .spoki-hero-carousel__arrow--next{right:6px!important}
}
/* ============================================================
 * CAMPAIGN UNIFICATION (owner brief 2026-07-31): all 3 slides share ONE
 * calm cream system. Campaign identity comes from badge + image + ring
 * accent + copy, NOT from heavy saturated background blocks. Single primary
 * CTA + a small text link (not two equal buttons).
 * ============================================================ */
/* 1. campaign slides transparent -> show the section cream + sparks system */
.spoki-hero-slide--school,.spoki-hero-slide--outdoor{background:transparent!important}
/* 2. text back to the brand navy/grey on the light ground */
.spoki-hero-slide--school .spoki-homepage-hero__h1,
.spoki-hero-slide--outdoor .spoki-homepage-hero__h1{color:#2E3A67!important}
.spoki-hero-slide--school .spoki-homepage-hero__sub,
.spoki-hero-slide--outdoor .spoki-homepage-hero__sub{color:#54656B!important}
/* 3. campaign badge = same light pill as slide 1 (calm, not filled) */
.spoki-hero-slide--school .spoki-homepage-hero__badge,
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge{
  background:#fff!important;border:1px solid #F0E4D0!important;color:#00838A!important;
  box-shadow:0 3px 10px rgba(46,58,103,.07)!important}
.spoki-hero-slide--school .spoki-homepage-hero__badge::before,
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.7L19.5 10l-5.6 1.3L12 17l-1.9-5.7L4.5 10l5.6-1.3L12 3z'/%3E%3C/svg%3E") center/contain no-repeat!important}
/* drop the coral accent dot (owner wants calmer) */
.spoki-hero-slide--outdoor .spoki-homepage-hero__badge::after{display:none!important}
/* 4. single primary CTA + small text link under it (not a 2nd full button) */
.spoki-hero-slide--school .spoki-homepage-hero__ctarow,
.spoki-hero-slide--outdoor .spoki-homepage-hero__ctarow{flex-direction:column;align-items:flex-start;gap:10px}
.spoki-hero-slide--school .spoki-homepage-hero__cta-secondary .wp-block-button__link,
.spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary .wp-block-button__link{
  background:transparent!important;border:none!important;color:#00838A!important;
  padding:4px 2px!important;min-height:0!important;height:auto!important;box-shadow:none!important;
  text-decoration:underline;text-underline-offset:3px;font-weight:700!important;font-size:14.5px!important}
.spoki-hero-slide--school .spoki-homepage-hero__cta-secondary,
.spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary{width:auto!important}
/* 5. subtle per-slide ring accent so the campaigns still read distinct (calm, not loud) */
.spoki-hero-slide--school .spoki-homepage-hero__media::before{
  background:conic-gradient(from 210deg,#5B6BA8,#C9D2EC 30%,#FFE0B8 58%,#F3B27E 76%,#5B6BA8 100%)!important}
.spoki-hero-slide--outdoor .spoki-homepage-hero__media::before{
  background:conic-gradient(from 210deg,#33B7BE,#BDE9E1 30%,#FFE0B8 58%,#7ED6DC 76%,#33B7BE 100%)!important}
/* campaign text-link: kill the residual outline-button border/radius (higher specificity to beat is-style-outline) */
.spoki-hero-carousel .spoki-hero-slide--school .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link,
.spoki-hero-carousel .spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link{
  border:0!important;border-radius:0!important;outline:none!important;padding:4px 2px!important}
/* ============================================================
 * SINGLE-CTA + WHY-LINE (owner 2026-07-31): one primary CTA everywhere,
 * secondary becomes a small text link under it. Value-led, no numbers.
 * ============================================================ */
.spoki-homepage-hero__ctarow{flex-direction:column;align-items:flex-start;gap:10px}
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary,
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary.is-style-outline{width:auto!important}
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary .wp-block-button__link,
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link{
  background:transparent!important;border:0!important;border-radius:0!important;outline:none!important;
  color:#00838A!important;padding:4px 2px!important;min-height:0!important;height:auto!important;
  box-shadow:none!important;font-weight:700!important;font-size:14.5px!important;
  text-decoration:underline;text-underline-offset:3px}
.spoki-homepage-hero .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover{
  color:#2E3A67!important;background:transparent!important}
@media(max-width:480px){
  .spoki-homepage-hero__ctarow{align-items:center}
  .spoki-homepage-hero__cta,.spoki-homepage-hero__cta .wp-block-button__link{width:100%}
}
/* „Защо е важно“ mini line on campaign slides */
.spoki-homepage-hero__why{margin:2px 0 0!important;font:600 14px/1.5 'Nunito',sans-serif;color:#54656B;max-width:44ch}
.spoki-homepage-hero__why strong{color:#00838A;font-weight:800}
@media(max-width:900px){.spoki-homepage-hero__why{margin-inline:auto!important;text-align:center}}
/* Защо е важно line: small line icon, one line desktop / max two on tiny phones */
.spoki-homepage-hero__why{display:inline-flex!important;align-items:flex-start;gap:8px;
  margin:0 0 2px!important;font:600 14px/1.45 'Nunito',sans-serif;color:#54656B}
.spoki-homepage-hero__why::before{content:'';flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.spoki-homepage-hero__why{margin-inline:auto!important;text-align:left}}
/* ============================================================
 * FULL-BLEED CAMPAIGN SLIDES (2026-07-31): Slides 2 & 3 use editorial
 * campaign photos composed with left (desktop) / top (mobile) negative
 * space. Responsive <picture> via Bunny ?width= + auto-webp, cream scrim
 * for legibility. Slide 1 keeps the circular brand system.
 * ============================================================ */
.spoki-hero-slide--photo{position:relative;overflow:hidden}
.spoki-hero-slide--photo .spoki-hero-bg{position:absolute;inset:0;z-index:0;display:block;margin:0}
.spoki-hero-slide--photo .spoki-hero-bg__img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.spoki-hero-slide--photo .spoki-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(252,245,234,.95) 0%,rgba(252,245,234,.88) 26%,rgba(252,245,234,.58) 44%,rgba(252,245,234,0) 62%)}
.spoki-hero-slide--photo .spoki-homepage-hero__inner{position:relative;z-index:2}
.spoki-hero-slide--photo .spoki-homepage-hero__left{max-width:520px}
@media(max-width:900px){
  .spoki-hero-slide--photo{align-items:flex-start!important;min-height:600px}
  .spoki-hero-slide--photo .spoki-hero-bg__img{object-position:center bottom}
  .spoki-hero-slide--photo .spoki-hero-scrim{
    background:linear-gradient(180deg,rgba(252,245,234,.96) 0%,rgba(252,245,234,.9) 26%,rgba(252,245,234,.4) 48%,rgba(252,245,234,0) 66%)}
  .spoki-hero-slide--photo .spoki-homepage-hero__inner{padding-top:6px}
  .spoki-hero-slide--photo .spoki-homepage-hero__left{max-width:none}
}
/* ============================================================
 * OWNER ITER 2 (2026-07-31 pm): slide1 CTAs same row; campaign why below
 * CTA; dots visible on any bg; per-slide brand-tinted scrim.
 * ============================================================ */
.spoki-hero-slide--home .spoki-homepage-hero__ctarow{flex-direction:row!important;align-items:center;flex-wrap:wrap;gap:14px}
.spoki-hero-slide--photo .spoki-homepage-hero__why{margin-top:14px!important}
/* dots readable on cream AND photo: navy fill + white ring, active orange */
.spoki-hero-carousel__dot::before,
.spoki-hero-carousel[data-active="1"] .spoki-hero-carousel__dot::before,
.spoki-hero-carousel[data-active="2"] .spoki-hero-carousel__dot::before{
  background:rgba(46,58,103,.45);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.spoki-hero-carousel__dot[aria-selected="true"]::before,
.spoki-hero-carousel[data-active="1"] .spoki-hero-carousel__dot[aria-selected="true"]::before,
.spoki-hero-carousel[data-active="2"] .spoki-hero-carousel__dot[aria-selected="true"]::before{
  background:#FF8A00;box-shadow:0 0 0 2px rgba(255,255,255,.92)}
/* per-slide brand-tinted scrim (design system: cool navy tint = school, teal tint = outdoor) */
.spoki-hero-slide--school .spoki-hero-scrim{background:linear-gradient(90deg,rgba(243,246,252,.95) 0%,rgba(243,246,252,.88) 26%,rgba(243,246,252,.55) 44%,rgba(243,246,252,0) 62%)}
.spoki-hero-slide--outdoor .spoki-hero-scrim{background:linear-gradient(90deg,rgba(238,250,250,.95) 0%,rgba(238,250,250,.88) 26%,rgba(238,250,250,.55) 44%,rgba(238,250,250,0) 62%)}
@media(max-width:900px){
  .spoki-hero-slide--school .spoki-hero-scrim{background:linear-gradient(180deg,rgba(243,246,252,.96) 0%,rgba(243,246,252,.9) 26%,rgba(243,246,252,.4) 48%,rgba(243,246,252,0) 66%)}
  .spoki-hero-slide--outdoor .spoki-hero-scrim{background:linear-gradient(180deg,rgba(238,250,250,.96) 0%,rgba(238,250,250,.9) 26%,rgba(238,250,250,.4) 48%,rgba(238,250,250,0) 66%)}
}
/* mobile: move arrows to the bottom corners (one control row with the dots) so they never cover text/CTA */
@media(max-width:900px){
  .spoki-hero-carousel__arrow{top:auto!important;bottom:8px!important;transform:none!important}
  .spoki-hero-carousel__arrow:hover{transform:none!important}
  .spoki-hero-carousel__arrow--prev{left:10px!important}
  .spoki-hero-carousel__arrow--next{right:10px!important}
  .spoki-hero-carousel__dots{bottom:16px}
}
/* ============================================================
 * OWNER ITER 3 (2026-07-31): legibility + kill cream remnant below photos.
 * ============================================================ */
/* image must fully cover the slide (was ~20px short -> cream showed) */
.spoki-hero-slide--photo .spoki-hero-bg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important}
.spoki-hero-slide--photo .spoki-hero-bg__img{width:100%;height:100%}
/* the section white wave reads as a soft cream/white strip over the photos -> drop it on the carousel (clean edge into the next white section) */
.spoki-homepage-hero.spoki-hero-carousel::after{display:none!important}
/* stronger, denser scrim in the text band for clear legibility */
.spoki-hero-slide--school .spoki-hero-scrim{background:linear-gradient(90deg,rgba(243,246,252,.98) 0%,rgba(243,246,252,.95) 30%,rgba(243,246,252,.66) 48%,rgba(243,246,252,0) 66%)}
.spoki-hero-slide--outdoor .spoki-hero-scrim{background:linear-gradient(90deg,rgba(238,250,250,.98) 0%,rgba(238,250,250,.95) 30%,rgba(238,250,250,.66) 48%,rgba(238,250,250,0) 66%)}
/* darker sub for contrast on the photo slides (design system: >=16px, AA) */
.spoki-hero-slide--photo .spoki-homepage-hero__sub{color:#3B475C!important;font-weight:600!important}
.spoki-hero-slide--photo .spoki-homepage-hero__why{color:#2E3A67!important;font-weight:700!important}
@media(max-width:900px){
  .spoki-hero-slide--school .spoki-hero-scrim{background:linear-gradient(180deg,rgba(243,246,252,.98) 0%,rgba(243,246,252,.95) 32%,rgba(243,246,252,.5) 52%,rgba(243,246,252,0) 70%)}
  .spoki-hero-slide--outdoor .spoki-hero-scrim{background:linear-gradient(180deg,rgba(238,250,250,.98) 0%,rgba(238,250,250,.95) 32%,rgba(238,250,250,.5) 52%,rgba(238,250,250,0) 70%)}
}
/* campaign offer line (owner-supplied real values only) */
.spoki-homepage-hero__offer{display:inline-flex;align-items:center;gap:8px;margin:0!important;
  font:800 15px/1.3 'Nunito',sans-serif;color:#B25E00}
.spoki-homepage-hero__offer::before{content:'';flex:0 0 auto;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23FF8A00'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:900px){.spoki-homepage-hero__offer{margin-inline:auto!important}}
/* ============================================================
 * MOBILE LEGIBILITY FIX (owner 2026-07-31): on phones the why-line fell
 * past the scrim fade onto the busy photo and collided with the arrows.
 * Fix = photo occupies the BOTTOM only; the whole copy block sits on a
 * solid tinted panel at the top (per the brief: text first, image below).
 * ============================================================ */
@media(max-width:900px){
  /* image = lower portion only, never behind the copy */
  .spoki-hero-slide--photo .spoki-hero-bg{top:auto!important;bottom:0!important;height:46%!important}
  .spoki-hero-slide--photo .spoki-hero-bg__img{object-position:center 38%}
  /* solid tinted ground behind ALL copy + a soft fade into the photo */
  .spoki-hero-slide--school .spoki-hero-scrim{background:linear-gradient(180deg,#F3F6FC 0%,#F3F6FC 56%,rgba(243,246,252,.85) 62%,rgba(243,246,252,0) 72%)}
  .spoki-hero-slide--outdoor .spoki-hero-scrim{background:linear-gradient(180deg,#EEFAFA 0%,#EEFAFA 56%,rgba(238,250,250,.85) 62%,rgba(238,250,250,0) 72%)}
  /* keep the copy clear of the bottom control row */
  /* tighten the slide so the photo sits right under the copy (no dead tinted gap) */
  .spoki-hero-slide--photo{padding-bottom:96px!important;padding-top:22px!important;min-height:0!important}
  .spoki-hero-slide--photo .spoki-hero-bg{height:38%!important}
  .spoki-hero-slide--photo .spoki-homepage-hero__inner{padding-bottom:8px}
  .spoki-hero-slide--photo .spoki-homepage-hero__why{margin-top:10px!important}
}
/* mobile: slides are equal-height because the track is a flex row (tallest wins).
   Cap the carousel height on phones so the campaign photo is visible above the fold
   and no dead tinted band remains under the copy. */
@media(max-width:900px){
  .spoki-hero-carousel__track{align-items:stretch}
  .spoki-hero-carousel__slide{min-height:0!important}
  .spoki-hero-carousel__viewport{max-height:660px}
  .spoki-hero-slide--photo{padding-bottom:78px!important}
  .spoki-hero-slide--photo .spoki-hero-bg{height:34%!important}
  .spoki-hero-slide--photo .spoki-homepage-hero__inner{padding-bottom:0}
  .spoki-hero-slide--photo .spoki-homepage-hero__left{gap:11px}
}
/* mobile FINAL: slides are equalised by the flex track (slide 1 is tallest), so a fixed
   % photo band leaves dead space. Make the copy sit at the top and let the photo fill
   ALL remaining height under it — no gap at any slide height. */
@media(max-width:900px){
  .spoki-hero-carousel__viewport{max-height:none}
  .spoki-hero-slide--photo{display:flex!important;flex-direction:column;justify-content:flex-start;
    padding-top:20px!important;padding-bottom:0!important}
  .spoki-hero-slide--photo .spoki-homepage-hero__inner{flex:0 0 auto}
  .spoki-hero-slide--photo .spoki-hero-bg{position:relative!important;inset:auto!important;
    flex:1 1 auto!important;height:auto!important;min-height:230px;width:100%!important;order:2}
  /* the mobile masters put the products in the LOWER half -> anchor to bottom */
  .spoki-hero-slide--photo .spoki-hero-bg__img{height:100%!important;object-position:center bottom!important}
  /* scrim no longer needed on mobile: copy sits on the solid tinted slide, photo is separate */
  .spoki-hero-slide--school{background:#F3F6FC!important}
  .spoki-hero-slide--outdoor{background:#EEFAFA!important}
  .spoki-hero-slide--photo .spoki-hero-scrim{display:none!important}
}

/* CAMPAIGN DEADLINE (2026-07-31) — date sits beside the discount, subordinate to it */
.spoki-homepage-hero__until{font-weight:700;color:#6B6357;position:relative;padding-left:13px;white-space:nowrap}
.spoki-homepage-hero__until::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#C9BCA9}
@media(max-width:420px){.spoki-homepage-hero__offer{flex-wrap:wrap;justify-content:center;row-gap:2px}.spoki-homepage-hero__until{padding-left:0}.spoki-homepage-hero__until::before{display:none}}

/* ============================================================
 * OWNER DIRECTIVE 2026-07-31 (FINAL): Slide 1 is the visual reference.
 * Slides 2 & 3 rebuilt on the SAME system: cream bg + same spark pattern,
 * navy text, SAME circular image treatment, one CTA, one offer line, one
 * short 3-benefit line. No full-bleed photo, no solid campaign colours.
 * Height solved structurally: trust row moved below the carousel + fixed
 * image container (never flex-stretch the photo).
 * ============================================================ */
/* 1. kill the full-bleed campaign treatment entirely */
.spoki-hero-slide--photo .spoki-hero-bg,
.spoki-hero-slide--photo .spoki-hero-scrim{display:none!important}
.spoki-hero-slide--school,.spoki-hero-slide--outdoor,
.spoki-hero-slide--photo{background:transparent!important;display:flex!important;
  flex-direction:row!important;align-items:center!important;padding:clamp(30px,4vw,54px) 0 clamp(56px,7vw,86px)!important;min-height:0!important}
/* 2. very slight per-campaign tint only (cream stays the base) */
.spoki-hero-slide--school{background:radial-gradient(58% 70% at 78% 42%,rgba(183,176,230,.16),rgba(183,176,230,0) 70%)!important}
.spoki-hero-slide--outdoor{background:radial-gradient(58% 70% at 78% 42%,rgba(66,195,188,.16),rgba(66,195,188,0) 70%)!important}
/* 3. identical circular media on every slide (fixed container, never stretched) */
.spoki-hero-carousel .spoki-homepage-hero__media{width:min(100%,470px)!important;aspect-ratio:1/1!important;
  height:auto!important;flex:0 0 auto!important;margin:0 auto!important}
/* 4. identical text column on every slide */
.spoki-hero-carousel .spoki-homepage-hero__left{max-width:520px}
.spoki-hero-carousel .spoki-homepage-hero__h1{color:#2E3A67!important}
.spoki-hero-carousel .spoki-homepage-hero__sub{color:#54656B!important}
/* 5. benefit line = one short 3-part row (never a paragraph) */
.spoki-homepage-hero__why{display:inline-flex!important;align-items:center;gap:8px;
  margin:2px 0 0!important;font:700 13.5px/1.4 'Nunito',sans-serif;color:#00838A;flex-wrap:wrap}
@media(max-width:900px){
  .spoki-hero-slide--school,.spoki-hero-slide--outdoor,.spoki-hero-slide--photo{
    flex-direction:column!important;padding-bottom:clamp(64px,10vw,86px)!important}
  .spoki-homepage-hero__why{justify-content:center;text-align:center}
}
/* 6. persistent trust strip BELOW the carousel (moved out of slide 1 -> equalises heights) */
.spoki-hero-trustbar{position:relative;z-index:4;background:transparent;padding:0 0 clamp(26px,3.4vw,40px)}
.spoki-hero-trustbar .spoki-homepage-hero__trust{max-width:1180px;margin:0 auto!important;
  padding:0 clamp(20px,3vw,32px);justify-content:center}
/* circular hero image inside the shared media wrapper (html block markup) */
.spoki-homepage-hero__photo{margin:0}
.spoki-hero-circimg,.spoki-homepage-hero__photo>img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;aspect-ratio:1/1}
/* restore the section wave (slides are cream again, so it reads correctly) */
.spoki-homepage-hero.spoki-hero-carousel::after{display:block!important}
/* trust strip sits on the cream hero band, above the wave */
.spoki-hero-trustbar{margin-top:calc(-1 * clamp(52px,6vw,90px));padding-bottom:clamp(30px,4vw,46px)}
/* ---- fix A: benefit line must stay ONE row (icon was wrapping onto its own line) ---- */
.spoki-homepage-hero__why{flex-wrap:nowrap!important;align-items:flex-start!important}
.spoki-homepage-hero__why::before{margin-top:2px}
@media(max-width:900px){.spoki-homepage-hero__why{flex-wrap:wrap!important;justify-content:center}}

/* ---- fix B: trust strip lives OUTSIDE .spoki-homepage-hero now -> re-scope its styles ---- */
.spoki-hero-trustbar .spoki-homepage-hero__trust{display:flex;flex-wrap:nowrap;align-items:center;gap:26px!important}
.spoki-hero-trustbar .spoki-homepage-hero__trust p{margin:0!important;font:700 13.5px/1.3 'Nunito',sans-serif;
  color:#54656B;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto}
.spoki-hero-trustbar .spoki-homepage-hero__trust strong{color:#2E3A67;font-weight:800}
.spoki-hero-trustbar .spoki-homepage-hero__trust p::before{content:'';flex:0 0 auto;width:30px;height:30px;
  border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:17px 17px}
.spoki-hero-trustbar .spoki-homepage-hero__tstat--a::before{background-color:#17A9AF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
.spoki-hero-trustbar .spoki-homepage-hero__tstat--b::before{background-color:#F0A15C;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.2 2.5 2.2 15.5 0 18M12 3c-2.2 2.5-2.2 15.5 0 18'/%3E%3C/svg%3E")}
.spoki-hero-trustbar .spoki-homepage-hero__tstat--c::before{background-color:#A99FE0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2.05V18h6v-1.25c0-.85.4-1.55 1-2.05A7 7 0 0 0 12 2z'/%3E%3Cpath d='M9 21h6M10 18.5h4'/%3E%3C/svg%3E")}
@media(max-width:480px){
  .spoki-hero-trustbar .spoki-homepage-hero__trust{gap:12px!important;justify-content:center}
  .spoki-hero-trustbar .spoki-homepage-hero__trust p{font-size:11px;gap:6px}
  .spoki-hero-trustbar .spoki-homepage-hero__trust p::before{width:24px;height:24px;background-size:14px 14px}
}
/* ============================================================
 * REVERT-SLIDE1 + UNIFY 2/3 (owner 2026-07-31 final): Slide 1 untouched.
 * Slides 2/3 = same grammar: badge, headline, sub, ONE CTA, icon row,
 * circular image with two chips (discount + validity).
 * ============================================================ */
/* slide 1 must render exactly as before: CTAs on one row, secondary = pill again */
.spoki-hero-slide--home .spoki-homepage-hero__ctarow{flex-direction:row!important;align-items:center;flex-wrap:wrap;gap:14px}
.spoki-hero-slide--home .spoki-homepage-hero__cta-secondary .wp-block-button__link,
.spoki-hero-slide--home .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link{
  background:transparent!important;color:#00838A!important;border:2px solid rgba(0,131,138,.45)!important;
  border-radius:999px!important;font:800 15px/1 'Nunito',sans-serif!important;padding:14px 26px!important;
  min-height:52px!important;height:auto!important;text-decoration:none!important;outline:none!important}
.spoki-hero-slide--home .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover{
  border-color:#00838A!important;background:rgba(0,131,138,.06)!important;color:#00838A!important}
/* campaign chips: discount chip reads as the offer (orange), validity chip calm */
.spoki-hero-slide--school .spoki-homepage-hero__chip--a .spoki-homepage-hero__chip-t,
.spoki-hero-slide--outdoor .spoki-homepage-hero__chip--a .spoki-homepage-hero__chip-t{
  font-size:17px;color:#B25E00}
.spoki-hero-slide--school .spoki-homepage-hero__chip--a::before,
.spoki-hero-slide--outdoor .spoki-homepage-hero__chip--a::before{background:#FDEBDD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B25E00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px 16px}
.spoki-hero-slide--school .spoki-homepage-hero__chip--b::before,
.spoki-hero-slide--outdoor .spoki-homepage-hero__chip--b::before{background:#E6F8F9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300838A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px 16px}
/* ============================================================
 * DESIGN CRITIQUE PASS (owner 2026-07-31): mobile is a SIMPLIFIED hero,
 * not a shrunken desktop. Cream stays the base on all slides; campaigns
 * get a soft atmospheric glow tied to their circle colours (10-15% strength).
 * ============================================================ */
/* --- soft campaign glows on the cream base (support the circle, never compete) --- */
.spoki-hero-slide--school{background:
  radial-gradient(46% 56% at 78% 44%,rgba(147,158,214,.20),rgba(147,158,214,0) 68%),
  radial-gradient(60% 70% at 18% 78%,rgba(183,176,230,.10),rgba(183,176,230,0) 70%)!important}
.spoki-hero-slide--outdoor{background:
  radial-gradient(46% 56% at 78% 44%,rgba(66,195,188,.20),rgba(66,195,188,0) 68%),
  radial-gradient(60% 70% at 18% 78%,rgba(154,217,208,.12),rgba(154,217,208,0) 70%)!important}

/* --- offer pill: compact, sits between sub and CTA (replaces chip-on-image) --- */
.spoki-hero-offerpill{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;
  padding:7px 14px;border-radius:999px;background:#FFF1E0;border:1px solid #FFD9B0;
  font:800 13.5px/1.2 'Nunito',sans-serif;color:#B25E00;white-space:nowrap}
.spoki-hero-offerpill::before{content:'';width:15px;height:15px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B25E00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ============ MOBILE: simplified hero ============ */
@media(max-width:900px){
  /* tighter rhythm so CTA + top of the circle both fit above the fold */
  .spoki-hero-carousel__slide{padding:18px 0 64px!important}
  .spoki-hero-carousel .spoki-homepage-hero__inner{gap:14px!important}
  .spoki-hero-carousel .spoki-homepage-hero__left{gap:11px!important}
  .spoki-hero-carousel .spoki-homepage-hero__h1{font-size:clamp(25px,6.6vw,31px)!important;line-height:1.18!important}
  .spoki-hero-carousel .spoki-homepage-hero__sub{font-size:15px!important;line-height:1.5!important}
  /* shorter copy on phones: drop the trailing sentence */
  .spoki-hero-mobdrop{display:none!important}
  /* ONE primary CTA on mobile */
  .spoki-hero-carousel .spoki-homepage-hero__cta-secondary{display:none!important}
  /* compact benefit/icon row */
  .spoki-hero-carousel .spoki-homepage-hero__trust{gap:10px!important;flex-wrap:wrap;justify-content:center}
  .spoki-hero-carousel .spoki-homepage-hero__trust p{font-size:11.5px!important;gap:6px!important}
  .spoki-hero-carousel .spoki-homepage-hero__trust p::before{width:24px!important;height:24px!important;background-size:14px 14px!important}
  /* smaller circle, sits right under the copy */
  .spoki-hero-carousel .spoki-homepage-hero__media{width:min(74vw,250px)!important;margin-top:4px!important}
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{margin-top:0!important}
  /* NO floating cards/chips over the photo on mobile (they crowd + overlap) */
  .spoki-hero-carousel .spoki-homepage-hero__chip{display:none!important}
  /* calmer decoration */
  .spoki-hero-carousel .spoki-homepage-hero__rings::after{display:none}
  .spoki-hero-offerpill{font-size:13px}
}
/* mobile: arrows were colliding with the benefit row -> pin them beside the circle,
   vertically centred on the IMAGE, not the whole slide */
@media(max-width:900px){
  .spoki-hero-carousel__arrow{top:auto!important;bottom:104px!important;transform:none!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    background:rgba(255,255,255,.94)!important;box-shadow:0 4px 12px rgba(46,58,103,.18)!important}
  .spoki-hero-carousel__arrow svg{width:16px;height:16px}
  .spoki-hero-carousel__arrow--prev{left:8px!important}
  .spoki-hero-carousel__arrow--next{right:8px!important}
  .spoki-hero-carousel__dots{bottom:22px}
}
/* ============================================================
 * FINAL CLEANUP (owner approved 2026-07-31): mobile = swipe + dots only,
 * no arrows; dead space removed structurally (no stretch, no flex:1);
 * desktop/mobile copy swap helpers.
 * ============================================================ */
/* copy swap helpers (one renders, the other is removed from flow) */
.spoki-hero-mobonly{display:none}
@media(max-width:900px){
  .spoki-hero-mobonly{display:inline}
  .spoki-hero-deskonly,.spoki-hero-mobdrop{display:none!important}
}

/* --- dead space: slides must NOT stretch to the tallest; image container is fixed --- */
.spoki-hero-carousel__track{align-items:flex-start!important}
.spoki-hero-carousel__slide{align-self:flex-start!important}
.spoki-hero-carousel .spoki-homepage-hero__media{flex:0 0 auto!important;height:auto!important}

@media(max-width:900px){
  /* --- arrows OFF on mobile: swipe + dots is the native pattern --- */
  .spoki-hero-carousel__arrow{display:none!important}
  /* --- dots: clearly visible, above the app bottom bar --- */
  .spoki-hero-carousel__dots{position:relative!important;bottom:auto!important;margin:14px auto 0!important;
    padding-bottom:2px}
  .spoki-hero-carousel__dot{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
  .spoki-hero-carousel__dot::before{width:9px;height:9px;background:rgba(46,58,103,.34);box-shadow:none}
  .spoki-hero-carousel__dot[aria-selected="true"]::before{background:#FF8A00;width:24px;border-radius:6px;box-shadow:none}
  /* --- normalized mobile template: same paddings + same image box on every slide --- */
  .spoki-hero-carousel__slide{padding:18px 0 26px!important}
  .spoki-hero-carousel .spoki-homepage-hero__media{width:min(70vw,236px)!important;margin-top:6px!important}
}
/* fine-print under the offer (accuracy: selected products / while stocks last) */
.spoki-hero-terms{margin:4px 0 0!important;font:600 11.5px/1.4 'Nunito',sans-serif;color:#7A8790}
@media(max-width:900px){.spoki-hero-terms{text-align:center}}
/* arrows OFF on mobile — must beat the earlier WoodMart-hardening block that
   sets .spoki-hero-carousel .spoki-hero-carousel__arrow{display:flex!important} */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-hero-carousel__arrow,
  .spoki-hero-carousel .spoki-hero-carousel__arrow--prev,
  .spoki-hero-carousel .spoki-hero-carousel__arrow--next{display:none!important}
}
/* ============================================================
 * MOBILE UX PASS (owner 2026-07-31): campaign slides = fewer message
 * levels + a bigger, emotional circle. Hierarchy on phones:
 * badge > headline > short text > offer+date > CTA > BIG image > dots.
 * ============================================================ */
/* --- softer glows: keep the centre cream so text never sits under a blue filter --- */
.spoki-hero-slide--school{background:
  radial-gradient(40% 46% at 82% 30%,rgba(147,158,214,.14),rgba(147,158,214,0) 70%),
  radial-gradient(52% 58% at 18% 88%,rgba(183,176,230,.07),rgba(183,176,230,0) 72%)!important}
.spoki-hero-slide--outdoor{background:
  radial-gradient(40% 46% at 82% 30%,rgba(66,195,188,.14),rgba(66,195,188,0) 70%),
  radial-gradient(52% 58% at 18% 88%,rgba(154,217,208,.08),rgba(154,217,208,0) 72%)!important}

/* --- disclaimer: was too pale (#7A8790) -> darker + min 12px for real legibility --- */
.spoki-hero-terms{color:#5C6770!important;font-size:12px!important}

@media(max-width:900px){
  /* 1. campaign slides drop the benefit icon row (it repeats the headline and
        steals the height the photo needs). Slide 1 KEEPS its row — it explains
        the core SpOki service. */
  .spoki-hero-slide--school .spoki-homepage-hero__trust,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__trust{display:none!important}

  /* 2. CTA sized to its text, not near-full-bleed */
  .spoki-hero-carousel .spoki-homepage-hero__cta,
  .spoki-hero-carousel .spoki-homepage-hero__cta .wp-block-button__link{width:auto!important}
  .spoki-hero-carousel .spoki-homepage-hero__cta .wp-block-button__link{padding:15px 26px!important}

  /* 3. bigger, centred circle right after the CTA (16-20px gap), fixed 1/1 box */
  .spoki-hero-carousel .spoki-homepage-hero__media{
    width:min(74vw,288px)!important;aspect-ratio:1/1!important;margin-top:18px!important}
  .spoki-hero-slide--school .spoki-homepage-hero__media,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__media{margin-top:16px!important}

  /* 4. tighter vertical rhythm so offer + CTA stay above the fold */
  .spoki-hero-carousel .spoki-homepage-hero__left{gap:9px!important}
  .spoki-hero-carousel .spoki-homepage-hero__inner{gap:0!important}
  .spoki-hero-carousel__slide{padding:16px 0 20px!important}
  .spoki-hero-carousel .spoki-homepage-hero__badge{padding:8px 15px 8px 12px!important;font-size:13px!important}
  .spoki-hero-carousel .spoki-hero-offerpill{margin-top:2px!important}
  .spoki-hero-terms{margin-top:2px!important}

  /* 5. dots sit under the image */
  .spoki-hero-carousel__dots{margin-top:12px!important}
}
/* mobile fine-tune: hit the spec numbers — circle 270-290px, CTA->image gap 16-20px */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{padding-left:0!important;padding-right:0!important}
  .spoki-hero-carousel .spoki-homepage-hero__media{width:min(78vw,292px)!important;margin-top:0!important}
  .spoki-hero-slide--school .spoki-homepage-hero__media,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__media{margin-top:0!important}
  /* the 36px gap came from the columns block-gap; own it explicitly */
  .spoki-hero-carousel .spoki-homepage-hero__inner{row-gap:18px!important}
  .spoki-hero-carousel .spoki-homepage-hero__inner>.wp-block-column+.wp-block-column{margin-top:0!important}
}
/* the legacy @media(max-width:480px/400px) blocks cap .spoki-homepage-hero__media with
   max-width:264/266px — that is what was pinning the circle at 266px. Override it. */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__media{max-width:min(78vw,292px)!important}
}
@media(max-width:480px){
  .spoki-hero-carousel .spoki-homepage-hero__media{max-width:min(78vw,292px)!important;width:min(78vw,292px)!important}
}
@media(max-width:400px){
  .spoki-hero-carousel .spoki-homepage-hero__media{max-width:min(80vw,288px)!important;width:min(80vw,288px)!important}
}
/* trim the residual gap between the CTA block and the circle */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__left{padding-bottom:0!important;margin-bottom:0!important}
  .spoki-hero-carousel .spoki-homepage-hero__ctarow{margin-bottom:0!important}
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{padding-top:0!important;margin-top:-4px!important}
}
/* ---- Slide 1 secondary CTA must STAY on mobile (it routes to the gift registry,
   real business value). Earlier "one CTA on mobile" rule hid it — restore it here
   as a compact text link under the primary button, not a second heavy pill. ---- */
@media(max-width:900px){
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary{display:block!important}
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary .wp-block-button__link{
    background:transparent!important;border:none!important;box-shadow:none!important;
    color:#00838A!important;font:800 14.5px/1.2 'Nunito',sans-serif!important;
    padding:10px 6px!important;min-height:44px!important;height:auto!important;
    text-decoration:underline!important;text-underline-offset:3px!important;
    text-decoration-thickness:1.5px!important;text-decoration-color:rgba(0,131,138,.4)!important}
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary .wp-block-button__link:hover,
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary .wp-block-button__link:focus-visible{
    background:transparent!important;text-decoration-color:#00838A!important}
  .spoki-hero-slide--home .spoki-homepage-hero__ctarow{gap:2px!important}
  /* campaign slides still keep exactly one CTA */
  .spoki-hero-slide--school .spoki-homepage-hero__cta-secondary,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__cta-secondary{display:none!important}
}
/* buttons became auto-width (good) but then left-aligned against centred copy — centre them */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__ctarow{align-items:center!important;justify-content:center!important}
  .spoki-hero-carousel .spoki-homepage-hero__ctarow .wp-block-button{width:auto!important;margin-left:auto!important;margin-right:auto!important}
  /* secondary keeps a light outline (clear 44px+ affordance) but stays visually lighter
     than the primary; needs .is-style-outline specificity to beat the desktop block */
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link{
    border-width:1.5px!important;border-color:rgba(0,131,138,.35)!important;
    padding:12px 22px!important;min-height:46px!important;font-size:14.5px!important}
}
/* ============================================================
 * CONTROL ROW (owner 2026-07-31): arrows sit BESIDE the dots instead of
 * floating over the slide. One centred row: [<] [dots] [>]. This keeps the
 * arrow affordance without the content collision that forced them off mobile.
 * ============================================================ */
.spoki-hero-carousel__controls{display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,18px);width:100%;position:relative;z-index:5;margin-top:6px}
.spoki-hero-carousel__controls .spoki-hero-carousel__arrow{position:static!important;
  transform:none!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  flex:0 0 auto;margin:0!important}
.spoki-hero-carousel__controls .spoki-hero-carousel__dots{position:static!important;
  transform:none!important;bottom:auto!important;left:auto!important;margin:0!important}
/* arrows are visible again on mobile now that they no longer overlap content */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-hero-carousel__controls .spoki-hero-carousel__arrow,
  .spoki-hero-carousel .spoki-hero-carousel__controls .spoki-hero-carousel__arrow--prev,
  .spoki-hero-carousel .spoki-hero-carousel__controls .spoki-hero-carousel__arrow--next{
    display:inline-flex!important;width:44px!important;height:44px!important;
    min-width:44px!important;min-height:44px!important;
    background:#fff!important;border:1px solid #F0E4D0!important;
    box-shadow:0 2px 8px rgba(46,58,103,.12)!important}
  .spoki-hero-carousel__controls{margin-top:10px;padding-bottom:4px}
}
/* ============================================================
 * FINAL CONTROLS (owner 2026-07-31): mobile = swipe + dots ONLY.
 * No arrows on mobile, and the circle is NOT shrunk to make room for them.
 * The image is the emotional anchor; arrows are a secondary control.
 * Dots sit between the CTA and the image so the carousel is discoverable
 * inside the first viewport without a heavy control row.
 * ============================================================ */
@media(max-width:900px){
  /* arrows gone on mobile (swipe is the native gesture) */
  .spoki-hero-carousel .spoki-hero-carousel__controls .spoki-hero-carousel__arrow,
  .spoki-hero-carousel .spoki-hero-carousel__arrow--prev,
  .spoki-hero-carousel .spoki-hero-carousel__arrow--next{display:none!important}

  /* the relocated controls row becomes a slim dots-only row inside the slide */
  .spoki-homepage-hero__inner > .spoki-hero-carousel__controls{
    order:1;width:100%;margin:0!important;padding:0!important;
    display:flex;align-items:center;justify-content:center;min-height:32px}
  .spoki-homepage-hero__inner > .spoki-homepage-hero__mediacol{order:2}

  /* CTA -> dots ~14px, dots -> image ~14px (row-gap does both) */
  .spoki-hero-carousel .spoki-homepage-hero__inner{row-gap:14px!important}

  /* dot spec: 32px touch container, 9px visual dot, 22px active pill */
  .spoki-hero-carousel__dots{gap:8px!important}
  .spoki-hero-carousel .spoki-hero-carousel__dot{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
    display:inline-flex!important;align-items:center;justify-content:center;
    background:none!important;border:none!important;box-shadow:none!important;padding:0!important}
  .spoki-hero-carousel .spoki-hero-carousel__dot::before{
    content:'';display:block;width:9px;height:9px;border-radius:999px;
    background:rgba(46,58,103,.30);transition:width .2s,background .2s}
  .spoki-hero-carousel .spoki-hero-carousel__dot[aria-selected="true"]::before{
    width:22px;background:#FF8A00}

  /* circle stays LARGE: Slide 1 ~284px, campaign slides ~296px (no second
     button and no benefit icons there, so they can breathe more) */
  .spoki-hero-slide--home .spoki-homepage-hero__media{
    width:min(76vw,284px)!important;max-width:min(76vw,284px)!important}
  .spoki-hero-slide--school .spoki-homepage-hero__media,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__media{
    width:min(80vw,296px)!important;max-width:min(80vw,296px)!important}

  /* Slide 1 height: the real culprit is its extra content, not the circle.
     Secondary CTA becomes a compact text link (it still routes to the registry). */
  .spoki-hero-slide--home .spoki-homepage-hero__cta-secondary.is-style-outline .wp-block-button__link{
    background:transparent!important;border:none!important;box-shadow:none!important;
    color:#00838A!important;font:800 14px/1.2 'Nunito',sans-serif!important;
    padding:8px 10px!important;min-height:34px!important;
    text-decoration:underline!important;text-underline-offset:3px!important;
    text-decoration-thickness:1.5px!important;text-decoration-color:rgba(0,131,138,.4)!important}
  .spoki-hero-slide--home .spoki-homepage-hero__ctarow{gap:2px!important}
  /* compact benefit line, no heavy icons */
  .spoki-hero-slide--home .spoki-homepage-hero__trust{gap:8px!important}
  .spoki-hero-slide--home .spoki-homepage-hero__trust p{font-size:11px!important;gap:5px!important}
  .spoki-hero-slide--home .spoki-homepage-hero__trust p::before{
    width:20px!important;height:20px!important;background-size:12px 12px!important}
  .spoki-hero-carousel .spoki-homepage-hero__left{gap:8px!important}
}

/* dots -> image needs ~12-14px; an earlier rule pulled the media col up by 4px */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{margin-top:0!important}
  .spoki-homepage-hero__inner > .spoki-hero-carousel__controls{margin-bottom:10px!important}
}

/* ============================================================
 * OZONE-STYLE CONTROLS + MOBILE IMAGE-FIRST (owner 2026-07-31)
 * Desktop: arrows vertically centred on the sides, dots centred below.
 * Mobile: image first (with the campaign tag on top of it), then copy, then dots.
 * ============================================================ */
@media(min-width:901px){
  .spoki-hero-carousel{position:relative}
  .spoki-hero-carousel .spoki-hero-carousel__arrow{position:absolute!important;top:50%!important;
    transform:translateY(-50%)!important;z-index:6!important;margin:0!important}
  .spoki-hero-carousel .spoki-hero-carousel__arrow--prev{left:14px!important;right:auto!important}
  .spoki-hero-carousel .spoki-hero-carousel__arrow--next{right:14px!important;left:auto!important}
  .spoki-hero-carousel__controls{position:static;min-height:0}
}
@media(max-width:900px){
  /* IMAGE FIRST, then copy, then dots (Ozone pattern) */
  .spoki-hero-carousel .spoki-homepage-hero__inner{flex-direction:column!important}
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{order:1!important}
  .spoki-hero-carousel .spoki-homepage-hero__left{order:2!important}
  .spoki-homepage-hero__inner > .spoki-hero-carousel__controls{order:3!important;margin-top:4px!important}
}

/* image-first needs a smaller circle: the halo+orbit rings add ~55% around the
   photo, so a 284px photo occupied ~740px of height and pushed the CTA out of
   the first viewport. Sized so image + headline + CTA + dots all fit on 390x844. */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__media,
  .spoki-hero-slide--home .spoki-homepage-hero__media,
  .spoki-hero-slide--school .spoki-homepage-hero__media,
  .spoki-hero-slide--outdoor .spoki-homepage-hero__media{
    width:min(52vw,196px)!important;max-width:min(52vw,196px)!important;margin:0 auto!important}
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{padding-top:0!important;padding-bottom:0!important}
  /* campaign tag overlaps the bottom of the circle, like the Ozone badge */
  .spoki-hero-carousel .spoki-homepage-hero__badge{margin-top:-14px!important;position:relative;z-index:5}
  .spoki-hero-carousel .spoki-homepage-hero__inner{row-gap:8px!important}
  .spoki-hero-carousel .spoki-homepage-hero__left{gap:7px!important}
  .spoki-hero-carousel__slide{padding:10px 0 14px!important}
  .spoki-hero-carousel .spoki-homepage-hero__h1{font-size:clamp(23px,5.9vw,27px)!important}
  .spoki-hero-carousel .spoki-homepage-hero__sub{font-size:14.5px!important;line-height:1.45!important}
}

/* ============================================================
 * SLIDE IDENTITY + BADGE ANCHOR (owner 2026-07-31)
 * Each campaign gets a clearly different, but still calm, cream-based wash so
 * the visitor feels they moved to another slide. Cream stays the base at the
 * top so the header never clashes; the colour builds toward the bottom.
 * Badge deliberately OVERLAPS the circle: it reads as a label ON the photo
 * (one unit) instead of floating loose between image and headline.
 * ============================================================ */
.spoki-hero-slide--home{background:
  radial-gradient(52% 46% at 80% 34%,rgba(255,190,134,.13),rgba(255,190,134,0) 70%),
  linear-gradient(168deg,#FDF9F3 0%,#FCF5EA 52%,#F9EFE0 100%)!important}
.spoki-hero-slide--school{background:
  radial-gradient(50% 44% at 78% 30%,rgba(150,160,220,.26),rgba(150,160,220,0) 70%),
  linear-gradient(168deg,#FFFBF4 0%,#F4F2FB 48%,#E7ECF9 100%)!important}
.spoki-hero-slide--outdoor{background:
  radial-gradient(50% 44% at 78% 30%,rgba(66,195,188,.26),rgba(66,195,188,0) 70%),
  linear-gradient(168deg,#FFFBF4 0%,#EAF7F4 48%,#DBF1EE 100%)!important}
/* badge = label anchored to the photo, not a floating pill */
.spoki-hero-carousel .spoki-homepage-hero__badge{box-shadow:0 6px 18px rgba(46,58,103,.13)!important}
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__badge{margin-top:-18px!important}
}

/* ============================================================
 * ONE HERO WASH (fix 2026-07-31): the per-slide background rules were
 * overriding the parent hero background, which is where the decorative
 * sparks/dots live -> the dots vanished, and because a slide does not fill
 * the full hero height the parent's cream showed underneath as a hard band.
 * Now: ONE background on the hero, tinted per active slide via a CSS variable.
 * Sparks stay on every slide, the wave meets a single colour, and the change
 * cross-fades instead of snapping.
 * ============================================================ */
.spoki-hero-slide--home,
.spoki-hero-slide--school,
.spoki-hero-slide--outdoor{background:none!important}
.spoki-homepage-hero.spoki-hero-carousel{
  --hero-wash-a:#FDF9F3; --hero-wash-b:#FCF5EA; --hero-wash-c:#F9EFE0;
  --hero-glow:rgba(255,190,134,.13);
  background-color:var(--hero-wash-b);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5.4 3.4 8 11 11-7.6 3-10 5.6-11 11-1-5.4-3.4-8-11-11 7.6-3 10-5.6 11-11z' fill='%23F6BE8A'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5.4 3.4 8 11 11-7.6 3-10 5.6-11 11-1-5.4-3.4-8-11-11 7.6-3 10-5.6 11-11z' fill='%23B7B0E6'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 50%, #F6BE8A 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #B7B0E6 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #FFC38A 58%, transparent 60%),
    radial-gradient(circle at 50% 50%, #9AD9D0 58%, transparent 60%),
    radial-gradient(46% 44% at 80% 32%, var(--hero-glow), rgba(255,255,255,0) 68%),
    radial-gradient(46% 44% at 84% 30%, rgba(255,255,255,.72), rgba(255,255,255,0) 64%),
    linear-gradient(168deg,var(--hero-wash-a) 0%,var(--hero-wash-b) 52%,var(--hero-wash-c) 100%);
  background-repeat:no-repeat;
  background-position:right 40% top 8%,left 12% bottom 28%,right 9% top 22%,right 30% bottom 18%,right 6% bottom 34%,right 22% top 34%,0 0,0 0,0 0;
  background-size:12px 12px,10px 10px,14px 14px,11px 11px,7px 7px,6px 6px,100% 100%,100% 100%,100% 100%;
  transition:background-color .5s ease}
/* per-campaign tint, one variable swap = no repainting the whole stack */
.spoki-hero-carousel[data-active="1"]{--hero-wash-a:#FFFBF4;--hero-wash-b:#F4F2FB;--hero-wash-c:#E7ECF9;--hero-glow:rgba(150,160,220,.26)}
.spoki-hero-carousel[data-active="2"]{--hero-wash-a:#FFFBF4;--hero-wash-b:#EAF7F4;--hero-wash-c:#DBF1EE;--hero-glow:rgba(66,195,188,.26)}
/* BOTH orbit rings visible on mobile, STATIC (03.10.2026, reshenie 5 na sobstvenika - po-semplo na mobilno;
   predi: vartyaha se na mobilno s !important) */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__rings::before,
  .spoki-hero-carousel .spoki-homepage-hero__rings::after{display:block!important}
}
@media(prefers-reduced-motion:reduce){
  .spoki-hero-carousel .spoki-homepage-hero__rings::before,
  .spoki-hero-carousel .spoki-homepage-hero__rings::after{animation:none!important}
}

/* ---- CLS: identical fixed dots slot reserved on EVERY slide ----
   The copy column always reserves the same padding-bottom; the single shared
   dots node is absolutely positioned inside that slot on the active slide, so
   it adds zero height and the hero never resizes between slides.
   No flex-alignment changes, no JS height measurement. */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__left{position:relative!important;padding-bottom:44px!important}
  .spoki-homepage-hero__left > .spoki-hero-carousel__controls{
    position:absolute!important;left:0!important;right:0!important;bottom:0!important;
    height:44px!important;min-height:0!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important}
  /* rings: thinner frame, more real photo */
  .spoki-hero-carousel .spoki-homepage-hero__rings::before{border-width:1px!important;inset:-3%!important}
  .spoki-hero-carousel .spoki-homepage-hero__rings::after{border-width:1px!important;inset:-1%!important}
  .spoki-hero-carousel .spoki-homepage-hero__photo{inset:5%!important;padding:5px!important}
}
/* desktop transition 300-450ms, one composition (no per-element animation) */
.spoki-hero-carousel__track{transition:transform .38s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.spoki-hero-carousel__track{transition:none!important}}

/* copy area keeps a sensible minimum height so the 3 slides match exactly and
   the hero never resizes between them (last 20px of the CLS variance) */
@media(max-width:900px){
  .spoki-hero-carousel .spoki-homepage-hero__left{min-height:372px!important;justify-content:flex-start}
  .spoki-hero-carousel .spoki-homepage-hero__mediacol{min-height:0}
}
@media(max-width:400px){
  .spoki-hero-carousel .spoki-homepage-hero__left{min-height:392px!important}
}

/* 03.10.2026 (LOAD SPEED, reshenie 5 na sobstvenika): gornata lenta e plattna (rgba(1,168,174,1)) - backdrop blur(5px) ot
   Header Builder nyama vidim efekt, a struva render pass na vseki kadar. Samo nachalnata, samo do 1024px. */
@media (max-width:1024px){
  body.home .whb-top-bar::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}