/* IllumiWeb Builder - Structural CSS ONLY
   Zero typography. Zero colors. Theme handles everything visual. */

/* ── Box sizing ───────────────────────────────────────────────────── */
.iwb-content,
.iwb-content * { box-sizing: border-box; }

/* Layout resets - no typography */
.entry-content .iwb-row,
.entry-content .iwb-row-inner,
.entry-content .iwb-col,
.entry-content .iwb-col-inner { max-width: none; float: none; clear: none; margin-left: 0; margin-right: 0; }

/* GP overrides scoped to builder pages */
body.iwb-active #page.site.grid-container { max-width: none !important; padding: 0 !important; }
body.iwb-active #content.site-content { max-width: none !important; padding: 0 !important; }
body.iwb-active #primary.content-area { width: 100% !important; max-width: none !important; float: none !important; }
body.iwb-active .inside-article { padding-left: 0 !important; padding-right: 0 !important; }
body.iwb-active .entry-content { max-width: none !important; }
body.iwb-active #right-sidebar,
body.iwb-active #left-sidebar { display: none !important; }

/* ── Row ──────────────────────────────────────────────────────────── */
.iwb-content { width: 100%; }
.iwb-row { width: 100%; position: relative; }
.iwb-row--full { width: 100%; }

/* ── Container ────────────────────────────────────────────────────── */
.iwb-row__container {
    width: 100%;
    max-width: var(--iw-container, 1200px);
    margin-left: auto; margin-right: auto;
    padding-left: var(--iw-container-pad, 20px); padding-right: var(--iw-container-pad, 20px);
    box-sizing: border-box;
    display: flex !important; flex-wrap: wrap !important;
    gap: var(--iwb-gap, 0);
    align-items: var(--iwb-valign, stretch);
    justify-content: var(--iwb-halign, flex-start);
}
body.iwb-active .entry-content .iwb-row__container {
    display: flex !important; flex-wrap: wrap !important;
}
.iwb-row--stretch > .iwb-row__container,
.iwb-row--full.iwb-row--stretch > .iwb-row__container {
    max-width: 100%; padding-left: 0; padding-right: 0;
}
.iwb-row--full:not(.iwb-row--stretch) > .iwb-row__container {
    max-width: var(--iw-container, 1200px);
}

.iwb-section { position: relative; width: 100%; }

/* ── Column ───────────────────────────────────────────────────────── */
.iwb-col { box-sizing: border-box; padding: 15px; min-width: 0; max-width: 100%; }
.iwb-row__container > .iwb-col { display: flex; flex-direction: column; min-width: 0; }

/* ── Inner Row ────────────────────────────────────────────────────── */
.iwb-row-inner {
    display: flex !important; flex-wrap: wrap !important; width: 100%;
    gap: var(--iwb-gap, 0);
    align-items: var(--iwb-valign, stretch);
}
body.iwb-active .entry-content .iwb-row-inner {
    display: flex !important; flex-wrap: wrap !important;
}

