/* ======================
   WAB BLOG — BLOCK STYLES
   These styles are portable and apply anywhere these blocks are used.
   ====================== */

/* ── Global Block Container Resets ──
   Prevents WordPress block-gap or default typography margins from 
   breaking the internal padding of custom blocks. */
.wp-block-group[class*="is-style-wab-"]>*:first-child,
.wab-cta-banner__inner>*:first-child,
.wab-quote-card__inner>*:first-child,
.wab-related__card-body>*:first-child,
.wab-margin-note__inner>*:first-child,
.wab-accordion__content>*:first-child,
.wab-tabs__panel>*:first-child {
    margin-top: 0 !important;
}

.wp-block-group[class*="is-style-wab-"]>*:last-child,
.wab-cta-banner__inner>*:last-child,
.wab-quote-card__inner>*:last-child,
.wab-related__card-body>*:last-child,
.wab-margin-note__inner>*:last-child,
.wab-accordion__content>*:last-child,
.wab-tabs__panel>*:last-child {
    margin-bottom: 0 !important;
}


/* ── Separator block ──
   Spacing comes from the block's own padding attribute. User-controlled margin
   from block supports is now allowed (was forced to 0). */


/* ── Summary Box ──
   Figma: 25px title, 18px/25px body, separator line above, content 640px */
.wp-block-group.is-style-wab-summary {
    background: none;
    border-radius: 0;
    padding: 0;
    margin: var(--wab-block-margin, 1.5em) 0;
    max-width: var(--wab-content-width);
    border-top: 1px solid var(--wab-gray-200);
    border-bottom: 1px solid var(--wab-gray-200);
    padding: 24px 0;
}

.wp-block-group.is-style-wab-summary>h3:first-child,
.wp-block-group.is-style-wab-summary>.wp-block-heading:first-child {
    font-size: 25px;
    font-weight: 400;
    line-height: 40px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wab-h3-color);
    margin: 0 0 20px;
}

.wp-block-group.is-style-wab-summary p {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
    color: var(--wab-p-color);
    padding: 0;
    border: none;
}

.wp-block-group.is-style-wab-summary p:last-child {
    margin-bottom: 0;
}

.wp-block-group.is-style-wab-summary p strong {
    color: var(--wab-p-color);
    font-weight: 700;
}


/* ── Fact Callout ──
   Figma: rounded 16px, bg primary 80% opacity, icon+FACT label,
   text 20px/30px, 16px gap, icon gradient circle */
.wp-block-group.is-style-wab-fact {
    position: relative;
    background: color-mix(in srgb, var(--wab-primary) 8%, transparent);
    border: none;
    border-radius: var(--wab-radius);
    padding: 22px 24px 22px 72px;
    margin: var(--wab-block-margin, 1.5em) 0;
}

/* Figma: gradient icon circle on the left */
.wp-block-group.is-style-wab-fact::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-radius: var(--wab-radius-md);
    background: linear-gradient(117deg, var(--wab-primary), var(--wab-accent));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Figma: "FACT" label = 12px, letter-spacing 1.65px, primary color 80% */
.wp-block-group.is-style-wab-fact>p:first-child::before,
.wp-block-group.is-style-wab-fact>.wp-block-heading:first-child::before {
    content: 'FACT';
    display: block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.65px;
    color: color-mix(in srgb, var(--wab-primary) 80%, transparent);
    margin-bottom: 10px;
    line-height: 16.5px;
}

.wp-block-group.is-style-wab-fact p {
    font-size: 20px;
    line-height: 30px;
    color: var(--wab-p-color);
    margin: 0;
}


/* ── Feature List (checkmarks) ──
   Figma: bullet icons are SVG circles with opacity 0.5, 32px left indent */
.wp-block-list.is-style-wab-features {
    list-style: none;
    padding-left: 32px;
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wp-block-list.is-style-wab-features li {
    position: relative;
    padding-left: 0;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 30px;
    color: var(--wab-p-color);
}

.wp-block-list.is-style-wab-features li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 9px;
    width: 13px;
    height: 13px;
    opacity: 0.5;
    background: var(--wab-primary);
    border-radius: 50%;
}


/* ── Numbered Steps ──
   Figma: 31x31px circles, bg #f3faff (very light primary), 18px text */
.wp-block-list.is-style-wab-steps {
    list-style: none;
    padding-left: 0;
    margin: var(--wab-block-margin, 1.5em) 0;
    counter-reset: wab-step;
}

.wp-block-list.is-style-wab-steps li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 10px;
    min-height: 31px;
    font-size: 18px;
    line-height: 30px;
    color: var(--wab-p-color);
    counter-increment: wab-step;
}

.wp-block-list.is-style-wab-steps li::before {
    content: counter(wab-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--wab-primary) 8%, var(--wab-bg));
    color: var(--wab-p-color);
    font-size: 18px;
    font-weight: 400;
    border-radius: 50%;
    flex-shrink: 0;
}

.wp-block-list.is-style-wab-steps li:last-child {
    margin-bottom: 0;
}


/* ── Callouts ── */
.wp-block-group.is-style-wab-callout-info {
    background: color-mix(in srgb, var(--wab-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--wab-primary) 25%, transparent);
    border-radius: var(--wab-radius);
    padding: 20px 24px;
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wp-block-group.is-style-wab-callout-warning {
    background: color-mix(in srgb, var(--wab-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--wab-accent) 25%, transparent);
    border-radius: var(--wab-radius);
    padding: 20px 24px;
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wp-block-group.is-style-wab-callout-tip {
    background: color-mix(in srgb, var(--wab-success) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--wab-success) 25%, transparent);
    border-radius: var(--wab-radius);
    padding: 20px 24px;
    margin: var(--wab-block-margin, 1.5em) 0;
}

/* ── Pull Quote ── */
.wp-block-quote.is-style-wab-pull {
    border: none;
    padding: 0;
    text-align: center;
    font-size: 36px;
    line-height: 49.5px;
    font-weight: 400;
    color: var(--wab-primary);
    max-width: var(--wab-wide-width);
    margin: var(--wab-block-margin, 1.5em) auto;
}


/* ======================
   COMPARISON TABLE
   Figma: 640px wide, rows 159px tall, header bg #f3faff,
   border #d7d9dc, category 18px, values 18px/22px,
   column titles 15px, vertical divider at 320px
   ====================== */
/* ======================
   COMPARISON CARD (single column)
   ====================== */
.wab-comparison-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--wab-gray-200);
    background: var(--wab-bg, #fff);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wab-comparison-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.wab-comparison-card__header {
    padding: 12px 16px;
    text-align: center;
    border-radius: 10px;
    margin: 5px;
}

.wab-comparison-card__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.wab-comparison-card__body {
    padding: 0 16px;
}

.wab-comparison-card__item {
    padding: 12px 0;
    border-bottom: 1px solid var(--wab-gray-200);
}

.wab-comparison-card__item:last-child {
    border-bottom: none;
}

.wab-comparison-card__item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--wab-p-color);
    margin-bottom: 2px;
}

.wab-comparison-card__item-text {
    font-size: 14px;
    line-height: 20px;
    color: var(--wab-gray-500);
}

@media (max-width: 600px) {
    .wab-comparison-card__body {
        padding: 0 12px;
    }

    .wab-comparison-card__header {
        padding: 10px 12px;
    }
}


/* ======================
   QUOTE BANNER
   Figma: no bg, centered, thin gradient lines above/below,
   36px primary text, 11px spaced cite
/* ======================
   PULL QUOTE BLOCK (Don Norman style)
   Figma: rounded 16px, gradient bg, top 3px primary bar,
   big " mark 120px, italic 22px/35px, author with avatar
   ====================== */
