/* SpOki Post-Filter Conversion Block — .spoki-after-filter
   Standardized after-grid block: helper cards + trust strip [+ related/guide/faq later].
   Reuses .spoki-helper-card* tokens from spoki-templates.css.
   Loads AFTER spoki-templates.css so the orange CTA + primary highlight win.
   Orange CTA = brand token --spoki-orange (#FF8A00), matching site-wide buttons. */

/* wrapper: centered, content-width, 26px mobile / 40px desktop top gap */
.spoki-after-filter{max-width:var(--spoki-content-w,73.75rem);margin:26px auto 0;padding:0 1rem;box-sizing:border-box}
@media(min-width:992px){.spoki-after-filter{margin-top:40px;padding:0}}

/* vertical rhythm between stacked sub-blocks = 26 mobile / 40 desktop */
.spoki-after-filter>*+*{margin-top:26px}
@media(min-width:992px){.spoki-after-filter>*+*{margin-top:40px}}

/* helper-cards inside the block never overflow the wrapper padding.
   Force block + full-width grid: the theme's constrained layout otherwise
   sets .spoki-helper-cards to display:grid and collapses the inner 3-col grid. */
.spoki-after-filter .spoki-helper-cards{display:block;width:100%;padding:0}
.spoki-after-filter .spoki-helper-cards__grid{display:grid;width:100%;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.spoki-after-filter .spoki-helper-cards__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}