/* ── Inner Column ─────────────────────────────────────────────────── */
.iwb-col-inner { box-sizing: border-box; padding: 15px; min-width: 0; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .iwb-row__container,
    body.iwb-active .entry-content .iwb-row__container { flex-direction: column !important; }
    .iwb-row--rev-mobile > .iwb-row__container { flex-direction: column-reverse !important; }
    .iwb-col, .entry-content .iwb-col { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
    .iwb-col-inner, .entry-content .iwb-col-inner { flex: 0 0 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
    .iwb-row-inner, .entry-content .iwb-row-inner { flex-direction: column !important; }
}

/* ==== 2026-10-15 UXS-18: frontend-visual.css (element geometry + animation) merged below, unchanged: one Builder stylesheet request. ==== */
/* IllumiWeb Builder - Minimal Structural CSS for Elements
   All visual styling (colors, fonts, borders, shadows) should be in the THEME.
   This file only contains structural rules elements need to function. */

/* ── Spacer / Separator ───────────────────────────────────────────── */
.iwb-spacer { display: block; }
.iwb-separator { display: block; }
.iwb-separator hr { border: none; border-top: 1px solid currentColor; }

/* ── Button wrap alignment ────────────────────────────────────────── */
.iwb-btn-wrap { display: flex; margin: 8px 0; }
.iwb-btn-wrap--center { justify-content: center; }
.iwb-btn-wrap--right  { justify-content: flex-end; }

/* ── Icon structural ──────────────────────────────────────────────── */
.iwb-icon { display: inline-block; }

/* ── Accordion / Tabs structural ──────────────────────────────────── */
/* Display behavior is the Builder's job - bound to the live classes the
   JS toggles (is-open / is-active). Brand styling (colors, borders,
   spacing, chevron rotation) is the theme's job. */
.iwb-accordion__body { display: none; overflow: hidden; }
.iwb-accordion__item.is-open > .iwb-accordion__body { display: block; }

/* Question heading wraps the toggle button - strip the heading's intrinsic
   margins/sizing so it behaves as an accordion row, not a page heading. The
   button inherits font from the heading so H2/H3 sizing still reads visually. */
.iwb-accordion__heading { margin: 0; padding: 0; font: inherit; line-height: inherit; }
.iwb-accordion__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px; padding: 16px 18px;
    background: none; border: 0; cursor: pointer; text-align: left;
    font: inherit; color: inherit;
}
.iwb-accordion__title { flex: 1 1 auto; }
.iwb-accordion__chevron { flex: 0 0 auto; transition: transform .2s ease; }
.iwb-accordion__item.is-open .iwb-accordion__chevron { transform: rotate(180deg); }
.iwb-accordion__body { padding: 0 18px 16px; }

/* Style variants (geometry/structure only; brand colors stay theme-owned). */
.iwb-accordion--bordered .iwb-accordion__item { border: 1px solid var(--iwb-accordion-border, #e2e8f0); border-radius: 8px; margin-bottom: 8px; }
.iwb-accordion--boxed .iwb-accordion__item { background: var(--iwb-accordion-bg, #f8fafc); border-radius: 8px; margin-bottom: 8px; }
.iwb-accordion--minimal .iwb-accordion__item { border-bottom: 1px solid var(--iwb-accordion-border, #e2e8f0); }

.iwb-tabs-nav { display: flex; list-style: none; padding: 0; margin: 0; }
.iwb-tab { display: none; }
.iwb-tab.is-active { display: block; }
/* Vertical orientation: nav sits beside panels */
.iwb-tabs--vertical { display: flex; align-items: flex-start; }
.iwb-tabs--vertical .iwb-tabs-nav { flex-direction: column; }

/* ── Counter structural ───────────────────────────────────────────── */
.iwb-counter { text-align: center; }

/* ── List structural ──────────────────────────────────────────────── */
/* The glyph IS the list - a check-list with no check is a bare <ul>, so the
   Builder owns the marker (structure). Color is the theme's job, read from
   --iwb-list-icon-color with a neutral fallback. */
.iwb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iwb-list li { position: relative; display: flex; align-items: flex-start; gap: 10px; }

/* Auto mark, only when the item has no explicit override icon (marked with iwb-list__li--has-icon).
   2026-10-15 night repair (Builder 2.24.1): public pages no longer load the Font Awesome font (UXS-18), so each mark is a fixed
   SVG mask of the same Font Awesome Free 6.5.1 solid glyph (CC BY 4.0): same advance width (viewBox / 512 em), the 1em glyph box
   centred on one line box exactly like the font glyph (the no-break space gives the box the line height), painted in
   --iwb-list-icon-color. Only the four styles below draw a mark (content is set per style). */
.iwb-list:not(.iwb-list--bullet):not(.iwb-list--numbered) li:not(.iwb-list__li--has-icon)::before {
    flex-shrink: 0;
    line-height: inherit;
    background-color: var(--iwb-list-icon-color, currentColor);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 100% 1em; mask-size: 100% 1em;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.iwb-list--check li:not(.iwb-list__li--has-icon)::before { /* fa-check */
    content: "\00a0"; width: 0.875em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}
.iwb-list--arrow li:not(.iwb-list__li--has-icon)::before { /* fa-chevron-right */
    content: "\00a0"; width: 0.625em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}
.iwb-list--x li:not(.iwb-list__li--has-icon)::before { /* fa-xmark */
    content: "\00a0"; width: 0.75em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
}
.iwb-list--star li:not(.iwb-list__li--has-icon)::before { /* fa-star */
    content: "\00a0"; width: 1.125em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

/* Explicit per-item override icon inherits the same color hook. */
.iwb-list__icon { flex-shrink: 0; line-height: inherit; color: var(--iwb-list-icon-color, currentColor); }

/* Bullet/numbered keep native markers (restore list semantics). */
.iwb-list--bullet   { list-style: disc inside; display: block; }
.iwb-list--numbered { list-style: decimal inside; display: block; }
.iwb-list--bullet li, .iwb-list--numbered li { display: list-item; }

/* ── Progress bar structural ──────────────────────────────────────── */
.iwb-progress { width: 100%; position: relative; }
.iwb-progress__bar { height: 100%; transition: width 1s ease; }

/* ── Gallery structural ───────────────────────────────────────────── */
.iwb-gallery { display: flex; flex-wrap: wrap; }
.iwb-gallery__item { overflow: hidden; }
.iwb-gallery__item img { width: 100%; height: auto; display: block; }

/* ── Gallery 2.12.5 ───────────────────────────────────────────────────
   Driven by CSS variables set per instance by the renderer:
     --iwb-g-n     columns (grid/masonry) or visible slides (carousel), per device
     --iwb-g-gap   gap
     --iwb-g-ratio optional aspect ratio
   Theme hooks: --iwb-g-radius, --iwb-g-nav-bg, --iwb-g-nav-color, --iwb-g-dot, --iwb-g-dot-active */
.iwb-gallery-wrap { position: relative; width: 100%; min-width: 0; --iwb-g-n: 3; --iwb-g-gap: 8px; }
.iwb-gallery-wrap .iwb-gallery__item { margin: 0; position: relative; min-width: 0; }
.iwb-gallery-wrap .iwb-gallery__link { display: block; cursor: zoom-in; overflow: hidden; border-radius: inherit; }
.iwb-gallery-wrap .iwb-gallery__img { width: 100%; height: auto; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.iwb-gallery-wrap--rounded .iwb-gallery__item { border-radius: var(--iwb-g-radius, var(--iw-radius, 10px)); }
.iwb-gallery-wrap--rounded .iwb-gallery__img { border-radius: inherit; }
.iwb-gallery-wrap--ratio .iwb-gallery__link,
.iwb-gallery-wrap--ratio .iwb-gallery__item > .iwb-gallery__img { aspect-ratio: var(--iwb-g-ratio); }
.iwb-gallery-wrap--ratio .iwb-gallery__img { height: 100%; object-fit: cover; }
@media (hover: hover) {
    .iwb-gallery-wrap .iwb-gallery__link:hover .iwb-gallery__img { transform: scale(1.04); }
}
.iwb-gallery-wrap .iwb-gallery__link:focus-visible { outline: 3px solid var(--iw-primary, #2563eb); outline-offset: 2px; }
.iwb-gallery-wrap .iwb-gallery__caption { font-size: 13px; line-height: 1.4; color: var(--iw-text-muted, #64748b); padding: 6px 2px 0; }

/* grid */
.iwb-gallery-wrap .iwb-gallery--grid { display: grid; grid-template-columns: repeat(var(--iwb-g-n), minmax(0, 1fr)); gap: var(--iwb-g-gap); }
/* masonry */
.iwb-gallery-wrap .iwb-gallery--masonry { display: block; column-count: var(--iwb-g-n); column-gap: var(--iwb-g-gap); }
.iwb-gallery-wrap .iwb-gallery--masonry .iwb-gallery__item { break-inside: avoid; margin-bottom: var(--iwb-g-gap); }
/* carousel */
.iwb-gallery-wrap .iwb-gallery--carousel { display: flex; flex-wrap: nowrap; gap: var(--iwb-g-gap); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; }
.iwb-gallery-wrap .iwb-gallery--carousel::-webkit-scrollbar { display: none; }
.iwb-gallery-wrap .iwb-gallery--carousel .iwb-gallery__item { flex: 0 0 calc((100% - var(--iwb-g-gap) * (var(--iwb-g-n) - 1)) / var(--iwb-g-n)); scroll-snap-align: start; }
.iwb-gallery-wrap .iwb-gallery--carousel:focus-visible { outline: 3px solid var(--iw-primary, #2563eb); outline-offset: 3px; }

.iwb-gallery__nav { position: absolute; top: calc(50% - 22px - var(--iwb-g-dots-h, 0px) / 2); width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 2;
    background: var(--iwb-g-nav-bg, #fff); color: var(--iwb-g-nav-color, #0f172a); box-shadow: 0 2px 10px rgba(15,23,42,.22);
    transition: opacity .2s, transform .2s; }
.iwb-gallery__nav--prev { left: 8px; }
.iwb-gallery__nav--prev svg { transform: scaleX(-1); }
.iwb-gallery__nav--next { right: 8px; }
.iwb-gallery__nav:hover { transform: scale(1.06); }
.iwb-gallery__nav:focus-visible { outline: 3px solid var(--iw-primary, #2563eb); outline-offset: 2px; }
.iwb-gallery__nav[disabled] { opacity: 0; pointer-events: none; }
.iwb-gallery-wrap.is-static .iwb-gallery__nav, .iwb-gallery-wrap.is-static .iwb-gallery__dots { display: none; }
.iwb-gallery-wrap--carousel.has-dots { --iwb-g-dots-h: 28px; }
.iwb-gallery__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; height: 28px; align-items: flex-end; }
.iwb-gallery__dot { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.iwb-gallery__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--iwb-g-dot, #cbd5e1); transition: background .2s, transform .2s; }
.iwb-gallery__dot.is-active::before { background: var(--iwb-g-dot-active, var(--iw-primary, #2563eb)); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
    .iwb-gallery-wrap .iwb-gallery--carousel { scroll-behavior: auto; }
    .iwb-gallery-wrap .iwb-gallery__img, .iwb-gallery__nav { transition: none; }
}

/* lightbox */
.iwb-lb { position: fixed; inset: 0; z-index: 999999; display: none; background: rgba(8,12,20,.94); touch-action: pan-y; }
.iwb-lb.is-open { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.iwb-lb__stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 56px 12px 8px; box-sizing: border-box; }
.iwb-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
.iwb-lb__bar { width: 100%; box-sizing: border-box; padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #e2e8f0; font-size: 14px; line-height: 1.4; }
.iwb-lb__count { opacity: .65; font-size: 12px; margin-left: 8px; white-space: nowrap; }
.iwb-lb__btn { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; transition: background .2s; }
.iwb-lb__btn:hover { background: rgba(255,255,255,.24); }
.iwb-lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.iwb-lb__btn--close { top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; }
.iwb-lb__btn--prev { left: 8px; top: calc(50% - 24px); }
.iwb-lb__btn--prev svg { transform: scaleX(-1); }
.iwb-lb__btn--next { right: 8px; top: calc(50% - 24px); }
.iwb-lb.is-single .iwb-lb__btn--prev, .iwb-lb.is-single .iwb-lb__btn--next, .iwb-lb.is-single .iwb-lb__count { display: none; }
@media (max-width: 600px) {
    .iwb-lb__btn--prev, .iwb-lb__btn--next { top: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .iwb-gallery__nav { width: 40px; height: 40px; top: calc(50% - 20px - var(--iwb-g-dots-h, 0px) / 2); }
    .iwb-gallery__nav--prev { left: 4px; } .iwb-gallery__nav--next { right: 4px; }
}

/* ── Image element ────────────────────────────────────────────────── */
/* Wrapper fills its column; the <img> is block-level and fills the wrapper
   so an image sits at its column width (matching the editor). The renderer's
   inline max-width (from the width attr) still caps the rendered size, and
   align positions it when a cap is in play. max-width:100% guarantees the
   image never overflows its column. */
.iwb-image { width: 100%; }
.iwb-image img { display: block; max-width: 100%; width: 100%; height: auto; }
.iwb-image--left   { text-align: left; }
.iwb-image--left   img { margin-right: auto; }
.iwb-image--center { text-align: center; }
.iwb-image--center img { margin-left: auto; margin-right: auto; }
.iwb-image--right  { text-align: right; }
.iwb-image--right  img { margin-left: auto; }

/* Image used as a heading (silo/internal-link architecture): keep the heading
   semantics but strip the visual heading styling so the image still looks like a
   plain image. */
.iwb-image__heading { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.iwb-image__heading > .iwb-image { margin: 0; }

/* ── Carousel structural ──────────────────────────────────────────── */
.iwb-carousel { position: relative; overflow: hidden; }

/* ── Row overlay / content (for bg overlays and video bg) ─────────── */
.iwb-row__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.iwb-row__content { position: relative; z-index: 1; display: flex; flex-wrap: wrap; width: 100%; }

/* ── Entrance Animations (scroll-triggered) ───────────────────────── */
[data-iwb-anim] { opacity: 0; transition: opacity 0.01s; }
[data-iwb-anim].iwb-animated { animation-fill-mode: both; opacity: 1; }

@keyframes iwb-fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes iwb-fadeInUp    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-fadeInDown  { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-fadeInLeft  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-zoomIn      { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes iwb-bounceIn    { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes iwb-flipInX     { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
@keyframes iwb-slideInUp   { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-slideInDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes iwb-slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes iwb-slideInRight{ from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

/* ── Element layout geometry (structural) ─────────────────────────── */
/* These rules set ONLY layout geometry (flex/grid/gap/align/direction).
   Brand properties (color, font, border-color, radius, shadow) belong to
   the theme/token CSS. Grey-zone spacing is exposed via --iwb-* override
   vars with sensible fallbacks so the theme can tune without fighting. */

/* Icon Box - icon position relative to title/text */
.iwb-icon-box { display: flex; flex-direction: column; gap: var(--iwb-iconbox-gap, 12px); }
.iwb-icon-box__icon { display: flex; }
.iwb-icon-box--top    { flex-direction: column; }
.iwb-icon-box--left   { flex-direction: row; }
.iwb-icon-box--right  { flex-direction: row-reverse; }
.iwb-icon-box--left  .iwb-icon-box__icon,
.iwb-icon-box--right .iwb-icon-box__icon { flex-shrink: 0; }
/* Text alignment within the box */
.iwb-icon-box--top.iwb-icon-box--center { align-items: center; text-align: center; }
.iwb-icon-box--top.iwb-icon-box--right  { align-items: flex-end;  text-align: right; }
.iwb-icon-box--top.iwb-icon-box--left   { align-items: flex-start; text-align: left; }
/* When icon is beside title, align items to the top edge */
.iwb-icon-box--left, .iwb-icon-box--right { align-items: flex-start; }

/* 2.10.13 - icon glyph sizing + centering inside the box.
   The box align rules existed but nothing sized/positioned the icon itself,
   so glyphs rendered at inline default and centered boxes looked broken. */
.iwb-icon-box__icon { font-size: var(--iwb-iconbox-icon-size, 40px); line-height: 1; }
.iwb-icon-box__icon > i { display: inline-block; }
/* center the icon glyph when the box is centered/top */
.iwb-icon-box--top.iwb-icon-box--center .iwb-icon-box__icon { justify-content: center; width: 100%; }
.iwb-icon-box--top.iwb-icon-box--right  .iwb-icon-box__icon { justify-content: flex-end; width: 100%; }
.iwb-icon-box--top.iwb-icon-box--left   .iwb-icon-box__icon { justify-content: flex-start; }

/* Hero - centering + button row */
.iwb-hero { display: flex; }
.iwb-hero__inner { width: 100%; display: flex; flex-direction: column; gap: var(--iwb-hero-gap, 16px); }
.iwb-hero--center { align-items: center; }
.iwb-hero--center .iwb-hero__inner { align-items: center; text-align: center; }
.iwb-hero--left   { align-items: flex-start; }
.iwb-hero--left   .iwb-hero__inner { align-items: flex-start; text-align: left; }
.iwb-hero--right  { align-items: flex-end; }
.iwb-hero--right  .iwb-hero__inner { align-items: flex-end; text-align: right; }
.iwb-hero__btns { display: flex; flex-wrap: wrap; gap: var(--iwb-btn-row-gap, 12px); }
.iwb-hero--center .iwb-hero__btns { justify-content: center; }
.iwb-hero--right  .iwb-hero__btns { justify-content: flex-end; }

/* CTA - text alignment + button row */
.iwb-cta--center { text-align: center; }
.iwb-cta--left   { text-align: left; }
.iwb-cta--right  { text-align: right; }
.iwb-cta__btns { display: flex; flex-wrap: wrap; gap: var(--iwb-btn-row-gap, 12px); margin-top: var(--iwb-cta-btns-mt, 16px); }
.iwb-cta--center .iwb-cta__btns { justify-content: center; }
.iwb-cta--right  .iwb-cta__btns { justify-content: flex-end; }

/* Testimonial - card vs centered layout geometry */
.iwb-testimonial { display: flex; flex-direction: column; gap: var(--iwb-testimonial-gap, 12px); }
.iwb-testimonial--centered { align-items: center; text-align: center; }
.iwb-testimonial__author { display: flex; align-items: center; gap: 10px; }
.iwb-testimonial--centered .iwb-testimonial__author { justify-content: center; }
.iwb-testimonial__photo { flex-shrink: 0; }
.iwb-testimonial__author > div { display: flex; flex-direction: column; }
.iwb-testimonial__stars { display: flex; gap: 2px; }
.iwb-testimonial--centered .iwb-testimonial__stars { justify-content: center; }

/* Pricing column - internal vertical rhythm (grid is inline on the wrapper) */
.iwb-pricing-col { display: flex; flex-direction: column; gap: var(--iwb-pricing-gap, 12px); }
.iwb-pricing-col__price { display: flex; align-items: baseline; gap: 4px; }
.iwb-pricing-col__action { margin-top: auto; }

/* 2026-10-10 spec 133 (T1): buttons on phones (Builder breakpoint). Several buttons side by side in one text block stack with 20 px,
   at their natural width, left aligned, centred or right aligned like the paragraph; scoped to .iwb-content so it also works under
   GeneratePress. :where keeps it at one class (no fight with button presets). Hero / CTA button rows stack the same way, aligned
   like the element. Two consecutive Button elements: 8 + 12 = 20 px (flex column; 20 px in a block inner column where margins
   collapse). Browsers without :has() keep the previous layout for text blocks. */
@media (max-width: 768px) {
    .iwb-content :where(p,div,li):where(:has(> :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button) ~ :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button))) { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .iwb-content :where(p,div,li):where(:has(> :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button) ~ :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button))):is([style*="text-align:center"],[style*="text-align: center"],.has-text-align-center,.wp-block-buttons.is-content-justification-center),
    .iwb-content :is([style*="text-align:center"],[style*="text-align: center"],.has-text-align-center) > :where(p,div,li):where(:has(> :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button) ~ :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button))):not([style*="text-align:left"],[style*="text-align: left"],[style*="text-align:right"],[style*="text-align: right"],.has-text-align-left,.has-text-align-right,.is-content-justification-left,.is-content-justification-right) { align-items: center; }
    .iwb-content :where(p,div,li):where(:has(> :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button) ~ :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button))):is([style*="text-align:right"],[style*="text-align: right"],.has-text-align-right,.wp-block-buttons.is-content-justification-right),
    .iwb-content :is([style*="text-align:right"],[style*="text-align: right"],.has-text-align-right) > :where(p,div,li):where(:has(> :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button) ~ :is(a.button,a.iwb-btn,[class*="iw-btn-"],.wp-block-button))):not([style*="text-align:left"],[style*="text-align: left"],[style*="text-align:center"],[style*="text-align: center"],.has-text-align-left,.has-text-align-center,.is-content-justification-left,.is-content-justification-center) { align-items: flex-end; }
    .iwb-hero .iwb-hero__btns, .iwb-cta .iwb-cta__btns { flex-direction: column; gap: 20px; align-items: flex-start; }
    .iwb-hero--center .iwb-hero__btns, .iwb-cta--center .iwb-cta__btns { align-items: center; }
    .iwb-hero--right .iwb-hero__btns, .iwb-cta--right .iwb-cta__btns { align-items: flex-end; }
    .iwb-btn-wrap + .iwb-btn-wrap { margin-top: 12px; }
    .iwb-col-inner > .iwb-btn-wrap + .iwb-btn-wrap { margin-top: 20px; }
}