/* This style applies when Quote Banner block is used in gradient mode.
   For now the block renders the same structure. */


/* ======================
   AUTHOR BIO
   Figma: bg #f3f7fb, rounded 16px, avatar 80px rounded 16px,
   "WRITTEN BY" 11px letter-spacing 1.65px color #b7bec8,
   name 18px/28px, role 14px/22.8px color #b8bec8
   ====================== */
.wab-author-bio {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: color-mix(in srgb, var(--wab-primary) 5%, var(--wab-gray-50));
    border-radius: var(--wab-radius);
    margin: var(--wab-block-margin, 1.5em) 0;
    max-width: var(--wab-content-width);
}

.wab-author-bio__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--wab-author-avatar-radius, 16px);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--wab-gray-200);
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
}



.wab-author-bio__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

.wab-author-bio__initial {
    font-size: 28px;
    font-weight: 400;
    color: var(--wab-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Figma: 11px, letter-spacing 1.65px, color #b7bec8 */
.wab-author-bio__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.65px;
    color: var(--wab-gray-400);
    font-weight: 400;
    margin-bottom: 4px;
    line-height: 16.5px;
}

/* Figma: 18px/28px */
.wab-author-bio__name {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--wab-p-color);
}

/* Figma: 14px/22.8px, color #b8bec8 */
.wab-author-bio__role {
    font-size: 14px;
    line-height: 22.8px;
    color: var(--wab-gray-400);
    margin-top: 2px;
}


/* ======================
   MARGIN NOTE
   Floats in the page margin on wide screens.
   Falls inline on narrow screens.
   
   Math: content is centered at max-width 640px.
   On a 1440px screen: (1440-640)/2 = 400px margin each side.
   Note width 280px + 24px gap = 304px — fits in 400px margin.
   
   Breakpoint: content-width + (note-width + gap) * 2 = min screen
   640 + (280+24)*2 = 1248px → below this, note goes inline.
   ====================== */
.wab-margin-note {
    position: relative;
    margin: var(--wab-block-margin, 1.5em) 0;
}

/* On wide screens: pull out of content flow into margin */
@media (min-width: 1248px) {
    .wab-margin-note {
        width: var(--wab-mn-width, 280px);
        margin-top: 0;
        margin-bottom: 0;
        /* offsetY: shift relative to natural float position */
        transform: translateY(var(--wab-mn-offset-y, 0px));
    }

    .wab-margin-note--right {
        float: right;
        clear: right;
        margin-right: calc(-1 * var(--wab-mn-width, 280px) - 24px) !important;
        margin-left: 24px !important;
    }

    .wab-margin-note--left {
        float: left;
        clear: left;
        margin-left: calc(-1 * var(--wab-mn-width, 280px) - 24px) !important;
        margin-right: 24px !important;
    }

    .wab-margin-note--sticky .wab-margin-note__inner {
        position: sticky;
        top: 120px;
    }
}

/* On narrow screens: inline block */
@media (max-width: 1247px) {
    .wab-margin-note {
        max-width: 100%;
        width: 100%;
    }
}

.wab-margin-note__inner {
    background: color-mix(in srgb, var(--wab-gray-700) 7%, transparent);
    border-radius: var(--wab-radius-md, 14px);
    padding: 24px;
    will-change: transform;
}

/* Typography inside margin note — slightly smaller */
.wab-margin-note__inner h1,
.wab-margin-note__inner h2,
.wab-margin-note__inner h3,
.wab-margin-note__inner h4 {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--wab-p-color);
    margin: 0 0 8px;
}

.wab-margin-note__inner p {
    font-size: 15px;
    line-height: 22px;
    color: var(--wab-p-color);
    margin: 0 0 12px;
}

.wab-margin-note__inner p:last-child {
    margin-bottom: 0;
}

.wab-margin-note__inner img {
    width: 100%;
    border-radius: var(--wab-radius-sm, 6px);
    margin-bottom: 12px;
}

/* Button inside margin note */
.wab-margin-note__inner .wp-block-button__link {
    background: var(--wab-accent);
    color: var(--wab-gray-900);
    border-radius: var(--wab-radius-sm, 6px);
    font-size: 15px;
    padding: 6px 16px;
}


/* ======================
   CTA BANNER
   Figma: bg primary 20% opacity, rounded 25px,
   title 32px, text 18px/30px, button bg white rounded 9px,
   image 288px wide on right
   ====================== */
.wab-cta-banner {
    margin: var(--wab-block-margin, 1.5em) 0;
    border-radius: var(--wab-cta-radius, 25px);
    overflow: hidden;
}

.wab-cta-banner__inner {
    padding: var(--wab-cta-padding, 48px);
    max-width: var(--wab-wide-width);
    margin: 0 auto;
}

/* Style variants */
.wab-cta-banner--primary-tint {
    background: color-mix(in srgb, var(--wab-primary) 20%, transparent);
}

.wab-cta-banner--dark {
    background: var(--wab-gray-900);
    color: var(--wab-gray-100);
}

.wab-cta-banner--dark .wab-cta-banner__inner {
    color: var(--wab-gray-100);
}

.wab-cta-banner--light {
    background: var(--wab-gray-50);
}

.wab-cta-banner--accent-tint {
    background: color-mix(in srgb, var(--wab-accent) 20%, transparent);
}

.wab-cta-banner--transparent {
    background: transparent;
}

.wab-cta-banner.alignfull {
    border-radius: 0 !important;
}

.wab-cta-banner.alignwide {
    border-radius: 8px;
}

/* ======================
   QUOTE CARD
   ====================== */
.wab-quote-card {
    margin: var(--wab-block-margin, 1.5em) 0;
    border-radius: var(--wab-quote-radius, 0px);
    overflow: hidden;
    border: 2px solid transparent;
}

.wab-quote-card__inner {
    padding: var(--wab-quote-padding, 48px);
    max-width: var(--wab-wide-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wab-quote-card__icon {
    width: 48px;
    height: 48px;
    color: var(--wab-primary);
}

.wab-quote-card__text {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 35px;
    color: inherit;
}

.wab-quote-card__text::before,
.wab-quote-card__text::after {
    display: none !important;
}

.wab-quote-card__author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.wab-article .wab-quote-card__avatar,
.wab-quote-card__avatar {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    border-radius: 60px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.wab-quote-card__name {
    font-weight: 600;
    font-size: 0.95em;
    line-height: 1.2;
}

.wab-quote-card__role {
    font-size: 0.85em;
    color: color-mix(in srgb, currentColor 70%, transparent);
    margin-top: 0;
}

/* Style variants */
.wab-quote-card--primary-tint {
    background: color-mix(in srgb, var(--wab-primary) 10%, transparent);
    border-color: var(--wab-primary);
}

.wab-quote-card--dark {
    background: var(--wab-gray-900);
    border-color: var(--wab-gray-700);
    color: var(--wab-gray-100);
}

.wab-quote-card--dark .wab-quote-card__icon {
    color: var(--wab-gray-400);
}

.wab-quote-card--light {
    background: var(--wab-gray-50);
    border-color: var(--wab-gray-200);
}

.wab-quote-card--accent-tint {
    background: color-mix(in srgb, var(--wab-accent) 10%, transparent);
    border-color: var(--wab-accent);
}

.wab-quote-card--transparent {
    background: transparent;
    border-color: var(--wab-gray-200);
}

.wab-quote-card.alignfull {
    border-radius: 0 !important;
    border-left: none;
    border-right: none;
}

.wab-quote-card.alignwide {
    border-radius: 8px;
}


/* ======================
   RELATED ARTICLES
   Figma: sidebar card style = bg gray 7%, rounded 14px,
   title 20px/30px, text 15px/22px, thumbnail rounded,
   button bg accent rounded 6px
   ====================== */
.wab-related {
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wab-related__title {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--wab-p-color);
    margin: 0 0 24px;
}

/* With thumbnails */
.wab-related--thumbs .wab-related__grid {
    display: grid;
    grid-template-columns: repeat(var(--wab-related-cols, 3), 1fr);
    gap: 16px;
}

.wab-related--thumbs .wab-related__card {
    display: block;
    text-decoration: none;
    border-radius: var(--wab-radius);
    overflow: hidden;
    background: var(--wab-gray-50);
    transition: box-shadow var(--wab-transition), transform var(--wab-transition);
}

/* High-specificity overrides so theme typography/image rules don't win */
.wab-related--thumbs .wab-related__card .wab-related__card-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wab-gray-100);
}

.wab-related--thumbs .wab-related__card .wab-related__card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wab-transition);
}

