/**
 * Copyright © 2025 WiMakeIT. All rights reserved.
 *
 * Wimakeit_PageBuilder — frontend stylesheet.
 *
 * Provides the device-visibility utilities and a few global rules that
 * the inline-styled blocks rely on but can't express inline (media
 * queries). Loaded by view/frontend/layout/default.xml.
 *
 * Breakpoints align with the Tailwind defaults so Hyvä themes share the
 * same thresholds as the Luma fallback.
 *   mobile : < 768px
 *   tablet : 768px – 1023px
 *   desktop: ≥ 1024px
 */

/* Per-device visibility — toggled by the cssClass injection in
   StateRenderer::applyCommonAttributes(). */
@media (max-width: 767px) {
    .wm-pb-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .wm-pb-hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .wm-pb-hide-desktop { display: none !important; }
}

/* Print: hide every block flagged as hide-print (future-proof, matches
   the Magezon feature set). */
@media print {
    .wm-pb-hide-print { display: none !important; }
}

/* ── Scroll-reveal animations ────────────────────────────────────────
   Wired by view/frontend/web/js/wm-pb-runtime.js::initScrollReveal()
   — an IntersectionObserver flips `.is-visible` on entry. Hyvä themes
   get the same rules from module-page-builder-hyva's module.css. */
[data-wm-anim] {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
[data-wm-anim="fade-in"]    { transform: none; }
[data-wm-anim="fade-up"]    { transform: translateY(24px); }
[data-wm-anim="fade-down"]  { transform: translateY(-24px); }
[data-wm-anim="fade-left"]  { transform: translateX(24px); }
[data-wm-anim="fade-right"] { transform: translateX(-24px); }
[data-wm-anim="zoom-in"]    { transform: scale(0.92); }
[data-wm-anim].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-wm-anim] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Typography presets (1.12.0) ─────────────────────────────────────
   Shared with the admin canvas (builder.css mirrors these rules). The
   typo preset is applied as `wm-pb-typo-<name>` on the block wrapper. */

