/**
 * 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-size: var(--text-m, 1rem);
    font-weight: 600;
    line-height: 1.25;
    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);
}

.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: baseline;
    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;
        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(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);
}

: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-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;
    font-size: var(--h4, 1.4rem);
    color: var(--qm-heading-color, #0f172a);
}

: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) {
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
    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-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-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 0.5s ease, visibility 0.5s 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 */
: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;
}
: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 */
.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%;
    text-decoration: none;
    color: inherit;
}
.trd-image-carousel-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    transition: transform 0.2s ease;
}
.trd-image-carousel-caption {
    margin-top: 0.5rem;
    font-size: var(--text-sm, 13px);
    color: var(--qm-color-text-muted, #64748b);
}

/* Hero Slider Layout */
.trd-hero-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 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-size: var(--text-l, 1.15rem);
    font-weight: 600;
    color: var(--qm-heading-color, #0f172a);
    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: var(--qm-primary, #054f8e);
}

: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;
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
}

/* ==========================================================================
   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;
}

: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-size: var(--text-mm, 1.15rem);
    font-style: italic;
    color: var(--qm-text-color, #334155);
    margin-bottom: 1.5rem;
    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;
}

: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: hidden;
}

: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. */

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

/* The element owns the spacing; the nav inside it does not add a second margin. */
.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;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    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;
    stroke: currentColor;
    fill: none;
    display: block;
}

: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;
    font-size: var(--h4, 1.35rem);
    font-weight: 700;
    color: var(--qm-heading-color, #0f172a);
}

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

/* ==========================================================================
   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;
    font-size: var(--h4, 1.35rem);
    color: var(--qm-heading-color, #0f172a);
}

:is(.trd-image-box-desc,.qm-image-box-desc) {
    margin: 0 0 1rem 0;
    color: var(--qm-text-color, #475569);
    line-height: var(--text-line-height, 1.6);
    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-size: var(--text-m, 1rem);
    color: var(--qm-text-color, #334155);
}

:is(.trd-icon-list-icon,.qm-icon-list-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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;
}

/* ==========================================================================
   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-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-size: var(--h4, 1.4rem);
    margin: 0 0 0.5rem 0;
    color: var(--qm-heading-color, #0f172a);
}

: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-size: var(--h1, 3.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--qm-heading-color, #0f172a);
}

:is(.trd-pricing-period,.qm-pricing-period) {
    font-size: var(--text-s, 0.95rem);
    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;
}

/* ==========================================================================
   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;
}

:is(.trd-tab-btn-item,.qm-tab-btn-item) {
    padding: 0.85rem 1.5rem;
    font-size: var(--text-m, 1rem);
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--qm-text-color, #64748b);
    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;
}

/* ==========================================================================
   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) {
    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;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

: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;
}

/* ==========================================================================
   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-wrapper,.qm-form-wrapper) {
    width: 100%;
    background: #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-direction: column;
    gap: 1.25rem;
}

:is(.trd-form-group,.qm-form-group) {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

:is(.trd-form-label,.qm-form-label) {
    font-size: 13px;
    font-weight: 600;
    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;
}

/* 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-size: 14px;
    font-family: inherit;
    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%;
}
.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;
    list-style: none;
    margin: 0;
    padding: 0;
}
.trd-menu-item-row {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.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-item-row > .trd-menu-link,
.trd-menu-item.current-menu-ancestor > .trd-menu-item-row > .trd-menu-link,
.trd-menu-item.current_page_item > .trd-menu-item-row > .trd-menu-link,
.trd-menu-item.current_page_ancestor > .trd-menu-item-row > .trd-menu-link {
    color: var(--qm-color-primary, #054f8e);
}

/* Submenu Indicator (Chevron) */
.trd-menu-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 6px;
    transition: transform 0.2s ease;
    color: currentColor;
    opacity: 0.75;
}
.trd-menu-indicator svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}
.trd-menu-item.level-2 .trd-menu-indicator svg,
.trd-menu-item--level-1 .trd-menu-indicator svg {
    transform: rotate(-90deg);
}

