/**
 * Thread - Component Stylesheet
 * 
 * Clean, semantic HTML5 component styling:
 * - Buttons, Cards, Sliders/Carousels
 * - Semantic Navigation, Sticky Header, Mobile Drawer
 * - Semantic Accordions (<details>/<summary>)
 * - Stats Counters, Split Content, Testimonials
 * - WordPress Core Blocks & Alignment Support
 */

/* ==========================================================================
   1. Buttons (:is(.trd-button,.qm-btn))
   ========================================================================== */
:is(.trd-button,.qm-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    font-family: var(--qm-typo-buttons-font-family, inherit);
    font-size: var(--qm-typo-buttons-font-size, var(--text-m, 1rem));
    font-weight: var(--qm-typo-buttons-font-weight, 600);
    line-height: var(--qm-typo-buttons-line-height, 1.25);
    letter-spacing: var(--qm-typo-buttons-letter-spacing, 0);
    text-transform: var(--qm-typo-buttons-text-transform, none);
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-btn, 8px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

:is(.trd-button,.qm-btn):focus-visible {
    outline: 2px solid var(--qm-primary, #054f8e);
    outline-offset: 3px;
}

/* Nav mega menu ------------------------------------------------------------
 * Desktop presentation only. WordPress owns the items and the hierarchy; the
 * markup is one <li class="trd-mega-col"> per first-level submenu GROUP, and the
 * column count arrives as --qmt-mega-cols from the builder's "Mega Menu Columns"
 * control (auto resolves to the group count, clamped to 4). Every group is always
 * rendered, so a fixed count changes only the wrapping.
 *
 * Below the nav breakpoint the SAME markup becomes the ordinary stacked
 * tap-to-expand hierarchy: the panel stops floating, the grid collapses to one
 * column, and each group's list is hidden until its .trd-mega-toggle is used.
 * That toggle is the button trd-navigation.js already binds, so mobile needs no
 * second navigation system and no JavaScript here.
 */
.trd-mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: var(--qmt-mega-width, 760px);
    max-width: min(92vw, 1100px);
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--qm-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.trd-nav-menu--mega .trd-menu-item--level-0:hover > .trd-mega-panel,
.trd-nav-menu--mega .trd-menu-item--level-0:focus-within > .trd-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* A right-aligned main menu opens its dropdown from the right edge; the mega
   panel follows the same rule so a wide panel cannot extend past the viewport. */
.trd-nav-menu--align-right .trd-menu-item--level-0 > .trd-mega-panel {
    left: auto;
    right: 0;
}

.trd-mega-columns {
    display: grid;
    grid-template-columns: repeat(var(--qmt-mega-cols, 4), minmax(0, 1fr));
    gap: 4px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trd-mega-col {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 6px 0;
}

.trd-mega-col + .trd-mega-col {
    border-left: 1px solid var(--qm-border, #e2e8f0);
    padding-left: 24px;
}

.trd-mega-col-title {
    flex: 1 1 auto;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--qm-primary, #004AAD);
    text-decoration: none;
}

/* A group with nothing nested under it is a plain link in a grid, not a
 * heading, so it must not read as one. */
.trd-mega-col-title--leaf {
    color: var(--qm-body, #666);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.trd-mega-list {
    flex: 1 0 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trd-mega-list--nested {
    margin-top: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--qm-border, #e2e8f0);
}

.trd-mega-link {
    display: block;
    padding: 5px 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--qm-body, #666);
    text-decoration: none;
}

.trd-mega-link:hover,
.trd-mega-link:focus-visible {
    color: var(--qm-primary, #004AAD);
}

/* The tap-to-expand affordance belongs to the stacked layout only. */
.trd-mega-toggle {
    display: none;
    flex: 0 0 auto;
    align-self: center;
    padding: 4px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

@media (max-width: 991px) {
    .trd-mega-panel {
        position: static;
        flex: 0 0 100%;
        min-width: 0;
        max-width: none;
        padding: 0 0 0 14px;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .trd-mega-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .trd-mega-col {
        padding: 0;
        border: 0;
    }

    .trd-mega-col + .trd-mega-col {
        border-left: 0;
        padding-left: 0;
    }

    .trd-mega-col-title {
        flex: 0 1 auto;
        margin: 0;
        padding: 10px 0;
        font-size: 0.9375rem;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Collapsed until the group is expanded, which is what makes this the normal
     * hierarchical mobile menu rather than a 2/3/4 column desktop layout. */
    .trd-mega-list {
        display: none;
    }

    .trd-mega-col.is-expanded > .trd-mega-list {
        display: block;
    }

    .trd-mega-toggle {
        display: inline-flex;
    }

    .trd-mega-toggle svg {
        transition: transform .18s ease;
    }

    .trd-mega-col.is-expanded > .trd-mega-toggle svg,
    .trd-menu-item.is-expanded > .trd-mega-toggle svg {
        transform: rotate(var(--qmt-submenu-toggle-rotate, 180deg));
    }
}
/* Optional Button icon -----------------------------------------------------
 * The button is already inline-flex with align-items:center and a gap, so the
 * icon and label align natively. No absolute positioning is used, and the
 * element's own `gap` control is the icon spacing.
 * The icon is decorative: it is aria-hidden in the markup and must never
 * duplicate the button label for assistive technology.
 * Sized in `em` so it tracks the button's font-size and therefore responds to
 * responsive typography without a second size system. */
.trd-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
}

.trd-button-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: none;
    stroke: currentColor;
}

.trd-button-label {
    display: inline-block;
}

/* Primary Button */
:is(.trd-button--primary,.qm-btn--primary),
:is(.trd-button-primary,.qm-btn-primary) {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

:is(.trd-button--primary,.qm-btn--primary):hover,
:is(.trd-button-primary,.qm-btn-primary):hover {
    background-color: var(--qm-primary-dark, #043f72);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #ffffff;
}

/* Secondary Button */
:is(.trd-button--secondary,.qm-btn--secondary),
:is(.trd-button-secondary,.qm-btn-secondary) {
    background-color: var(--qm-secondary, #ff800b);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

:is(.trd-button--secondary,.qm-btn--secondary):hover,
:is(.trd-button-secondary,.qm-btn-secondary):hover {
    background-color: var(--qm-secondary-dark, #cc6609);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #ffffff;
}

/* Outline Button */
:is(.trd-button--outline,.qm-btn--outline),
:is(.trd-button-outline,.qm-btn-outline) {
    background-color: transparent;
    color: var(--qm-primary, #054f8e);
    border-color: var(--qm-primary, #054f8e);
}

:is(.trd-button--outline,.qm-btn--outline):hover,
:is(.trd-button-outline,.qm-btn-outline):hover {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Ghost / Plain Button */
:is(.trd-button--ghost,.qm-btn--ghost) {
    background-color: transparent;
    color: var(--qm-text-color, #334155);
    border-color: transparent;
}

:is(.trd-button--ghost,.qm-btn--ghost):hover {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
}

/* Sizes */
:is(.trd-button--sm,.trd-button-sm,.qm-btn--sm) {
    padding: 0.5rem 1.1rem;
    font-size: var(--text-s, 0.9rem);
    border-radius: var(--radius-s, 6px);
}

/* Component size must win over the global button's base padding. */
:is(.trd-button.trd-button--sm,.trd-button.trd-button-sm,.qm-btn.qm-btn--sm) {
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-s, 6px);
}

:is(.trd-button--lg,.trd-button-lg,.qm-btn--lg) {
    padding: 0.95rem 2.2rem;
    font-size: var(--text-l, 1.25rem);
    border-radius: var(--radius-m, 12px);
}

:is(.trd-button--pill,.trd-button-pill,.qm-btn--pill) {
    border-radius: var(--radius-pill, 9999px);
}

/* ==========================================================================
   2. Cards (:is(.trd-card,.qm-card))
   ========================================================================== */
:is(.trd-card,.qm-card) {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--radius-m, 14px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

:is(.trd-card--interactive,.qm-card--interactive):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--qm-primary-light, #dae5ee);
}

:is(.trd-card-media,.qm-card-media) {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--qm-base-ultra-light, #f8fafc);
}

:is(.trd-card-media,.qm-card-media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

:is(.trd-card--interactive,.qm-card--interactive):hover :is(.trd-card-media,.qm-card-media) img {
    transform: scale(1.05);
}

/* Modern direct-image Card: the image is a direct child of the Card and is
   styled without a media wrapper. The Card's own overflow clipping provides
   the crop boundary, so no extra wrapper is needed. Legacy saved Cards that
   still contain .trd-card-media keep the rules above. */
:is(.trd-card,.qm-card) > :is(.trd-card-image,.qm-card-image) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
    transition: transform 0.4s ease;
}
:is(.trd-card--interactive,.qm-card--interactive):hover > :is(.trd-card-image,.qm-card-image),
:is(.trd-card--zoom,.qm-card--zoom):hover > :is(.trd-card-image,.qm-card-image) {
    transform: scale(1.05);
}

/* Editor-only empty-image state. New Cards ship without a remote image; the
   builder shows a neutral placeholder until the author picks media. Frontend
   rendering never emits this node. */
.trd-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--qm-base-ultra-light, #f8fafc);
    border-bottom: 1px dashed var(--qm-base-light, #e2e8f0);
    color: var(--qmt-text-muted, #94a3b8);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

:is(.trd-card-body,.qm-card-body) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--space-s, 1.5rem);
}
:is(.trd-card--align-center,.qm-card--align-center) > :is(.trd-card-body,.qm-card-body) {
    align-items: center;
    text-align: center;
}
:is(.trd-card--align-right,.qm-card--align-right) > :is(.trd-card-body,.qm-card-body) {
    align-items: flex-end;
    text-align: right;
}
:is(.trd-card-badge,.qm-card-badge) {
    display: inline-block;
    margin-bottom: 0.55rem;
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, 0.72rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--qm-typo-small-color, var(--qm-primary, #054f8e));
}
:is(.trd-card-button,.qm-card-button) {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    margin-top: auto;
}
:is(.trd-card--align-center,.qm-card--align-center) > :is(.trd-card-body,.qm-card-body) > :is(.trd-card-button,.qm-card-button) {
    align-self: center;
}
:is(.trd-card--align-right,.qm-card--align-right) > :is(.trd-card-body,.qm-card-body) > :is(.trd-card-button,.qm-card-button) {
    align-self: flex-end;
}
:is(.trd-card-button-arrow,.qm-card-button-arrow) {
    line-height: 1;
}

/* Card button variants and sizes.
 *
 * The Design System intentionally emits a global `.trd-button` rule after this
 * stylesheet (background, border, radius, padding, font size). That rule is
 * correct for ordinary buttons, but it outranks the variant and size classes
 * on a Card button, so every Card looked like the global button regardless of
 * its own Button Style / Button Size setting.
 *
 * These selectors are deliberately scoped to a Card and kept at (0,2,0):
 * - they beat the global `.trd-button` rule at (0,1,0);
 * - the Card's generated compound rules are also (0,2,0) and are emitted
 *   later, so a per-card Button Background / Border / Padding / Radius
 *   override still wins;
 * - ordinary buttons outside a Card are untouched.
 *
 * Hover is (0,3,0), matching the generated `.trd-e-* .trd-card-button:hover`
 * rule, which is emitted later and therefore still wins.
 */
:is(.trd-card,.qm-card) .trd-button-primary {
    background: var(--qm-primary, #054f8e);
    border-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}
:is(.trd-card,.qm-card) .trd-button-primary:hover {
    background: var(--qm-primary-dark, #043f72);
    border-color: var(--qm-primary-dark, #043f72);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}
:is(.trd-card,.qm-card) .trd-button-secondary {
    background: var(--qm-secondary, #ff800b);
    border-color: var(--qm-secondary, #ff800b);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}
:is(.trd-card,.qm-card) .trd-button-secondary:hover {
    background: var(--qm-secondary-dark, #cc6609);
    border-color: var(--qm-secondary-dark, #cc6609);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}
:is(.trd-card,.qm-card) .trd-button-outline {
    background: transparent;
    border: 2px solid var(--qm-primary, #054f8e);
    color: var(--qm-primary, #054f8e);
    box-shadow: none;
}
:is(.trd-card,.qm-card) .trd-button-outline:hover {
    background: var(--qm-primary, #054f8e);
    border-color: var(--qm-primary, #054f8e);
    color: #ffffff;
}
:is(.trd-card,.qm-card) .trd-button-sm {
    padding: 0.5rem 1.1rem;
    font-size: var(--text-s, 0.9rem);
    border-radius: var(--radius-s, 6px);
}
:is(.trd-card,.qm-card) .trd-button-lg {
    padding: 0.95rem 2.2rem;
    font-size: var(--text-l, 1.25rem);
    border-radius: var(--radius-m, 12px);
}

:is(.trd-card-icon,.qm-card-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-m, 12px);
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

:is(.trd-card-title,.qm-card-title) {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

:is(.trd-card-title,.qm-card-title) a {
    color: inherit;
    text-decoration: none;
}

:is(.trd-card-title,.qm-card-title) a:hover {
    color: var(--qm-primary, #054f8e);
}

:is(.trd-card-text,.qm-card-text) {
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 1rem);
    font-weight: var(--qm-typo-paragraph-font-weight, 400);
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, #475569));
    margin-bottom: var(--space-s, 1.25rem);
    flex-grow: 1;
}

:is(.trd-card-footer,.qm-card-footer) {
    padding-top: var(--space-xs, 0.75rem);
    margin-top: auto;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   3. Touch-Friendly Slider / Carousel (:is(.trd-slider,.qm-slider))
   ========================================================================== */
:is(.trd-slider,.qm-slider) {
    position: relative !important;
    width: 100%;
    overflow: hidden;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
    clear: both;
}

:is(.trd-slider,.qm-slider)[data-dots-position="none"],
:is(.trd-slider,.qm-slider)[data-dots-position="sides"],
:is(.trd-slider,.qm-slider).trd-slider-dots-style--none,
:is(.trd-slider,.qm-slider):not(:has(.trd-slider-dots > *)) {
    padding-bottom: 0 !important;
}

:is(.trd-hero-slider,.qm-hero-slider) {
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

.trd-slider.trd-slider-nav--sides,
.qm-slider.qm-slider-nav--sides {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

:is(.trd-slider-track,.qm-slider-track) {
    display: flex;
    gap: var(--grid-gap, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding: 0.5rem 0.25rem;
    touch-action: pan-y;
}

:is(.trd-slider,.qm-slider)[data-slides-desktop="1"] :is(.trd-slider-track,.qm-slider-track) {
    padding: 0;
}

:is(.trd-slider-track,.qm-slider-track)::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

:is(.trd-slide,.qm-slide) {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    :is(.trd-slider--cols-2,.qm-slider--cols-2) :is(.trd-slide,.qm-slide) {
        flex: 0 0 calc(50% - (var(--grid-gap, 1.5rem) / 2));
        max-width: calc(50% - (var(--grid-gap, 1.5rem) / 2));
    }
}

@media (min-width: 1024px) {
    :is(.trd-slider--cols-3,.qm-slider--cols-3) :is(.trd-slide,.qm-slide) {
        flex: 0 0 calc(33.333% - (var(--grid-gap, 1.5rem) * 2 / 3));
        max-width: calc(33.333% - (var(--grid-gap, 1.5rem) * 2 / 3));
    }
    :is(.trd-slider--cols-4,.qm-slider--cols-4) :is(.trd-slide,.qm-slide) {
        flex: 0 0 calc(25% - (var(--grid-gap, 1.5rem) * 3 / 4));
        max-width: calc(25% - (var(--grid-gap, 1.5rem) * 3 / 4));
    }
}

/* Fade Transition Mode */
:is(.trd-slider--fade,.qm-slider--fade) :is(.trd-slider-track,.qm-slider-track) {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
}
:is(.trd-slider--fade,.qm-slider--fade) :is(.trd-slide,.qm-slide) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trd-slider-duration, 500ms) var(--trd-slider-easing, ease), visibility var(--trd-slider-duration, 500ms) var(--trd-slider-easing, ease);
    z-index: 1;
}
:is(.trd-slider--fade,.qm-slider--fade) :is(.trd-slide,.qm-slide).is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slider Controls & Navigation Positioning */
/* Autoplay pause/play control.
 *
 * The button is appended by qmt-carousel.js only when autoplay is active. If
 * the carousel already has a bottom controls row it joins that row; otherwise
 * it is positioned in the free bottom-right corner. */
:is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #ffffff;
    cursor: pointer;
    flex: 0 0 auto;
    line-height: 1;
    z-index: 6;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
:is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle):hover {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.75);
}
:is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle):focus-visible {
    outline: 2px solid var(--qm-primary, #054f8e);
    outline-offset: 3px;
}
:is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle) svg {
    display: block;
    width: 1rem;
    height: 1rem;
}
:is(.trd-slider,.qm-slider) > :is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle) {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
}
@media (max-width: 640px) {
    :is(.trd-slider,.qm-slider) > :is(.trd-slider-autoplay-toggle,.qm-slider-autoplay-toggle) {
        right: 0.6rem;
        bottom: 0.6rem;
    }
}

:is(.trd-slider-controls,.qm-slider-controls) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 15;
}

/* Center Bottom (Default & Primary) */
:is(.trd-slider-controls--bottom-center,.qm-slider-controls--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-controls--bottom-center,.qm-slider-controls--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Bottom Right */
:is(.trd-slider-controls--bottom-right,.qm-slider-controls--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-controls--bottom-right,.qm-slider-controls--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Bottom Left */
:is(.trd-slider-controls--bottom-left,.qm-slider-controls--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-controls--bottom-left,.qm-slider-controls--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

/* Top Right */
:is(.trd-slider-controls--top-right,.qm-slider-controls--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-controls--top-right,.qm-slider-controls--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

/* Top Left */
:is(.trd-slider-controls--top-left,.qm-slider-controls--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-controls--top-left,.qm-slider-controls--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

/* Center Right (Middle vertical stack) */
:is(.trd-slider-controls--center-right,.qm-slider-controls--center-right) {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    z-index: 25;
}

/* Sides Overlay Floating Arrows */
:is(.trd-slider-btn--side-prev,.qm-slider-btn--side-prev) {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
}
:is(.trd-slider-btn--side-next,.qm-slider-btn--side-next) {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
}
:is(.trd-slider-btn--side-prev,.qm-slider-btn--side-prev):hover,
:is(.trd-slider-btn--side-next,.qm-slider-btn--side-next):hover {
    transform: translateY(-50%) scale(1.05) !important;
}
:is(.trd-slider-btn--side-prev,.qm-slider-btn--side-prev):active,
:is(.trd-slider-btn--side-next,.qm-slider-btn--side-next):active {
    transform: translateY(-50%) scale(0.96) !important;
}

@media (max-width: 991px) {
    :is(.trd-slider-btn--side-prev,.qm-slider-btn--side-prev) {
        left: 10px !important;
    }
    :is(.trd-slider-btn--side-next,.qm-slider-btn--side-next) {
        right: 10px !important;
    }
}

@media (max-width: 640px) {
    :is(.trd-slider-btn--side-prev,.qm-slider-btn--side-prev) {
        left: 2px !important;
    }
    :is(.trd-slider-btn--side-next,.qm-slider-btn--side-next) {
        right: 2px !important;
    }
}
/* Outside arrows for Image / Content Carousel.
 *
 * The slider itself becomes the positioning context and reserves a gutter on
 * each side; the track stays the only horizontally scrollable box, so cards
 * are not clipped. Box-sizing keeps the gutter inside the element width, and
 * the responsive values shrink the gutter rather than letting it force the
 * page wider. */
.trd-slider.trd-slider--arrows-outside {
    overflow: visible;
    box-sizing: border-box;
    padding-left: 58px;
    padding-right: 58px;
}
.trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-prev:hover,
.trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-next:hover {
    transform: translateY(-50%) scale(1.05);
}
@media (max-width: 991px) {
    .trd-slider.trd-slider--arrows-outside {
        padding-left: 46px;
        padding-right: 46px;
    }
}
@media (max-width: 640px) {
    .trd-slider.trd-slider--arrows-outside {
        padding-left: 38px;
        padding-right: 38px;
    }
    .trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-prev,
    .trd-slider.trd-slider--arrows-outside > .trd-slider-btn--outside-next {
        width: 2rem;
        height: 2rem;
    }
}

:is(.trd-slider-dots--bottom,.qm-slider-dots--bottom) {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   INDEPENDENT SLIDER ARROWS POSITIONING
   ═══════════════════════════════════════════════════════════════ */
:is(.trd-slider-arrows-pos--bottom-center,.qm-slider-arrows-pos--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-arrows-pos--bottom-center,.qm-slider-arrows-pos--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--bottom-right,.qm-slider-arrows-pos--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-arrows-pos--bottom-right,.qm-slider-arrows-pos--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--bottom-left,.qm-slider-arrows-pos--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-arrows-pos--bottom-left,.qm-slider-arrows-pos--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--top-right,.qm-slider-arrows-pos--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-arrows-pos--top-right,.qm-slider-arrows-pos--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--top-left,.qm-slider-arrows-pos--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-arrows-pos--top-left,.qm-slider-arrows-pos--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--center-right,.qm-slider-arrows-pos--center-right) {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 25;
}

:is(.trd-slider-arrows-pos--none,.qm-slider-arrows-pos--none) {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   INDEPENDENT SLIDER DOTS / PAGINATION POSITIONING
   ═══════════════════════════════════════════════════════════════ */
:is(.trd-slider-dots-pos--bottom-center,.qm-slider-dots-pos--bottom-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--bottom-center,.qm-slider-dots-pos--bottom-center) {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--bottom-right,.qm-slider-dots-pos--bottom-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-right: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--bottom-right,.qm-slider-dots-pos--bottom-right) {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--bottom-left,.qm-slider-dots-pos--bottom-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1.25rem;
    padding-left: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--bottom-left,.qm-slider-dots-pos--bottom-left) {
    position: absolute;
    bottom: 1.75rem;
    left: 2rem;
    width: auto;
    margin-top: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--top-center,.qm-slider-dots-pos--top-center) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--top-center,.qm-slider-dots-pos--top-center) {
    position: absolute;
    top: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--top-right,.qm-slider-dots-pos--top-right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--top-right,.qm-slider-dots-pos--top-right) {
    position: absolute;
    top: 1.75rem;
    right: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--top-left,.qm-slider-dots-pos--top-left) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dots-pos--top-left,.qm-slider-dots-pos--top-left) {
    position: absolute;
    top: 1.75rem;
    left: 2rem;
    width: auto;
    margin-bottom: 0;
    z-index: 24;
}

:is(.trd-slider-dots-pos--none,.qm-slider-dots-pos--none) {
    display: none !important;
}

:is(.trd-slider-nav,.qm-slider-nav) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
:is(.trd-slider-nav--vertical,.qm-slider-nav--vertical) {
    flex-direction: column;
}

:is(.trd-slider-btn,.qm-slider-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-circle, 50%);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    color: var(--qm-heading-color, #0f172a);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    pointer-events: auto;
    flex-shrink: 0;
}

:is(.trd-slider-btn,.qm-slider-btn):hover {
    background: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(5, 79, 142, 0.25);
}

:is(.trd-slider-btn,.qm-slider-btn):active {
    transform: scale(0.96);
}

:is(.trd-slider-btn,.qm-slider-btn):disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Glassmorphic Prominent Styling for Hero Slider Controls */
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-btn,.qm-slider-btn) {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-btn,.qm-slider-btn):hover {
    background: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
}

:is(.trd-slider-dots,.qm-slider-dots) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

:is(.trd-slider-dot,.qm-slider-dot) {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill, 9999px);
    background: var(--qm-base-light, #cbd5e1);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

:is(.trd-slider-dot,.qm-slider-dot).is-active {
    width: 28px;
    background: var(--qm-primary, #054f8e);
}

:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dot,.qm-slider-dot) {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
:is(.trd-hero-slider,.qm-hero-slider) :is(.trd-slider-dot,.qm-slider-dot).is-active {
    background: #ffffff;
}

/* Arrow Shapes & Preset Styles */
.trd-slider-arrows--circle :is(.trd-slider-btn,.qm-slider-btn) {
    border-radius: var(--radius-circle, 50%) !important;
}
.trd-slider-arrows--rounded :is(.trd-slider-btn,.qm-slider-btn) {
    border-radius: var(--radius-m, 8px) !important;
}
.trd-slider-arrows--square :is(.trd-slider-btn,.qm-slider-btn) {
    border-radius: 0px !important;
}
.trd-slider-arrows--minimal :is(.trd-slider-btn,.qm-slider-btn) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.trd-slider-arrows--minimal :is(.trd-slider-btn,.qm-slider-btn):hover {
    background: rgba(0, 0, 0, 0.08) !important;
}
:is(.trd-hero-slider,.qm-hero-slider).trd-slider-arrows--minimal :is(.trd-slider-btn,.qm-slider-btn) {
    color: #ffffff !important;
}
:is(.trd-hero-slider,.qm-hero-slider).trd-slider-arrows--minimal :is(.trd-slider-btn,.qm-slider-btn):hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Dots Styles Presets */
/* Classic Dots: every indicator is circular and uniform; only colour changes.
 * Kept as a separate style from the default "expanding" dots so the original
 * behaviour (value `dots`) remains untouched for every saved carousel. */
.trd-slider-dots-style--classic :is(.trd-slider-dot,.qm-slider-dot) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.trd-slider-dots-style--classic :is(.trd-slider-dot,.qm-slider-dot).is-active {
    width: 10px;
    border-radius: 50%;
    background: var(--qm-primary, #054f8e);
}
.trd-slider-dots-style--pills :is(.trd-slider-dot,.qm-slider-dot) {
    width: 18px;
    height: 6px;
    border-radius: 9999px;
}
.trd-slider-dots-style--pills :is(.trd-slider-dot,.qm-slider-dot).is-active {
    width: 32px;
}
.trd-slider-dots-style--lines :is(.trd-slider-dot,.qm-slider-dot) {
    width: 24px;
    height: 3px;
    border-radius: 0;
}
.trd-slider-dots-style--lines :is(.trd-slider-dot,.qm-slider-dot).is-active {
    width: 36px;
}

/* Image Carousel Layout */
.trd-image-carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}
.trd-image-carousel-item.is-centered {
    margin: 0 auto;
}
.trd-image-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.trd-image-carousel-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin: 0 auto;
    transition: transform 0.2s ease;
}
.trd-image-carousel-caption {
    margin-top: 0.5rem;
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, var(--text-sm, 13px));
    line-height: var(--qm-typo-small-line-height, 1.5);
    color: var(--qm-typo-small-color, var(--qm-color-text-muted, #64748b));
}

/* Hero Slider Layout */
:is(.trd-hero-slider,.qm-hero-slider) {
    --trd-hero-min: var(--trd-hero-min-desktop, 550px);
}
@media (max-width: 991px) {
    :is(.trd-hero-slider,.qm-hero-slider) {
        --trd-hero-min: var(--trd-hero-min-tablet, 450px);
    }
}
@media (max-width: 640px) {
    :is(.trd-hero-slider,.qm-hero-slider) {
        --trd-hero-min: var(--trd-hero-min-mobile, 380px);
    }
}

.trd-hero-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--trd-hero-min, 550px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    overflow: hidden;
}
.trd-hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.trd-hero-slide-content-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: inherit;
    box-sizing: border-box;
    padding: 3.5rem 2.5rem;
}
.trd-hero-pos--top-left { align-items: flex-start; justify-content: flex-start; }
.trd-hero-pos--top-center { align-items: flex-start; justify-content: center; }
.trd-hero-pos--top-right { align-items: flex-start; justify-content: flex-end; }
.trd-hero-pos--center-left { align-items: center; justify-content: flex-start; }
.trd-hero-pos--center { align-items: center; justify-content: center; }
.trd-hero-pos--center-right { align-items: center; justify-content: flex-end; }
.trd-hero-pos--bottom-left { align-items: flex-end; justify-content: flex-start; }
.trd-hero-pos--bottom-center { align-items: flex-end; justify-content: center; }
.trd-hero-pos--bottom-right { align-items: flex-end; justify-content: flex-end; }

.trd-hero-slide-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.trd-hero-align--left { align-items: flex-start; text-align: left; }
.trd-hero-align--center { align-items: center; text-align: center; }
.trd-hero-align--right { align-items: flex-end; text-align: right; }
.trd-hero-align--left :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: left; }
.trd-hero-align--center :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: center; }
.trd-hero-align--right :is(h1,h2,h3,h4,h5,h6,p,div,span,a) { text-align: right; }

/* ==========================================================================
   4. Semantic Accordion / FAQ (<details> / <summary>)
   ========================================================================== */
:is(.trd-accordion,.qm-accordion) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

:is(.trd-accordion-item,.qm-accordion-item) {
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-m, 8px);
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(.trd-accordion-item,.qm-accordion-item)[open] {
    border-color: var(--qm-primary-light, #dae5ee);
    box-shadow: var(--shadow-sm);
}

:is(.trd-accordion-item,.qm-accordion-item) summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    font-family: var(--qm-typo-body-font-family, inherit);
    font-size: var(--qm-typo-body-font-size, var(--text-l, 1.15rem));
    font-weight: 600;
    line-height: var(--qm-typo-body-line-height, 1.5);
    color: var(--qm-typo-body-color, inherit);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.2s ease;
}

:is(.trd-accordion-item,.qm-accordion-item) summary::-webkit-details-marker {
    display: none;
}

:is(.trd-accordion-item,.qm-accordion-item) summary:hover {
    color: #ffffff !important;
}
:is(.trd-accordion-item,.qm-accordion-item) summary:hover .trd-accordion-title,
:is(.trd-accordion-item,.qm-accordion-item) summary:hover .qm-accordion-title {
    color: #ffffff !important;
}
:is(.trd-accordion-item,.qm-accordion-item) summary:hover :is(.trd-accordion-chevron,.qm-accordion-chevron) {
    stroke: #ffffff !important;
}

:is(.trd-accordion-chevron,.qm-accordion-chevron) {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

:is(.trd-accordion-item,.qm-accordion-item)[open] :is(.trd-accordion-chevron,.qm-accordion-chevron) {
    transform: rotate(180deg);
}

:is(.trd-accordion-content,.qm-accordion-content) {
    padding: 0 1.5rem 1.25rem 1.5rem;
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 1rem);
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, #475569));
}

/* ==========================================================================
   5. Stats Counter / Metrics (:is(.trd-stats,.qm-stats))
   ========================================================================== */
:is(.trd-stats-grid,.qm-stats-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-m, 2rem);
    text-align: center;
    width: 100%;
}

:is(.trd-stat-item,.qm-stat-item) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-s, 1.5rem);
    border-radius: var(--radius-m, 14px);
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    border: 1px solid var(--qm-base-light, #e2e8f0);
}

:is(.trd-stat-number,.qm-stat-number) {
    font-size: var(--h1, 3rem);
    font-weight: 800;
    color: var(--qm-primary, #054f8e);
    line-height: 1.1;
    margin-bottom: 0.35rem;
    /* Stable advance width per digit. Without this the count-up re-measures the
       number on every frame, so the grid track and the item's centring shift
       visibly while animating. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 1ch;
    white-space: nowrap;
}

.trd-stat-value {
    /* The count-up's width reservation is emitted per counter as
       `min-width: calc(N * 1ch)` on THIS span, with N the length of the final
       formatted value. `min-width` is ignored on non-replaced inline boxes, so
       without `inline-block` the reservation silently does nothing and the
       number still re-measures on every frame. The sibling prefix/suffix spans
       stay inline — they are static, so they need no reservation. */
    display: inline-block;
}

:is(.trd-stat-label,.qm-stat-label) {
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   6. Split Content Section (:is(.trd-split,.qm-split))
   ========================================================================== */
:is(.trd-split,.qm-split) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l, 3rem);
    align-items: center;
    width: 100%;
}

:is(.trd-split--reverse,.qm-split--reverse) {
    direction: rtl;
}

:is(.trd-split--reverse,.qm-split--reverse) > * {
    direction: ltr;
}

:is(.trd-split-media,.qm-split-media) {
    border-radius: var(--radius-l, 20px);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

:is(.trd-split-media,.qm-split-media) img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 860px) {
    :is(.trd-split,.qm-split) {
        grid-template-columns: 1fr;
        gap: var(--space-m, 2rem);
    }
    :is(.trd-split--reverse,.qm-split--reverse) {
        direction: ltr;
    }
}

/* ==========================================================================
   7. Testimonials (:is(.trd-testimonial,.qm-testimonial))
   ========================================================================== */
:is(.trd-testimonial,.qm-testimonial) {
    background-color: #ffffff;
    border-radius: var(--radius-m, 14px);
    padding: var(--space-m, 2rem);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

:is(.trd-testimonial-stars,.qm-testimonial-stars) {
    color: #f59e0b;
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

:is(.trd-testimonial-quote,.qm-testimonial-quote) {
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, var(--text-mm, 1.15rem));
    font-weight: var(--qm-typo-paragraph-font-weight, 400);
    font-style: italic;
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, #334155));
    margin: 0 0 1.5rem 0;
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
}

:is(.trd-testimonial-author,.qm-testimonial-author) {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

:is(.trd-testimonial-avatar,.qm-testimonial-avatar) {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-circle, 50%);
    object-fit: cover;
}

:is(.trd-testimonial-meta,.qm-testimonial-meta) strong {
    display: block;
    color: var(--qm-heading-color, #0f172a);
    font-size: var(--text-m, 1rem);
}

:is(.trd-testimonial-meta,.qm-testimonial-meta) span {
    font-size: var(--text-xs, 0.85rem);
    color: var(--qm-base, #64748b);
}

/* ==========================================================================
   8. Header & Navigation (:is(.trd-site-header,.qm-site-header))
   ========================================================================== */
:is(.trd-site-header,.qm-site-header) {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid var(--qm-base-light, #e2e8f0);
    position: relative;
    z-index: 1000;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

:is(.trd-site-header,.qm-site-header).is-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
}

:is(.trd-site-header,.qm-site-header).is-scrolled {
    box-shadow: var(--shadow-md);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

:is(.trd-site-header,.qm-site-header).is-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

:is(.trd-site-header,.qm-site-header).is-transparent.is-scrolled {
    background-color: #ffffff;
    border-bottom-color: var(--qm-base-light, #e2e8f0);
}

:is(.trd-header-inner,.qm-header-inner) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    transition: height 0.25s ease;
}

:is(.trd-site-header,.qm-site-header).is-scrolled :is(.trd-header-inner,.qm-header-inner) {
    height: 4.25rem;
}

:is(.trd-brand,.qm-brand) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--qm-heading-color, #0f172a);
    font-size: var(--h4, 1.4rem);
    font-weight: 700;
}

:is(.trd-brand,.qm-brand) img {
    max-height: 2.75rem;
    width: auto;
}

/* Desktop Navigation Menu */
:is(.trd-nav-desktop,.qm-nav-desktop) {
    display: flex;
    align-items: center;
    gap: 2rem;
}

:is(.trd-nav-desktop,.qm-nav-desktop) ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

:is(.trd-nav-desktop,.qm-nav-desktop) li {
    position: relative;
}

:is(.trd-nav-desktop,.qm-nav-desktop) a {
    color: var(--qm-heading-color, #0f172a);
    font-weight: 500;
    font-size: var(--text-m, 1rem);
    text-decoration: none;
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

:is(.trd-nav-desktop,.qm-nav-desktop) a:hover,
:is(.trd-nav-desktop,.qm-nav-desktop) li.current-menu-item > a {
    color: var(--qm-primary, #054f8e);
}

/* Dropdown Menus */
:is(.trd-nav-desktop,.qm-nav-desktop) .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: var(--radius-m, 12px);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1010;
}

:is(.trd-nav-desktop,.qm-nav-desktop) li:hover > .sub-menu,
:is(.trd-nav-desktop,.qm-nav-desktop) li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

:is(.trd-nav-desktop,.qm-nav-desktop) .sub-menu a {
    padding: 0.65rem 1.25rem;
    display: block;
    font-size: var(--text-s, 0.95rem);
}

:is(.trd-nav-desktop,.qm-nav-desktop) .sub-menu a:hover {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
}

/* Mobile Toggle & Drawer */
:is(.trd-menu-toggle,.qm-menu-toggle) {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-s, 8px);
    cursor: pointer;
    color: var(--qm-heading-color, #0f172a);
    padding: 0;
}

:is(.trd-menu-toggle,.qm-menu-toggle):focus-visible {
    outline: 2px solid var(--qm-primary, #054f8e);
}

:is(.trd-menu-toggle,.qm-menu-toggle) svg {
    width: 1.5rem;
    height: 1.5rem;
}

:is(.trd-nav-mobile,.qm-nav-mobile) {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

:is(.trd-nav-mobile,.qm-nav-mobile).is-open {
    opacity: 1;
    visibility: visible;
}

:is(.trd-mobile-drawer,.qm-mobile-drawer) {
    position: absolute;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

:is(.trd-nav-mobile,.qm-nav-mobile).is-open :is(.trd-mobile-drawer,.qm-mobile-drawer) {
    transform: translateX(0);
}

:is(.trd-mobile-drawer-header,.qm-mobile-drawer-header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--qm-base-light, #e2e8f0);
    padding-bottom: 1rem;
}

:is(.trd-mobile-drawer-close,.qm-mobile-drawer-close) {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--qm-heading-color, #0f172a);
    padding: 0.5rem;
}

:is(.trd-mobile-menu,.qm-mobile-menu) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

:is(.trd-mobile-menu,.qm-mobile-menu) a {
    display: block;
    padding: 0.75rem 0.5rem;
    font-size: var(--text-l, 1.15rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    border-radius: var(--radius-s, 8px);
}

:is(.trd-mobile-menu,.qm-mobile-menu) a:hover {
    background: var(--qm-primary-ultra-light, #f3f6f9);
    color: var(--qm-primary, #054f8e);
}

:is(.trd-mobile-cta,.qm-mobile-cta) {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
}

@media (max-width: 991px) {
    :is(.trd-nav-desktop,.qm-nav-desktop) {
        display: none;
    }
    :is(.trd-menu-toggle,.qm-menu-toggle) {
        display: inline-flex;
    }
    :is(.trd-nav-mobile,.qm-nav-mobile) {
        display: block;
    }
}

/* ==========================================================================
   9. Footer (:is(.trd-site-footer,.qm-site-footer))
   ========================================================================== */
:is(.trd-site-footer,.qm-site-footer) {
    background-color: var(--qm-base-ultra-dark, #0f172a);
    color: #94a3b8;
    padding-top: var(--space-xl, 4rem);
    padding-bottom: var(--space-m, 2rem);
}

:is(.trd-footer-grid,.qm-footer-grid) {
    display: grid;
    grid-template-columns: 2fr repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-l, 3rem);
    margin-bottom: var(--space-l, 3rem);
}

:is(.trd-footer-col,.qm-footer-col) h4,
:is(.trd-footer-col,.qm-footer-col) .widget-title {
    color: #ffffff;
    font-size: var(--text-l, 1.15rem);
    margin-bottom: 1.25rem;
    font-weight: 600;
}

:is(.trd-footer-col,.qm-footer-col) ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

:is(.trd-footer-col,.qm-footer-col) a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease;
}

:is(.trd-footer-col,.qm-footer-col) a:hover {
    color: var(--qm-secondary, #ff800b);
}

:is(.trd-footer-bottom,.qm-footer-bottom) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: var(--text-s, 0.9rem);
}

@media (max-width: 768px) {
    :is(.trd-footer-grid,.qm-footer-grid) {
        grid-template-columns: 1fr;
    }
    :is(.trd-footer-bottom,.qm-footer-bottom) {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   10. Hero Section (:is(.trd-hero,.qm-hero))
   ========================================================================== */
:is(.trd-hero,.qm-hero) {
    position: relative;
    padding-top: calc(var(--space-section) * 1.2);
    padding-bottom: var(--space-section);
    background: linear-gradient(135deg, #ffffff 0%, var(--qm-primary-ultra-light, #f3f6f9) 100%);
    overflow: clip;
}

:is(.trd-hero-badge,.qm-hero-badge) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.95rem;
    background-color: var(--qm-primary-light, #dae5ee);
    color: var(--qm-primary-dark, #043f72);
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-s, 0.9rem);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

:is(.trd-hero-title,.qm-hero-title) {
    font-size: var(--h1, 3.5rem);
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

:is(.trd-hero-title,.qm-hero-title) span.highlight {
    color: var(--qm-primary, #054f8e);
}

:is(.trd-hero-description,.qm-hero-description) {
    font-size: var(--text-l, 1.25rem);
    line-height: 1.6;
    color: var(--qm-text-color, #475569);
    margin-bottom: 2rem;
    max-width: 640px;
}

:is(.trd-hero-actions,.qm-hero-actions) {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================================
   11. Call to Action Banner (:is(.trd-cta,.qm-cta))
   ========================================================================== */
:is(.trd-cta-banner,.qm-cta-banner) {
    background: linear-gradient(135deg, var(--qm-primary, #054f8e) 0%, var(--qm-primary-ultra-dark, #032f55) 100%);
    border-radius: var(--radius-l, 20px);
    padding: var(--space-l, 3.5rem) var(--space-m, 2rem);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

:is(.trd-cta-banner,.qm-cta-banner) h2 {
    color: #ffffff;
    font-size: var(--h2, 2.5rem);
    margin-bottom: 1rem;
}

:is(.trd-cta-banner,.qm-cta-banner) p {
    color: #e2e8f0;
    font-size: var(--text-l, 1.2rem);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* ==========================================================================
   12. Standard WordPress Post & Loop Styling
   ========================================================================== */
:is(.trd-post-meta,.qm-post-meta) {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--text-s, 0.9rem);
    color: var(--qm-base, #64748b);
    margin-bottom: 1rem;
}

:is(.trd-post-content,.qm-post-content) {
    line-height: var(--text-line-height, 1.7);
    font-size: var(--text-m, 1.05rem);
}

:is(.trd-post-content,.qm-post-content) p {
    margin-bottom: 1.5rem;
}

:is(.trd-post-content,.qm-post-content) img {
    border-radius: var(--radius-m, 12px);
    margin: 2rem 0;
}

/* WordPress Core Alignments */
.alignwide {
    width: 100vw;
    max-width: var(--container-width, 1330px);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left;
    margin-right: var(--space-m, 1.5rem);
    margin-bottom: var(--space-s, 1rem);
}

.alignright {
    float: right;
    margin-left: var(--space-m, 1.5rem);
    margin-bottom: var(--space-s, 1rem);
}

/* Pagination */
:is(.trd-pagination,.qm-pagination) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-l, 3rem);
}

:is(.trd-pagination,.qm-pagination) .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-s, 8px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    color: var(--qm-heading-color, #0f172a);
    font-weight: 600;
}

:is(.trd-pagination,.qm-pagination) .page-numbers.current {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
}

:is(.trd-pagination,.qm-pagination) .page-numbers:hover:not(.current) {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    border-color: var(--qm-primary, #054f8e);
}

/* --------------------------------------------------------------------------
   Standalone Pagination element, and the Query Loop's own pager.
   --------------------------------------------------------------------------
   The rules above style `.trd-pagination` for the CLASSIC the_posts_pagination()
   markup, whose links carry `.page-numbers`. Both pagers in QMT use those same
   class names, so one set of link styles covers a main-query pager, a loop
   pager and a classic pager alike.

   `.trd-ql-*` is the Query Loop's inline pager. It shipped with NO stylesheet at
   all - those class names appeared only in the PHP that emitted them - so a
   loop's pager has been rendering as unstyled inline text. They are given the
   same visual treatment here rather than a parallel one, so a loop pager and a
   standalone pager cannot drift apart. */

/* ==========================================================================
   BREADCRUMBS
   ==========================================================================
   One trail, every context. The element is a plain div and the server drops a
   <nav> inside it, exactly as Pagination does - a <nav> inside a <nav> is invalid.

   These rules are the DEFAULTS only. Every one of them is overridable through
   the shared compound part system (COMPOUND_PART_SELECTORS.breadcrumbs), which
   addresses .trd-breadcrumbs__link, __current, __sep, __list, __item and __home.
   Nothing here is required for the element to work, so the rules stay small and
   mostly reset the user-agent's own list styling. */

.trd-breadcrumbs-element {
    width: 100%;
}

/* The list is a real ordered list, so the markers are removed rather than the
   list semantics being replaced with spans. Screen readers still get the
   position, and the visual order is the DOM order. */
.trd-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.trd-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

/* A separator is punctuation the reader already gets from the list structure, so
   it is aria-hidden in the markup and only ever a visual gap-filler here. It is
   inline so it sits on the text baseline rather than stretching to the row. */
.trd-breadcrumbs__sep {
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
}

.trd-breadcrumbs__sep svg {
    width: 1em;
    height: 1em;
}

/* The current item is NOT a link. It reads as current by weight rather than by a
   colour an author can make identical to the links, and the aria-current in the
   markup carries the same meaning for assistive technology. */
.trd-breadcrumbs__current {
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.trd-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.trd-breadcrumbs__link:hover {
    text-decoration: underline;
}

.trd-breadcrumbs__home,
.trd-breadcrumbs__home-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.trd-breadcrumbs__home-icon svg,
.trd-breadcrumbs__sep-icon svg {
    width: 1em;
    height: 1em;
}

/* The canvas placeholder stands in for a trail the server has not returned yet.
   It is deliberately muted so it never reads as the finished result. */
.trd-breadcrumbs--pending .trd-breadcrumbs__placeholder {
    opacity: .55;
}

.trd-pagination-element {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* The element owns the spacing; when merged as a single nav root or wrapped, remove extra top margin. */
.trd-pagination-element.trd-pagination,
.trd-pagination-element > .trd-pagination {
    margin-top: 0;
}

.trd-pagination .page-numbers.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.trd-pagination .page-numbers.gap,
.trd-ql-pagination .trd-ql-gap {
    border-color: transparent;
    background: none;
    min-width: 1.5rem;
    padding: 0;
}

/* Previous / Next keeps the page counter readable rather than making it look
   like a clickable page number. */
.trd-pagination .page-numbers.pageinfo,
.trd-ql-pagination .trd-ql-pageinfo {
    border-color: transparent;
    background: none;
    min-width: auto;
    font-weight: 500;
    color: var(--qm-text-muted, #475569);
}

.trd-pagination--minimal .page-numbers,
.trd-ql-pagination--minimal .trd-ql-page {
    border-color: transparent;
    background: none;
    min-width: 2rem;
}

.trd-pagination--pills .page-numbers,
.trd-ql-pagination--pills .trd-ql-page {
    border-radius: 999px;
}

/* The Query Loop's inline pager, which had no styles until now. */
.trd-ql-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-l, 3rem);
    flex-wrap: wrap;
}

.trd-ql-pagination .trd-ql-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-s, 8px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    color: var(--qm-heading-color, #0f172a);
    font-weight: 600;
    text-decoration: none;
}

.trd-ql-pagination .trd-ql-page.is-current {
    background-color: var(--qm-primary, #054f8e);
    color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
}

.trd-ql-pagination .trd-ql-page:hover:not(.is-current):not(.is-disabled) {
    background-color: var(--qm-primary-ultra-light, #f3f6f9);
    border-color: var(--qm-primary, #054f8e);
}

.trd-ql-pagination .trd-ql-page.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ==========================================================================
   13. Icon Box (:is(.trd-icon-box,.qm-icon-box))
   ========================================================================== */
:is(.trd-icon-box,.qm-icon-box) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: var(--space-s, 1.5rem);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-m, 14px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

:is(.trd-icon-box,.qm-icon-box):hover {
    border-color: var(--qm-primary-light, #dae5ee);
}

:is(.trd-icon-box--left,.qm-icon-box--left) {
    flex-direction: row;
    align-items: flex-start;
}

:is(.trd-icon-box--center,.qm-icon-box--center) {
    align-items: center;
    text-align: center;
}

:is(.trd-icon-box--center,.qm-icon-box--center) :is(.trd-icon-box-icon,.qm-icon-box-icon) {
    margin-left: auto;
    margin-right: auto;
}

:is(.trd-icon-box--center,.qm-icon-box--center) :is(.trd-icon-box-body,.qm-icon-box-body) {
    text-align: center;
    width: 100%;
}

:is(.trd-icon-box--center,.qm-icon-box--center) :is(.trd-icon-box-title,.qm-icon-box-title),
:is(.trd-icon-box--center,.qm-icon-box--center) :is(.trd-icon-box-desc,.qm-icon-box-desc) {
    text-align: center;
}

:is(.trd-icon-box-icon,.qm-icon-box-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: var(--radius-m, 12px);
    background-color: var(--qm-primary-ultra-light, #eff6ff);
    color: var(--qm-primary, #054f8e);
}

:is(.trd-icon-box-icon,.qm-icon-box-icon) svg {
    width: 24px;
    height: 24px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    flex-shrink: 0;
}

:is(.trd-icon-box-icon,.qm-icon-box-icon) svg:not([fill="currentColor"]):not([fill^="#"]):not([fill^="rgb"]) {
    stroke: currentColor;
    fill: none;
}

:is(.trd-icon-box-icon,.qm-icon-box-icon) svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

:is(.trd-icon-box-body,.qm-icon-box-body) {
    flex: 1;
}

:is(.trd-icon-box-title,.qm-icon-box-title) {
    margin: 0 0 0.5rem 0;
}

:is(.trd-icon-box-desc,.qm-icon-box-desc) {
    margin: 0;
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, var(--text-m, 1rem));
    line-height: var(--qm-typo-paragraph-line-height, var(--text-line-height, 1.6));
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, #64748b));
}

/* ==========================================================================
   14. Image Box (:is(.trd-image-box,.qm-image-box))
   ========================================================================== */
:is(.trd-image-box,.qm-image-box) {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-m, 14px);
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.trd-image-box-media,.qm-image-box-media) {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--qm-base-ultra-light, #f8fafc);
}

:is(.trd-image-box-media,.qm-image-box-media) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

:is(.trd-image-box-body,.qm-image-box-body) {
    padding: var(--space-s, 1.5rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}

:is(.trd-image-box-title,.qm-image-box-title) {
    margin: 0 0 0.5rem 0;
}

:is(.trd-image-box-desc,.qm-image-box-desc) {
    margin: 0 0 1rem 0;
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 1rem);
    line-height: var(--qm-typo-paragraph-line-height, var(--text-line-height, 1.6));
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, #475569));
    flex-grow: 1;
}

/* ==========================================================================
   15. Icon List / Feature List (:is(.trd-icon-list,.qm-icon-list))
   ========================================================================== */
:is(.trd-icon-list,.qm-icon-list) {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

:is(.trd-icon-list--inline,.qm-icon-list--inline) {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

:is(.trd-icon-list-item,.qm-icon-list-item) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--qm-typo-body-font-family, inherit);
    font-size: var(--qm-typo-body-font-size, var(--text-m, 1rem));
    line-height: var(--qm-typo-body-line-height, 1.5);
    color: var(--qm-typo-body-color, inherit);
}

:is(.trd-icon-list-link,.qm-icon-list-link) {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

:is(.trd-icon-list-link,.qm-icon-list-link):hover {
    color: inherit;
}

:is(.trd-icon-list-icon,.qm-icon-list-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-circle, 50%);
    background-color: var(--qm-primary-light, #dae5ee);
    color: var(--qm-primary-dark, #043f72);
}

:is(.trd-icon-list-icon,.qm-icon-list-icon) svg {
    width: 0.9rem;
    height: 0.9rem;
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
    display: block;
}

:is(.trd-icon-list-icon,.qm-icon-list-icon) svg:not([fill="currentColor"]):not([fill^="#"]):not([fill^="rgb"]) {
    stroke: currentColor;
    fill: none;
}

:is(.trd-icon-list-icon,.qm-icon-list-icon) svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

/*
 * Bioflow footer contact list compatibility.
 * The Bioflow footer template intentionally renders white icons directly on
 * the blue contact panel. The shared icon-list badge background turns them
 * into white-on-light-blue, so suppress the badge for this list only. This
 * does not change the list content or any other icon list.
 */
.bioflow-contact-list .trd-icon-list-icon {
    background-color: transparent;
    border-radius: 0;
}

/* ==========================================================================
   16. Pricing Table (:is(.trd-pricing-card,.qm-pricing-card))
   ========================================================================== */
:is(.trd-pricing-card,.qm-pricing-card) {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--qm-base-light, #e2e8f0);
    border-radius: var(--radius-l, 18px);
    padding: var(--space-m, 2rem);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.trd-pricing-card--featured,.qm-pricing-card--featured) {
    border-color: var(--qm-primary, #054f8e);
    box-shadow: var(--shadow-lg);
    transform: scale(1.02);
}

:is(.trd-pricing-badge,.qm-pricing-badge) {
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--qm-secondary, #ff800b);
    color: #ffffff;
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, var(--text-xs, 0.85rem));
    font-weight: 700;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill, 9999px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

:is(.trd-pricing-header,.qm-pricing-header) {
    margin-bottom: 1.5rem;
}

:is(.trd-pricing-plan,.qm-pricing-plan) {
    font-family: var(--qm-typo-h4-font-family, inherit);
    font-size: var(--qm-typo-h4-font-size, var(--h4, 1.4rem));
    font-weight: var(--qm-typo-h4-font-weight, 700);
    line-height: var(--qm-typo-h4-line-height, 1.25);
    color: var(--qm-typo-h4-color, var(--qm-heading-color, #0f172a));
    margin: 0 0 0.5rem 0;
}

:is(.trd-pricing-price,.qm-pricing-price) {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 1rem 0;
}

:is(.trd-pricing-currency,.qm-pricing-currency) {
    font-size: var(--h3, 1.75rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
}

:is(.trd-pricing-amount,.qm-pricing-amount) {
    font-family: var(--qm-typo-h1-font-family, inherit);
    font-size: var(--qm-typo-h1-font-size, var(--h1, 3.2rem));
    font-weight: 800;
    line-height: var(--qm-typo-h1-line-height, 1);
    color: var(--qm-typo-h1-color, var(--qm-heading-color, #0f172a));
}

:is(.trd-pricing-period,.qm-pricing-period) {
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, var(--text-s, 0.95rem));
    line-height: var(--qm-typo-small-line-height, 1.5);
    color: var(--qm-typo-small-color, var(--qm-base, #64748b));
}

:is(.trd-pricing-features,.qm-pricing-features) {
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
}
:is(.trd-pricing-feature-item,.qm-pricing-feature-item) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
:is(.trd-pricing-feature-icon,.qm-pricing-feature-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
:is(.trd-pricing-feature-text,.qm-pricing-feature-text) {
    display: inline-block;
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 1rem);
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
    color: var(--qm-typo-paragraph-color, inherit);
}

/* ==========================================================================
   17. Responsive Video Embed (:is(.trd-video-wrap,.qm-video-wrap))
   ========================================================================== */
:is(.trd-video-wrap,.qm-video-wrap) {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m, 14px);
    overflow: hidden;
    background: #000000;
    box-shadow: var(--shadow-md);
}

:is(.trd-video-wrap,.qm-video-wrap) iframe,
:is(.trd-video-wrap,.qm-video-wrap) video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   18. Interactive Tabs (:is(.trd-tabs,.qm-tabs))
   ========================================================================== */
:is(.trd-tabs,.qm-tabs) {
    width: 100%;
}

:is(.trd-tabs-nav,.qm-tabs-nav) {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--qm-base-light, #e2e8f0);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
}

:is(.trd-tab-btn-item,.qm-tab-btn-item) {
    padding: 0.85rem 1.5rem;
    font-family: var(--qm-typo-body-font-family, inherit);
    font-size: var(--qm-typo-body-font-size, var(--text-m, 1rem));
    font-weight: 600;
    line-height: var(--qm-typo-body-line-height, 1.5);
    color: var(--qm-typo-body-color, var(--qm-color-text, #64748b));
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

:is(.trd-tab-btn-item,.qm-tab-btn-item).is-active {
    color: var(--qm-primary, #054f8e);
    border-bottom-color: var(--qm-primary, #054f8e);
}

:is(.trd-tab-panel,.qm-tab-panel) {
    display: none;
}

:is(.trd-tab-panel,.qm-tab-panel).is-active {
    display: block;
}

:is(.trd-tab-panel,.qm-tab-panel) {
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 1rem);
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
    color: var(--qm-typo-paragraph-color, var(--qm-color-text, inherit));
}

/* ==========================================================================
   19. Vector Icon Element (:is(.trd-icon-wrapper,.qm-icon-wrapper), :is(.trd-icon-element-box,.qm-icon-element-box))
   ========================================================================== */
:is(.trd-icon-wrapper,.qm-icon-wrapper):not(.trd-icon-element-box) {
    width: 100%;
    margin-bottom: 0;
}

:is(.trd-icon-element-box,.qm-icon-element-box),
:is(.trd-icon-element-link,.qm-icon-element-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:is(.trd-icon-element-box,.qm-icon-element-box) {
    color: var(--trd-icon-color, inherit);
    background-color: var(--trd-icon-bg, transparent);
    padding: var(--trd-icon-padding, 0);
    border-radius: var(--trd-icon-radius, 0);
    border-style: solid;
    border-width: var(--trd-icon-border-width, 0);
    border-color: var(--trd-icon-border-color, transparent);
    align-self: var(--trd-icon-align, center);
    flex: 0 0 auto;
}

:is(.trd-icon-element-box,.qm-icon-element-box) svg,
:is(.trd-icon-element-link,.qm-icon-element-link) svg {
    display: block;
    fill: none;
    stroke: currentColor;
}

/* The Icon element accepts filled Solid/Brand SVGs as well as stroke icons.
   The generic rule above is a presentation rule and therefore beats the SVG's
   own fill="currentColor" attribute. Restore filled rendering only for SVGs
   that explicitly declare a currentColor fill; outline icons keep the rule
   above. This is scoped to the Icon element and intentionally does not touch
   Icon List or any other icon-bearing element. */
:is(.trd-icon-element-box,.qm-icon-element-box) svg[fill="currentColor"],
:is(.trd-icon-element-link,.qm-icon-element-link) svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

/* ==========================================================================
   20. Divider (:is(.trd-divider,.qm-divider))
   ========================================================================== */
:is(.trd-divider,.qm-divider) {
    border: none;
    border-top: 1px solid var(--qm-base-light, #e2e8f0);
    margin: var(--space-m, 1.5rem) 0;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   23. Native Contact Form Component (:is(.trd-form-wrapper,.qm-form-wrapper), :is(.trd-form,.qm-form))
   ========================================================================== */
:is(.trd-form,.qm-form,.trd-form-wrapper,.qm-form-wrapper) {
    width: 100%;
    background-color: var(--qm-form-bg, #ffffff);
    border-radius: var(--radius-m, 14px);
    border: 1px solid var(--qm-base-light, #e2e8f0);
    padding: var(--space-m, 2rem);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

:is(.trd-form-header,.qm-form-header) {
    margin-bottom: 1.5rem;
}

:is(.trd-form-title,.qm-form-title) {
    font-size: var(--text-l, 1.4rem);
    font-weight: 700;
    color: var(--qm-heading-color, #0f172a);
    margin-bottom: 0.35rem;
}

:is(.trd-form-subtitle,.qm-form-subtitle) {
    font-size: var(--text-s, 0.95rem);
    color: var(--qm-text-color, #64748b);
    margin: 0;
}

:is(.trd-form-fields,.qm-form-fields) {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1.25rem;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    box-sizing: border-box;
}

:is(.trd-form-group,.qm-form-group) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: var(--qmt-form-row-gap, 1.25rem);
}

:is(.trd-form-label,.qm-form-label) {
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, 13px);
    font-weight: 600;
    line-height: var(--qm-typo-small-line-height, 1.5);
    color: var(--qm-typo-small-color, var(--qm-heading-color, #1e293b));
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---- mixed Rich Text ----------------------------------------------------
   A Text element holding several sibling block types (a paragraph plus a list,
   a heading between paragraphs) needs a block-capable root, and that root needs
   to be able to express the space BETWEEN those blocks.

   Two things used to go wrong here. Authored `<br><br>` was doing the job of a
   paragraph boundary, which is neither semantic nor real spacing. Replacing it
   with a proper `<p>` was correct, but the paragraph's margin-bottom and the
   list's margin-top then COLLAPSED into the larger of the two, so a block
   boundary that used to look like a deliberate blank line collapsed to a single
   18px gap. The markup got better and the design got tighter - which is a
   regression even though nothing looks broken.

   A flex column stops sibling margins collapsing, so each block contributes its
   OWN margin again and the rhythm comes from the spacing tokens the Design
   System already defines. No magic numbers, and nothing hardcoded per element.

   Applied only to genuinely mixed content: a single block (a lone list) has no
   root to style, and plain text is a <p>. */
.trd-richtext {
    display: flex;
    flex-direction: column;
}

/* One Text element holding several paragraphs. The wrapper owns the
   paragraph rhythm through its responsive gap, so the child paragraphs
   carry no margins of their own. */
.bfw-merged-copy > p {
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
}

/* FAB Media live-layout copy rhythm. Scoped to the page's own copy blocks so
   the live 16/24 (14/21 mobile) rhythm is not changed by the global paragraph
   and icon-list type scale. */
.trd-richtext.fab-copy > p {
    font-size: 16px;
    line-height: 24px;
    color: #444444;
    margin: 0 0 14.4px;
}

.fab-copy .trd-icon-list-text {
    font-size: 16px;
    line-height: 24px;
    color: #444444;
}

@media (max-width: 640px) {
    .trd-richtext.fab-copy > p,
    .fab-copy .trd-icon-list-text {
        font-size: 14px;
        line-height: 21px;
    }
}

/* A block the author detached with a <br> before the next one.
   The breaks it replaces stood for two line boxes; the paragraph's own margin
   supplies one, so the visible blank line the author drew needs one more
   standard block margin. Expressed in rem, like the rest of the spacing scale,
   so it tracks the user's root font size rather than a fixed pixel count - and
   applied only where a <br> was actually typed, so mixed content the author
   never broke apart is left at its normal rhythm.

   Deliberately NOT scoped under .trd-richtext: that wrapper only survives when
   the element owns root-level styling. A content element that needs no root is
   emitted as bare semantic siblings, and the blank line the author drew has to
   come with them. `data-qmt-break` is emitted by the compiler alone, so it
   cannot collide with authored markup. */
[data-qmt-break] {
    margin-bottom: 2.2rem;
}

   /* A placeholder is not a label: it vanishes the moment someone types, it is
   announced unreliably, and it is not clickable. A field the designer left
   without a visible label therefore still gets a genuine programmatic one,
   associated by id - and it is taken out of the visual flow rather than
   omitted. The clip recipe is the standard one. */
.trd-form-label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

:is(.trd-form-required,.qm-form-required) {
    color: #ef4444;
}

:is(.trd-form-input,.qm-form-input),
:is(.trd-form-select,.qm-form-select),
:is(.trd-form-textarea,.qm-form-textarea) {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--qm-typo-body-font-family, inherit);
    font-size: var(--qm-typo-body-font-size, 14px);
    line-height: var(--qm-typo-body-line-height, 1.5);
    color: var(--qm-typo-body-color, var(--qm-heading-color, #0f172a));
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-s, 8px);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

:is(.trd-form-input,.qm-form-input):focus,
:is(.trd-form-select,.qm-form-select):focus,
:is(.trd-form-textarea,.qm-form-textarea):focus {
    background-color: #ffffff;
    border-color: var(--qm-primary, #054f8e);
    box-shadow: 0 0 0 3px rgba(5, 79, 142, 0.12);
}

:is(.trd-form-textarea,.qm-form-textarea) {
    resize: vertical;
    min-height: 100px;
}

:is(.trd-form-options-wrap,.qm-form-options-wrap) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.25rem;
}

:is(.trd-form-option-label,.qm-form-option-label) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--qm-text-color, #334155);
    cursor: pointer;
}

:is(.trd-form-option-label,.qm-form-option-label) input[type="radio"],
:is(.trd-form-option-label,.qm-form-option-label) input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--qm-primary, #054f8e);
    cursor: pointer;
}

/* File Upload Dropzone */
:is(.trd-form-file-box,.qm-form-file-box) {
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-s, 8px);
    background: #f8fafc;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

:is(.trd-form-file-box,.qm-form-file-box):hover {
    border-color: var(--qm-primary, #054f8e);
    background: #eff6ff;
}

:is(.trd-form-file-icon,.qm-form-file-icon) svg {
    width: 28px;
    height: 28px;
    stroke: var(--qm-primary, #054f8e);
}

:is(.trd-form-file-text,.qm-form-file-text) {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

:is(.trd-form-file-input,.qm-form-file-input) {
    display: none;
}

/* Form Actions */
:is(.trd-form-actions,.qm-form-actions) {
    margin-top: 0.5rem;
}

:is(.trd-form-feedback,.qm-form-feedback) {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-s, 8px);
    font-size: 13px;
    font-weight: 500;
}

:is(.trd-form-feedback,.qm-form-feedback).is-success {
    display: block;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

:is(.trd-form-feedback,.qm-form-feedback).is-error {
    display: block;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ==========================================================================
   20. Entrance Animations System (Pure CSS + IntersectionObserver)
   ========================================================================== */
[data-qmt-anim] {
    --qmt-anim-dur: 0.6s;
    --qmt-anim-del: 0s;
    --qmt-anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-qmt-anim-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.trd-animated {
    animation-duration: var(--qmt-anim-dur, 0.6s);
    animation-delay: var(--qmt-anim-del, 0s);
    animation-timing-function: var(--qmt-anim-ease, cubic-bezier(0.16, 1, 0.3, 1));
    animation-fill-mode: both;
    pointer-events: auto;
}

.trd-anim-done {
    animation: none !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* Animation Keyframes (Preserves user --qmt-base-transform) */
@keyframes qmtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes qmtFadeUp {
    from { opacity: 0; transform: translateY(32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeDown {
    from { opacity: 0; transform: translateY(-32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeLeft {
    from { opacity: 0; transform: translateX(32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtFadeRight {
    from { opacity: 0; transform: translateX(-32px) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtZoomIn {
    from { opacity: 0; transform: scale(0.88) var(--qmt-base-transform, ); }
    to { opacity: 1; transform: scale(1) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideUp {
    from { transform: translateY(60px) var(--qmt-base-transform, ); }
    to { transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideDown {
    from { transform: translateY(-60px) var(--qmt-base-transform, ); }
    to { transform: translateY(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideLeft {
    from { transform: translateX(60px) var(--qmt-base-transform, ); }
    to { transform: translateX(0px) var(--qmt-base-transform, ); }
}

@keyframes qmtSlideRight {
    from { transform: translateX(-60px) var(--qmt-base-transform, ); }
    to { transform: translateX(0px) var(--qmt-base-transform, ); }
}

/* Preset Mapping */
.trd-anim-fade-in { animation-name: qmtFadeIn; }
.trd-anim-fade-up { animation-name: qmtFadeUp; }
.trd-anim-fade-down { animation-name: qmtFadeDown; }
.trd-anim-fade-left { animation-name: qmtFadeLeft; }
.trd-anim-fade-right { animation-name: qmtFadeRight; }
.trd-anim-zoom-in { animation-name: qmtZoomIn; }
.trd-anim-slide-up { animation-name: qmtSlideUp; }
.trd-anim-slide-down { animation-name: qmtSlideDown; }
.trd-anim-slide-left { animation-name: qmtSlideLeft; }
.trd-anim-slide-right { animation-name: qmtSlideRight; }

/* Accessibility: Prefers-Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
    [data-qmt-anim],
    [data-qmt-anim-hidden="true"],
    .trd-animated {
        opacity: 1 !important;
        transform: var(--qmt-base-transform, none) !important;
        animation: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   21. Site Logo Component (QMT Builder)
   ========================================================================== */
.trd-site-logo {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.trd-site-logo-link,
.trd-site-logo--link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.trd-site-logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}
.trd-site-logo-text {
    font-size: var(--text-h3, 24px);
    font-weight: 700;
    color: var(--qm-color-heading, #0f172a);
    text-decoration: none;
    line-height: 1.2;
}

/* ==========================================================================
   22. Nav Menu Component (QMT Builder - Desktop & Mobile 3-Level Submenu)
   ========================================================================== */
.trd-nav-menu {
    position: relative;
    display: block;
}

/* Nav list reset */
.trd-nav-menu-list,
.trd-menu,
.trd-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop Horizontal Layout */
.trd-nav-menu--horizontal .trd-nav-menu-list,
.trd-nav-menu--horizontal .trd-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qmt-nav-gap, 24px);
}
.trd-nav-menu--vertical .trd-nav-menu-list,
.trd-nav-menu--vertical .trd-menu {
    display: flex;
    flex-direction: column;
}

/* Alignment */
.trd-nav-menu--align-left .trd-nav-menu-list,
.trd-nav-menu--align-left .trd-menu { justify-content: flex-start; text-align: left; }
.trd-nav-menu--align-center .trd-nav-menu-list,
.trd-nav-menu--align-center .trd-menu { justify-content: center; text-align: center; }
.trd-nav-menu--align-right .trd-nav-menu-list,
.trd-nav-menu--align-right .trd-menu { justify-content: flex-end; text-align: right; }
.trd-nav-menu--align-space-between .trd-nav-menu-list,
.trd-nav-menu--align-space-between .trd-menu { justify-content: space-between; }

/* Menu Items & Links */
.trd-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* A mega panel column is a group of links, not a single row: the base flex
   alignment for menu items must not centre it vertically. */
.trd-menu-item.trd-mega-col {
    align-items: flex-start;
    align-content: flex-start;
}
.trd-menu-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--qm-color-text, #334155);
    transition: color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}
.trd-menu-link:hover,
.trd-menu-item.current-menu-item > .trd-menu-link,
.trd-menu-item.current-menu-ancestor > .trd-menu-link,
.trd-menu-item.current_page_item > .trd-menu-link,
.trd-menu-item.current_page_ancestor > .trd-menu-link {
    color: var(--qm-color-primary, #054f8e);
}

/* Submenu Indicator (Chevron) */
.trd-menu-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    box-sizing: content-box;
    line-height: 1;
    margin-left: var(--qmt-nav-indicator-gap, 6px);
    transition: transform 0.2s ease, color 0.15s ease;
    color: currentColor;
}
.trd-menu-indicator--before {
    margin-left: 0;
    margin-right: var(--qmt-nav-indicator-gap, 6px);
}
.trd-menu-indicator svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}
.trd-menu-indicator svg:not([fill="currentColor"]):not([fill^="#"]):not([fill^="rgb"]) {
    stroke: currentColor;
    fill: none;
}
.trd-menu-indicator svg[fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

/* ==========================================================================
   Desktop Navigation Submenu & Flyout Rules
   ========================================================================== */
    /* Submenus are hidden panels positioned absolutely */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu {
        position: absolute;
        z-index: 1000;
        display: none !important;
        min-width: 210px;
        background: #ffffff;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 6px 0;
        margin: 0;
        list-style: none;
    }

    /* Level 2 Submenu (Dropdown under Level 1 item) */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-menu-item.level-1 > .trd-submenu,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-menu-item--level-0 > .trd-submenu,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu.level-2,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-1 {
        top: 100%;
        left: 0;
    }

    /* Align right if parent nav is right-aligned */
    .trd-nav-menu--align-right:not(.trd-nav-menu--force-mobile) .trd-menu-item.level-1 > .trd-submenu,
    .trd-nav-menu--align-right:not(.trd-nav-menu--force-mobile) .trd-menu-item--level-0 > .trd-submenu,
    .trd-nav-menu--align-right:not(.trd-nav-menu--force-mobile) .trd-submenu.level-2,
    .trd-nav-menu--align-right:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-1 {
        left: auto;
        right: 0;
    }

    /* Nested flyouts (level 3 and deeper).
       A submenu inside another submenu always opens as an adjacent panel,
       relative to its own triggering <li>. This is depth-agnostic on purpose:
       the old rules only positioned level 3, so every deeper panel kept
       `top/left: auto` and rendered inside its parent column. No margin is
       used between panels - a gap would put the pointer outside the parent
       <li> while crossing it and close the flyout mid-move. */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu {
        top: 0;
        left: 100%;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* Runtime viewport flip. Used by Auto, and as the safety fallback for an
       explicit direction when that side has no room. */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu.trd-submenu--flip-left {
        left: auto !important;
        right: 100% !important;
    }

    /* Last-resort fit when neither side has the panel's natural width. The
       runtime sets an inline max-width from the real available space; labels
       wrap so the panel stays inside the viewport instead of being clipped. */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu.trd-submenu--fit {
        min-width: 0;
        max-width: calc(100vw - 16px);
    }
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu.trd-submenu--fit .trd-menu-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Explicit direction is the pre-JavaScript/base preference. The runtime
       may still add flip-left above to keep the panel inside the viewport. */
    .trd-nav-menu--submenu-left:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu {
        left: auto;
        right: 100%;
    }
    .trd-nav-menu--submenu-right:not(.trd-nav-menu--force-mobile) .trd-submenu .trd-submenu {
        left: 100%;
        right: auto;
    }

    /* Smooth Hover & Focus-Within Submenu Reveal */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-menu-item:hover > .trd-submenu,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-menu-item:focus-within > .trd-submenu {
        display: block !important;
    }

  
/* ==========================================================================
   Shared responsive header panel
   --------------------------------------------------------------------------
   An interactive header surface (the collapsed navigation panel, the search
   overlay) must never be sized or positioned by the control that opens it.
   When the panel is absolutely positioned and its trigger is a positioned
   element, `width: 100%` resolves against the TRIGGER, so a collapsed
   navigation panel ends up exactly as wide as the hamburger button.

   `.trd-header-panel` therefore does two things, and the responsive blocks
   below use it for both:

     1. It removes the trigger from the containing block at the breakpoints
        where the panel is collapsed (the nav element is forced to
        `position: static`, so the nearest positioned ancestor - the site
        header - becomes the containing block and `left:0; right:0` spans the
        available header width).
     2. It resolves its own width, height and layering from one token set, so
        a second header surface does not have to re-derive them.

   Width defaults to the containing block, NOT 100vw, so a vertical scrollbar
   can never be introduced.
   ========================================================================== */
.trd-site-header {
    /* Global layer scale. Deliberately small and named: a surface inside the
       header only needs to beat its siblings, not the whole page. */
    --qmt-layer-header: 1000;
    --qmt-layer-overlay: 9000;
    --qmt-header-panel-width: 100%;
    --qmt-header-panel-offset: 100%;
    --qmt-header-panel-pad-y: 8px;
    --qmt-header-panel-bg: #ffffff;
    --qmt-header-panel-border: #e2e8f0;
    --qmt-header-panel-radius: 8px;
    --qmt-header-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    --qmt-header-panel-z: 20;
    /* A long menu must scroll inside the panel rather than push the page. */
    --qmt-header-panel-max-h: 80vh;
    --qmt-header-panel-max-h: calc(100dvh - 2rem);
}



/* When the header itself is transparent (hero overlap) the panel still has to
   read as a solid surface rather than inheriting transparency. */
.trd-site-header.is-transparent .trd-nav-menu--breakpoint-tablet .trd-header-panel,
.trd-site-header.is-transparent .trd-nav-menu--bp-tablet .trd-header-panel,
.trd-site-header.is-transparent .trd-nav-menu--breakpoint-mobile .trd-header-panel,
.trd-site-header.is-transparent .trd-nav-menu--bp-mobile .trd-header-panel,
.trd-site-header.is-transparent .trd-nav-menu--force-mobile .trd-header-panel {
    background: var(--qmt-header-panel-bg);
}

  /* Submenu item links */
    .trd-submenu .trd-menu-item {
        width: 100%;
    }
    .trd-submenu .trd-menu-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        font-size: 14px;
        color: #334155;
        box-sizing: border-box;
    }
    .trd-submenu .trd-menu-link:hover {
        background-color: #f8fafc;
        color: var(--qm-color-primary, #054f8e);
    }
    .trd-submenu .trd-menu-item.current-menu-item > .trd-menu-link,
    .trd-submenu .trd-menu-item.current_page_item > .trd-menu-link {
        color: var(--qm-color-primary, #054f8e);
        font-weight: 600;
    }
/* ========================================================================== 
   Mobile Toggle & Submenu Accordion Controls (Base Styles)
   ========================================================================== */
.trd-mobile-toggle,
.trd-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--qm-color-heading, #0f172a);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.trd-mobile-toggle:hover,
.trd-nav-toggle:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.trd-mobile-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}
.trd-mobile-toggle__icon .trd-mobile-toggle__icon-close {
    display: none;
}
.trd-nav-menu.is-mobile-open .trd-mobile-toggle__icon .trd-mobile-toggle__icon-open {
    display: none;
}
.trd-nav-menu.is-mobile-open .trd-mobile-toggle__icon .trd-mobile-toggle__icon-close {
    display: block;
}
.trd-mobile-toggle svg,
.trd-nav-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.trd-submenu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    width: auto;
    height: auto;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    padding: 0 8px;
    flex: 0 0 auto;
    align-self: center;
}
.trd-submenu-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    transition: transform 0.2s ease;
}
.trd-submenu-toggle:hover {
    color: var(--qm-color-primary, #054f8e);
}

/* Mega panel toggles keep their compact legacy hit area; the shared
   submenu-toggle defaults above are intentionally larger for the main
   accordion column. Compound controls still override these declarations. */
.trd-mega-toggle {
    min-width: 0;
    min-height: 0;
    padding: 4px;
    border: 0;
    background: none;
}
.trd-mega-toggle svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Responsive Tablet Breakpoint (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* ROOT CAUSE FIX - a collapsed panel must not be sized by its trigger.
       The panel is absolutely positioned, so without this it resolves
       width: 100% against the nav element, which at this width is only as
       wide as the toggle. The result is a narrow floating dropdown.
       Taking the nav out of the containing-block chain makes the site header
       the containing block, so left: 0; right: 0 spans the available
       header width. Nothing about the desktop layout changes. */
    .trd-nav-menu--breakpoint-tablet,
    .trd-nav-menu--bp-tablet {
        position: static !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-mobile-toggle,
    .trd-nav-menu--breakpoint-tablet .trd-nav-toggle,
    .trd-nav-menu--bp-tablet .trd-mobile-toggle,
    .trd-nav-menu--bp-tablet .trd-nav-toggle {
        display: inline-flex !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-nav-menu__wrapper,
    .trd-nav-menu--bp-tablet .trd-nav-menu__wrapper {
        display: none !important;
        position: absolute;
        top: var(--qmt-header-panel-offset, 100%);
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
    }
    .trd-nav-menu--breakpoint-tablet.is-mobile-open .trd-nav-menu__wrapper,
    .trd-nav-menu--bp-tablet.is-mobile-open .trd-nav-menu__wrapper {
        display: block !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu,
    .trd-nav-menu--breakpoint-tablet .trd-nav-menu-list,
    .trd-nav-menu--bp-tablet .trd-menu,
    .trd-nav-menu--bp-tablet .trd-nav-menu-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-item,
    .trd-nav-menu--bp-tablet .trd-menu-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-menu-link {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 16px;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-indicator,
    .trd-nav-menu--bp-tablet .trd-menu-indicator {
        display: none !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-submenu-toggle,
    .trd-nav-menu--bp-tablet .trd-submenu-toggle {
        display: inline-flex !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-item.is-expanded > .trd-submenu-toggle svg,
    .trd-nav-menu--bp-tablet .trd-menu-item.is-expanded > .trd-submenu-toggle svg {
        transform: rotate(var(--qmt-submenu-toggle-rotate, 180deg));
    }
    .trd-nav-menu--breakpoint-tablet .trd-submenu,
    .trd-nav-menu--bp-tablet .trd-submenu {
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.02) !important;
        padding: 0 !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-item.is-expanded > .trd-submenu,
    .trd-nav-menu--bp-tablet .trd-menu-item.is-expanded > .trd-submenu {
        display: block !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-submenu > .trd-menu-item > .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-submenu > .trd-menu-item > .trd-menu-link {
        padding-left: calc(var(--qmt-nav-indent-base, 16px) + (var(--qmt-submenu-depth, 0) * var(--qmt-nav-indent-step, 16px)));
    }
}

/* ==========================================================================
   Responsive Mobile Breakpoint (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .trd-nav-menu--breakpoint-mobile,
    .trd-nav-menu--bp-mobile {
        position: static !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-mobile-toggle,
    .trd-nav-menu--breakpoint-mobile .trd-nav-toggle,
    .trd-nav-menu--bp-mobile .trd-mobile-toggle,
    .trd-nav-menu--bp-mobile .trd-nav-toggle {
        display: inline-flex !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-nav-menu__wrapper,
    .trd-nav-menu--bp-mobile .trd-nav-menu__wrapper {
        display: none !important;
        position: absolute;
        top: var(--qmt-header-panel-offset, 100%);
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
    }
    .trd-nav-menu--breakpoint-mobile.is-mobile-open .trd-nav-menu__wrapper,
    .trd-nav-menu--bp-mobile.is-mobile-open .trd-nav-menu__wrapper {
        display: block !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu,
    .trd-nav-menu--breakpoint-mobile .trd-nav-menu-list,
    .trd-nav-menu--bp-mobile .trd-menu,
    .trd-nav-menu--bp-mobile .trd-nav-menu-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-item,
    .trd-nav-menu--bp-mobile .trd-menu-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-menu-link {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 16px;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-indicator,
    .trd-nav-menu--bp-mobile .trd-menu-indicator {
        display: none !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-submenu-toggle,
    .trd-nav-menu--bp-mobile .trd-submenu-toggle {
        display: inline-flex !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-item.is-expanded > .trd-submenu-toggle svg,
    .trd-nav-menu--bp-mobile .trd-menu-item.is-expanded > .trd-submenu-toggle svg {
        transform: rotate(var(--qmt-submenu-toggle-rotate, 180deg));
    }
    .trd-nav-menu--breakpoint-mobile .trd-submenu,
    .trd-nav-menu--bp-mobile .trd-submenu {
        display: none !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.02) !important;
        padding: 0 !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-item.is-expanded > .trd-submenu,
    .trd-nav-menu--bp-mobile .trd-menu-item.is-expanded > .trd-submenu {
        display: block !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-submenu > .trd-menu-item > .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-submenu > .trd-menu-item > .trd-menu-link {
        padding-left: calc(var(--qmt-nav-indent-base, 16px) + (var(--qmt-submenu-depth, 0) * var(--qmt-nav-indent-step, 16px)));
    }
}

/* ==========================================================================
   Editor Preview Forced Mobile State (.trd-nav-menu--force-mobile)
   ========================================================================== */
.trd-nav-menu.trd-nav-menu--force-mobile {
    position: static !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-mobile-toggle,
.trd-nav-menu.trd-nav-menu--force-mobile .trd-nav-toggle {
    display: inline-flex !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-nav-menu__wrapper {
    display: none !important;
    position: absolute;
    top: var(--qmt-header-panel-offset, 100%);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: var(--qmt-header-panel-pad-y, 8px) 0;
          max-height: var(--qmt-header-panel-max-h, 80vh);
          overflow-y: auto;
          overscroll-behavior: contain;
            box-sizing: border-box;
}
.trd-nav-menu.trd-nav-menu--force-mobile.is-mobile-open .trd-nav-menu__wrapper {
    display: block !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu,
.trd-nav-menu.trd-nav-menu--force-mobile .trd-nav-menu-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-indicator {
    display: none !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu-toggle {
    display: inline-flex !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-item.is-expanded > .trd-submenu-toggle svg {
    transform: rotate(var(--qmt-submenu-toggle-rotate, 180deg));
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu {
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.02) !important;
    padding: 0 !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-item.is-expanded > .trd-submenu {
    display: block !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu > .trd-menu-item > .trd-menu-link {
    padding-left: calc(var(--qmt-nav-indent-base, 16px) + (var(--qmt-submenu-depth, 0) * var(--qmt-nav-indent-step, 16px)));
}

/* ==========================================================================
   23. AJAX Search Component (QMT Builder — Inline & Modal Pop-Up Templates)
   ========================================================================== */
.trd-ajax-search {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}
.trd-ajax-search--modal {
    width: auto;
    display: inline-block;
}


/* ==========================================================================
   AJAX Search - Icon Trigger mode
   --------------------------------------------------------------------------
   The overlay is a full-viewport surface (position: fixed; inset: 0) and is
   deliberately NOT given .trd-header-panel: that class positions a panel
   against a containing block, which is correct for the collapsed nav panel and
   wrong for a full-screen overlay. What the two share is the layer scale and
   the width philosophy - the surface takes the available width, and only the
   inner form is constrained. That is why the form has a max-width and the
   overlay does not.
   ========================================================================== */
.trd-ajax-search--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trd-search-modal-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A real control needs a real hit area, not just a glyph. */
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.trd-search-modal-trigger:hover {
  background: rgba(0, 0, 0, 0.04);
}
.trd-search-modal-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.trd-search-modal-trigger-text {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
}

/* Overlay: full available width. z-index comes from the named layer scale
   rather than a magic number, so it beats the header (1000) by intent. */
.trd-search-modal {
  z-index: var(--qmt-layer-overlay, 9000);
}

/* The form is the only thing with a max-width, and it is centred. */
.trd-search-modal-box {
  max-width: var(--qmt-search-form-max-width, 760px);
}

/* --------------------------------------------------------------------------
   Responsive Display Mode
   The renderer emits BOTH wrappers when the mode differs by breakpoint, and
   emits the per-device show/hide rules itself. These are only the defaults for
   the single-mode case, so markup is never invisible without a stylesheet.
   -------------------------------------------------------------------------- */
.trd-search-mode {
  display: block;
}
.trd-ajax-search--responsive .trd-search-mode[data-search-mode="iconTrigger"] {
  display: none;
}

/* Template 1: Inline Search Form */
.trd-search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}
.trd-search-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
}
.trd-search-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.trd-search-field {
    width: 100%;
    padding: 8px 14px;
    padding-right: 36px;
    font-size: 14px;
    color: var(--qm-color-text, #1e293b);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
.trd-search-modal .trd-search-field {
    padding-left: 42px;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border: none;
    background: transparent;
}
.trd-search-field:focus {
    border-color: var(--qm-color-primary, #054f8e);
    box-shadow: 0 0 0 2px rgba(5, 79, 142, 0.15);
}
.trd-search-modal .trd-search-field:focus {
    box-shadow: none;
}
.trd-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}
.trd-search-btn:hover {
    color: var(--qm-color-primary, #054f8e);
    background: #f1f5f9;
}
.trd-search-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Clear Button */
.trd-search-clear {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.trd-search-clear:hover {
    color: #334155;
}

/* Template 2: Modal Pop-up Trigger & Structure */
.trd-search-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: var(--qm-color-heading, #0f172a);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
}
.trd-search-modal-trigger:hover {
    background: #f8fafc;
    border-color: var(--qm-color-primary, #054f8e);
    color: var(--qm-color-primary, #054f8e);
}
.trd-search-modal-trigger svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Modal Overlay */
.trd-search-modal {
    position: fixed;
    inset: 0;
    /* Named layer, not a magic number: it must clear the header (1000). */
    z-index: var(--qmt-layer-overlay, 9000);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 16px;
    box-sizing: border-box;
}
.trd-search-modal.is-open {
    display: flex !important;
}

.trd-search-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: qmtFadeIn 0.2s ease;
}

.trd-search-modal-box {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: qmtSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.trd-search-modal-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-right: 12px;
}
.trd-search-modal-header .trd-search-form {
    flex: 1;
}

.trd-search-modal-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.trd-search-modal-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

@keyframes qmtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes qmtSlideDown {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Results Dropdown */
.trd-search-results {
    display: none;
    background: #ffffff;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 6px 0;
}
/* Inline layout: floating dropdown.
   Scoped to the INLINE presentation only. This used to key on
   :not(.trd-ajax-search--modal), but the renderer emits --inline / --icon /
   --responsive, never --modal, so that selector ALSO matched the Icon Trigger
   overlay's own .trd-search-results and absolutely positioned it inside
   .trd-search-modal-box. Keying on the inline scopes makes the rule mean what
   it says and leaves the approved Icon Trigger mode structurally untouched. */
.trd-ajax-search--inline .trd-search-results,
.trd-search-mode--inline .trd-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--qmt-search-results-z, 1000);
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
/* Results-panel WIDTH is independent of the field width.
   [data-qmt-results-width] is written per element from the Results Width Mode
   control, so the panel is never derived from the input element.
   "match"     - the old coupled behaviour, kept available on request.
   "available" - default: at least the field, roomy enough for thumbnail,
                 title, badge and excerpt, clamped to the viewport.
   "custom"    - defers entirely to the resultsWidth compound part, which is
                 the same NumberUnit + responsive cascade as every other part. */
.trd-ajax-search--inline .trd-search-results[data-qmt-results-width="match"],
.trd-search-mode--inline .trd-search-results[data-qmt-results-width="match"] {
    right: 0;
}
.trd-ajax-search--inline .trd-search-results[data-qmt-results-width="available"],
.trd-search-mode--inline .trd-search-results[data-qmt-results-width="available"] {
    right: auto;
    width: var(--qmt-search-results-width, 40rem);
    min-width: 100%;
    max-width: calc(100vw - 2rem);
}
.trd-ajax-search--inline .trd-search-results[data-qmt-results-width="custom"],
.trd-search-mode--inline .trd-search-results[data-qmt-results-width="custom"] {
    right: auto;
    min-width: 100%;
    max-width: calc(100vw - 2rem);
}
/* Set by the runtime when an anchored panel would cross the viewport's right
   edge, so the panel stays usable near the right end of a header without any
   page-specific CSS. */
.trd-ajax-search--inline .trd-search-results[data-qmt-results-flip="end"],
.trd-search-mode--inline .trd-search-results[data-qmt-results-flip="end"] {
    left: auto;
    right: 0;
}
/* Modal layout: inline results inside box */
.trd-search-modal .trd-search-results {
    border-top: none;
    border-radius: 0 0 12px 12px;
}
.trd-search-results.is-open {
    display: block !important;
}

.trd-search-loading,
.trd-search-empty {
    padding: 18px 20px;
    font-size: 14px;
    color: #64748b;
    text-align: center;
}
.trd-search-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--qm-color-primary, #054f8e);
    border-radius: 50%;
    animation: qmtSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes qmtSpin {
    to { transform: rotate(360deg); }
}

.trd-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trd-search-item {
    margin: 0;
    padding: 0;
}
.trd-search-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.12s ease;
}
.trd-search-item.is-selected .trd-search-item-link,
.trd-search-item-link:hover {
    background-color: #f1f5f9;
}
.trd-search-item-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.trd-search-item-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}
.trd-search-item-thumb-placeholder svg {
    width: 20px;
    height: 20px;
}
.trd-search-item-info {
    flex: 1;
    min-width: 0;
}
.trd-search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trd-search-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
}
.trd-search-item-badge {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #475569;
}
.trd-search-item-excerpt {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trd-search-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--qm-color-primary, #054f8e);
}

/* ==========================================================================
   34. Gallery (:is(.trd-gallery,.qm-gallery))
   ==========================================================================
   The container is the layout root, so it carries the grid. Columns, gap,
   object-fit, aspect-ratio and alignment are NOT set here: they are authored
   style values and reach the page through the page's own generated rules, the
   same as every other element. Declaring defaults here would override the
   author on a page that never asked for a default.

   Items are deliberately unclassed unless masonry needs to target them, so a
   plain grid gallery emits no per-item class at all. */
:is(.trd-gallery,.qm-gallery) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

:is(.trd-gallery,.qm-gallery) > * {
    margin: 0;
    min-width: 0;
}

/* An item is a link or a figure, both of which are inline by default and
   would leave a text-node gap between grid tracks. */
:is(.trd-gallery,.qm-gallery) > a,
:is(.trd-gallery,.qm-gallery) > figure {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

:is(.trd-gallery,.qm-gallery) img {
    display: block;
    width: 100%;
    height: auto;
}

/* A fixed-ratio gallery. Opt-in by the author through the standard aspectRatio
   style property; when it is not set the image keeps its own proportions. */
:is(.trd-gallery,.qm-gallery)[data-qmt-ratio="fill"] > a,
:is(.trd-gallery,.qm-gallery)[data-qmt-ratio="fill"] > figure {
    aspect-ratio: 1 / 1;
}

:is(.trd-gallery,.qm-gallery)[data-qmt-ratio="fill"] img {
    height: 100%;
    object-fit: cover;
}

/* Masonry: rows are a fixed slice and each item spans as many as it needs.
   Without JavaScript every item spans one row, which is a plain grid - a
   graceful fallback rather than a broken layout. */
:is(.trd-gallery,.qm-gallery)[data-qmt-masonry="on"] {
    grid-auto-rows: 8px;
    align-items: stretch;
}

:is(.trd-gallery,.qm-gallery) figcaption {
    padding: 8px 2px 0;
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, 14px);
    line-height: var(--qm-typo-small-line-height, 1.5);
    color: var(--qm-typo-small-color, var(--qm-color-text, #475569));
}

/* A caption belongs under the image, so the figure is a column. */
:is(.trd-gallery,.qm-gallery) > figure {
    display: flex;
    flex-direction: column;
}

:is(.trd-gallery,.qm-gallery) > figure > a {
    display: block;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1024px) {
    :is(.trd-gallery,.qm-gallery) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    :is(.trd-gallery,.qm-gallery) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   35. Overlay + surface - NOT HERE

   assets/css/trd-popup.css already owns .trd-overlay and .trd-surface. It is
   enqueued on every page that loads the shared runtime, so the lightbox gets
   the same surface box the popups use.

   This section previously re-declared both, and that shipped a live bug: the
   duplicate set `display: flex` on .trd-overlay, and an author `display` beats
   the browser's `[hidden] { display: none }` rule. The overlay element is
   created with the `hidden` attribute and hidden by that attribute, so the
   duplicate left a full-viewport box sitting over the page on EVERY page that
   loaded the runtime - the page looked washed out and swallowed every click,
   while the editor was unaffected because it loads neither stylesheet.

   One owner per selector. ========================================================================== */

/* ==========================================================================
   36. Lightbox (:is(.trd-lightbox-surface,.qm-lightbox-surface))
   ========================================================================== */
/* `hidden` must win.
   These elements are shown and hidden by setting the `hidden` PROPERTY, and an
   author `display` value silently defeats the browser's `[hidden] { display:
   none }` rule, because author styles beat the UA stylesheet. Without this guard
   the surface stays laid out while "hidden" - a full-viewport flex box on top of
   the page - and the sequence buttons show even when there is no sequence. This
   is not a theoretical concern; it is exactly how the overlay bug happened.

   The guard outranks the rules below it: `.cls[hidden]` is (0,2,0) against
   `.cls` at (0,1,0). */
:is(.trd-lightbox-surface,.qm-lightbox-surface)[hidden],
.trd-lightbox-prev[hidden],
.trd-lightbox-next[hidden],
.trd-lightbox-caption[hidden],
.trd-lightbox-counter[hidden],
.trd-lightbox-zoom[hidden] {
    display: none;
}

:is(.trd-lightbox-surface,.qm-lightbox-surface) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 16px 16px;
    border-radius: 10px;
    color: #f8fafc;
}

:is(.trd-lightbox-surface,.qm-lightbox-surface) img.trd-lightbox-image {
    display: block;
    max-width: 90vw;
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    /* The zoom sets an explicit pixel width, and the body computes to
     * display:flex - so the image is a flex item with the default
     * flex-shrink:1 and gets squeezed straight back down to the container. The
     * inline width climbed to 3817px while the used width stayed pinned at
     * 940px, and the readout said 400%: an element that reports a zoom it is
     * not applying. Not shrinking is what makes the pan area able to overflow. */
    flex: 0 0 auto;
}

:is(.trd-lightbox-surface,.qm-lightbox-surface) .trd-lightbox-error {
    margin: 0;
    padding: 24px;
    font-size: 15px;
}

.trd-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
}

.trd-lightbox-close,
.trd-lightbox-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    cursor: pointer;
    transition: background-color .18s ease;
}

.trd-lightbox-close:hover,
.trd-lightbox-nav:hover {
    background: rgba(255, 255, 255, .26);
}

.trd-lightbox-close:focus-visible,
.trd-lightbox-nav:focus-visible {
    outline: 2px solid #f8fafc;
    outline-offset: 2px;
}

.trd-lightbox-prev,
.trd-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.trd-lightbox-prev { left: 10px; }
.trd-lightbox-next { right: 10px; }

.trd-lightbox-caption {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #e2e8f0;
}

.trd-lightbox-counter {
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #cbd5e1;
}

/* Zoom controls live in the bar beside Close, so they never sit on top of the
   picture the user is trying to inspect. */
.trd-lightbox-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.trd-lightbox-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .18s ease;
}

.trd-lightbox-zoom-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .26);
}

/* Disabled rather than hidden: the row keeps its width, so the control does
   not shift sideways when the zoom reaches the bottom of the ladder. */
.trd-lightbox-zoom-btn:disabled {
    opacity: .4;
    cursor: default;
}

.trd-lightbox-zoom-btn:focus-visible {
    outline: 2px solid #f8fafc;
    outline-offset: 2px;
}

.trd-lightbox-zoom-level {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}

/* The body is the pan area. Scrolling on both axes is what makes a zoomed image
   reachable: the surface is a flex column sized to its own content, so the
   overflow belongs here rather than on the viewport.

   The min-height below is not optional in a flex column. Without it an item's
   automatic minimum size is its content: the body refuses to shrink below the
   image and the overflow never engages, however far the zoom goes. A 400%
   image was clipped with nothing to pan to. */
.trd-lightbox-body {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

.trd-lightbox-video {
    width: min(1100px, 90vw);
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 6px;
}

@media (max-width: 640px) {
    :is(.trd-lightbox-surface,.qm-lightbox-surface) {
        padding: 44px 6px 10px;
    }

    /* The bar wraps rather than overflowing: at 360px a caption, a counter and
       four buttons on one row is unreadable. The zoom group keeps its own line
       so the caption is never squeezed down to a sliver. */
    .trd-lightbox-bar {
        flex-wrap: wrap;
        min-height: 0;
    }

    .trd-lightbox-zoom {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .trd-lightbox-caption {
        flex: 1 1 100%;
        order: 2;
    }

    :is(.trd-lightbox-surface,.qm-lightbox-surface) img.trd-lightbox-image {
        max-width: 96vw;
        max-height: 70vh;
    }

    /* On a phone the arrows sit below the image rather than over it, so they
       cannot cover the picture being examined. */
    .trd-lightbox-prev,
    .trd-lightbox-next {
        position: static;
        transform: none;
    }

    .trd-lightbox-surface {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Blog & Single Post Elements Runtime Styles (Thread V1)
   ========================================================================== */

/* 1. Native Posts Element */
.trd-posts {
    width: 100%;
}
.trd-posts-items--grid {
    display: grid;
    grid-template-columns: repeat(var(--trd-posts-cols, 3), 1fr);
    gap: var(--trd-posts-row-gap, 2rem) var(--trd-posts-col-gap, 2rem);
}
@media (max-width: 991px) {
    .trd-posts-items--grid {
        grid-template-columns: repeat(var(--trd-posts-cols-tab, 2), 1fr);
    }
}
@media (max-width: 640px) {
    .trd-posts-items--grid {
        grid-template-columns: repeat(var(--trd-posts-cols-mob, 1), 1fr);
    }
}
.trd-posts-items--list {
    display: flex;
    flex-direction: column;
    gap: var(--trd-posts-row-gap, 2rem);
}
.trd-posts-items--list .trd-post {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
}
.trd-posts-items--list .trd-post__media {
    width: 35%;
    flex-shrink: 0;
    margin-bottom: 0;
}
.trd-posts-items--list .trd-post__content {
    flex: 1;
}
@media (max-width: 640px) {
    .trd-posts-items--list .trd-post {
        flex-direction: column;
    }
    .trd-posts-items--list .trd-post__media {
        width: 100%;
        margin-bottom: 1rem;
    }
}
.trd-post {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-m, 8px);
    background: transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.trd-post__media {
    overflow: hidden;
    margin-bottom: 1rem;
}
.trd-post__media-link {
    display: block;
    overflow: hidden;
}
.trd-post__image {
    transition: transform 0.3s ease;
}
.trd-post:hover .trd-post__image {
    transform: scale(1.03);
}
.trd-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--qm-typo-small-font-family, inherit);
    font-size: var(--qm-typo-small-font-size, 0.85rem);
    line-height: var(--qm-typo-small-line-height, 1.5);
    color: var(--qm-typo-small-color, var(--qm-text-muted, #64748b));
    margin-bottom: 0.5rem;
    justify-content: flex-start;
}
.trd-post__meta a {
    color: inherit;
    text-decoration: none;
}
.trd-post__meta a:hover {
    color: var(--qm-color-primary, #054f8e);
}
.trd-post__title {
    margin: 0 0 0.75rem 0;
}
.trd-post__title a {
    color: inherit;
    text-decoration: none;
}
.trd-post__title a:hover {
    color: var(--qm-color-primary, #054f8e);
}
.trd-post__excerpt {
    font-family: var(--qm-typo-paragraph-font-family, inherit);
    font-size: var(--qm-typo-paragraph-font-size, 0.95rem);
    line-height: var(--qm-typo-paragraph-line-height, 1.6);
    color: var(--qm-typo-paragraph-color, var(--qm-text-muted, #64748b));
    margin: 0 0 1rem 0;
}
.trd-post__action {
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
}
.trd-post__read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--qm-color-primary, #054f8e);
    text-decoration: none;
    font-size: 0.95rem;
}
.trd-post__read-more:hover {
    text-decoration: underline;
}

/* Posts Element Built-in Pagination */
.trd-posts-pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}
.trd-posts-pagination ul.page-numbers {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    align-items: center;
}
.trd-posts-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--radius-m, 6px);
    border: 1px solid var(--qm-border-light, #e2e8f0);
    background: #ffffff;
    color: var(--qm-text-main, #0f172a);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.trd-posts-pagination .page-numbers:hover {
    border-color: var(--qm-color-primary, #054f8e);
    color: var(--qm-color-primary, #054f8e);
}
.trd-posts-pagination .page-numbers.current {
    background: var(--qm-color-primary, #054f8e);
    border-color: var(--qm-color-primary, #054f8e);
    color: #ffffff;
    font-weight: 600;
}
.trd-posts-pagination .page-numbers.dots {
    border: none;
    background: transparent;
}

/* 2. Author Box */
.trd-author-box {
    padding: 1.5rem;
    border-radius: var(--radius-m, 8px);
    background: var(--qm-surface-light, #f8fafc);
    border: 1px solid var(--qm-border-light, #e2e8f0);
    margin: 2rem 0;
}
.trd-author-box__inner {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.trd-author-box__avatar {
    flex-shrink: 0;
}
.trd-author-box__avatar img {
    border-radius: 50%;
    display: block;
}
.trd-author-box__content {
    flex: 1;
}
.trd-author-box__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qm-text-muted, #64748b);
    margin-bottom: 0.25rem;
}
.trd-author-box__name {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 700;
}
.trd-author-box__name a {
    color: inherit;
    text-decoration: none;
}
.trd-author-box__name a:hover {
    color: var(--qm-color-primary, #054f8e);
}
.trd-author-box__bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--qm-text-muted, #475569);
    margin: 0 0 0.75rem 0;
}
.trd-author-box__link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--qm-color-primary, #054f8e);
    text-decoration: none;
}
.trd-author-box__link:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .trd-author-box__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* 3. Post Navigation */
.trd-post-navigation {
    margin: 2.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--qm-border-light, #e2e8f0);
    border-bottom: 1px solid var(--qm-border-light, #e2e8f0);
}
.trd-post-navigation__inner {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}
.trd-post-nav-item {
    flex: 1;
    max-width: 48%;
}
.trd-post-nav-item--next {
    text-align: right;
}
.trd-post-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s ease;
}
.trd-post-nav-item--next .trd-post-nav-link {
    justify-content: flex-end;
}
.trd-post-nav-link:hover .trd-post-nav-title {
    color: var(--qm-color-primary, #054f8e);
}
.trd-post-nav-arrow {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--qm-text-muted, #94a3b8);
    flex-shrink: 0;
}
.trd-post-nav-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.trd-post-nav-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--qm-text-muted, #64748b);
}
.trd-post-nav-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--qm-text-main, #0f172a);
    transition: color 0.15s ease;
}
@media (max-width: 640px) {
    .trd-post-navigation__inner {
        flex-direction: column;
    }
    .trd-post-nav-item {
        max-width: 100%;
    }
    .trd-post-nav-item--next {
        text-align: left;
    }
    .trd-post-nav-item--next .trd-post-nav-link {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}

/* 4. Comments Area */
.trd-comments-area,
.trd-post-comments {
    margin: 2.5rem 0;
}
.trd-comments-title,
.trd-reply-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.trd-comment-list,
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
.trd-comment-list .comment,
.comment-list .comment {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--qm-border-light, #e2e8f0);
}
.comment-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.comment-author .avatar {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}
.comment-author .fn {
    font-weight: 600;
    font-style: normal;
}
.comment-metadata {
    font-size: 0.85rem;
    color: var(--qm-text-muted, #64748b);
}
.comment-metadata a {
    color: inherit;
    text-decoration: none;
}
.comment-content {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0.5rem 0;
}
.reply a {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--qm-color-primary, #054f8e);
    text-decoration: none;
}
.children {
    list-style: none;
    padding-left: 2rem;
    margin-top: 1rem;
}
.comment-form p {
    margin-bottom: 1rem;
}
.comment-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--qm-text-main, #0f172a);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--qm-border-light, #cbd5e1);
    border-radius: var(--radius-m, 6px);
    font-family: inherit;
    font-size: 0.95rem;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--qm-color-primary, #054f8e);
    box-shadow: 0 0 0 3px rgba(5, 79, 142, 0.12);
}
.comment-form .form-submit {
    margin-top: 1.25rem;
}

/* 5. Post Meta */
.trd-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--qm-text-muted, #64748b);
    margin: 0.75rem 0;
}
.trd-post-meta a {
    color: inherit;
    text-decoration: none;
}
.trd-post-meta a:hover {
    color: var(--qm-color-primary, #054f8e);
}
.trd-post-meta__sep {
    color: #94a3b8;
    user-select: none;
}

/* 6. Post Image */
.trd-post-image {
    margin: 1.5rem 0;
    overflow: hidden;
}
.trd-post-image__img {
    max-width: 100%;
    display: block;
}


/* ==========================================================================
   Back to Top Element
   ========================================================================== */
.trd-back-to-top {
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 9999;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.trd-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.trd-back-to-top:focus-visible {
    outline: 2px solid var(--qm-primary, #2563eb);
    outline-offset: 3px;
}

.trd-back-to-top.trd-btt--bottom-right {
    bottom: 24px;
    right: 24px;
}
.trd-back-to-top.trd-btt--bottom-left {
    bottom: 24px;
    left: 24px;
}
.trd-back-to-top.trd-btt--top-right {
    top: 24px;
    right: 24px;
}
.trd-back-to-top.trd-btt--top-left {
    top: 24px;
    left: 24px;
}

.trd-back-to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.trd-back-to-top .trd-btt-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.trd-back-to-top.trd-btt--editor-preview {
    opacity: 0.9 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}
.trd-back-to-top.trd-btt--editor-preview:hover {
    opacity: 1 !important;
}
.trd-back-to-top.trd-btt--editor-preview.is-disabled {
    opacity: 0.45 !important;
    filter: grayscale(1);
}