.wm-pb-typo-display   { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.wm-pb-typo-h1        { font-size: clamp(2rem,   3vw + 1rem, 3.5rem); line-height: 1.1;  font-weight: 700; }
.wm-pb-typo-h2        { font-size: clamp(1.65rem, 2vw + 0.75rem, 2.5rem); line-height: 1.15; font-weight: 700; }
.wm-pb-typo-h3        { font-size: clamp(1.35rem, 1.2vw + 0.5rem, 1.875rem); line-height: 1.2; font-weight: 600; }
.wm-pb-typo-h4        { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.wm-pb-typo-lead      { font-size: 1.25rem; line-height: 1.55; font-weight: 400; }
.wm-pb-typo-body      { font-size: 1rem; line-height: 1.6; }
.wm-pb-typo-small     { font-size: 0.875rem; line-height: 1.5; }
.wm-pb-typo-caption   { font-size: 0.75rem; line-height: 1.45; opacity: 0.75; }
.wm-pb-typo-overline  { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* ── Responsive column spans (state v2 — Column.width is per-breakpoint) ──
   These mirror the Hyvä Tailwind utilities used in module-page-builder-hyva
   so a Luma storefront without the Hyvä build still gets the same
   responsive behaviour out of the box.

   The Row uses CSS Grid with `repeat(12, 1fr)` so column spans translate
   directly to grid-column. The base classes apply mobile-first; the md
   and lg overrides take precedence at their breakpoints. */

.wm-pb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }

.wm-pb-col            { grid-column: span 12; min-width: 0; }
.wm-pb-col-1  { grid-column: span 1; }
.wm-pb-col-2  { grid-column: span 2; }
.wm-pb-col-3  { grid-column: span 3; }
.wm-pb-col-4  { grid-column: span 4; }
.wm-pb-col-5  { grid-column: span 5; }
.wm-pb-col-6  { grid-column: span 6; }
.wm-pb-col-7  { grid-column: span 7; }
.wm-pb-col-8  { grid-column: span 8; }
.wm-pb-col-9  { grid-column: span 9; }
.wm-pb-col-10 { grid-column: span 10; }
.wm-pb-col-11 { grid-column: span 11; }
.wm-pb-col-12 { grid-column: span 12; }

@media (min-width: 768px) {
    .wm-pb-col-md-1  { grid-column: span 1; }
    .wm-pb-col-md-2  { grid-column: span 2; }
    .wm-pb-col-md-3  { grid-column: span 3; }
    .wm-pb-col-md-4  { grid-column: span 4; }
    .wm-pb-col-md-5  { grid-column: span 5; }
    .wm-pb-col-md-6  { grid-column: span 6; }
    .wm-pb-col-md-7  { grid-column: span 7; }
    .wm-pb-col-md-8  { grid-column: span 8; }
    .wm-pb-col-md-9  { grid-column: span 9; }
    .wm-pb-col-md-10 { grid-column: span 10; }
    .wm-pb-col-md-11 { grid-column: span 11; }
    .wm-pb-col-md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
    .wm-pb-col-lg-1  { grid-column: span 1; }
    .wm-pb-col-lg-2  { grid-column: span 2; }
    .wm-pb-col-lg-3  { grid-column: span 3; }
    .wm-pb-col-lg-4  { grid-column: span 4; }
    .wm-pb-col-lg-5  { grid-column: span 5; }
    .wm-pb-col-lg-6  { grid-column: span 6; }
    .wm-pb-col-lg-7  { grid-column: span 7; }
    .wm-pb-col-lg-8  { grid-column: span 8; }
    .wm-pb-col-lg-9  { grid-column: span 9; }
    .wm-pb-col-lg-10 { grid-column: span 10; }
    .wm-pb-col-lg-11 { grid-column: span 11; }
    .wm-pb-col-lg-12 { grid-column: span 12; }
}

/* Display conditions (date window + per-visitor) — the block ships hidden
   and wm-pb-runtime.js reveals it once it has evaluated the conditions
   (dates against the clock, showFor / showCustomerGroups against the
   `wm-pb-visitor` customer-data section). Kept hidden if JS is unavailable
   so a not-yet-active / expired / wrong-audience block never flashes.
   See GED-224. */
.wm-pb-cond-pending { display: none !important; }

/* Message box (renderMessageBox) — alert-style variants. Without these the
   content type rendered as unstyled text (the markup ships .wm-pb-msg--<kind>
   classes but no rules existed for them). GED-224. */
.wm-pb-msg { border-radius: .5rem; padding: 1rem 1.25rem; margin: 0 0 1.5rem; border: 1px solid transparent; position: relative; }
.wm-pb-msg__title { font-weight: 700; margin-bottom: .35rem; }
.wm-pb-msg__body { line-height: 1.55; }
.wm-pb-msg__dismiss { position: absolute; top: .5rem; right: .75rem; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.wm-pb-msg__dismiss:hover { opacity: 1; }
.wm-pb-msg--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.wm-pb-msg--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.wm-pb-msg--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.wm-pb-msg--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════════
   COMPONENT RULES (1.14.0)
   ══════════════════════════════════════════════════════════════════════

   Until 1.14.0 this file only shipped the layout grid, the visibility
   utilities and the typography presets — everything a block "can't
   express inline". That was true for Row/Column/Heading/Text, but not
   for the two dozen composite content types added since 1.10:
   StateRenderer emits `.wm-pb-hero__title`, `.wm-pb-pricing__tier`,
   `.wm-pb-stat__value`, … and no rule existed for any of them, so a
   Luma / Breeze storefront rendered Hero, Stats, Pricing, Testimonial,
   Timeline, Team, Tabs, Accordion, Tile, Banner, Coupon, Countdown,
   Trust badges, product grids, categories and reviews as bare, unstyled
   markup. (Same defect as the MessageBox one fixed in 1.13.7, but
   across every composite type.)

   The rules below are the plain-CSS port of
   `module-page-builder-hyva/view/frontend/tailwind/module.css`, which
   already covered all of them — so Luma and Hyvä storefronts now render
   the same components the same way. Tailwind's default scale is
   inlined (rem values, gray ramp, shadows) rather than referenced, so
   this file stays dependency-free.

   Brand colors resolve through `--wm-pb-palette-*`, the same custom
   properties the admin canvas sets from
   Stores > Configuration > WiMakeIT > PageBuilder > Color palette.
   Each has a literal fallback, so the components look right on a
   storefront that never sets them. */

:root {
    --wm-pb-primary:        var(--wm-pb-palette-primary, #ef6f14);
    /* Hover/active shade. Derived from the primary so it follows the
       configured brand instead of staying on the default orange — the
       palette only exposes one primary, and asking merchants to configure a
       second, consistent shade is a worse trade than computing it. */
    --wm-pb-primary-darker: color-mix(in srgb, var(--wm-pb-primary) 82%, #000);
    --wm-pb-on-primary:     var(--wm-pb-palette-on-primary, #fff);
}

/* color-mix is widely supported but not universal; browsers that skip the
   declaration above fall back to the literal shade of the default brand. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root { --wm-pb-primary-darker: var(--wm-pb-palette-primary-dark, #c85a0c); }
}

/* ── Divider ─────────────────────────────────────────────────────── */
.wm-pb-divider { border: 0; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }

/* ── Heading / Text / HTML ───────────────────────────────────────── */
.wm-pb-heading { font-weight: 700; color: #111827; margin: 2rem 0 1rem; line-height: 1.25; }
h1.wm-pb-heading { font-size: 2.25rem; }
h2.wm-pb-heading { font-size: 1.875rem; }
h3.wm-pb-heading { font-size: 1.5rem; }
h4.wm-pb-heading { font-size: 1.25rem; }
h5.wm-pb-heading { font-size: 1.125rem; }
h6.wm-pb-heading { font-size: 1rem; }
@media (min-width: 768px) {
    h1.wm-pb-heading { font-size: 3rem; }
    h2.wm-pb-heading { font-size: 2.25rem; }
    h3.wm-pb-heading { font-size: 1.875rem; }
    h4.wm-pb-heading { font-size: 1.5rem; }
    h5.wm-pb-heading { font-size: 1.25rem; }
    h6.wm-pb-heading { font-size: 1.125rem; }
}

.wm-pb-text,
.wm-pb-html { font-size: 1rem; color: #1f2937; line-height: 1.625; margin-bottom: 1rem; }
.wm-pb-html p  { margin-bottom: .75rem; line-height: 1.625; }
.wm-pb-html ul { list-style: disc; padding-left: 1.5rem; margin-bottom: .75rem; }
.wm-pb-html ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: .75rem; }
.wm-pb-html a  { color: var(--wm-pb-primary); text-decoration: underline; }
.wm-pb-html a:hover { color: var(--wm-pb-primary-darker); }
.wm-pb-html h2 { font-size: 1.5rem; font-weight: 700; margin: 1.25rem 0 .75rem; }
.wm-pb-html h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 .5rem; }

/* ── Button ──────────────────────────────────────────────────────── */
.wm-pb-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .75rem 1.25rem; border-radius: .375rem; font-weight: 500;
    text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.wm-pb-button:focus-visible { outline: 2px solid var(--wm-pb-primary); outline-offset: 2px; }
.wm-pb-button--primary   { background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); }
.wm-pb-button--primary:hover { background: var(--wm-pb-primary-darker); color: var(--wm-pb-on-primary); }
.wm-pb-button--secondary { background: #e5e7eb; color: #111827; }
.wm-pb-button--secondary:hover { background: #d1d5db; }
.wm-pb-button--outline   { border: 2px solid var(--wm-pb-primary); color: var(--wm-pb-primary); background: transparent; }
.wm-pb-button--outline:hover { background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); }

/* ── Image / Video / Quote / List / Icon ─────────────────────────── */
.wm-pb-image { max-width: 100%; height: auto; border-radius: .375rem; }
.wm-pb-video { width: 100%; overflow: hidden; border-radius: .375rem; }

.wm-pb-quote {
    border-left: 4px solid var(--wm-pb-primary); padding: .75rem 0 .75rem 1.25rem;
    margin: 1.5rem 0; font-style: italic; color: #374151;
    background: #f9fafb; border-radius: 0 .375rem .375rem 0;
}
.wm-pb-quote p      { font-size: 1.125rem; line-height: 1.625; margin-bottom: .5rem; }
.wm-pb-quote footer { font-style: normal; font-size: .875rem; color: #4b5563; margin-top: .5rem; display: block; }
.wm-pb-quote cite   { font-style: normal; }

.wm-pb-list { margin-bottom: 1rem; }
.wm-pb-icon { display: inline-block; vertical-align: middle; }

/* ── Table of contents / Contact / Greeting ──────────────────────── */
.wm-pb-toc { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.25rem; margin: 1.5rem 0; }
.wm-pb-toc__title { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: .75rem; }
.wm-pb-toc__list { list-style: none; padding-left: 0; }
.wm-pb-toc__list li + li { margin-top: .375rem; }
.wm-pb-toc__list a { color: var(--wm-pb-primary); text-decoration: none; }
.wm-pb-toc__list a:hover { color: var(--wm-pb-primary-darker); text-decoration: underline; }
.wm-pb-toc__lvl-h3 { padding-left: 1rem; }
.wm-pb-toc__lvl-h4 { padding-left: 2rem; }

.wm-pb-contact { font-style: normal; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.25rem; margin: 1rem 0; line-height: 1.625; }
.wm-pb-contact a { color: var(--wm-pb-primary); }
.wm-pb-contact a:hover { color: var(--wm-pb-primary-darker); }

.wm-pb-greeting { font-size: 1.125rem; font-weight: 500; color: #111827; }

/* ── Commerce — product cards / grids / sliders ──────────────────── */
.wm-pb-products { margin: 2rem 0; }
.wm-pb-products__title { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }
.wm-pb-products__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-pb-products--cols-2 .wm-pb-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .wm-pb-products--cols-3 .wm-pb-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wm-pb-products--cols-4 .wm-pb-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wm-pb-products--cols-5 .wm-pb-products__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wm-pb-products--cols-6 .wm-pb-products__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wm-pb-products__track { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.wm-pb-products__slide { flex: 0 0 auto; width: 16rem; scroll-snap-align: start; }
.wm-pb-products--single .wm-pb-product { max-width: 360px; }

.wm-pb-product {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden;
    transition: box-shadow .15s;
}
.wm-pb-product:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.wm-pb-product__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #f3f4f6; color: #9ca3af; overflow: hidden; }
.wm-pb-product__media img { width: 100%; height: 100%; object-fit: cover; }
.wm-pb-product__media--empty { color: #d1d5db; }
.wm-pb-product__body { padding: .75rem; display: flex; flex-direction: column; gap: .25rem; }
.wm-pb-product__name { font-weight: 600; color: #111827; line-height: 1.25; text-decoration: none; }
.wm-pb-product__name:hover { color: var(--wm-pb-primary); }
.wm-pb-product__prices { font-size: .875rem; }
.wm-pb-product__price { font-weight: 700; color: #111827; }
.wm-pb-product__price--sale { color: #dc2626; }
.wm-pb-product__price-old { color: #9ca3af; margin-left: .25rem; text-decoration: line-through; }
.wm-pb-product__image { width: 100%; height: 100%; object-fit: cover; }
.wm-pb-product__placeholder { color: #d1d5db; }
.wm-pb-product__price-label { color: #6b7280; margin-right: .25rem; }
.wm-pb-product__cart { margin: 0; }
.wm-pb-product__cta {
    display: inline-flex; align-items: center; gap: .375rem;
    align-self: flex-start; margin-top: .5rem;
    padding: .375rem .75rem; background: #111827; color: #fff;
    font-size: .875rem; border: 0; border-radius: .375rem;
    text-decoration: none; cursor: pointer;
}
.wm-pb-product__cta:hover { background: #374151; color: #fff; }
.wm-pb-product__cta--view { background: transparent; color: #111827; border: 1px solid #d1d5db; }
.wm-pb-product__cta--view:hover { background: #f3f4f6; color: #111827; }
.wm-pb-product__cta-icon { flex: 0 0 auto; }
.wm-pb-product__cta-label { line-height: 1; }

/* ── Commerce — categories ───────────────────────────────────────── */
.wm-pb-categories { display: grid; gap: 1rem; margin: 1.5rem 0; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.wm-pb-category { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; text-align: center; text-decoration: none; }
.wm-pb-category:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.wm-pb-category__media { aspect-ratio: 1 / 1; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
.wm-pb-category__media img { width: 100%; height: 100%; object-fit: cover; }
.wm-pb-category__placeholder { width: 100%; height: 100%; background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb); }
.wm-pb-category__name { padding: .75rem; font-weight: 600; color: #111827; }

.wm-pb-cat-tree { margin: 1rem 0; }
.wm-pb-cat-tree ul { list-style: none; padding-left: 0; margin: .25rem 0; }
.wm-pb-cat-tree ul ul { padding-left: 1.25rem; border-left: 1px solid #e5e7eb; margin-left: .5rem; }
.wm-pb-cat-tree li { padding: .25rem 0; }
.wm-pb-cat-tree a { color: #1f2937; text-decoration: none; }
.wm-pb-cat-tree a:hover { color: var(--wm-pb-primary); }

/* ── Commerce — reviews / rating ─────────────────────────────────── */
.wm-pb-reviews { margin: 1.5rem 0; }
.wm-pb-reviews > * + * { margin-top: 1rem; }
.wm-pb-review { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1rem; }
.wm-pb-review__stars { color: #eab308; font-size: 1.125rem; margin-bottom: .25rem; }
.wm-pb-review__title { font-weight: 600; color: #111827; margin-bottom: .25rem; }
.wm-pb-review__body { color: #374151; line-height: 1.625; margin-bottom: .5rem; }
.wm-pb-review__author { font-size: .875rem; color: #6b7280; }

.wm-pb-rating { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.wm-pb-rating__stars { color: #eab308; font-size: 1.125rem; }
.wm-pb-rating__score { font-size: .875rem; color: #4b5563; }

/* ── Embedded CMS content ────────────────────────────────────────── */
.wm-pb-static-block { margin: 1rem 0; }
.wm-pb-cms-list { margin: 1rem 0; }
.wm-pb-cms-list__title { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.wm-pb-cms-list ul { list-style: disc; padding-left: 1.25rem; }
.wm-pb-cms-list ul > li + li { margin-top: .25rem; }
.wm-pb-cms-list a { color: var(--wm-pb-primary); }
.wm-pb-cms-list a:hover { text-decoration: underline; }

/* ── Marketing — banner ──────────────────────────────────────────── */
.wm-pb-banner { position: relative; margin: 1.5rem 0; border-radius: .5rem; overflow: hidden; min-height: 280px; }
.wm-pb-banner__inner { position: relative; z-index: 1; padding: 2rem 1.5rem; }
.wm-pb-banner__title { font-size: 1.875rem; font-weight: 800; line-height: 1.25; margin-bottom: .5rem; color: #fff; }
.wm-pb-banner__subtitle { font-size: 1rem; line-height: 1.625; margin-bottom: 1rem; color: rgba(255,255,255,.9); }
.wm-pb-banner__cta { display: inline-block; background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); padding: .625rem 1.25rem; border-radius: .375rem; font-weight: 600; text-decoration: none; }
.wm-pb-banner__cta:hover { background: var(--wm-pb-primary-darker); color: var(--wm-pb-on-primary); }
@media (min-width: 768px) {
    .wm-pb-banner__title { font-size: 2.25rem; }
    .wm-pb-banner__subtitle { font-size: 1.125rem; }
}

/* ── Marketing — newsletter ──────────────────────────────────────── */
.wm-pb-newsletter { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.5rem; margin: 1.5rem 0; }
.wm-pb-newsletter__title { font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: .75rem; }
.wm-pb-newsletter__row { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 640px) { .wm-pb-newsletter__row { flex-direction: row; } }
.wm-pb-newsletter__email { flex: 1 1 auto; padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: .375rem; }
.wm-pb-newsletter__email:focus { outline: 2px solid var(--wm-pb-primary); outline-offset: 0; }
.wm-pb-newsletter__submit { padding: .5rem 1.25rem; background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); font-weight: 500; border: 0; border-radius: .375rem; cursor: pointer; }
.wm-pb-newsletter__submit:hover { background: var(--wm-pb-primary-darker); }

/* ── Marketing — coupon ──────────────────────────────────────────── */
.wm-pb-coupon {
    border: 2px dashed var(--wm-pb-primary); border-radius: .5rem;
    padding: 1.25rem; margin: 1.5rem 0;
    background-image: linear-gradient(135deg, rgba(239,111,20,.08), rgba(239,111,20,.02));
}
.wm-pb-coupon__head { font-size: 1rem; margin-bottom: .5rem; }
.wm-pb-coupon__code-row { display: flex; align-items: center; gap: .5rem; }
.wm-pb-coupon__code {
    font-size: 1.25rem; letter-spacing: .05em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700; color: var(--wm-pb-primary); background: #fff;
    padding: .375rem .75rem; border-radius: .25rem; border: 1px solid #e5e7eb;
}
.wm-pb-coupon__copy { padding: .375rem .75rem; background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); font-size: .875rem; border: 0; border-radius: .375rem; cursor: pointer; }
.wm-pb-coupon__copy:hover { background: var(--wm-pb-primary-darker); }
.wm-pb-coupon__notice { font-size: .875rem; color: #374151; margin: .75rem 0 0; }
.wm-pb-coupon__expires { font-size: .75rem; color: #6b7280; margin: .25rem 0 0; }

/* ── Marketing — countdown ───────────────────────────────────────── */
.wm-pb-countdown { background: #111827; color: #fff; border-radius: .5rem; padding: 1.25rem; margin: 1.5rem 0; text-align: center; }
.wm-pb-countdown__title { font-size: 1rem; font-weight: 500; margin-bottom: .75rem; }
.wm-pb-countdown__display { display: flex; justify-content: center; gap: .75rem; }
@media (min-width: 768px) { .wm-pb-countdown__display { gap: 1.5rem; } }
.wm-pb-countdown__display > div { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1); border-radius: .375rem; padding: .5rem .75rem; min-width: 60px; }
.wm-pb-countdown__display span { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .wm-pb-countdown__display span { font-size: 1.875rem; } }
.wm-pb-countdown__display small { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-top: .125rem; }

/* ── Marketing — trust badges ────────────────────────────────────── */
.wm-pb-trust { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; padding: 1rem 0; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.wm-pb-trust__item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #374151; }
.wm-pb-trust__item img { height: 2rem; width: auto; }
.wm-pb-trust__label { font-weight: 500; }

/* ── Hero ────────────────────────────────────────────────────────── */
.wm-pb-hero { position: relative; overflow: hidden; border-radius: .5rem; margin: 1.5rem 0; display: flex; flex-direction: column; justify-content: center; }
.wm-pb-hero--sm { min-height: 240px; }
.wm-pb-hero--md { min-height: 360px; }
.wm-pb-hero--lg { min-height: 480px; }
.wm-pb-hero--xl { min-height: 640px; }
/* The renderer already sets `position:absolute;inset:0` on the overlay and
   `position:relative;z-index:1` on the inner wrapper inline. These rules
   restate the stacking so the layering does not depend on those inline
   styles surviving, and add `pointer-events:none` so the overlay can never
   intercept a CTA click. */
.wm-pb-hero__overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wm-pb-hero__inner { position: relative; z-index: 1; padding: 3rem 1.5rem; max-width: 56rem; margin: 0 auto; width: 100%; }
@media (min-width: 768px) { .wm-pb-hero__inner { padding: 5rem 3rem; } }
.wm-pb-hero--align-left  .wm-pb-hero__inner { text-align: left;  margin-right: auto; margin-left: 0; }
.wm-pb-hero--align-right .wm-pb-hero__inner { text-align: right; margin-left: auto;  margin-right: 0; }
.wm-pb-hero--align-center .wm-pb-hero__inner { text-align: center; }
.wm-pb-hero__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .875rem; font-weight: 600; opacity: .9; margin-bottom: .75rem; }
.wm-pb-hero__title { font-size: 2.25rem; font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.wm-pb-hero__subtitle { font-size: 1.125rem; opacity: .9; margin-bottom: 1.5rem; max-width: 42rem; }
@media (min-width: 768px) {
    .wm-pb-hero__title { font-size: 3.75rem; }
    .wm-pb-hero__subtitle { font-size: 1.25rem; }
}
.wm-pb-hero--align-center .wm-pb-hero__subtitle { margin-left: auto; margin-right: auto; }
.wm-pb-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.wm-pb-hero--align-center .wm-pb-hero__ctas { justify-content: center; }
.wm-pb-hero--align-right  .wm-pb-hero__ctas { justify-content: flex-end; }
.wm-pb-hero__cta { display: inline-block; padding: .75rem 1.5rem; border-radius: .375rem; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.wm-pb-hero__cta--primary { background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); }
.wm-pb-hero__cta--primary:hover { background: var(--wm-pb-primary-darker); color: var(--wm-pb-on-primary); }
.wm-pb-hero__cta--secondary { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.wm-pb-hero__cta--secondary:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── Tabs (CSS-only, radio-driven) ───────────────────────────────── */
.wm-pb-tabs { position: relative; margin: 1.5rem 0; }
/* Visually hidden, but still focusable — the `hidden` attribute used
   before 1.14.0 made the widget unreachable by keyboard. */
.wm-pb-tabs__radio {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; overflow: hidden; white-space: nowrap;
    clip: rect(0 0 0 0); clip-path: inset(50%);
}
.wm-pb-tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid #e5e7eb; }
.wm-pb-tabs__tab {
    cursor: pointer; padding: .625rem 1rem; margin-bottom: -1px;
    border-bottom: 2px solid transparent; color: #4b5563; font-weight: 500;
    transition: color .15s, border-color .15s; user-select: none;
}
.wm-pb-tabs__tab:hover { color: var(--wm-pb-primary); border-bottom-color: #d1d5db; }
.wm-pb-tabs__panels { padding-top: 1rem; }
.wm-pb-tabs__panel { display: none; }

/* Panels: one sibling rule per index (see StateRenderer::MAX_CSS_TABS).
   The radio must be a *preceding sibling* of `.wm-pb-tabs__panels` for
   this to resolve — that is why renderTabs() hoists the inputs out of
   the tab list. */
.wm-pb-tabs__radio:nth-of-type(1):checked  ~ .wm-pb-tabs__panels [data-panel="0"],
.wm-pb-tabs__radio:nth-of-type(2):checked  ~ .wm-pb-tabs__panels [data-panel="1"],
.wm-pb-tabs__radio:nth-of-type(3):checked  ~ .wm-pb-tabs__panels [data-panel="2"],
.wm-pb-tabs__radio:nth-of-type(4):checked  ~ .wm-pb-tabs__panels [data-panel="3"],
.wm-pb-tabs__radio:nth-of-type(5):checked  ~ .wm-pb-tabs__panels [data-panel="4"],
.wm-pb-tabs__radio:nth-of-type(6):checked  ~ .wm-pb-tabs__panels [data-panel="5"],
.wm-pb-tabs__radio:nth-of-type(7):checked  ~ .wm-pb-tabs__panels [data-panel="6"],
.wm-pb-tabs__radio:nth-of-type(8):checked  ~ .wm-pb-tabs__panels [data-panel="7"],
.wm-pb-tabs__radio:nth-of-type(9):checked  ~ .wm-pb-tabs__panels [data-panel="8"],
.wm-pb-tabs__radio:nth-of-type(10):checked ~ .wm-pb-tabs__panels [data-panel="9"],
.wm-pb-tabs__radio:nth-of-type(11):checked ~ .wm-pb-tabs__panels [data-panel="10"],
.wm-pb-tabs__radio:nth-of-type(12):checked ~ .wm-pb-tabs__panels [data-panel="11"] {
    display: block;
}

/* Active tab label, same chain. `label:nth-of-type(n)` is scoped to the
   list, whose only children are the labels. */
.wm-pb-tabs__radio:nth-of-type(1):checked  ~ .wm-pb-tabs__list label:nth-of-type(1),
.wm-pb-tabs__radio:nth-of-type(2):checked  ~ .wm-pb-tabs__list label:nth-of-type(2),
.wm-pb-tabs__radio:nth-of-type(3):checked  ~ .wm-pb-tabs__list label:nth-of-type(3),
.wm-pb-tabs__radio:nth-of-type(4):checked  ~ .wm-pb-tabs__list label:nth-of-type(4),
.wm-pb-tabs__radio:nth-of-type(5):checked  ~ .wm-pb-tabs__list label:nth-of-type(5),
.wm-pb-tabs__radio:nth-of-type(6):checked  ~ .wm-pb-tabs__list label:nth-of-type(6),
.wm-pb-tabs__radio:nth-of-type(7):checked  ~ .wm-pb-tabs__list label:nth-of-type(7),
.wm-pb-tabs__radio:nth-of-type(8):checked  ~ .wm-pb-tabs__list label:nth-of-type(8),
.wm-pb-tabs__radio:nth-of-type(9):checked  ~ .wm-pb-tabs__list label:nth-of-type(9),
.wm-pb-tabs__radio:nth-of-type(10):checked ~ .wm-pb-tabs__list label:nth-of-type(10),
.wm-pb-tabs__radio:nth-of-type(11):checked ~ .wm-pb-tabs__list label:nth-of-type(11),
.wm-pb-tabs__radio:nth-of-type(12):checked ~ .wm-pb-tabs__list label:nth-of-type(12) {
    color: var(--wm-pb-primary); border-bottom-color: var(--wm-pb-primary);
}

/* Keyboard focus has to be visible even though the input itself is
   clipped out of view. */
.wm-pb-tabs__radio:focus-visible ~ .wm-pb-tabs__list label { outline: 2px solid var(--wm-pb-primary); outline-offset: -2px; }

/* More panels than the sibling chain covers: show everything stacked
   rather than render an empty widget. */
.wm-pb-tabs--overflow .wm-pb-tabs__list  { display: none; }
.wm-pb-tabs--overflow .wm-pb-tabs__panel { display: block; }

.wm-pb-tabs--vertical .wm-pb-tabs__list { flex-direction: column; border-bottom: 0; border-right: 1px solid #e5e7eb; }

/* ── Accordion (native <details>) ────────────────────────────────── */
.wm-pb-accordion { margin: 1.5rem 0; }
.wm-pb-accordion > * + * { margin-top: .5rem; }
.wm-pb-accordion__item { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.wm-pb-accordion__summary { padding: .75rem 1rem; cursor: pointer; font-weight: 600; color: #111827; list-style: none; }
.wm-pb-accordion__summary:hover { background: #f9fafb; }
.wm-pb-accordion__summary::-webkit-details-marker { display: none; }
.wm-pb-accordion__summary::after { content: "+"; float: right; font-size: 1.25rem; color: #9ca3af; }
.wm-pb-accordion__item[open] .wm-pb-accordion__summary::after { content: "−"; }
.wm-pb-accordion__body { padding: 0 1rem 1rem; color: #374151; border-top: 1px solid #f3f4f6; }

/* ── Tile / feature card ─────────────────────────────────────────── */
.wm-pb-tile { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.25rem; transition: box-shadow .15s, border-color .15s; }
.wm-pb-tile-link { display: block; text-decoration: none; color: inherit; }
.wm-pb-tile-link:hover .wm-pb-tile { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); border-color: var(--wm-pb-primary); }
.wm-pb-tile__icon { margin-bottom: .75rem; }
.wm-pb-tile__title { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: .5rem; }
.wm-pb-tile__body { color: #374151; line-height: 1.625; }

/* ── Stats grid ──────────────────────────────────────────────────── */
.wm-pb-stats { display: grid; gap: 1.5rem; margin: 2rem 0; text-align: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-pb-stats--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .wm-pb-stats--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wm-pb-stats--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wm-pb-stats--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .wm-pb-stats--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.wm-pb-stat__value { font-size: 1.875rem; font-weight: 800; color: #111827; line-height: 1; }
@media (min-width: 768px) { .wm-pb-stat__value { font-size: 2.25rem; } }
.wm-pb-stat__suffix { font-size: 1.5rem; font-weight: 700; color: var(--wm-pb-primary); margin-left: .125rem; }
.wm-pb-stat__label { margin-top: .5rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; }

/* ── Pricing table ───────────────────────────────────────────────── */
.wm-pb-pricing { display: grid; gap: 1.5rem; margin: 2rem 0; align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .wm-pb-pricing--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wm-pb-pricing--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wm-pb-pricing--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .wm-pb-pricing--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wm-pb-pricing__tier { background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1.5rem; display: flex; flex-direction: column; }
.wm-pb-pricing__tier--highlight { border: 2px solid var(--wm-pb-primary); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); position: relative; }
.wm-pb-pricing__tier--highlight::before {
    content: "★"; position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
    background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); font-size: .75rem;
    padding: .25rem .75rem; border-radius: 9999px; font-weight: 700;
}
.wm-pb-pricing__name { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: #6b7280; margin-bottom: .5rem; }
.wm-pb-pricing__price { margin-bottom: .75rem; }
.wm-pb-pricing__amount { font-size: 2.25rem; font-weight: 800; color: #111827; }
.wm-pb-pricing__period { font-size: 1rem; color: #6b7280; margin-left: .25rem; }
.wm-pb-pricing__desc { color: #4b5563; margin-bottom: 1rem; }
.wm-pb-pricing__features { list-style: none; padding-left: 0; margin-bottom: 1.5rem; flex: 1 1 auto; }
.wm-pb-pricing__features li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: #374151; }
.wm-pb-pricing__features li + li { margin-top: .5rem; }
.wm-pb-pricing__features li::before { content: "✓"; color: var(--wm-pb-primary); font-weight: 700; flex: 0 0 auto; }
.wm-pb-pricing__cta { display: inline-block; width: 100%; text-align: center; padding: .625rem 1rem; background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); font-weight: 600; border-radius: .375rem; text-decoration: none; }
.wm-pb-pricing__cta:hover { background: var(--wm-pb-primary-darker); color: var(--wm-pb-on-primary); }

/* ── Testimonial ─────────────────────────────────────────────────── */
.wm-pb-testimonial { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; padding: 1.5rem; margin: 1rem 0; }
.wm-pb-testimonial__stars { color: #eab308; font-size: 1.125rem; margin-bottom: .5rem; }
.wm-pb-testimonial__quote { font-size: 1.125rem; color: #1f2937; line-height: 1.625; font-style: italic; margin-bottom: 1rem; }
.wm-pb-testimonial__quote::before { content: "\201C"; font-size: 1.875rem; color: var(--wm-pb-primary); font-style: normal; vertical-align: top; margin-right: .25rem; }
.wm-pb-testimonial__author { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.wm-pb-testimonial__meta { min-width: 0; }
.wm-pb-testimonial__avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; border: 1px solid #e5e7eb; }
.wm-pb-testimonial__name { font-weight: 600; color: #111827; }
.wm-pb-testimonial__role { font-size: .875rem; color: #6b7280; }

/* ── Timeline ────────────────────────────────────────────────────── */
.wm-pb-timeline { position: relative; list-style: none; padding-left: 0; margin: 1.5rem 0; }
.wm-pb-timeline > * + * { margin-top: 1.5rem; }
.wm-pb-timeline::before { content: ""; position: absolute; left: .75rem; top: .5rem; bottom: .5rem; width: .125rem; background: #e5e7eb; }
.wm-pb-timeline__item { position: relative; padding-left: 2.5rem; }
.wm-pb-timeline__dot { position: absolute; left: .375rem; top: .375rem; width: 1rem; height: 1rem; border-radius: 9999px; background: var(--wm-pb-primary); border: 4px solid #fff; box-shadow: 0 0 0 2px #e5e7eb; }
.wm-pb-timeline__date { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--wm-pb-primary); margin-bottom: .25rem; }
.wm-pb-timeline__title { font-weight: 700; color: #111827; margin-bottom: .25rem; }
.wm-pb-timeline__body { color: #374151; }

/* ── Team member ─────────────────────────────────────────────────── */
.wm-pb-team { background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; text-align: center; }
.wm-pb-team__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.wm-pb-team__photo--empty { background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb); }
.wm-pb-team__name { margin-top: .75rem; font-weight: 700; color: #111827; font-size: 1.125rem; padding: 0 .75rem; }
.wm-pb-team__role { font-size: .875rem; color: #6b7280; padding: 0 .75rem; }
.wm-pb-team__bio { font-size: .875rem; color: #4b5563; padding: 0 1rem; margin-top: .5rem; line-height: 1.625; }
.wm-pb-team__socials { display: flex; justify-content: center; gap: .5rem; margin: .75rem 0; }
.wm-pb-team__social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 9999px; background: #f3f4f6;
    color: #374151; font-size: .875rem; font-weight: 600; text-decoration: none;
    transition: background-color .15s, color .15s;
}
.wm-pb-team__social:hover { background: var(--wm-pb-primary); color: var(--wm-pb-on-primary); }

/* ── Orphan tab panel (a tab_panel dropped outside a Tabs container) ─ */
.wm-pb-tab-panel-orphan { display: block; }