.wab-related--thumbs .wab-related__card .wab-related__card-title {
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
    color: var(--wab-p-color);
    margin: 0;
}

.wab-related--thumbs .wab-related__card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* High-specificity overrides so theme rules can't win over these */
.wab-related--thumbs .wab-related__card .wab-related__card-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.wab-related--thumbs .wab-related__card .wab-related__card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wab-related--thumbs .wab-related__card .wab-related__card-title {
    font-size: 17px;
    line-height: 26px;
}

.wab-related__card-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wab-gray-100);
}

.wab-related__card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--wab-transition);
}

.wab-related--thumbs .wab-related__card:hover .wab-related__card-thumb img {
    transform: scale(1.04);
}

.wab-related__card-thumb--empty {
    background: var(--wab-gray-200);
}

.wab-related__card-body {
    padding: 16px 24px 20px;
}

.wab-related__card-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wab-primary);
    margin-bottom: 6px;
}

/* Card title — 3pt smaller than heading style */
.wab-related__card-title {
    font-size: 17px;
    font-weight: 400;
    line-height: 26px;
    color: var(--wab-p-color);
    margin: 0;
}

/* Compact / no thumbnails */
.wab-related--compact .wab-related__grid {
    display: block;
}

.wab-related__row {
    display: block;
    text-decoration: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--wab-gray-200);
    transition: background var(--wab-transition);
}

.wab-related__row:first-child {
    border-top: 1px solid var(--wab-gray-200);
}

.wab-related__row:hover {
    background: var(--wab-gray-50);
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border-radius: var(--wab-radius-sm);
}

.wab-related__row-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wab-primary);
    margin-bottom: 4px;
}

.wab-related__row-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--wab-p-color);
    margin: 0;
}

.wab-related__row-excerpt {
    font-size: 15px;
    line-height: 22px;
    color: var(--wab-gray-500);
    margin: 6px 0 0;
}

@media (max-width: 768px) {
    .wab-related--thumbs .wab-related__grid {
        grid-template-columns: 1fr;
    }
}



/* ======================
   COMPARISON MATRIX WRAPPER
   Subgrid layout for 1-6 columns.
   ====================== */
.wab-comparison-columns {
    margin: var(--wab-block-margin, 1.5em) auto;
}

.wab-comparison-matrix--grid {
    display: grid;
    grid-template-columns: repeat(var(--wab-cols, 3), 1fr);
    grid-template-rows: auto repeat(var(--wab-rows, 3), auto);
    row-gap: var(--wab-row-gap, 24px);
    column-gap: var(--wab-col-gap, 24px);
    align-items: start;
}

.wab-matrix-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span calc(var(--wab-rows) + 1);

    background: var(--wab-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--wab-gray-200);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wab-matrix-col:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

@supports not (grid-template-rows: subgrid) {
    .wab-matrix-col {
        grid-template-rows: auto;
        grid-row: auto;
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .wab-comparison-matrix--grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .wab-comparison-matrix--grid .wab-matrix-col {
        grid-template-rows: auto;
        grid-row: auto;
        display: flex;
        flex-direction: column;
    }
}

.wab-matrix-col__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wab-matrix-col__heading {
    font-weight: 700;
}

.wab-matrix-col__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--wab-cell-valign, flex-start);
}

.wab-matrix-col__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--wab-body-pad-x, 16px);
    right: var(--wab-body-pad-x, 16px);
    height: 1px;
    background: var(--wab-gray-200);
}

.wab-matrix-col__item:last-child::after {
    display: none;
}

.wab-matrix-col__item-inner {
    width: 100%;
}

.wab-matrix-col__item-title {
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--wab-p-color);
}

.wab-matrix-col__item-title p {
    margin: 0;
}

.wab-matrix-col__item-text {
    line-height: 1.5;
    color: var(--wab-gray-500);
}

.wab-matrix-col__item-text p {
    margin: 0;
}

.wab-comparison-matrix--carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 24px;
    padding-bottom: 24px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.wab-comparison-matrix--carousel .wab-matrix-col {
    flex: 0 0 320px;
    scroll-snap-align: center;
    grid-template-rows: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
}

.wab-comparison-matrix--carousel::-webkit-scrollbar {
    height: 6px;
}

.wab-comparison-matrix--carousel::-webkit-scrollbar-thumb {
    background: var(--wab-gray-300);
    border-radius: 6px;
}

.wab-comparison-matrix--carousel::-webkit-scrollbar-track {
    background: var(--wab-gray-100);
    border-radius: 6px;
}

/* ======================
   COMPARISON CARD (single column)
   ====================== */
.wab-comparison-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--wab-gray-200);
    background: var(--wab-bg, #fff);
}

.wab-comparison-card__header {
    padding: 12px 16px;
    text-align: center;
    border-radius: 10px;
    margin: 5px;
}

.wab-comparison-card__heading {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.wab-comparison-card__body {
    padding: 0 16px;
}

.wab-comparison-card__item {
    padding: 12px 0;
    border-bottom: 1px solid var(--wab-gray-200);
}

.wab-comparison-card__item:last-child {
    border-bottom: none;
}

.wab-comparison-card__item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--wab-p-color);
    margin-bottom: 2px;
}

.wab-comparison-card__item-text {
    font-size: 14px;
    line-height: 20px;
    color: var(--wab-gray-500);
}


/* ======================
   TABS BLOCK
   ====================== */
.wab-tabs {
    margin: var(--wab-block-margin, 1.5em) 0;
}

/* Base Nav */
.wab-tabs__nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    position: relative;
    margin-bottom: 24px;
    /* Allow safe spacing at ends when scrolling */
    scroll-snap-type: x mandatory;
}

.wab-tabs__nav::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Nav Alignments */
.wab-tabs__nav--center {
    justify-content: center;
}

/* Center alignment needs to degrade to start on small screens if it overflows */
@media (max-width: 768px) {
    .wab-tabs__nav--center {
        justify-content: flex-start;
    }
}

.wab-tabs__nav--full {
    flex-wrap: nowrap;
}