/* ==========================================================================
   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;
    }

    /* Level 3 Submenu (Flyout from Level 2 item) */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-menu-item.level-2 > .trd-submenu,
    .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-submenu.level-3,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-2 {
        top: 0;
        left: 100%;
        margin-left: 2px;
    }

    /* Viewport edge auto-flip for Level 3 flyout */
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu.level-3.trd-submenu--flip-left,
    .trd-nav-menu:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-2.trd-submenu--flip-left {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 2px !important;
    }

    /* Explicit Level 3 direction overrides the automatic viewport choice. */
    .trd-nav-menu--submenu-left:not(.trd-nav-menu--force-mobile) .trd-submenu.level-3,
    .trd-nav-menu--submenu-left:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-2 {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 2px !important;
    }
    .trd-nav-menu--submenu-right:not(.trd-nav-menu--force-mobile) .trd-submenu.level-3,
    .trd-nav-menu--submenu-right:not(.trd-nav-menu--force-mobile) .trd-submenu--depth-2 {
        left: 100% !important;
        right: auto !important;
        margin-left: 2px !important;
        margin-right: 0 !important;
    }

    /* 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;
        width: 100%;
        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-item-row > .trd-menu-link,
    .trd-submenu .trd-menu-item.current_page_item > .trd-menu-item-row > .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 svg,
.trd-nav-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

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

/* ==========================================================================
   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 {
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-item-row,
    .trd-nav-menu--bp-tablet .trd-menu-item-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-tablet .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-menu-link {
        flex: 1;
        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-menu-item-row .trd-submenu-toggle,
    .trd-nav-menu--bp-tablet .trd-menu-item.is-expanded > .trd-menu-item-row .trd-submenu-toggle {
        transform: rotate(180deg);
    }
    .trd-nav-menu--breakpoint-tablet .trd-submenu,
    .trd-nav-menu--bp-tablet .trd-submenu {
        display: none !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.level-2 .trd-menu-link,
    .trd-nav-menu--breakpoint-tablet .trd-submenu--depth-1 .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-submenu.level-2 .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-submenu--depth-1 .trd-menu-link {
        padding-left: var(--qmt-nav-indent-l2, 32px);
    }
    .trd-nav-menu--breakpoint-tablet .trd-submenu.level-3 .trd-menu-link,
    .trd-nav-menu--breakpoint-tablet .trd-submenu--depth-2 .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-submenu.level-3 .trd-menu-link,
    .trd-nav-menu--bp-tablet .trd-submenu--depth-2 .trd-menu-link {
        padding-left: var(--qmt-nav-indent-l3, 48px);
    }
}

/* ==========================================================================
   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 {
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-item-row,
    .trd-nav-menu--bp-mobile .trd-menu-item-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .trd-nav-menu--breakpoint-mobile .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-menu-link {
        flex: 1;
        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-menu-item-row .trd-submenu-toggle,
    .trd-nav-menu--bp-mobile .trd-menu-item.is-expanded > .trd-menu-item-row .trd-submenu-toggle {
        transform: rotate(180deg);
    }
    .trd-nav-menu--breakpoint-mobile .trd-submenu,
    .trd-nav-menu--bp-mobile .trd-submenu {
        display: none !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.level-2 .trd-menu-link,
    .trd-nav-menu--breakpoint-mobile .trd-submenu--depth-1 .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-submenu.level-2 .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-submenu--depth-1 .trd-menu-link {
        padding-left: var(--qmt-nav-indent-l2, 32px);
    }
    .trd-nav-menu--breakpoint-mobile .trd-submenu.level-3 .trd-menu-link,
    .trd-nav-menu--breakpoint-mobile .trd-submenu--depth-2 .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-submenu.level-3 .trd-menu-link,
    .trd-nav-menu--bp-mobile .trd-submenu--depth-2 .trd-menu-link {
        padding-left: var(--qmt-nav-indent-l3, 48px);
    }
}

/* ==========================================================================
   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 {
    width: 100% !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-menu-link {
    flex: 1;
    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-menu-item-row .trd-submenu-toggle {
    transform: rotate(180deg);
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu {
    display: none !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.level-2 .trd-menu-link,
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu--depth-1 .trd-menu-link {
    padding-left: var(--qmt-nav-indent-l2, 32px);
}
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu.level-3 .trd-menu-link,
.trd-nav-menu.trd-nav-menu--force-mobile .trd-submenu--depth-2 .trd-menu-link {
    padding-left: var(--qmt-nav-indent-l3, 48px);
}

/* ==========================================================================
   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-size: 14px;
    line-height: 1.5;
    color: var(--qm-text-color, #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;
    }
}