/* TEAL CTA (discovery/helper) — unified 2026-06-30; orange reserved for commercial CTAs */
body .spoki-after-filter a.spoki-helper-card__cta{
  background:#fff !important;color:#00838A !important;border:1.6px solid #19B0B6 !important;border-radius:999px !important;box-shadow:none !important}
body .spoki-after-filter a.spoki-helper-card__cta:hover{
  background:#19B0B6 !important;color:#fff !important}
body .spoki-after-filter .spoki-helper-card.is-primary a.spoki-helper-card__cta{
  background:#19B0B6 !important;color:#fff !important;border-color:#19B0B6 !important}
body .spoki-after-filter .spoki-helper-card.is-primary a.spoki-helper-card__cta:hover{
  background:#fff !important;color:#00838A !important}

/* PRIMARY (first) card — soft pale-teal highlight for the primary decision path */
body .spoki-after-filter .spoki-helper-cards .spoki-helper-card.is-primary{background:linear-gradient(180deg,#E1F5EE 0%,#F1FAF8 100%);border:1px solid #BFE6E2 !important}

/* trust strip centered + flush inside the block */
.spoki-after-filter .spoki-trust-strip{margin-left:auto;margin-right:auto}

/* mobile safety: 360/390 — no horizontal overflow */
@media(max-width:991px){
  .spoki-after-filter .spoki-helper-cards__grid{grid-template-columns:1fr}
}

/* design-system text tokens — restore teal eyebrow + muted body (theme .entry-content p overrides a single class) */
body .spoki-after-filter .spoki-helper-card__eyebrow{color:var(--spoki-teal-deep,#00838A)}
body .spoki-after-filter .spoki-helper-card__title{color:var(--spoki-color-heading,#2E3A67)}
body .spoki-after-filter .spoki-helper-card__text{color:var(--spoki-muted,#54656B)}

/* ===== Conversion-block polish (2026-06-25): heading + spacing rhythm + mobile trust ===== */
.spoki-after-filter__head{max-width:46rem;margin:0 auto;padding:0 1rem;text-align:center}
@media(min-width:992px){.spoki-after-filter__head{padding:0}}
.spoki-after-filter__eyebrow{color:var(--spoki-teal-deep,#00838A);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0 0 .35rem}
.spoki-after-filter__title{font-family:var(--spoki-font-heading,"Comfortaa","Nunito",sans-serif);color:var(--spoki-color-heading,#2E3A67);font-weight:700;font-size:clamp(1.2rem,3.2vw,1.55rem);line-height:1.3;margin:0}
.spoki-after-filter{margin-top:32px}
@media(min-width:992px){.spoki-after-filter{margin-top:48px}}
.spoki-after-filter>*+*{margin-top:28px}
@media(min-width:992px){.spoki-after-filter>*+*{margin-top:36px}}
.spoki-after-filter .spoki-after-filter__head + .spoki-helper-cards{margin-top:16px}
@media(min-width:992px){.spoki-after-filter .spoki-after-filter__head + .spoki-helper-cards{margin-top:20px}}
.spoki-after-filter .spoki-helper-cards__grid{gap:16px}
@media(min-width:768px){.spoki-after-filter .spoki-helper-cards__grid{gap:20px}}
@media(max-width:600px){
  body .spoki-after-filter .spoki-trust-strip__inner{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px 12px !important;overflow-x:visible !important;flex-wrap:wrap !important;scroll-snap-type:none !important;padding-left:0 !important;padding-right:0 !important}
  body .spoki-after-filter .spoki-trust-strip__item{min-width:0 !important;flex:0 1 auto !important;justify-content:flex-start !important;scroll-snap-align:none !important}
}

/* Center .spoki-section discovery headings on AGE pages to match centered after-filter heading (owner QA 2026-06-25) */
body.spoki-page-type-age .spoki-section__eyebrow,
body.spoki-page-type-age .spoki-section__title,
body.spoki-page-type-age .spoki-section__subtitle{text-align:center}
body.spoki-page-type-age .spoki-section__eyebrow{color:var(--spoki-teal-deep,#00838A)}

/* robust space above the conversion block (margin was being zeroed by theme/layout) */
body .spoki-after-filter{margin-top:40px !important}
@media(min-width:992px){body .spoki-after-filter{margin-top:56px !important}}
/* and space above the age/baby legacy heading wrapper */
body.spoki-page-type-age .spoki-age-block:has(.spoki-section__title){margin-top:40px}
@media(min-width:992px){body.spoki-page-type-age .spoki-age-block:has(.spoki-section__title){margin-top:48px}}

/* Fix E 2026-06-30: filled organic trust-strip icons GLOBAL (un-scoped from body.spoki-ds) */
.spoki-after-filter .spoki-trust-strip__icon{width:58px;height:58px;color:#2E3A67;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.spoki-after-filter .spoki-trust-strip__icon svg{width:25px;height:25px;stroke-width:1.7}
.spoki-after-filter .spoki-trust-strip__item:nth-child(odd) .spoki-trust-strip__icon{border-radius:47% 53% 55% 45% / 52% 47% 53% 48%;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%)}
.spoki-after-filter .spoki-trust-strip__item:nth-child(even) .spoki-trust-strip__icon{border-radius:55% 45% 48% 52% / 46% 54% 47% 53%;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%)}

/* Fix G 2026-07-01: helper section is a grid child of the category/brand pilot shopframe (2-col grid filter+grid) — make it span full width like on hubs, not the narrow product-zone cell */
.spoki-cat__shopframe > .spoki-after-filter{grid-column:1 / -1 !important;width:100% !important;margin-top:10px !important}

/* Fix H 2026-07-01: globalize helper-card component LAYOUT so non-DS pages (hero/selection etc.) get the same 16:10 image + spacing as DS pages (was only in body.spoki-ds pilot-system.css — images rendered natural/square + glued to text). */
.spoki-after-filter .spoki-helper-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:18px;overflow:hidden;background:#fff;border:1px solid #ECE4D8;border-radius:18px}
.spoki-after-filter .spoki-helper-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin:0 0 14px;display:block}
.spoki-after-filter .spoki-helper-card__eyebrow{margin:0 0 5px}
.spoki-after-filter .spoki-helper-card__title{font-family:"Comfortaa",sans-serif;font-size:18px;font-weight:700;margin:6px 0 8px}
.spoki-after-filter .spoki-helper-card__text{font-family:"Nunito",sans-serif;font-size:15px;line-height:1.55}

/* P0 FIX 2026-07-11 (audit doc 32) - mobile grid order.
   The category helper/trust block uses .spoki-after-filter--cat, but the mobile
   order rules in spoki-category.css only set order on .spoki-cat__productzone (1),
   .spoki-cat__facetrail (2) and .spoki-cat__helptrail (3). With no order set,
   .spoki-after-filter--cat defaulted to order:0 and rendered ABOVE the product
   grid on mobile. Give it a higher order so products appear first.
   Rollback: delete this block (backup .bak-p0audit32-20260711-141104). */
/* P0 FIX EXTENDED 2026-07-22 - same bug, brand pages.
   spoki-brand-pilot.php renders the identical .spoki-cat__shopframe grid and calls
   spoki_after_filter(['family'=>'brand',...]), but the 2026-07-11 fix only targeted
   .spoki-after-filter--cat. On brand archives (/brand/<slug>/) the helper-cards +
   trust-strip block (.spoki-after-filter--brand) still defaulted to order:0 and
   rendered ABOVE the product grid on mobile (<=48rem) - the exact "products moved
   below icons, not below the chips" report. Dropped the --cat/--brand modifier
   requirement so this covers every current and future spoki_after_filter family
   (brand, cat, gift, age, skill, interest, ...) rendered inside this same grid.
   Rollback: delete this block; restore .bak-orderfix-20260722 in
   /home/spokibg/ops-backups/after-filter-order-fix-20260722/. */
@media (max-width:48rem){
  .spoki-cat__shopframe>.spoki-after-filter{order:4}
}