.wab-tabs__nav--full .wab-tabs__btn {
    flex: 1 1 0;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 768px) {
    .wab-tabs__nav--full .wab-tabs__btn {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.wab-tabs__btn {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ── Style: Underline ── */
.wab-tabs--underline .wab-tabs__nav {
    border-bottom: 2px solid var(--wab-gray-200);
    gap: 24px;
}

.wab-tabs--underline .wab-tabs__btn {
    padding: 0 0 12px 0;
    margin-bottom: -2px;
    /* overlap border */
    font-size: 16px;
    font-weight: 500;
    color: var(--wab-tab-color, var(--wab-gray-500));
    border-bottom: 2px solid transparent;
}

.wab-tabs--underline .wab-tabs__btn:hover {
    color: var(--wab-tab-active-color, var(--wab-gray-800));
    border-bottom-color: var(--wab-gray-300);
}

.wab-tabs--underline .wab-tabs__btn.is-active {
    color: var(--wab-tab-active-color, var(--wab-primary));
    border-bottom-color: var(--wab-tab-active-bg, var(--wab-primary));
    /* use active-bg for the border line if set */
}

/* ── Style: Pills (Segmented Control) ── */
.wab-tabs--pills .wab-tabs__nav {
    display: inline-flex;
    background: var(--wab-tab-bg, #f1f5f9);
    padding: 6px;
    border-radius: 12px;
    gap: 4px;
    border-bottom: none;
}

.wab-tabs--pills .wab-tabs__nav--full {
    display: flex;
}

.wab-tabs--pills .wab-tabs__btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wab-tab-color, #64748b);
    margin: 0;
}

.wab-tabs--pills .wab-tabs__btn:hover {
    color: var(--wab-tab-active-color, #0f172a);
}

.wab-tabs--pills .wab-tabs__btn.is-active {
    background: var(--wab-tab-active-bg, #ffffff);
    color: var(--wab-tab-active-color, #0f172a);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ── Style: Bordered (Folder Card) ── */
.wab-tabs--bordered .wab-tabs__nav {
    border-bottom: 1px solid var(--wab-gray-200);
    gap: 4px;
    margin-bottom: 0;
    /* Attach to panels */
    background: var(--wab-tab-bg, transparent);
    /* Usually transparent at root */
}

.wab-tabs--bordered .wab-tabs__btn {
    padding: 12px 24px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--wab-tab-color, var(--wab-gray-500));
    margin-bottom: -1px;
    background: var(--wab-tab-bg, var(--wab-gray-50));
}

.wab-tabs--bordered .wab-tabs__btn:hover {
    background: var(--wab-gray-100);
    color: var(--wab-tab-active-color, var(--wab-gray-800));
}

.wab-tabs--bordered .wab-tabs__btn.is-active {
    background: var(--wab-tab-active-bg, var(--wab-bg, #fff));
    border-color: var(--wab-gray-200);
    border-bottom-color: var(--wab-tab-active-bg, var(--wab-bg, #fff));
    color: var(--wab-tab-active-color, var(--wab-primary));
    font-weight: 600;
}

.wab-tabs--bordered .wab-tabs__panels {
    padding: 24px;
    border: 1px solid var(--wab-gray-200);
    border-top: none;
    border-radius: 0 0 12px 12px;
}

/* Panels */
.wab-tabs__panel {
    display: none;
}

.wab-tabs__panel.is-active {
    display: block;
    animation: wabTabFadeIn 0.3s ease;
}

@keyframes wabTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======================
   STEP BY STEP
   ====================== */
.wab-steps {
    margin: var(--wab-block-margin, 1.5em) 0;
}

/* ── Vertical ── */

/* Item: flex-row, висота = контент праворуч, цифра не розтягується */
.wab-steps--vertical .wab-steps__item {
    display: flex;
    gap: 0;
    align-items: flex-start;
    position: relative;
}

/* Маркер: фіксована ширина, не розтягується */
.wab-steps--vertical .wab-steps__marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: var(--wab-steps-num-size);
    position: relative;
    z-index: 1;
}

/* Цифра */
.wab-steps--vertical .wab-steps__number {
    width: var(--wab-steps-num-size);
    height: var(--wab-steps-num-size);
    border-radius: var(--wab-steps-num-radius);
    background: var(--wab-steps-num-bg);
    color: var(--wab-steps-num-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wab-steps-num-font);
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Лінія — суцільна, через ::before на item.
   Іде від самого верху item до самого низу (включно з gap-padding).
   X-позиція = половина ширини маркера.
   Цифра поверх неї через z-index. */
.wab-steps--vertical .wab-steps__item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--wab-steps-num-size) / 2);
    transform: translateX(-50%);
    width: 2px;
    background: var(--wab-steps-line);
    z-index: 0;
}

/* Перший і останній — лінія тільки від/до центру цифри */
.wab-steps--vertical .wab-steps__item--first::before {
    top: calc(var(--wab-steps-num-size) / 2);
}

.wab-steps--vertical .wab-steps__item--last::before {
    top: 0;
    bottom: auto;
    height: calc(var(--wab-steps-num-size) / 2);
}

/* Якщо тільки один елемент — лінії немає */
.wab-steps--vertical .wab-steps__item--first.wab-steps__item--last::before {
    display: none;
}

/* Старі flex-лінії більше не потрібні */
.wab-steps--vertical .wab-steps__line {
    display: none;
}

.wab-steps--vertical .wab-steps__content {
    padding: 0 0 var(--wab-steps-gap, 28px) 20px;
}

.wab-steps--vertical .wab-steps__item--last .wab-steps__content {
    padding-bottom: 0;
}

.wab-steps__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    margin: 0 0 4px;
    color: var(--wab-p-color);
}

.wab-steps__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--wab-gray-500);
    margin: 0;
}

/* ── Horizontal ── */
.wab-steps--horizontal {
    display: flex;
    align-items: flex-start;
}

.wab-steps--horizontal .wab-steps__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

.wab-steps--horizontal .wab-steps__marker {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}

.wab-steps--horizontal .wab-steps__number {
    width: var(--wab-steps-num-size);
    height: var(--wab-steps-num-size);
    border-radius: var(--wab-steps-num-radius);
    background: var(--wab-steps-num-bg);
    color: var(--wab-steps-num-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wab-steps-num-font);
    font-weight: 600;
    flex-shrink: 0;
    z-index: 1;
}

.wab-steps--horizontal .wab-steps__line {
    height: 2px;
    flex: 1;
    background: var(--wab-steps-line);
}

.wab-steps__line--hidden {
    visibility: hidden;
}

/* ── Vertical: number alignment ── */

/* TOP (default): цифра по верхньому краю контенту.
   align-items: flex-start вже встановлено на item — нічого додаткового. */
.wab-steps--num-top.wab-steps--vertical .wab-steps__marker {
    align-self: flex-start;
}

/* CENTER: цифра по центру контенту праворуч */
.wab-steps--num-center.wab-steps--vertical .wab-steps__item {
    align-items: center;
}
/* Але лінія ::after має починатись від низу цифри, а не від центру item —
   тому маркер залишається flex-start по вертикалі всередині себе,
   а лінія все одно іде вниз правильно через абсолютне позиціонування */
.wab-steps--num-center.wab-steps--vertical .wab-steps__marker {
    align-self: center;
}

.wab-steps--horizontal .wab-steps__content {
    padding: 0 8px;
    text-align: center;
    width: 100%;
}

.wab-steps--horizontal .wab-steps__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--wab-p-color);
    margin: 0 0 4px;
}

.wab-steps--horizontal .wab-steps__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--wab-gray-500);
    margin: 0;
}

@media (max-width: 768px) {
    .wab-steps--horizontal {
        flex-direction: column;
        align-items: stretch;
    }

    .wab-steps--horizontal .wab-steps__item {
        flex-direction: row;
        text-align: left;
        gap: 0;
    }

    .wab-steps--horizontal .wab-steps__marker {
        flex-direction: column;
        width: var(--wab-steps-num-size);
        margin-bottom: 0;
    }

    .wab-steps--horizontal .wab-steps__line {
        width: 2px;
        height: auto;
        flex: 1;
    }

    .wab-steps--horizontal .wab-steps__content {
        padding: 8px 0 40px 20px;
    }
}

/* ======================
   RELATED ARTICLES CAROUSEL
   ====================== */
.wab-related--carousel {
    position: relative;
    overflow: hidden;
}

.wab-related__scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 0 24px;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.wab-related__scroll::-webkit-scrollbar {
    display: none;
}

