/* SpOki Component Fixes (Package C) -- 2026-07-03. * C1: Need-hub desktop card grid was double-nested (wrapper .spoki-helper-cards * itself rendered as a 3x451px grid, so the real cards grid sat inside ONE * cell -> 137px sliver cards). Wrapper becomes block; inner grid owns columns. * C2: Gift-hub tile "Разгледай" links carried inline style="color:#FF8A00" * (30x orange leak, orange=commercial-only law) -> stylesheet !important * beats inline; now Colour Law v3 text teal. Titles locked navy. * CSS-only. Kill-switch: wp_dequeue_style('spoki-component-fixes'). * Backup: functions.php.bak-pkgc-. */ /* C1 -- need-hub / hub helper-card grids (desktop) */ @media (min-width: 768px) { .entry-content .spoki-helper-cards { display: block !important; } .entry-content .spoki-helper-cards .spoki-helper-cards__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; } } /* C2 -- gift-hub tiles: arrow link = v3 text teal (beats inline orange), title navy */ .spoki-tile__more { color: #00838A !important; } .spoki-tile__title { color: #2E3A67 !important; } /* C4 -- homepage awards section keeps its OWN heading; hide the brand-strip shortcode's internal duplicate header inside that section only */ .spoki-awards-strip .spk-brands__eyebrow, .spoki-awards-strip .spk-brands__title { display: none !important; } .spoki-awards-strip .spk-brands { padding-top: 8px !important; } /* ============================================================ * C.5B -- PRODUCT CARD + RHYTHM UNIFICATION (2026-07-03) * Owner: homepage rails must use the SAME card DNA as the approved * category .spoki-pcard (clean white, no dark border, soft navy shadow, * left-aligned, Comfortaa navy title). Cards stay 100% dynamic Woo. * ============================================================ */ /* rails on homepage + PDP related/upsells adopt pcard chrome */ body.home .wd-products .wd-product, .single-product .related .wd-product, .single-product .upsells .wd-product { border: none !important; box-shadow: 0 4px 16px rgba(46, 58, 103, .08) !important; border-radius: 20px !important; text-align: left !important; } body.home .wd-products .wd-product .wd-entities-title, body.home .wd-products .wd-product .wd-entities-title a, .single-product .related .wd-entities-title a, .single-product .upsells .wd-entities-title a { font-family: "Comfortaa", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #2E3A67 !important; text-align: left !important; } body.home .wd-products .wd-product .price, .single-product .related .price, .single-product .upsells .price { text-align: left !important; justify-content: flex-start !important; } /* C.5B -- header age pills are CHIPS: Nunito, flat (were Comfortaa+shadow) */ .spoki-agebar__pill { font-family: "Nunito", sans-serif !important; font-weight: 700 !important; box-shadow: none !important; } /* C.5B -- button line-height rhythm (primary set) */ .spoki-btn, .spoki-btn--orange, .wp-block-button__link, .spoki-prefooter-cta__button, .spoki-category-circles__btns a, .btn-accent, .single_add_to_cart_button, a.add_to_cart_button { line-height: 1.25 !important; } /* ============================================================ * C.5B-2 -- PRODUCTS RAIL GRID (.spoki-prail) + link/button polish * (owner review 2026-07-03) * ============================================================ */ .spoki-prail { display: grid !important; gap: 20px !important; align-items: stretch; margin: 8px 0; } .spoki-prail--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .spoki-prail--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .spoki-prail--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 767px) { .spoki-prail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } } /* pcard colour safety net OUTSIDE body.spoki-ds pages (homepage etc.) */ .spoki-prail .spoki-pcard__brand, .spoki-prail .spoki-pcard__brand a { color: #00838A !important; } .spoki-prail .spoki-pcard__price .woocommerce-Price-amount.amount:first-child { color: var(--spoki-price-current) !important; font-weight: 800 !important; } /* ARROW LINK -- owner decision 2026-07-03: NO permanent orange underline (orange = commercial only; static orange line under teal text = colour noise). Clean teal arrow link; hover = teal underline + arrow nudge. */ [class*="__cta"] a:not(.wp-block-button__link), p[class*="__cta"] a, .spoki-link-arrow { border-bottom: none !important; text-decoration: none !important; box-shadow: none !important; color: #00838A !important; font-family: "Nunito", sans-serif !important; font-weight: 800 !important; } [class*="__cta"] a:not(.wp-block-button__link):not([class*="__cta"]):hover, .spoki-link-arrow:hover { text-decoration: underline !important; text-decoration-color: #00838A !important; text-underline-offset: 3px !important; } /* SECONDARY TEAL OUTLINE -- hover = fill (owner q 2026-07-03: yes, hover exists) */ .spoki-btn--outline-teal:hover, .spoki-btn-secondary:hover, .spoki-btn-teal:hover { background: #19B0B6 !important; border-color: #19B0B6 !important; color: #fff !important; } /* ============================================================ * PCARD MEDIA PANEL (owner 2026-07-04: "white products don't look well") * White-bg product photos were hard white rectangles on flat mint. * Fix: warm-neutral framed panel + mix-blend multiply -- white photo * backgrounds melt into the panel; every product reads as shot on the * same surface. Applies to ALL .spoki-pcard (rails + category archives). * ============================================================ */ .spoki-pcard .spoki-pcard__media { background: #F7F5F1 !important; border: 1px solid #EFE7DA !important; border-radius: 14px !important; padding: 14px !important; overflow: hidden !important; } .spoki-pcard .spoki-pcard__media img { mix-blend-mode: multiply; border-radius: 8px; width: 100%; height: 100%; object-fit: contain; } /* Trust-strip blob ALTERNATION globalized (was body.spoki-ds-scoped only — the canon's recurring root bug): odd=teal blob, even=peach blob, everywhere. */ .spoki-after-filter .spoki-trust-strip__item:nth-child(odd) .spoki-trust-strip__icon { border-radius: 47% 53% 55% 45% / 52% 47% 53% 48% !important; background: radial-gradient(circle at 68% 72%, rgba(25,176,182,.13), transparent 60%), radial-gradient(circle at 34% 30%, rgba(25,176,182,.34), rgba(25,176,182,.17) 58%, transparent 100%) !important; } .spoki-after-filter .spoki-trust-strip__item:nth-child(even) .spoki-trust-strip__icon { border-radius: 55% 45% 48% 52% / 46% 54% 47% 53% !important; background: radial-gradient(circle at 68% 72%, rgba(255,168,112,.14), transparent 60%), radial-gradient(circle at 34% 30%, rgba(255,168,112,.34), rgba(255,168,112,.18) 58%, transparent 100%) !important; } /* ============================================================ * PREMIUM REFINEMENT v2 (owner 2026-07-04, Lovevery-calibre direction) * 1) Card media panel: warmer cream, FLAT (no hairline), fully rounded * -- Scandinavian calm. Overrides the earlier bordered version. * 2) Trust strip: FLAT SOLID pastel circles (no gradients), thin navy * icons, airy spacing -- the owner-preferred variant, premium-calm. * Overrides the earlier radial-gradient blob rules (later = wins). * ============================================================ */ .spoki-pcard .spoki-pcard__media { /* owner 2026-07-04 v4: NO borders -- card stands out via elevation instead */ background: #FFFFFF !important; border: none !important; border-radius: 14px !important; } .spoki-after-filter .spoki-trust-strip__txt strong { font: 700 15px/1.3 "Nunito", sans-serif !important; color: #2E3A67 !important; } .spoki-after-filter .spoki-trust-strip__txt span { font: 400 13px/1.4 "Nunito", sans-serif !important; color: #54656B !important; } @media (min-width: 768px) { .spoki-after-filter .spoki-trust-strip__inner { gap: 36px !important; } } /* ============================================================ * TRUST/USP ICON v5 (owner 2026-07-04): double-blob v4 REJECTED. * Use the APPROVED category-page style EVERYWHERE: 58px soft * radial-gradient pastel organic circles (teal odd / peach even), * 25px navy line icons. Source of style: spoki-after-filter.css * "Fix E". Applied globally: home strip, library live strip, USP. * ============================================================ */ .spoki-trust-strip__item .spoki-trust-strip__icon, .spoki-usp__item .spoki-usp__icon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 58px !important; height: 58px !important; flex: 0 0 auto !important; color: #2E3A67 !important; border: 0 !important; box-shadow: none !important; } .spoki-trust-strip__item .spoki-trust-strip__icon::before, .spoki-usp__item .spoki-usp__icon::before { content: none !important; } .spoki-trust-strip__item .spoki-trust-strip__icon svg, .spoki-usp__item .spoki-usp__icon svg { width: 25px !important; height: 25px !important; stroke-width: 1.7 !important; color: #2E3A67 !important; stroke: #2E3A67 !important; } .spoki-trust-strip__item:nth-child(odd) .spoki-trust-strip__icon, .spoki-usp__item:nth-child(odd) .spoki-usp__icon { border-radius: 47% 53% 55% 45% / 52% 47% 53% 48% !important; background: radial-gradient(circle at 68% 72%, rgba(25,176,182,.13), transparent 60%), radial-gradient(circle at 34% 30%, rgba(25,176,182,.34), rgba(25,176,182,.17) 58%, transparent 100%) !important; } .spoki-trust-strip__item:nth-child(even) .spoki-trust-strip__icon, .spoki-usp__item:nth-child(even) .spoki-usp__icon { border-radius: 55% 45% 48% 52% / 46% 54% 47% 53% !important; background: radial-gradient(circle at 68% 72%, rgba(255,168,112,.14), transparent 60%), radial-gradient(circle at 34% 30%, rgba(255,168,112,.34), rgba(255,168,112,.18) 58%, transparent 100%) !important; } /* USP number badge stays on top */ .spoki-usp__num { position: absolute !important; z-index: 3 !important; top: -6px !important; right: -6px !important; } /* ============================================================ * CARD ELEVATION v4 (owner 2026-07-04: no borders, cards should feel * lifted/premium). Best-practice layered ambient+key shadow with a * gentle hover lift -- definition comes from depth, not lines. * ============================================================ */ .spoki-pcard { border: none !important; box-shadow: 0 1px 3px rgba(46,58,103,.06), 0 8px 24px rgba(46,58,103,.10) !important; transition: box-shadow .25s ease, transform .25s ease !important; } .spoki-pcard:hover { transform: translateY(-3px) !important; box-shadow: 0 2px 5px rgba(46,58,103,.07), 0 16px 36px rgba(46,58,103,.15) !important; } @media (hover: none) { .spoki-pcard:hover { transform: none !important; } } /* ============================================================ * CARD VARIANT B DEMO (component library ONLY -- owner A/B choice * 2026-07-04). Wrap a rail in .spoki-cardvar-b to preview the * hairline alternative. NOT a site-wide variant: after the owner * picks, one variant becomes law and this demo scope is removed. * ============================================================ */ .spoki-cardvar-b .spoki-pcard { box-shadow: 0 4px 16px rgba(46,58,103,.08) !important; } .spoki-cardvar-b .spoki-pcard:hover { transform: none !important; } .spoki-cardvar-b .spoki-pcard .spoki-pcard__media { border: 1px solid #EFEAE2 !important; } /* ============================================================ * HERO v5 — self-play positioning + gift finder (approved 2026-07-05) * Replaces retired spoki-hero3 (3-variant slider, never approved). * Signature underline: .spoki-hl-underline — SHARED class, used by * BOTH the hero H1 and the finder H2. Governance rule: max ONE * hand-drawn underline per page, only on the single most emphatic * word in a headline, never on buttons/body copy/repeated grid * components (cards, chips, FAQ). Do not add a second one. * ============================================================ */ .spoki-hero5{position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) 0 clamp(96px,11vw,150px); background: 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%)} .spoki-hero5__wave{position:absolute;bottom:-1px;left:0;width:100%;height:clamp(70px,9vw,120px);display:block;z-index:3} .spoki-hero5__blob{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;animation:spokiHero5Drift 34s ease-in-out infinite alternate} .spoki-hero5__dot-deco{position:absolute;z-index:1;border-radius:50%;pointer-events:none} .spoki-hero5__spark{position:absolute;z-index:2;pointer-events:none} @keyframes spokiHero5Spin{to{transform:rotate(360deg)}} @keyframes spokiHero5Drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(26px,-20px) scale(1.05)}} @keyframes spokiHero5Twinkle{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){.spoki-hero5__spark,.spoki-hero5__orbit-a,.spoki-hero5__orbit-b,.spoki-hero5__blob{animation:none!important}} .spoki-hero5__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} .spoki-hl-underline{position:relative;display:inline-block;color:#00838A;white-space:nowrap} .spoki-hl-underline svg{position:absolute;left:1%;bottom:-.16em;width:98%;height:.22em} .spoki-hero5__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 clamp(20px,3vw,32px);display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(40px,5vw,70px);align-items:center} .spoki-hero5__inner>*{min-width:0} .spoki-hero5__left{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(15px,1.9vw,20px);max-width:560px} .spoki-hero5__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-hero5__sub{margin:0;font:600 clamp(15px,1.2vw,17.5px)/1.55 'Nunito',sans-serif;color:#6B7580;max-width:46ch} .spoki-hero5__ctarow{display:flex;flex-wrap:nowrap;gap:14px;align-items:center;margin-top:2px} .spoki-hero5__cta{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;cursor:pointer;box-shadow:0 10px 24px rgba(255,138,0,.24);transition:transform .15s,filter .15s} .spoki-hero5__cta:hover{filter:brightness(.95);transform:translateY(-1px)} @media(max-width:520px){.spoki-hero5__ctarow{flex-wrap:wrap}.spoki-hero5__cta{width:100%}} /* base rules superseded by the !important override block appended at end of file (legacy cascade has ~18 competing .spoki-hero5__trust blocks across old media queries) */ .spoki-hero5__media{position:relative;width:min(100%,470px);aspect-ratio:1/1;justify-self:center;margin:0 auto} .spoki-hero5__halo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,#fff 46%,rgba(255,255,255,0) 72%);z-index:0} .spoki-hero5__orbit-a{position:absolute;inset:-5%;border-radius:50%;border:2px dotted rgba(20,164,170,.58);z-index:1;animation:spokiHero5Spin 60s linear infinite} .spoki-hero5__orbit-b{position:absolute;inset:-1%;border-radius:50%;border:1.5px dotted rgba(255,138,0,.4);z-index:1;animation:spokiHero5Spin 90s linear infinite reverse} .spoki-hero5__ring{position:absolute;inset:2%;z-index:1;border-radius:50%;background:conic-gradient(from 210deg,#42C3BC,#BDE9E1 28%,#FFD9AE 54%,#FFBE86 72%,#42C3BC 100%);padding:8px;box-shadow:0 24px 54px rgba(46,58,103,.16)} .spoki-hero5__ring-white{position:absolute;inset:9px;border-radius:50%;background:#fff} .spoki-hero5__photo{position:absolute;inset:16px;border-radius:50%;overflow:hidden} .spoki-hero5__photo img{width:100%;height:100%;object-fit:cover;display:block} .spoki-hero5__chip{position:absolute;z-index:3;background:#fff;border:1px solid #F0E4D0;border-radius:15px;box-shadow:0 12px 26px rgba(46,58,103,.13);padding:9px 14px 9px 10px;display:inline-flex;align-items:center;gap:9px;font:800 12.5px/1.2 'Nunito',sans-serif;color:#2E3A67} .spoki-hero5__chip small{display:block;font:600 11px/1.2 'Nunito',sans-serif;color:#54656B;margin-top:2px} .spoki-hero5__chip .ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#E6F8F9;color:#00838A;flex:0 0 auto} .spoki-hero5__chip--a{top:6%;left:-6%} .spoki-hero5__chip--b{bottom:8%;right:-6%} .spoki-hero5__chip--b .ic{background:#FDEBDD;color:#B25E00} /* ===================== GIFT FINDER — below hero, fox presenting ===================== */ .spoki-finder-zone{position:relative;background:#fff;padding:clamp(40px,4.5vw,60px) clamp(16px,3vw,24px) clamp(48px,5vw,68px)} .spoki-finder-zone__head{max-width:1120px;margin:0 auto clamp(22px,3vw,30px);text-align:center} .spoki-finder-zone__head h2{margin:0;font:700 clamp(24px,2.3vw,32px)/1.3 'Comfortaa',cursive;color:#2E3A67;text-wrap:balance} .spoki-finder-zone__head p{margin:8px 0 0;font:800 13px/1.2 'Nunito',sans-serif;letter-spacing:.02em;color:#00838A} .spoki-finder-zone .spoki-finder{margin-top:86px} .spoki-finder{position:relative;max-width:1120px;margin:0 auto;background:#fff;border-radius:24px;box-shadow:0 24px 50px -18px rgba(25,176,182,.26),0 10px 24px rgba(46,58,103,.08);padding:22px 24px 22px 122px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .spoki-finder::before{content:'';position:absolute;inset:0;border-radius:24px;padding:2.5px;background:conic-gradient(from 210deg,#42C3BC,#BDE9E1 28%,#FFD9AE 54%,#FFBE86 72%,#42C3BC 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .spoki-finder__fox{position:absolute;left:14px;bottom:calc(100% - 22px);width:98px;height:auto;filter:drop-shadow(0 8px 14px rgba(46,58,103,.16))} .spoki-finder__field{position:relative;flex:1 1 122px;min-width:114px} .spoki-finder__field label{display:block;font:800 10px/1 'Nunito',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#9AA3B0;margin-bottom:4px} .spoki-finder__field select{width:100%;height:46px;appearance:none;-webkit-appearance:none;background:#FAF6F0 url('data:image/svg+xml;utf8,') no-repeat right 12px center;border:1.5px solid #E7DED3;border-radius:12px;padding:0 32px 0 13px;font:700 14px 'Nunito',sans-serif;color:#2E3A67;cursor:pointer} .spoki-finder__field select:focus{outline:none;border-color:#19B0B6;box-shadow:0 0 0 3px rgba(25,176,182,.14)} .spoki-finder__submit{flex:0 0 auto;align-self:flex-end;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#00838A;border:2px solid #19B0B6;border-radius:999px;font:800 14.5px/1 'Nunito',sans-serif;padding:13px 22px;height:46px;cursor:pointer;transition:background .15s} .spoki-finder__submit:hover{background:#E6F8F9} @media(max-width:900px){ .spoki-hero5__inner{grid-template-columns:1fr;gap:26px} .spoki-hero5__left{align-items:center;text-align:center;max-width:none} .spoki-hero5__h1,.spoki-hero5__sub{text-align:center} .spoki-hero5__ctarow,.spoki-hero5__trust{justify-content:center} .spoki-hero5__media{order:9;max-width:340px} .spoki-hero5__chip--a{left:-2%;top:2%} .spoki-hero5__chip--b{right:-2%;bottom:4%} .spoki-finder-zone .spoki-finder{margin-top:52px} .spoki-finder{flex-direction:column;align-items:stretch;padding:54px 18px 18px;gap:12px} .spoki-finder__fox{left:50%;transform:translateX(-50%);top:-34px;bottom:auto;width:66px} .spoki-finder__field{flex:0 0 auto} .spoki-finder__submit{align-self:stretch;justify-content:center} } .spoki-var-label{max-width:1200px;margin:0 auto;padding:22px clamp(20px,3vw,32px) 0;font:800 13px/1.4 'Nunito',sans-serif;color:#54656B} /* === spoki-hero5 / spoki-finder theme-override hardening (WoodMart button+select) === */ .spoki-hero5 .spoki-hero5__cta{background:#FF8A00!important;color:#fff!important;border:none!important;border-radius:999px!important;padding:16px 28px!important;text-transform:none!important;height:auto!important;line-height:1!important;font-weight:800!important;box-shadow:0 10px 24px rgba(255,138,0,.24)!important} .spoki-hero5 .spoki-hero5__cta:hover{background:#F07E00!important} .spoki-finder .spoki-finder__submit{background:#fff!important;color:#00838A!important;border:2px solid #19B0B6!important;border-radius:999px!important;padding:13px 22px!important;text-transform:none!important;height:46px!important;line-height:1!important;font-weight:800!important;box-shadow:none!important} .spoki-finder .spoki-finder__submit:hover{background:#E6F8F9!important} .spoki-finder .spoki-finder__field select{background-color:#FAF6F0!important;border:1.5px solid #E7DED3!important;border-radius:12px!important;height:46px!important;text-transform:none!important;box-shadow:none!important} .spoki-finder .spoki-finder__field select:focus{border-color:#19B0B6!important;box-shadow:0 0 0 3px rgba(25,176,182,.14)!important} /* === spoki-hero5 trust: one row on mobile (dot-separated, icons hidden) === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{flex-wrap:nowrap!important;justify-content:center;gap:0!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust span{gap:0!important;font-size:10px!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust span .ic{display:none!important} .spoki-hero5 .spoki-hero5__trust span:not(:last-child)::after{content:'\00B7';margin:0 6px;color:#C9B79B;font-weight:800} } /* === spoki-hero5 trust: premium pill band on mobile === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{flex-wrap:nowrap!important;justify-content:center;align-items:center;gap:0!important;white-space:nowrap;width:fit-content;max-width:100%;margin:6px auto 0;padding:9px 16px;background:#fff;border:1px solid #F0E4D0;border-radius:999px;box-shadow:0 6px 18px rgba(46,58,103,.07)} .spoki-hero5 .spoki-hero5__trust span{gap:0!important;font-size:10.5px!important;font-weight:700!important;color:#54656B!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust span .ic{display:none!important} .spoki-hero5 .spoki-hero5__trust span:not(:last-child)::after{content:'\00B7';margin:0 8px;color:#00838A;font-weight:900;font-size:13px} } /* === spoki-hero5 trust: tinted branded pill (mobile, final) === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{background:#F1FAF8!important;border:1px solid #CFE9E4!important;box-shadow:0 4px 14px rgba(25,176,182,.10)!important;padding:9px 15px!important} .spoki-hero5 .spoki-hero5__trust span{font-size:10.5px!important;font-weight:800!important;color:#2E3A67!important} .spoki-hero5 .spoki-hero5__trust span:not(:last-child)::after{content:'\00B7'!important;margin:0 8px!important;color:#00838A!important;font-weight:900!important;font-size:14px!important} } /* === spoki-hero5 CTA: mobile one-line, arrow hugs text (fix stranded arrow) === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__cta-row{width:100%} .spoki-hero5 .spoki-hero5__cta{width:100%!important;justify-content:center!important;align-items:center!important;flex-wrap:nowrap!important;white-space:nowrap!important;gap:9px!important;font-size:14.5px!important;padding:16px 18px!important;line-height:1.1!important} .spoki-hero5 .spoki-hero5__cta svg{flex:0 0 auto!important;width:16px!important;height:16px!important} } /* === spoki-hero5 trust: visible white elevated badge (mobile, final v2) === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{background:#fff!important;border:1.5px solid #CDE9E4!important;box-shadow:0 8px 20px rgba(46,58,103,.10)!important;padding:10px 16px!important;margin-top:10px!important} .spoki-hero5 .spoki-hero5__trust span{font-size:10.5px!important;font-weight:800!important;color:#2E3A67!important} .spoki-hero5 .spoki-hero5__trust span:not(:last-child)::after{content:'\00B7'!important;margin:0 9px!important;color:#00838A!important;font-weight:900!important;font-size:15px!important} } /* === spoki-hero5 trust: readable one-row badge w/ icons + short mobile labels (final v3) === */ .spoki-hero-trust-drop{display:inline!important;font-style:normal!important} @media(max-width:480px){ .spoki-hero5 .spoki-hero-trust-drop{display:none!important} .spoki-hero5 .spoki-hero5__trust{background:#fff!important;border:1.5px solid #CDE9E4!important;box-shadow:0 8px 20px rgba(46,58,103,.10)!important;padding:9px 14px!important;gap:13px!important;flex-wrap:nowrap!important;justify-content:center!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust span{font-size:11.5px!important;font-weight:800!important;color:#2E3A67!important;gap:5px!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust span .ic{display:inline-flex!important;width:16px!important;height:16px!important;flex:0 0 auto!important} .spoki-hero5 .spoki-hero5__trust span:not(:last-child)::after{content:none!important} } /* === spoki-hero5 trust: inline items so drop-span stays true inline (no flex blockify) === */ .spoki-hero5 .spoki-hero5__trust>span{display:inline!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust>span .ic{display:inline-flex!important;vertical-align:middle;position:relative;top:-1px} .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:inline!important;font-style:normal!important} @media(max-width:480px){.spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:none!important}} /* === spoki-hero5 trust: no pill, full-width text row with check icons (mobile final v4) === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{background:none!important;border:none!important;box-shadow:none!important;padding:0 2px!important;width:100%!important;max-width:100%!important;margin:14px 0 0!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:6px!important} .spoki-hero5 .spoki-hero5__trust>span{flex:0 0 auto;font-size:12px!important;font-weight:800!important;color:#2E3A67!important;white-space:nowrap} .spoki-hero5 .spoki-hero5__trust>span .ic{display:inline-flex!important;width:17px!important;height:17px!important} } /* === spoki-hero5 + finder: full-bleed edge-to-edge on mobile (break out of WoodMart 15px wrap) === */ @media(max-width:480px){ .spoki-hero5,.spoki-finder-zone{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important;overflow-x:clip} .spoki-hero5 .spoki-hero5__inner{padding-left:16px!important;padding-right:16px!important} .spoki-finder-zone{padding-left:14px!important;padding-right:14px!important} } /* === spoki-hero5 media: constrain circle on mobile so orbit rings + chips never clip === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__media{max-width:286px!important;margin-left:auto!important;margin-right:auto!important} } /* === spoki-hero5 media: tighter cap ≤400px so outer orbit (≈+24% span) never clips === */ @media(max-width:400px){ .spoki-hero5 .spoki-hero5__media{max-width:262px!important} } /* ============ HERO MOBILE RESET (owner brief 2026-07-05) ============ */ .spoki-hero5__cta-s{display:none} .spoki-hero5__mobopts{display:none} @media(max-width:480px){ /* 1. bigger emotional circle: hide technical orbits, keep halo+conic ring */ .spoki-hero5 .spoki-hero5__orbit-a,.spoki-hero5 .spoki-hero5__orbit-b{display:none!important} .spoki-hero5 .spoki-hero5__media{max-width:315px!important;margin-left:auto!important;margin-right:auto!important} /* 2. background calm: no dots/stars near text on mobile */ .spoki-hero5 .spoki-hero5__spark,.spoki-hero5 .spoki-hero5__dot-deco{display:none!important} /* 3. one floating chip only */ .spoki-hero5 .spoki-hero5__chip--b{display:none!important} /* 4. CTA: short label on mobile */ .spoki-hero5 .spoki-hero5__cta-l{display:none} .spoki-hero5 .spoki-hero5__cta-s{display:inline} /* 5. trust: calm, readable, allowed to wrap to 2 rows */ .spoki-hero5 .spoki-hero5__trust{flex-wrap:wrap!important;justify-content:center!important;gap:8px 16px!important;white-space:normal!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:12px!important} /* 6. mobile options block (library preview) */ .spoki-hero5__mobopts{display:flex;flex-direction:column;align-items:center;gap:10px;margin:24px auto 4px;padding:0 16px;position:relative;z-index:2} .spoki-hero5__mopt-label{font:700 10px/1 "Nunito",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9AA3B0} .spoki-hero5__agelink{font:800 15px/1 "Nunito",sans-serif;color:#00838A!important;text-decoration:none;padding:10px 6px} .spoki-hero5__teaser{background:#fff;border:1.5px solid #CDE9E4;border-radius:14px;box-shadow:0 6px 16px rgba(46,58,103,.08);padding:12px 18px;text-align:center;max-width:320px} .spoki-hero5__teaser span{display:block;font:700 12.5px/1.4 "Nunito",sans-serif;color:#54656B;margin-bottom:5px} .spoki-hero5__teaser a{font:800 14px/1 "Nunito",sans-serif;color:#00838A!important;text-decoration:none} } @media(max-width:400px){ .spoki-hero5 .spoki-hero5__media{max-width:300px!important} } /* === mobile: restore ONE dotted orbit (inner, no clipping); only far-outer stays hidden === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__orbit-b{display:block!important} } /* === MOBILE = DESKTOP PARITY (owner 2026-07-06): same info & elements, only resized === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__cta-l{display:inline!important} .spoki-hero5 .spoki-hero5__cta-s{display:none!important} .spoki-hero5 .spoki-hero-trust-drop{display:inline!important} .spoki-hero5 .spoki-hero5__chip--b{display:flex!important} .spoki-hero5 .spoki-hero5__spark,.spoki-hero5 .spoki-hero5__dot-deco{display:block!important} .spoki-hero5 .spoki-hero5__mobopts{display:none!important} } /* parity: full trust labels on mobile (match earlier selector specificity) */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:inline!important} } /* mobile: show the TEAL dotted orbit (visible one); faint orange stays desktop-only */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__orbit-a{display:block!important} .spoki-hero5 .spoki-hero5__orbit-b{display:none!important} } /* ============ MOBILE FINDER CARD POLISH (owner brief 2026-07-06) ============ */ @media(max-width:480px){ /* 1. safe margins: contained premium card, never edge-to-edge */ .spoki-finder-zone{padding-left:18px!important;padding-right:18px!important} .spoki-finder{max-width:calc(100% - 2px)!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;border-radius:24px!important} /* 2. fox: intentional guide badge above card, small controlled overlap */ .spoki-finder .spoki-finder__fox{width:64px!important;height:auto!important;left:50%!important;transform:translateX(-50%)!important;top:-52px!important;bottom:auto!important} .spoki-finder-zone .spoki-finder{margin-top:64px!important} .spoki-finder{padding:26px 16px 18px!important} /* 3. field rhythm */ .spoki-finder .spoki-finder__field select{height:48px!important} .spoki-finder .spoki-finder__submit{height:48px!important;justify-content:center!important} .spoki-finder{gap:13px!important} } @media(max-width:340px){ .spoki-finder-zone{padding-left:16px!important;padding-right:16px!important} } /* finder fox: correct slot for 2:3 PNG aspect (h=96 at w=64) -> 12px intentional overlap */ @media(max-width:480px){ .spoki-finder .spoki-finder__fox{top:-84px!important} .spoki-finder-zone .spoki-finder{margin-top:96px!important} } /* === hero circle balance V3 (owner 2026-07-06): chips outside photo + bigger circle === */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__chip--a{top:-4%!important;left:0!important} .spoki-hero5 .spoki-hero5__chip--b{bottom:-4%!important;right:0!important} .spoki-hero5 .spoki-hero5__media{max-width:316px!important} } @media(max-width:380px){ .spoki-hero5 .spoki-hero5__media{max-width:300px!important} } /* ============ C.5F MOBILE PRODUCT GRID READABILITY (central .spoki-pcard fix, visual only) ============ */ @media(max-width:480px){ /* 1. reclaim stolen width: wrapper padding 16->4 (WoodMart 15px wrap stays) */ .spoki-cat{padding-left:4px!important;padding-right:4px!important} /* 2. grid rhythm: tighter column gap */ .spoki-cat__productgrid{gap:16px 10px!important} /* 3. bigger image: media padding 14->8 */ .spoki-pcard .spoki-pcard__media{padding:8px!important} /* 4. title: up to 3 lines, no aggressive cut */ .spoki-pcard .spoki-pcard__title{-webkit-line-clamp:3!important;font-size:14px!important;line-height:1.3!important;max-height:none!important;min-height:2.6em} /* 5. CTA: readable 40px */ .spoki-pcard .spoki-pcard__cta{min-height:40px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} /* 6. sticky filter must not cover last CTA */ .spoki-cat__productzone{padding-bottom:84px!important} } /* ============ TRUST ROW ONE-LINE LAW (owner 2026-07-06, supersedes parity for trust) ============ */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;white-space:nowrap!important;gap:9px!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:12px!important;white-space:nowrap!important;gap:4px!important} .spoki-hero5 .spoki-hero5__trust>span .ic{display:inline-flex!important;width:15px!important;height:15px!important} .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:none!important} } @media(max-width:340px){ .spoki-hero5 .spoki-hero5__trust{gap:7px!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:11.5px!important} } /* C.5F: 320px price fallback - dual price may wrap, slightly smaller, never clipped */ @media(max-width:340px){ .spoki-pcard .spoki-pcard__price{font-size:13.5px!important;white-space:normal!important;line-height:1.3!important} } /* ============ C.5G HEADLINE ACCENT SYSTEM (law: max ONE accent per heading) ============ */ .spoki-eyebrow{display:block;font:800 13px/1.3 'Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#00838A;margin:0 0 8px} .spoki-hl{color:#00838A;font:inherit} .spoki-hl--bright{color:#00838A} .spoki-hl-underline{position:relative;display:inline-block;white-space:nowrap} .spoki-hl-underline::after{content:'';position:absolute;left:1%;right:1%;bottom:-.13em;height:.18em;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'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:.72;pointer-events:none} .spoki-hl-underline--peach::after{background-image: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='%23FFB27A' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")} @media(max-width:480px){.spoki-hl-underline::after{height:.12em;bottom:-.09em}} /* demo section on component library */ .spoki-has-demo{display:grid;gap:16px;max-width:760px;margin:18px auto 40px;padding:0 16px} .spoki-has-demo .spoki-has-item{background:#fff;border:1px solid #F0E4D0;border-radius:16px;padding:18px 20px} .spoki-has-demo .spoki-has-item small{display:block;font:700 11px/1.3 'Nunito',sans-serif;color:#9AA3B0;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px} .spoki-has-demo h3{margin:0;font:700 24px/1.3 'Comfortaa',cursive;color:#2E3A67} .spoki-has-demo .spoki-has-rules{font:600 13px/1.6 'Nunito',sans-serif;color:#54656B;background:#F1FAF8;border:1px solid #CDE9E4;border-radius:14px;padding:14px 18px} /* ============ TRUST ROW HARDENING (owner: no-clip guarantee 2026-07-06) ============ */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;white-space:nowrap!important;overflow:visible!important;gap:10px!important;max-width:calc(100vw - 32px)!important;margin-left:auto!important;margin-right:auto!important;padding:0!important;background:none!important;border:none!important;box-shadow:none!important} .spoki-hero5 .spoki-hero5__trust>span{flex:0 0 auto!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:12px!important;font-weight:800!important;color:#2E3A67!important;gap:4px!important} .spoki-hero5 .spoki-hero5__trust>span .ic{display:inline-flex!important;flex:0 0 auto!important;width:15px!important;height:15px!important} .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:none!important} } @media(max-width:360px){ .spoki-hero5 .spoki-hero5__trust{gap:8px!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:11.5px!important} .spoki-hero5 .spoki-hero5__trust>span .ic{width:14px!important;height:14px!important} } /* ============ TRUST ROW: FULL desktop labels on mobile, one row, no icons (owner 2026-07-06) ============ */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;white-space:nowrap!important;overflow:visible!important;gap:13px!important;max-width:calc(100vw - 20px)!important;margin-left:auto!important;margin-right:auto!important;padding:0!important;background:none!important;border:none!important;box-shadow:none!important} .spoki-hero5 .spoki-hero5__trust>span{flex:0 0 auto!important;white-space:nowrap!important;overflow:visible!important;font-size:12px!important;font-weight:800!important;color:#2E3A67!important;gap:0!important} .spoki-hero5 .spoki-hero5__trust>span .ic{display:none!important} .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:inline!important} } @media(max-width:384px){ .spoki-hero5 .spoki-hero5__trust{gap:9px!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:11px!important} } @media(max-width:336px){ /* full labels can't fit one readable row <336px -> short labels, one row */ .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:none!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:12px!important} .spoki-hero5 .spoki-hero5__trust{gap:14px!important} } /* ============ TRUST ROW: icons BACK + short mobile labels, one row (owner 2026-07-06, new wording) ============ */ @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:center!important;white-space:nowrap!important;overflow:visible!important;gap:10px!important;max-width:calc(100vw - 24px)!important;margin-left:auto!important;margin-right:auto!important;padding:0!important;background:none!important;border:none!important;box-shadow:none!important} .spoki-hero5 .spoki-hero5__trust>span{flex:0 0 auto!important;white-space:nowrap!important;overflow:visible!important;font-size:12px!important;font-weight:800!important;color:#2E3A67!important;gap:4px!important} .spoki-hero5 .spoki-hero5__trust>span .ic{display:inline-flex!important;flex:0 0 auto!important;width:15px!important;height:15px!important} .spoki-hero5 .spoki-hero5__trust>span .spoki-hero-trust-drop{display:none!important} } @media(max-width:360px){ .spoki-hero5 .spoki-hero5__trust{gap:8px!important} .spoki-hero5 .spoki-hero5__trust>span{font-size:11.5px!important} .spoki-hero5 .spoki-hero5__trust>span .ic{width:14px!important;height:14px!important} } /* ============ HOMEPAGE HERO FULL-BLEED (alignfull wrapper) + finder proportion (owner 2026-07-06) ============ */ .spoki-hero5-wrap{overflow-x:clip} .spoki-hero5-wrap .spoki-hero5,.spoki-hero5-wrap .spoki-finder-zone{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important} /* inner content stays contained & centered (homepage feel) */ .spoki-hero5-wrap .spoki-hero5__inner{max-width:1240px!important} .spoki-hero5-wrap .spoki-finder-zone__head{max-width:1080px} @media(min-width:901px){ .spoki-hero5-wrap .spoki-finder{max-width:1080px!important} } /* ============ HOMEPAGE HERO DESKTOP BALANCE — Variant B (owner 2026-07-06): circle 38px closer to copy ============ */ @media(min-width:901px){ .spoki-hero5-wrap .spoki-hero5__inner{gap:64px!important} .spoki-hero5-wrap .spoki-hero5__media{justify-self:start!important;margin-left:0!important;margin-right:auto!important} } /* ===== C.22 P0 contrast: play-guide label #19B0B6 (2.49:1) -> deep teal #00838A, size >=12px ===== */ .spoki-play-guide__label{ color:#00838A !important; font-size:.78rem !important; } /* ===== C.22 P0 hero cta-as-link: keep orange pill when CTA is an to the Gift Finder ===== */ a.spoki-hero5__cta,a.spoki-hero5__cta:link,a.spoki-hero5__cta:visited{background:#FF8A00 !important;color:#fff !important;text-decoration:none !important;} a.spoki-hero5__cta:hover{background:#E67E00 !important;color:#fff !important;} a.spoki-hero5__cta span{color:#fff !important;} /* C.22B ADVISOR SPINE 2a */ .spoki-aeo{padding:44px 0;background:#fff;} .spoki-aeo .spoki-inner,.spoki-doors .spoki-inner{max-width:1240px;margin:0 auto;padding:0 16px;} .spoki-aeo__h2{font-family:var(--spoki-font-head);color:#2E3A67;font-size:clamp(24px,3vw,34px);margin:0;} .spoki-aeo__ans{max-width:760px;margin:12px auto 0;color:#2E3A67;font-size:18px;line-height:1.6;} .spoki-doors{padding:44px 0;background:#FFF7EB;} .spoki-doors__eyebrow{font-family:var(--spoki-font-body);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#00838A;font-size:13px;margin:0;} .spoki-doors__h2{font-family:var(--spoki-font-head);color:#2E3A67;font-size:clamp(24px,3vw,34px);margin:6px 0 0;} .spoki-doors__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1080px;margin:22px auto 0;} .spoki-door{position:relative;border-radius:20px;padding:22px;box-shadow:0 8px 22px rgba(46,58,103,.08);} .spoki-door--gift{background:linear-gradient(170deg,#FFF7EB,#FFFDF9);} .spoki-door--reg{background:linear-gradient(170deg,#E6F8F9,#FFFDF9);} .spoki-door::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.8px;background:conic-gradient(from 210deg,#42C3BC,#BDE9E1,#FFD9AE,#FFBE86,#42C3BC);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;} .spoki-door__icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;} .spoki-door__icon svg{width:22px;height:22px;} .spoki-door__icon--peach{background:#FDF0E3;color:#E08A5E;} .spoki-door__icon--teal{background:#E6F8F9;color:#00838A;border:1px solid #BDE9E1;} .spoki-door__title{font-family:var(--spoki-font-head);font-weight:700;color:#2E3A67;font-size:1.15rem;margin:0 0 6px;} .spoki-door__text{color:#54656B;font-size:14px;line-height:1.55;margin:0 0 16px;} .spoki-door__go{display:inline-flex;align-items:center;gap:8px;font-family:var(--spoki-font-body);font-weight:800;font-size:14px;padding:11px 22px;border-radius:999px;text-decoration:none;} .spoki-door__go--orange{background:#FF8A00 !important;color:#fff !important;} .spoki-door__go--orange:hover{background:#E67E00 !important;color:#fff !important;} .spoki-door__go--teal{border:1.5px solid #19B0B6;color:#00838A !important;background:transparent !important;} .spoki-door__go--teal:hover{background:#19B0B6 !important;color:#fff !important;} @media(max-width:767px){.spoki-aeo{padding:32px 0;}.spoki-doors{padding:32px 0;}.spoki-doors__grid{grid-template-columns:1fr;gap:14px;}.spoki-aeo__ans{font-size:16px;}} /* ===== C.22B 2a REFINE: white cards, Comfortaa eyebrow, edge-align 1240, bottom CTA ===== */ .spoki-doors__eyebrow{font-family:var(--spoki-font-head)!important;font-weight:700!important;} .spoki-doors__grid{max-width:none;gap:20px;} .spoki-door{background:#fff!important;display:flex;flex-direction:column;} .spoki-door--gift,.spoki-door--reg{background:#fff!important;} .spoki-door__go{margin-top:auto;align-self:flex-start;} .spoki-door__icon{width:48px;height:48px;} .spoki-door__icon svg{width:24px;height:24px;} /* ===== C.22B 2a VARIANT A premium advisor panel + fox ===== */ .spoki-advisor{padding:48px 0;background:linear-gradient(180deg,#ffffff,#ECF9F7);} .spoki-advisor .spoki-inner{max-width:1240px;margin:0 auto;padding:0 16px;} .spoki-adv-wrap{background:conic-gradient(from 210deg,#42C3BC,#BDE9E1,#FFD9AE,#FFBE86,#42C3BC);border-radius:26px;padding:2px;box-shadow:0 2px 8px rgba(46,58,103,.06),0 26px 50px rgba(46,58,103,.13);} .spoki-adv-panel{position:relative;background:radial-gradient(120% 120% at 0% 0%,#F1FBF9 0%,#ffffff 42%);border-radius:24px;padding:30px;overflow:hidden;} .spoki-adv-deco{position:absolute;top:-46px;right:-30px;width:190px;height:190px;border-radius:50%;border:2px dashed rgba(25,176,182,.16);} .spoki-adv-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:center;} .spoki-adv-foxwrap{position:relative;display:inline-block;margin-bottom:8px;} .spoki-adv-foxwrap:before{content:"";position:absolute;left:-8px;bottom:4px;width:100px;height:100px;border-radius:50%;background:rgba(255,168,99,.14);z-index:0;} .spoki-adv-foxwrap:after{content:"";position:absolute;left:-14px;bottom:-2px;width:114px;height:114px;border-radius:50%;border:2px dashed rgba(25,176,182,.4);z-index:0;} .spoki-adv-foximg{position:relative;z-index:1;height:112px;width:auto;display:block;} .spoki-adv-eyebrow{font-family:var(--spoki-font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00838A;font-size:13px;} .spoki-adv-h2{font-family:var(--spoki-font-head);font-weight:700;color:#2E3A67;font-size:clamp(22px,2.4vw,26px);margin:8px 0 12px;line-height:1.28;} .spoki-adv-sub{font-size:14px;color:#54656B;line-height:1.65;margin:0;} .spoki-adv-trust{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#00838A;font-size:12px;font-weight:700;background:#E6F8F9;padding:6px 12px;border-radius:999px;} .spoki-adv-right{display:flex;flex-direction:column;gap:14px;} .spoki-adv-card{display:flex;gap:14px;align-items:flex-start;border-radius:16px;padding:18px;} .spoki-adv-card--gift{background:linear-gradient(165deg,#FFF6EE,#FFFDFB);border:1px solid #F5DCC7;box-shadow:0 8px 20px rgba(216,112,58,.08);} .spoki-adv-card--reg{background:linear-gradient(165deg,#EAF9F9,#FCFEFE);border:1px solid #C7E9E9;box-shadow:0 8px 20px rgba(0,131,138,.07);} .spoki-adv-ico{flex:none;width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;} .spoki-adv-ico svg{width:23px;height:23px;} .spoki-adv-ico--peach{background:#FDE3CF;color:#D8703A;box-shadow:0 4px 10px rgba(216,112,58,.18);} .spoki-adv-ico--teal{background:#D3F0F0;color:#00838A;box-shadow:0 4px 10px rgba(0,131,138,.15);} .spoki-adv-ctitle{font-family:var(--spoki-font-head);font-weight:700;font-size:15.5px;color:#2E3A67;} .spoki-adv-ctext{font-size:12.5px;color:#54656B;line-height:1.5;margin:4px 0 12px;} .spoki-adv-go{display:inline-flex;align-items:center;gap:7px;font-family:var(--spoki-font-body);font-weight:800;font-size:13px;padding:10px 20px;border-radius:999px;text-decoration:none;} .spoki-adv-go--orange{background:#FF8A00!important;color:#fff!important;box-shadow:0 6px 14px rgba(255,138,0,.28);} .spoki-adv-go--orange:hover{background:#E67E00!important;color:#fff!important;} .spoki-adv-go--teal{background:#fff!important;border:1.5px solid #19B0B6;color:#00838A!important;} .spoki-adv-go--teal:hover{background:#19B0B6!important;color:#fff!important;} @media(max-width:860px){.spoki-adv-grid{grid-template-columns:1fr;gap:20px;}.spoki-adv-panel{padding:22px;}} @media(max-width:767px){.spoki-advisor{padding:34px 0;}} /* ===== C.22B advisor bottom wave (match hero language, not flat) ===== */ .spoki-advisor{position:relative;padding-bottom:108px;} .spoki-advisor::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:76px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2076%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0%2046%20C%20260%2078%20520%2010%20760%2036%20C%201000%2058%201220%2012%201440%2040%20L1440%2076%20L0%2076%20Z%27%20fill=%27%23ffffff%27/%3E%3C/svg%3E") no-repeat bottom center;background-size:100% 100%;pointer-events:none;z-index:1;} @media(max-width:767px){.spoki-advisor{padding-bottom:74px;} .spoki-advisor::after{height:46px;}} /* ===== C.22B 2b METHOD panel ===== */ .spoki-method{position:relative;padding:48px 0 108px;background:linear-gradient(180deg,#ffffff,#ECF9F7);} .spoki-method .spoki-inner{max-width:1240px;margin:0 auto;padding:0 16px;} .spoki-method::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:76px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2076%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0%2046%20C%20260%2078%20520%2010%20760%2036%20C%201000%2058%201220%2012%201440%2040%20L1440%2076%20L0%2076%20Z%27%20fill=%27%23ffffff%27/%3E%3C/svg%3E") no-repeat bottom center;background-size:100% 100%;pointer-events:none;z-index:1;} .spoki-mtd-wrap{background:conic-gradient(from 210deg,#42C3BC,#BDE9E1,#FFD9AE,#FFBE86,#42C3BC);border-radius:26px;padding:2px;box-shadow:0 2px 8px rgba(46,58,103,.06),0 26px 50px rgba(46,58,103,.13);} .spoki-mtd-panel{position:relative;background:radial-gradient(120% 120% at 100% 0%,#F1FBF9 0%,#ffffff 42%);border-radius:24px;padding:30px;overflow:hidden;} .spoki-mtd-deco{position:absolute;top:-46px;left:-30px;width:190px;height:190px;border-radius:50%;border:2px dashed rgba(25,176,182,.14);} .spoki-mtd-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:30px;align-items:stretch;} .spoki-mtd-eyebrow{font-family:var(--spoki-font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00838A;font-size:13px;} .spoki-mtd-h2{font-family:var(--spoki-font-head);font-weight:700;color:#2E3A67;font-size:clamp(22px,2.4vw,26px);margin:8px 0 10px;line-height:1.28;} .spoki-mtd-sub{font-size:14px;color:#54656B;line-height:1.6;margin:0 0 20px;max-width:52ch;} .spoki-mtd-steps{padding-left:22px;border-left:2px solid #CDE9E6;margin-left:15px;} .spoki-mtd-step{position:relative;padding-bottom:16px;} .spoki-mtd-step:last-child{padding-bottom:0;} .spoki-mtd-step .n{position:absolute;left:-37px;top:-2px;width:30px;height:30px;border-radius:50%;background:#00838A;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,131,138,.25);font-family:var(--spoki-font-body);} .spoki-mtd-step--last .n{background:#FF8A00;box-shadow:0 3px 8px rgba(255,138,0,.28);} .spoki-mtd-step .t{font-family:var(--spoki-font-head);font-weight:700;font-size:15px;color:#2E3A67;} .spoki-mtd-step .d{font-size:12.5px;color:#54656B;line-height:1.5;} .spoki-mtd-right{position:relative;min-height:100%;} .spoki-mtd-photo{height:100%;min-height:360px;border-radius:18px;overflow:hidden;box-shadow:0 14px 30px rgba(46,58,103,.16);} .spoki-mtd-photo img,.spoki-mtd-img{width:100%;height:100%;object-fit:cover;display:block;} .spoki-mtd-payoff{position:absolute;left:14px;bottom:16px;max-width:236px;background:conic-gradient(from 210deg,#42C3BC,#BDE9E1,#FFD9AE,#FFBE86,#42C3BC);border-radius:16px;padding:1.8px;box-shadow:0 12px 26px rgba(46,58,103,.20);} .spoki-mtd-payoff-in{background:#fff;border-radius:14px;padding:12px 14px;} .spoki-mtd-payoff .chip{font-size:11px;color:#00838A;background:#E6F8F9;border-radius:999px;padding:3px 9px;display:inline-block;} .spoki-mtd-payoff .h{font-family:var(--spoki-font-head);font-weight:700;font-size:13px;color:#2E3A67;margin-top:6px;} .spoki-mtd-payoff .s{font-size:11px;color:#54656B;line-height:1.4;} @media(max-width:860px){.spoki-mtd-grid{grid-template-columns:1fr;gap:22px;}.spoki-mtd-left,.spoki-mtd-right{min-width:0;}.spoki-mtd-panel{padding:22px;}.spoki-mtd-photo{min-height:0;aspect-ratio:4/3;}} @media(max-width:767px){.spoki-method{padding:34px 0 70px;}.spoki-method::after{height:46px;}} /* C.22B 2b method left-align fix */ .spoki-method .spoki-mtd-left{text-align:left;} /* ===== C.22B 2b differentiate method from advisor (owner: no repeated conic; dashed signature; mint different) ===== */ .spoki-mtd-wrap{background:transparent !important;padding:0 !important;box-shadow:none !important;} .spoki-mtd-panel{background:#ffffff !important;border:1px solid #E4EFEC;box-shadow:0 2px 6px rgba(46,58,103,.05),0 18px 40px rgba(46,58,103,.10);} .spoki-mtd-steps{border-left:2px dashed #9FDAD6;} .spoki-mtd-deco{border:2px dashed rgba(255,168,99,.32);width:150px;height:150px;top:-30px;left:-26px;right:auto;} .spoki-mtd-payoff{background:#ffffff !important;padding:0 !important;border:1px dashed #8FD6D3;border-radius:14px;box-shadow:0 12px 26px rgba(46,58,103,.16) !important;} .spoki-mtd-payoff-in{border-radius:13px;} /* ===== C.22B typography to design-system scale + method bg white (owner) ===== */ .spoki-adv-h2,.spoki-mtd-h2{color:#2E3A67 !important;font-size:clamp(28px,3.5vw,36px) !important;line-height:1.24 !important;} .spoki-adv-sub,.spoki-mtd-sub{font-size:16px !important;line-height:1.65 !important;font-family:var(--spoki-font-body) !important;color:#54656B !important;} .spoki-adv-ctitle{font-size:16.5px !important;} .spoki-adv-ctext{font-size:13.5px !important;line-height:1.5 !important;font-family:var(--spoki-font-body) !important;} .spoki-mtd-step .t{font-size:17px !important;} .spoki-mtd-step .d{font-size:14px !important;line-height:1.55 !important;font-family:var(--spoki-font-body) !important;} .spoki-mtd-payoff .chip{font-size:12px !important;} .spoki-mtd-payoff .h{font-size:14.5px !important;color:#2E3A67 !important;} .spoki-mtd-payoff .s{font-size:12px !important;font-family:var(--spoki-font-body) !important;} .spoki-adv-trust{font-size:12.5px !important;} .spoki-method{background:#ffffff !important;padding:48px 0 !important;} .spoki-method::after{display:none !important;} /* ===== C.22B 2c OUR STORY (warm, no conic) ===== */ .spoki-story{position:relative;padding:96px 0;background:linear-gradient(160deg,#FFF7EB,#FDF0E3);} .spoki-story .spoki-inner{max-width:1240px;margin:0 auto;padding:0 16px;} .spoki-story::before{content:"";position:absolute;left:0;right:0;top:-1px;height:66px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2066%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0%200%20L1440%200%20L1440%2032%20C%201200%2064%201000%2012%20760%2038%20C%20520%2062%20260%204%200%2030%20Z%27%20fill=%27%23ffffff%27/%3E%3C/svg%3E") no-repeat top center;background-size:100% 100%;pointer-events:none;z-index:1;} .spoki-story::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:76px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%2076%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0%2046%20C%20260%2078%20520%2010%20760%2036%20C%201000%2058%201220%2012%201440%2040%20L1440%2076%20L0%2076%20Z%27%20fill=%27%23ffffff%27/%3E%3C/svg%3E") no-repeat bottom center;background-size:100% 100%;pointer-events:none;z-index:1;} .spoki-story-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;} .spoki-story-media{border-radius:20px;overflow:hidden;box-shadow:0 16px 40px rgba(46,58,103,.16);} .spoki-story-media img,.spoki-story-img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;} .spoki-story-eyebrow{font-family:var(--spoki-font-head);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00838A;font-size:13px;} .spoki-story-lead{font-family:var(--spoki-font-head) !important;font-weight:700 !important;color:#2E3A67 !important;font-size:clamp(28px,3.6vw,38px) !important;line-height:1.25;margin:10px 0 16px;} .spoki-story-body{font-size:18px !important;color:#54656B !important;line-height:1.7;margin:0;font-family:var(--spoki-font-body) !important;} .spoki-story-body .hl{color:#00838A !important;font-weight:700;} @media(max-width:860px){.spoki-story-grid{grid-template-columns:1fr;gap:24px;}.spoki-story{padding:64px 0;}.spoki-story-media img,.spoki-story-img{aspect-ratio:16/10;}} @media(max-width:767px){.spoki-story::before{height:44px;}.spoki-story::after{height:46px;}} /* C.22B 2c story CTA (teal outline -> /za-spoki/) */ .spoki-story-actions{margin-top:24px;} .spoki-story-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--spoki-font-body);font-weight:800;font-size:14px;padding:12px 26px;border-radius:999px;text-decoration:none;background:#ffffff;border:1.5px solid #19B0B6;color:#00838A !important;box-shadow:0 6px 16px rgba(0,131,138,.10);} .spoki-story-cta:hover{background:#19B0B6;color:#ffffff !important;} /* C.22 LOWER WAVE (L3 trust / L4 eduline / L8 giftcta / proof star-hide) 20260709 */ .spoki-trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin:24px auto 0;max-width:920px;font-family:var(--spoki-font-body);}.spoki-trustrow>span{position:relative;font-size:14px;line-height:1.3;color:#54656B;font-weight:600;padding-left:20px;}.spoki-trustrow>span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#19B0B6;}.spoki-eduline{background:#FFF7EB;}.spoki-eduline .spoki-inner{padding:36px 20px;}.spoki-eduline__text{max-width:760px;margin:0 auto;font-family:var(--spoki-font-body);font-size:19px;line-height:1.6;color:#2E3A67;font-weight:600;}.spoki-giftcta{background:#E6F8F9;}.spoki-giftcta .spoki-inner{padding:18px 20px;}.spoki-giftcta__line{text-align:center;margin:0;font-family:var(--spoki-font-body);font-size:16px;line-height:1.5;color:#54656B;}.spoki-giftcta__line a{color:#00838A;font-weight:800;text-decoration:none;white-space:nowrap;}.spoki-giftcta__line a:hover{text-decoration:underline;}.spoki-products2 .star-rating,.spoki-products2 .wd-product-rating,.spoki-products2 .review-count,.spoki-school-products .star-rating,.spoki-school-products .wd-product-rating,.spoki-school-products .review-count{display:none !important;}@media(max-width:600px){.spoki-eduline__text{font-size:17px;}.spoki-eduline .spoki-inner{padding:28px 18px;}.spoki-trustrow{gap:8px 18px;}.spoki-trustrow>span{font-size:13px;}} /* C.22 FAQ ALIGNMENT 20260709: reuse established .spoki-faq-* sitewide component (style.css + spoki-belowgrid.css). Only wrapper padding here. */ .spoki-faq-wrap{background:#ffffff;}.spoki-faq-wrap .spoki-faq-section{padding:56px 20px;}@media(max-width:600px){.spoki-faq-wrap .spoki-faq-section{padding:40px 16px;}} /* ============ HERO TRUST BAR — unified card override, wins over legacy rules (2026-07-09) ============ */ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:0!important;margin-top:6px!important;background:#fff!important;border:1px solid #F0E4D0!important;border-radius:14px!important;box-shadow:0 4px 14px rgba(46,58,103,.06)!important;overflow:hidden!important;width:fit-content!important;max-width:100%!important} .spoki-hero5 .spoki-hero5__trust>span{display:inline-flex!important;align-items:center!important;font:600 13px/1.2 'Nunito',sans-serif!important;color:#54656B!important;padding:10px 16px!important;white-space:nowrap!important;background:none!important;border:none!important;flex:0 0 auto!important} .spoki-hero5 .spoki-hero5__trust>span+span{border-left:1px solid #F0E4D0!important} .spoki-hero5 .spoki-hero5__trust>span strong{font:800 14px/1 'Nunito',sans-serif!important;color:#00838A!important;margin-right:4px!important} .spoki-hero5 .spoki-hero5__trust .spoki-nowrap{display:inline!important;background:none!important;border:none!important;padding:0!important;margin:0!important;font:inherit!important;color:inherit!important} @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust>span{font-size:11.5px!important;padding:8px 12px!important} } @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{flex-direction:column!important;width:100%!important} .spoki-hero5 .spoki-hero5__trust>span{width:100%!important;justify-content:center!important;padding:8px 14px!important} .spoki-hero5 .spoki-hero5__trust>span+span{border-left:none!important;border-top:1px solid #F0E4D0!important} } /* ============ HERO TRUST BADGES — icon+stat pairs, v3 final (2026-07-09) ============ */ .spoki-hero5 .spoki-hero5__trust{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:16px 24px!important;align-items:center!important;justify-content:flex-start!important;margin-top:10px!important;background:none!important;border:none!important;box-shadow:none!important;width:auto!important;max-width:100%!important;padding:0!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__tstat{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;background:none!important;border:none!important;padding:0!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;min-width:36px!important;border-radius:50%!important;box-shadow:0 6px 14px rgba(46,58,103,.18)!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon--a{background:linear-gradient(135deg,#9AD9D0,#42C3BC)!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon--b{background:linear-gradient(135deg,#FFC38A,#F6BE8A)!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon--c{background:linear-gradient(135deg,#D4CFF2,#B7B0E6)!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon{box-shadow:0 4px 10px rgba(46,58,103,.12)!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__tstat>span{font:600 13.5px/1.25 'Nunito',sans-serif!important;color:#54656B!important;white-space:nowrap!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__tstat strong{font-weight:800!important;color:#2E3A67!important} @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust{flex-wrap:nowrap!important;gap:6px!important;justify-content:flex-start!important;width:auto!important;max-width:100%!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__tstat{gap:5px!important;flex:0 0 auto!important;width:auto!important;max-width:none!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon{width:24px!important;height:24px!important;min-width:24px!important;flex:0 0 auto!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__ticon svg{width:12px!important;height:12px!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero5__tstat>span{font-size:10.5px!important;white-space:nowrap!important;width:auto!important;flex:0 0 auto!important} .spoki-hero5 .spoki-hero5__trust .spoki-hero-trust-drop{display:none!important} } /* final tie-break: neutralize legacy .spoki-hero5__trust>span width/flex rules from older breakpoints bleeding onto new .tstat children */ .spoki-hero5 .spoki-hero5__trust>.spoki-hero5__tstat{flex:0 0 auto!important;width:auto!important;max-width:none!important;flex-basis:auto!important} @media(max-width:480px){ .spoki-hero5 .spoki-hero5__trust>.spoki-hero5__tstat{flex:0 0 auto!important;width:auto!important;max-width:none!important;flex-basis:auto!important} } /* C.22 FAQ FONT FIX 20260709: homepage lacks body.spoki-ds, so the pilot Comfortaa override never matches; scope-match it here without touching the shared/global rules. */ .spoki-faq-wrap .spoki-faq-question{font-family:'Comfortaa',sans-serif!important;font-size:17px!important;font-weight:700!important;color:#2E3A67!important;} /* === SpOki hero CTA underline fix 2026-07-10: kill teal hover-underline leaking from [class*=__cta] a:hover === */ .spoki-hero5 a.spoki-hero5__cta:hover,.spoki-hero5 a.spoki-hero5__cta:focus,.spoki-hero5 a.spoki-hero5__cta:active{text-decoration:none!important} /* SpOki Product Card Direct Add v1 (2026-07-16): suppress WooCommerce's client-appended inline "Виж количката" link under the card add button (avoids layout shift + duplicates the SpOki toast which already offers it). */ .spoki-pcard .added_to_cart{display:none!important;} /* Loading state (native WooCommerce .loading class, no new JS): visual feedback + blocks accidental real double-tap while the add request is in flight. */ .spoki-pcard__cta.loading{pointer-events:none;opacity:.65;} /* ===== 2026-07-19 owner report: Method payoff card grows unbounded on mobile (no top/max-height), can cover most/all of the small mobile photo when text wraps to more lines. Cap it. ===== */ .spoki-mtd-payoff .h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .spoki-mtd-payoff .s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:600px){ .spoki-method .spoki-mtd-panel :is(figure,.spoki-mtd-photo){position:relative} .spoki-mtd-payoff{max-height:96px!important;overflow:hidden!important} .spoki-mtd-payoff .chip{margin-bottom:2px} } /* ===== SKU-COLLECTION-FULL-TITLE-20260810: inside the SKU collection block the product name is never truncated. The base card clamps to 2 lines and spoki-component-fixes raises it to 3, which still cuts names like "Комплект за пътуване Първи открития, 3 части" at 4 columns. min-height keeps short-name cards at today's height; .spoki-pcard__foot already carries margin-top:auto, so the price and the button stay pinned to the bottom on every card. SCOPED to .spoki-bts-coll on purpose: the rest of the site is untouched. ROLLBACK: delete this block, or restore spoki-component-fixes.css.bak-fulltitle-20260810 ===== */ .spoki-bts-coll .spoki-pcard .spoki-pcard__title{display:block!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;overflow:visible!important;text-overflow:clip!important;min-height:3.9em;overflow-wrap:break-word} .spoki-bts-coll .spoki-pcard .spoki-pcard__foot{margin-top:auto}