.wab-related__scroll:active {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Inner track for transform-based autoplay loop */
.wab-related__track {
    display: flex;
    gap: 24px;
    will-change: transform;
}

/* Cards inside scroll (non-autoplay fallback) or track (autoplay) */
.wab-related__scroll .wab-related__card,
.wab-related__track .wab-related__card {
    flex: 0 0 340px;
    max-width: 85vw;
    margin-bottom: 0;
    transition: box-shadow 0.3s ease;
}

.wab-related__scroll .wab-related__card:hover,
.wab-related__track .wab-related__card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.wab-related__scroll .wab-related__row,
.wab-related__track .wab-related__row {
    flex: 0 0 380px;
    max-width: 90vw;
}

@media (max-width: 600px) {

    .wab-related__scroll .wab-related__card,
    .wab-related__scroll .wab-related__row,
    .wab-related__track .wab-related__card,
    .wab-related__track .wab-related__row {
        flex: 0 0 85vw;
    }
}

/* ======================
   TIMELINE — HORIZONTAL
   ====================== */
.wab-timeline-h {
    position: relative;
    margin: var(--wab-block-margin, 1.5em) auto;
    overflow: hidden;
}

.wab-timeline-h__scroll {
    display: flex;
    gap: var(--wab-tl-card-gap, 0);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 24px 24px;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.wab-timeline-h__scroll.is-fits {
    justify-content: center;
}

.wab-timeline-h__scroll::-webkit-scrollbar {
    display: none;
}

.wab-timeline-h__item {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0;
}

/* Image area — always present for alignment */
.wab-timeline-h__image-area {
    width: 160px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.wab-timeline-h__image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.wab-timeline-h__image-area:empty {
    height: 0;
    margin-bottom: 0;
}

/* Marker — fixed-size dot column, centered in the card. The axis line is
   rendered as one continuous horizontal element behind all the markers, so
   any card gap doesn't break it. The line spans the full width of the item
   row, sitting at the vertical centre of the dot; the dot itself is above
   it (z-index) and its opaque background covers the line where they overlap. */
.wab-timeline-h__marker {
    position: relative;
    width: 100%;
    height: var(--wab-tl-dot-size, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

/* The continuous line — extends the full width of the item. Because every
   item's marker draws its own line segment across the whole item width, and
   the line runs edge-to-edge (0 to 100%), the segments meet across the gap
   between cards and read as a single unbroken line. The dot sits on top and
   covers the line where they overlap. Hidden on the outer edges of the
   first/last item so the line doesn't extend past the timeline. */
.wab-timeline-h__marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--wab-tl-line, var(--wab-gray-200));
    transform: translateY(-50%);
    z-index: 0;
}

.wab-timeline-h__item:first-child .wab-timeline-h__marker::before {
    left: 50%; /* Line starts at the dot's centre, not before */
}

.wab-timeline-h__item:last-child .wab-timeline-h__marker::before {
    right: 50%; /* Line ends at the dot's centre, not after */
}

.wab-timeline-h__dot {
    width: var(--wab-tl-dot-size, 48px);
    height: var(--wab-tl-dot-size, 48px);
    border-radius: 50%;
    border: 2px solid var(--wab-tl-dot, var(--wab-gray-300));
    background: var(--wab-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wab-tl-dot-font, 16px);
    font-weight: 600;
    color: var(--wab-gray-500);
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

/* Empty dot (no numbers / pill mode) — half the size of a numbered dot,
   filled with the dot color. Wrapped in an opaque halo (via box-shadow) the
   same colour as the surrounding background, so the line is visually cut
   right around the dot rather than showing through under it. Gives the same
   "line interrupted by a marker" look as a numbered dot, but proportional
   to the smaller shape. */
.wab-timeline-h__dot--empty {
    width: calc(var(--wab-tl-dot-size, 48px) / 2.5);
    height: calc(var(--wab-tl-dot-size, 48px) / 2.5);
    background: var(--wab-tl-dot, var(--wab-gray-300));
    border: none;
    box-shadow: 0 0 0 6px var(--wab-bg, #fff);
}

.wab-timeline-h__date {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wab-tl-date);
    margin-bottom: 2px;
}

.wab-timeline-h__title {
    font-size: var(--wab-tl-title-size, 15px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--wab-p-color);
    margin: 0 0 2px !important;
}

.wab-timeline-h__text {
    font-size: var(--wab-tl-text-size, 14px);
    line-height: 1.5;
    color: var(--wab-gray-500);
    margin: 0;
}

/* Year pill — sits in the content area above title (like vertical). Inline-
   block so it doesn't stretch. Colours/border set inline from block attrs. */
.wab-timeline-h__year-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: calc(var(--wab-tl-dot-font, 16px) * 0.95);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-bottom: 6px;
}

/* Fade edges */
.wab-timeline-h__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.wab-timeline-h__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--wab-bg, #fff), transparent);
}

.wab-timeline-h__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--wab-bg, #fff), transparent);
}

/* Hint */
.wab-timeline-h__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wab-gray-400);
    padding: 16px 0 8px;
}

.wab-timeline-h__hint.is-hidden {
    display: none;
}


/* ======================
   TIMELINE — VERTICAL
   ======================
   Standard pattern (Cruip, Codyhouse, Tailwind-style): the line is a single
   ::before on the container that spans the full container height. Each item
   gets left padding to make room for the line and its own dot. The dot is
   position:absolute on the item at the same left offset as the line, opaque
   background covers the line behind it. Because the line lives on the
   container, its height auto-adjusts to whatever the items' total height is
   — never breaks, never needs a JS measurement.
   Anchoring: the container's ::before line and each item's ::before dot both
   sit at the same left offset. Change --wab-tl-dot-size to grow/shrink the
   dot; the line always stays aligned to its centre. */

.wab-timeline-v {
    margin: var(--wab-block-margin, 1.5em) 0;
    position: relative;
    padding-left: 0;
}

/* The single continuous line — fills the container's full height */
.wab-timeline-v::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--wab-tl-dot-size, 48px) / 2 - 1px);
    height: 100%;
    width: 2px;
    background: var(--wab-tl-line, var(--wab-gray-200));
    z-index: 0;
}

.wab-timeline-v__item {
    position: relative;
    padding-left: calc(var(--wab-tl-dot-size, 48px) + 20px);
    padding-bottom: 32px;
    min-height: var(--wab-tl-dot-size, 48px);
}

.wab-timeline-v__item:last-child {
    padding-bottom: 0;
}

/* Dot — absolute at the same x as the line, opaque bg covers the line behind */
.wab-timeline-v__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--wab-tl-dot-size, 48px);
    height: var(--wab-tl-dot-size, 48px);
    border-radius: 50%;
    border: 2px solid var(--wab-tl-dot, var(--wab-gray-300));
    background: var(--wab-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wab-tl-dot-font, 16px);
    font-weight: 600;
    color: var(--wab-gray-500);
    z-index: 1;
    box-sizing: border-box;
}

/* Empty dot — smaller, filled, with opaque halo that visually cuts the line
   at the marker (professional look — line reads as "interrupted by a marker") */
.wab-timeline-v__dot--empty {
    width: calc(var(--wab-tl-dot-size, 48px) / 2.5);
    height: calc(var(--wab-tl-dot-size, 48px) / 2.5);
    background: var(--wab-tl-dot, var(--wab-gray-300));
    border: none;
    top: calc((var(--wab-tl-dot-size, 48px) - var(--wab-tl-dot-size, 48px) / 2.5) / 2);
    left: calc((var(--wab-tl-dot-size, 48px) - var(--wab-tl-dot-size, 48px) / 2.5) / 2);
    box-shadow: 0 0 0 6px var(--wab-bg, #fff);
}

.wab-timeline-v__body {
    padding-top: 4px;
}

.wab-timeline-v__date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wab-tl-date, var(--wab-primary));
    margin: 0 0 5px 0 !important;
    line-height: 1.2;
}

.wab-timeline-v__title {
    font-size: var(--wab-tl-title-size, 15px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--wab-p-color);
    margin: 0 0 5px !important;
}

.wab-timeline-v__text {
    font-size: var(--wab-tl-text-size, 14px);
    line-height: 1.5;
    color: var(--wab-gray-500);
    margin: 0 !important;
}

.wab-timeline-v__img {
    display: block;
    width: auto;
    max-width: 160px;
    height: auto;
    border-radius: 12px;
    margin: 8px 0 0 0 !important;
}

/* Year pill in body — inline-block, sits above title */
.wab-timeline-v__year-pill {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: calc(var(--wab-tl-dot-font, 16px) * 0.95);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-bottom: 8px;
}

.wab-timeline-v__body {
    padding: 0 0 20px 0;
    flex: 1;
    min-width: 0;
}

.wab-timeline-v__item:last-child .wab-timeline-v__body {
    padding-bottom: 0;
}

.wab-timeline-v__date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wab-tl-date, var(--wab-primary));
    margin: 0 0 5px 0 !important;
    line-height: 1.2;
}


.wab-timeline-v__img {
    display: block;
    width: auto;
    max-width: 160px;
    height: auto;
    border-radius: 12px;
    margin: 8px 0 0 0 !important;
}


/* ======================
   TABS
   ====================== */
.wab-tabs {
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wab-tabs__nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.wab-tabs__nav::-webkit-scrollbar {
    display: none;
}

.wab-tabs__btn {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    color: var(--wab-gray-500);
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.wab-tabs__btn.is-active {
    color: var(--wab-p-color);
    font-weight: 600;
}

/* Underline style */
.wab-tabs--underline .wab-tabs__nav {
    border-bottom: 2px solid var(--wab-gray-200);
}

.wab-tabs--underline .wab-tabs__btn {
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
}

.wab-tabs--underline .wab-tabs__btn.is-active {
    border-bottom-color: var(--wab-primary);
    color: var(--wab-primary);
}

/* Pills style */
.wab-tabs--pills .wab-tabs__nav {
    gap: 8px;
}

.wab-tabs--pills .wab-tabs__btn {
    border-radius: 8px;
    padding: 8px 16px;
}

.wab-tabs--pills .wab-tabs__btn.is-active {
    background: color-mix(in srgb, var(--wab-primary) 12%, transparent);
    color: var(--wab-primary);
}

/* Bordered style */
.wab-tabs--bordered .wab-tabs__nav {
    border: 1px solid var(--wab-gray-200);
    border-radius: 10px 10px 0 0;
    background: var(--wab-gray-50);
}

.wab-tabs--bordered .wab-tabs__btn.is-active {
    background: var(--wab-bg, #fff);
}

.wab-tabs__panel {
    display: none;
    padding: 24px 0;
}

.wab-tabs__panel.is-active {
    display: block;
}


/* ======================
   ACCORDION
   ====================== */
.wab-accordion {
    margin: var(--wab-block-margin, 1.5em) 0;
}

.wab-accordion__item {
    border-bottom: 1px solid var(--wab-gray-200);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wab-accordion__item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wab-accordion--bordered .wab-accordion__item:first-child {
    border-top: 1px solid var(--wab-gray-200);
}

.wab-accordion--separated .wab-accordion__item {
    border: 1px solid var(--wab-gray-200);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--wab-bg, #fff);
}

.wab-accordion--separated .wab-accordion__item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    border-color: var(--wab-gray-300);
}

.wab-accordion--minimal .wab-accordion__item {
    border: none;
    border-bottom: 1px solid var(--wab-gray-100);
    transition: background 0.25s ease;
}

.wab-accordion--minimal .wab-accordion__item:hover {
    background: var(--wab-gray-50);
    box-shadow: none;
}

.wab-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 15px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    gap: 12px;
    /* Reset theme button styles (Astra, GeneratePress, etc. apply hover color/shadow/transform to all <button>) */
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    box-shadow: none;
    transform: none;
    transition: none;
    border-radius: 0;
    min-height: 0;
    line-height: inherit;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.wab-accordion__header:hover,
.wab-accordion__header:focus,
.wab-accordion__header:active,
.wab-accordion__header:focus-visible {
    background: none;
    color: inherit;
    box-shadow: none;
    transform: none;
    outline: none;
    border: none;
    opacity: 1;
}

/* Keep keyboard accessibility: a subtle focus ring on the title text only */
.wab-accordion__header:focus-visible .wab-accordion__title {
    outline: 2px solid var(--wab-primary, #12a5e9);
    outline-offset: 4px;
    border-radius: 2px;
}

.wab-accordion--separated .wab-accordion__header {
    padding: 16px 15px;
}

.wab-accordion--icon-left .wab-accordion__header {
    flex-direction: row-reverse;
}

.wab-accordion__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    color: var(--wab-p-color);
    flex: 1;
}

.wab-accordion__icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--wab-gray-400);
}

.wab-accordion__item.is-open .wab-accordion__icon {
    transform: rotate(180deg);
}

.wab-accordion__body {
    transition: height 0.3s ease;
    overflow: hidden;
}

.wab-accordion__content {
    padding: var(--wab-acc-content-pt, 16px) var(--wab-acc-content-pr, 15px) var(--wab-acc-content-pb, 16px) var(--wab-acc-content-pl, 15px);
    font-size: 16px;
    line-height: 26px;
    color: var(--wab-gray-600);
}

.wab-accordion--separated .wab-accordion__content {
    padding: var(--wab-acc-content-pt, 16px) var(--wab-acc-content-pr, 15px) var(--wab-acc-content-pb, 16px) var(--wab-acc-content-pl, 15px);
}

.wab-accordion__content p {
    margin: 0 0 12px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.wab-accordion__content p:last-child {
    margin-bottom: 0;
}

/* ==============================================
   WAB BLOCK PREFIX EXTENSION
   ============================================== */

/* Base prefix element */
.wab-prefix {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    /* Smooth appearance */
    transition: opacity 0.15s ease;
}

/* ── Inline mode: sits on same line as text ── */
.wab-prefix--inline {
    display: inline;
    margin-right: 0.45em;
    vertical-align: baseline;
    line-height: inherit;
}

/* ── Block mode: sits above text on its own line ── */
.wab-prefix--block {
    display: block;
    width: fit-content;
    margin-bottom: 0.4em;
}

/* Block mode — alignment inherits from parent text-align */
.has-text-align-center .wab-prefix--block {
    margin-inline: auto;
}

.has-text-align-right .wab-prefix--block {
    margin-left: auto;
    margin-right: 0;
}

/* Dark mode adjustments (if WAB dark mode is active) */
.is-dark-mode .wab-prefix {
    opacity: 0.9;
}

/* Editor preview — show prefix in block editor as well */
.wp-block-paragraph .wab-prefix,
.wp-block-heading .wab-prefix {
    pointer-events: none;
}

/* ======================
   FEATURE CARD GROUP
   ====================== */
.wab-fcg {
    margin: calc(var(--wab-block-margin, 1.5em) * var(--wab-block-mult, 2)) auto;
}

/* ── Grid mode ── */
.wab-fcg--grid .wab-fcg__grid {
    display: grid;
    grid-template-columns: repeat(var(--wab-fcg-cols, 3), 1fr);
    gap: var(--wab-fcg-gap, 24px);
    align-items: stretch;
}

/* Stretch inner card to fill cell height */
.wab-fcg--grid .wab-fcg__grid>.wab-feature-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.wab-fcg--grid .wab-fcg__grid>.wab-feature-card .wab-feature-card__body {
    flex: 1;
}

/* Icon container uses real CSS padding (set inline). Children fill the content-box. */
/* Icon SVGs use their own width/height attributes (set in PHP from iconSize).
   Don't stretch them to fill the container — that would ignore iconSize.
   For image icons we allow scaling because there's no width/height attr. */
.wab-feature-card__icon > svg,
.wab-callout-box__icon > svg {
    display: block;
    flex-shrink: 0;
}

.wab-feature-card__icon > img,
.wab-callout-box__icon > img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Remove trailing margin from the last element inside block bodies — themes often set
   p { margin-bottom: 1em } without resetting :last-child, causing extra space at the bottom. */
.wab-feature-card__body > *:last-child,
.wab-callout-box__content > *:last-child,
.wab-callout-box__body > *:last-child {
    margin-bottom: 0;
}

/* Remove leading margin from the first element inside block bodies — themes often set
   margin-top on headings (h1..h6), causing extra space above the body that compounds
   with our configured icon→content gap. The gap should be the single source of spacing. */
.wab-feature-card__body > *:first-child,
.wab-callout-box__content > *:first-child,
.wab-callout-box__body > *:first-child {
    margin-top: 0;
}

/* Mobile: configurable column count */
@media (max-width: 600px) {
    .wab-fcg--grid .wab-fcg__grid {
        grid-template-columns: repeat(clamp(1, var(--wab-fcg-cols-mobile, 1), var(--wab-fcg-cols, 3)),
                1fr);
    }

    /* auto = let grid auto-fill at min 160px */
    .wab-fcg--grid[style*="--wab-fcg-cols-mobile:0"] .wab-fcg__grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (min-width: 601px) and (max-width: 900px) {

    /* Tablet: never exceed 3 columns */
    .wab-fcg--grid .wab-fcg__grid {
        grid-template-columns: repeat(min(var(--wab-fcg-cols, 3), 3),
                1fr);
    }
}

/* ── Carousel mode ── */
.wab-fcg--carousel {
    position: relative;
    overflow: hidden;
}

.wab-fcg--carousel .wab-fcg__scroll {
    display: flex;
    gap: var(--wab-fcg-gap, 24px);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px 0 24px;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.wab-fcg--carousel .wab-fcg__scroll::-webkit-scrollbar {
    display: none;
}

/* Show scrollbar variant */
.wab-fcg--scrollbar .wab-fcg__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--wab-gray-300, #d1d5db) var(--wab-gray-100, #f3f4f6);
    padding-bottom: 32px;
}

.wab-fcg--scrollbar .wab-fcg__scroll::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.wab-fcg--scrollbar .wab-fcg__scroll::-webkit-scrollbar-thumb {
    background: var(--wab-gray-300, #d1d5db);
    border-radius: 6px;
}

.wab-fcg--scrollbar .wab-fcg__scroll::-webkit-scrollbar-track {
    background: var(--wab-gray-100, #f3f4f6);
    border-radius: 6px;
}

.wab-fcg--carousel .wab-fcg__scroll:active {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Inner track for transform-based autoplay loop */
.wab-fcg__track {
    display: flex;
    gap: var(--wab-fcg-gap, 24px);
    will-change: transform;
}

/* Cards inside scroll/track: fixed width from CSS var */
.wab-fcg--carousel .wab-fcg__scroll>.wab-feature-card,
.wab-fcg__track>.wab-feature-card {
    flex: 0 0 var(--wab-fcg-card-width, 320px);
    max-width: 85vw;
    margin: 0;
    height: auto;
}

@media (max-width: 600px) {

    .wab-fcg--carousel .wab-fcg__scroll>.wab-feature-card,
    .wab-fcg__track>.wab-feature-card {
        flex: 0 0 85vw;
    }
}

/* Dark mode — inherit from feature-card's own dark handling */
.wab-dark .wab-fcg--grid .wab-fcg__grid>.wab-feature-card {
    /* feature-card handles its own dark bg */
}

/* ======================
   FEATURE PILL
   ====================== */
.wab-feature-pill {
    display: inline-flex;
    align-items: center;
    background: var(--wab-bg, #ffffff);
    padding: var(--wab-pill-pad-top, 8px) var(--wab-pill-pad-right, 16px) var(--wab-pill-pad-bottom, 8px) var(--wab-pill-pad-left, 8px);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: var(--wab-p-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
    /* for gutenberg border support */
    --wab-pill-shadow-color: rgba(0, 0, 0, 0.1);
}

.wab-feature-pill:hover {
    transform: translateY(-2px);
}

.wab-feature-pill__inner {
    display: flex;
    align-items: center;
    gap: var(--wab-pill-gap, 12px);
}

.wab-feature-pill__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wab-feature-pill__icon > svg {
    display: block;
    flex-shrink: 0;
}

.wab-feature-pill__icon > img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.wab-feature-pill__text {
    flex: 1;
    line-height: 1.3;
}

/* Shadow Presets */
.wab-feature-pill.wab-shadow-none {
    box-shadow: none;
}

.wab-feature-pill.wab-shadow-preset-1 {
    box-shadow: 4px 4px 0px var(--wab-pill-shadow-color);
    border: 1px solid var(--wab-gray-200, #e5e7eb);
}

.wab-feature-pill.wab-shadow-preset-2 {
    box-shadow: 0 4px 12px var(--wab-pill-shadow-color);
}

.wab-feature-pill.wab-shadow-preset-3 {
    box-shadow: 0 10px 30px -5px var(--wab-pill-shadow-color), 0 4px 10px -5px var(--wab-pill-shadow-color);
}

.wab-feature-pill.wab-shadow-preset-4 {
    box-shadow: 0 2px 4px var(--wab-pill-shadow-color), 0 8px 16px var(--wab-pill-shadow-color);
}

.wab-feature-pill.wab-shadow-preset-5 {
    box-shadow: 0 20px 40px -10px var(--wab-pill-shadow-color);
}

/* Dark Mode Adjustments */
html.wab-dark .wab-feature-pill {
    background: var(--wab-dark-surface, #2c2c2e);
    color: var(--wab-dark-text, #f5f5f7);
    --wab-pill-shadow-color: rgba(0, 0, 0, 0.4);
}

html.wab-dark .wab-feature-pill.wab-shadow-preset-1 {
    border-color: var(--wab-dark-border, #3a3a3c);
}

/* ======================
   WAB STICKY — Unified Block
   modes: sync | tabs | images
   ====================== */
.wab-sticky {
    margin: calc(var(--wab-block-margin, 1.5em) * var(--wab-block-mult, 2)) auto;
    position: relative;
}

.wab-sticky__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* ── Left column: relative + full height ── */
.wab-sticky__left {
    position: relative;
    /* Track must match the right column height so the sticky child has room to move. */
}

/* ── Sticky wrapper: THIS is what sticks.
   Height collapses to content; sticky behavior pins it to top/bottom offset
   while the parent track scrolls past. Vertical position within the viewport
   is controlled by top/bottom values below. */
.wab-sticky__sticky-wrapper {
    position: sticky;
    display: flex;
    flex-direction: column;
}

/* Position variants (set via CSS class from PHP).
   For sticky, only top OR bottom takes effect — they can't both pin simultaneously.
   Center uses top:50vh + translateY(-50%) so the element pins centered in the viewport. */
.wab-sticky__sticky-wrapper--top {
    top: var(--wab-sticky-offset, 120px);
    bottom: auto;
    transform: none;
}

.wab-sticky__sticky-wrapper--bottom {
    top: auto;
    bottom: var(--wab-sticky-offset, 120px);
    transform: none;
}

.wab-sticky__sticky-wrapper--center {
    /* Center within the visible area below a fixed header.
       Sticky wrapper itself becomes a 100vh flex container that pins to top:0,
       and align-items:center keeps the actual content vertically centered in
       the viewport. Padding-top = offset shifts the centering down to compensate
       for a fixed header. This avoids the transform/translate quirks that prevent
       sticky pinning from reflecting the visual center. */
    top: 0;
    bottom: auto;
    transform: none;
    height: 100vh;
    padding-top: var(--wab-sticky-offset, 0px);
    box-sizing: border-box;
    justify-content: center;
}

/* ── WordPress Admin Bar Spacing ── */
.admin-bar .wab-sticky__sticky-wrapper--top {
    top: calc(var(--wab-sticky-offset, 120px) + 32px);
}
.admin-bar .wab-sticky__sticky-wrapper--center {
    top: 32px;
    height: calc(100vh - 32px);
}

@media (max-width: 782px) {
    .admin-bar .wab-sticky__sticky-wrapper--top {
        top: calc(var(--wab-sticky-offset, 120px) + 46px);
    }
    .admin-bar .wab-sticky__sticky-wrapper--center {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/* ── Left items container ── */
/* ── Container for left items.
   Uses a single-cell grid so all items stack in the same place — the active one
   is visible, others are faded out. This avoids absolute positioning + translate
   tricks that overflowed the sticky wrapper when items were larger than 300px. */
.wab-sticky__left-items {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas: "stack";
}

/* Cap the height in sync/images modes so a tall left image never overflows the viewport
   when the sticky wrapper is pinned. Tabs mode is a vertical list — no cap needed. */
.wab-sticky--sync .wab-sticky__left-items,
.wab-sticky--images .wab-sticky__left-items {
    max-height: calc(100vh - (var(--wab-sticky-offset, 120px) * 2));
}

/* In sync/images, items share one grid cell — crossfade between them.
   overflow:hidden + max-height respect the viewport cap on __left-items. */
.wab-sticky--sync .wab-sticky__left-item,
.wab-sticky--images .wab-sticky__left-item {
    grid-area: stack;
    overflow: hidden;
    max-height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.wab-sticky--sync .wab-sticky__left-item img,
.wab-sticky--images .wab-sticky__left-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.wab-sticky--sync .wab-sticky__left-item.is-active,
.wab-sticky--images .wab-sticky__left-item.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Images mode: rounded corners */
.wab-sticky--images .wab-sticky__left-item img {
    border-radius: 16px;
}

/* ── MODE: tabs — all items visible as a sidebar list ── */
.wab-sticky--tabs .wab-sticky__left-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 2px solid var(--wab-gray-200, #e5e7eb);
    height: auto;
    /* Cap so a long tab list doesn't exceed the viewport when pinned. */
    max-height: calc(100vh - (var(--wab-sticky-offset, 120px) * 2));
    overflow-y: auto;
}

.wab-sticky--tabs .wab-sticky__left-item {
    padding: 12px 16px 12px 20px;
    border-left: 3px solid transparent;
    margin-left: -2px;
    opacity: 0.45;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.wab-sticky--tabs .wab-sticky__left-item.is-active {
    border-left-color: var(--wab-sticky-active-color, var(--wab-primary, #0066ff));
    opacity: 1;
}

.wab-sticky--tabs .wab-sticky__left-item.is-active * {
    color: var(--wab-sticky-active-color, var(--wab-primary, #0066ff));
}

/* Tab title/subtitle typography */
.wab-sticky__tab-title {
    font-weight: 600;
    font-size: 1.05em;
    line-height: 1.3;
    margin: 0;
}

.wab-sticky__tab-subtitle {
    font-size: 0.88em;
    margin-top: 4px;
    opacity: 0.75;
    line-height: 1.4;
}

/* Images mode: img sizing */
.wab-sticky__image {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* ── Right scrolling column ── */
.wab-sticky__right {
    display: flex;
    flex-direction: column;
}

.wab-sticky__content-item {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Global margin resets inside content */
.wab-sticky__content-inner>*:first-child { margin-top: 0; }
.wab-sticky__content-inner>*:last-child  { margin-bottom: 0; }

/* Mobile left: hidden on desktop */
.wab-sticky__mobile-left {
    display: none;
}

/* ── Mobile ── */
@media (max-width: 899px) {
    .wab-sticky__container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wab-sticky__left {
        display: none;
    }

    .wab-sticky__mobile-left {
        display: block;
        margin-bottom: 16px;
    }

    .wab-sticky__content-item {
        min-height: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 48px;
    }
}

/* ── Editor preview (Gutenberg) ── */
.wab-sticky-item-inner-wrap .block-editor-block-list__layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.wab-sticky-item-inner-wrap .block-editor-block-list__layout>* {
    flex: 1;
}

.wab-sticky-item-inner-wrap .block-editor-block-list__layout .block-editor-block-list__layout {
    display: block;
}

.wab-sticky-right-edit .wab-sticky__content-item {
    min-height: auto;
    padding: 16px 0;
}

/* ── Show More block ── */
.wab-show-more {
    /* CSS vars set via inline style */
}

.wab-show-more__toggle {
    /* Reset theme button styles aggressively (themes like Astra add hover bg/shadow/transform) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wab-sm-label-color, var(--wab-primary, #12a5e9));
    font: inherit;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: inherit;
    text-transform: none;
    box-shadow: none;
    transform: none;
    transition: opacity 0.15s ease;
    border-radius: 0;
    min-height: 0;
}

/* Apply custom label size only when the var is set (PHP omits it when labelSize === 0,
   so this rule has no effect and `font: inherit` from theme stays). */
.wab-show-more[style*="--wab-sm-label-size"] .wab-show-more__toggle {
    font-size: var(--wab-sm-label-size);
}

.wab-show-more__toggle:hover,
.wab-show-more__toggle:focus,
.wab-show-more__toggle:active,
.wab-show-more__toggle:focus-visible {
    background: none;
    color: var(--wab-sm-label-color, var(--wab-primary, #12a5e9));
    box-shadow: none;
    transform: none;
    border: none;
    opacity: 0.8;
    outline: none;
}

.wab-show-more__toggle:focus-visible {
    outline: 2px solid var(--wab-primary, #12a5e9);
    outline-offset: 4px;
    border-radius: 2px;
    opacity: 1;
}

.wab-show-more--arrow-left .wab-show-more__toggle {
    flex-direction: row;
}

/* Arrow position is controlled in markup by ordering the <svg> before or after the label.
   The icon rotates 180° when expanded. */
.wab-show-more__icon {
    flex-shrink: 0;
    color: var(--wab-sm-icon-color, var(--wab-sm-label-color, var(--wab-primary, #12a5e9)));
    transition: transform 0.25s ease;
}

.wab-show-more__toggle--bottom .wab-show-more__icon {
    transform: rotate(180deg);
}

/* Top toggle visible only when collapsed; bottom toggle lives inside the panel
   and is therefore visible only when expanded. */
.wab-show-more.is-open .wab-show-more__toggle--top {
    display: none;
}

/* Slide animation: height transitions from 0 to scrollHeight (set by JS) and back. */
.wab-show-more__panel {
    overflow: hidden;
    transition: height 0.3s ease;
    /* padding-top creates space between the top toggle and the content; it's part of
       scrollHeight, so the slide animation includes it naturally. */
    padding-top: var(--wab-sm-gap-top, 12px);
}

.wab-show-more__panel[hidden] {
    display: none;
}

.wab-show-more__content > *:first-child {
    margin-top: 0;
}

.wab-show-more__content > *:last-child {
    margin-bottom: 0;
}

.wab-show-more__toggle--bottom {
    margin-top: var(--wab-sm-gap-bottom, 16px);
}