/*
 * Hyndle frontend styles — rendered on published pages.
 * Loaded only when a Hyndle page is output via WidgetRenderer.
 * Uses BEM-style classes; no inline styles except where injected by WidgetRenderer (color, border-radius).
 */

/* ── Page + Section layout ───────────────────────────────────────────────────── */

/*
 * Full-width Hyndle sections need to break out of the WordPress theme's
 * content container (e.g. .entry-content with max-width + padding).
 *
 * The technique: when the theme container is horizontally centred,
 *   margin-left: calc(50% - 50vw)
 * is negative and pulls the element's left edge to the viewport edge.
 * width: 100vw then spans the full viewport.
 *
 * overflow-x: hidden on body prevents the horizontal scrollbar that would
 * otherwise appear because the section now overflows the content column.
 */
body.hyndle-frontend {
    overflow-x: hidden;
}

.hyndle-page {
    width: 100%;
}

.hyndle-page > .hyndle-section--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hyndle-section {
    width: 100%;
    margin-bottom: 0;
    /* Anchors absolutely-positioned children: shape dividers, background
       video/slideshow layers. Content itself stays in normal flow. */
    position: relative;
}

.hyndle-section.hy-has-link {
    cursor: pointer;
}

/* ── Shape dividers ───────────────────────────────────────────────────────── */

.hy-shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}
.hy-shape-divider--top    { top: 0; }
.hy-shape-divider--bottom { bottom: 0; }

.hy-shape-divider svg {
    display: block;
    width: 100%;
    position: relative;
}

/* ── Background video / slideshow ────────────────────────────────────────── */
/* z-index:-1 specifically (not just position:absolute) - a positioned
   descendant with z-index:auto paints ABOVE normal in-flow content per the
   CSS stacking spec, which is the opposite of what a background layer needs. */

.hy-bg-video-wrap,
.hy-bg-slideshow {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hy-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* YouTube/Vimeo embeds: object-fit doesn't reliably apply to iframes across
   browsers, and the wrapper here is an arbitrary section box (not the
   viewport), so a vw/vh "fullscreen trick" would only look right when the
   section happens to be near full-height. hyndle-frontend.js measures the
   wrapper and sets width/height in px to actually cover it, then this just
   centers+crops the oversized result. */
.hy-bg-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
}

/* Decorative (no controls): clicks should pass through to whatever's
   "above" this layer (e.g. a Link-To section) instead of hitting the iframe. */
.hy-bg-video-embed--no-controls {
    pointer-events: none;
}

.hy-bg-slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}
.hy-bg-slide.is-active { opacity: 1; }

/* ── Generic widget wrapper ──────────────────────────────────────────────────── */
/* No default margins and no :last-child resets: spacing comes only from the
   user's own margin controls — the canvas must match the published page
   exactly. (The old 1.5em default + last-child resets silently overrode the
   user's bottom margins.) */

/* ── Alignment utilities ─────────────────────────────────────────────────────── */

.hyndle-align-left    { text-align: left; }
.hyndle-align-center  { text-align: center; }
.hyndle-align-right   { text-align: right; }
.hyndle-align-justify { text-align: justify; }

/* ── Heading ─────────────────────────────────────────────────────────────────── */

.hyndle-heading {
    margin: 0 0 0.4em;
    line-height: 1.2;
    font-weight: 700;
}

/* ── Text ────────────────────────────────────────────────────────────────────── */

.hyndle-text {
    font-size: 1em;
    line-height: 1.7;
}

.hyndle-text p:first-child { margin-top: 0; }
.hyndle-text p:last-child  { margin-bottom: 0; }

/* ── Image ───────────────────────────────────────────────────────────────────── */

.hyndle-image {
    display: block;
    line-height: 0; /* prevents gap below img caused by inline baseline */
}

.hyndle-image a {
    display: block;
}

.hyndle-image__img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Placeholder shown when no attachment ID is set */
.hyndle-image--placeholder {
    display: block;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #e5e7eb;
    border-radius: 4px;
    position: relative;
}

.hyndle-image--placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E") center no-repeat;
}

/* ── Button ──────────────────────────────────────────────────────────────────── */

.hyndle-button-wrap {
    display: block;
}

.hyndle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.15s ease, transform 0.1s ease;
    border: 2px solid transparent;
}

.hyndle-button:hover {
    opacity: 0.88;
    text-decoration: none;
}

.hyndle-button:active {
    transform: translateY(1px);
}

.hyndle-button--full {
    display: flex;
    width: 100%;
}

/* Variants */
.hyndle-button--primary {
    background: #70D6FF;
    color: #0D1117;
    border-color: #70D6FF;
}

.hyndle-button--outline {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.hyndle-button--ghost {
    background: transparent;
    border-color: transparent;
    color: inherit;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hyndle-button--ghost:hover {
    opacity: 0.7;
}

/* Sizes */
.hyndle-button--sm { padding: 7px 16px; font-size: 0.875em; }
.hyndle-button--md { padding: 11px 24px; font-size: 1em; }
.hyndle-button--lg { padding: 15px 32px; font-size: 1.125em; }

/* Center/right aligned button wrappers */
.hyndle-align-center .hyndle-button { margin-left: auto; margin-right: auto; }
.hyndle-align-right  .hyndle-button { margin-left: auto; }

/* ── Divider ─────────────────────────────────────────────────────────────────── */

.hyndle-divider {
    border: none;
    margin: 0;
    background: none;
    display: block;
}

.hyndle-divider--space {
    /* spacing handled via inline margin styles from WidgetRenderer */
}

/* ── Section layout modes ────────────────────────────────────────────────────── */

/* Columns mode: inner grid wrapper — grid-template-columns/gap compiled by WidgetRenderer */
.hyndle-section__columns {
    display: grid;
    width: 100%;
}

.hyndle-column {
    min-width: 0; /* prevents grid blowout */
}

/* Inner sections render as blocks inside their parent */
.hyndle-section--inner {
    width: 100%;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .hyndle-button--lg {
        padding: 12px 24px;
        font-size: 1em;
    }

    /* Collapse all column layouts to single column on mobile */
    .hyndle-section__columns {
        grid-template-columns: 1fr !important;
    }
}

/* ── Heading widget ─────────────────────────────────────────────────────────── */
.hy-heading { margin: 0; }
.hy-heading__link { color: inherit; text-decoration: inherit; }
.hy-heading__link:hover { opacity: 0.85; }

/* Grid/flex cell guard — wide content must never stretch its track */
.hyndle-widget { min-width: 0; }

/* ── Text Editor widget ─────────────────────────────────────────────────────── */
.hy-text > p:first-child { margin-top: 0; }
.hy-text > p:last-child  { margin-bottom: 0; }

/* Drop cap — first letter of the first paragraph */
.hyndle-page .hy-text--dropcap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.75;
    font-weight: 700;
    margin: 0.08em 0.14em 0 0;
}

/* ── Image widget ───────────────────────────────────────────────────────────── */
.hy-image { margin: 0; line-height: 0; }
.hy-image__img {
    display: inline-block;
    width: var(--hy-img-w, auto);
    max-width: min(var(--hy-img-maxw, 100%), 100%);
    height: var(--hy-img-h, auto);
    object-fit: var(--hy-img-fit, cover);
    border-radius: var(--hy-img-radius, 0);
    opacity: var(--hy-img-op, 1);
    filter: var(--hy-img-filter, none);
    transform: scale(var(--hy-img-scale, 1));
    transition: var(--hy-img-tr, none);
}
.hy-image__link { display: inline-block; line-height: 0; }
.hy-image__placeholder {
    display: inline-block;
    padding: 32px 48px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
    border-radius: 8px;
    color: #9A9AA8;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Lightbox ───────────────────────────────────────────────────────────────── */
.hy-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 16, 0.92);
    cursor: zoom-out;
    animation: hy-lightbox-in 160ms ease;
}
.hy-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
@keyframes hy-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* Lightbox media variants (video files + YouTube/Vimeo embeds) */
.hy-lightbox video {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
}
/* Gallery navigation (grouped lightbox links) */
.hy-lightbox__nav {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 150ms ease;
}
.hy-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.hy-lightbox__nav svg { width: 24px; height: 24px; }
.hy-lightbox__nav--prev { left: 20px; }
.hy-lightbox__nav--next { right: 20px; }
.hy-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.hy-lightbox__frame {
    width: min(92vw, 1200px);
    height: auto;
    padding-bottom: 0;
    min-height: 180px;
    max-height: 92vh;
    border-radius: 6px;
    background: #000;
}

/* ── Video widget ───────────────────────────────────────────────────────────── */
.hy-video {
    position: relative;
    width: 100%;
    /* Padding-bottom ratio: the height comes from padding, so the box can
       NEVER be zero-height regardless of browser or theme CSS. The compiled
       --hy-video-pb from the Aspect ratio control overrides the 16:9 default. */
    height: 0;
    padding-bottom: var(--hy-video-pb, 56.25%);
    overflow: hidden;
    background: #000;
}
.hy-video__frame,
.hy-video__file {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.hy-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #000;
    background-size: cover;
    background-position: center;
}
.hy-video__play {
    display: inline-flex;
    width: var(--hy-video-icon-size, 72px);
    height: var(--hy-video-icon-size, 72px);
    color: var(--hy-video-icon-color, #FFFFFF);
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
    transition: transform 140ms ease;
}
.hy-video__play svg { width: 100%; height: 100%; }
/* Font Awesome play icon — glyph scales with the same size variable */
.hy-video__play i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: calc(var(--hy-video-icon-size, 72px) * 0.82);
    line-height: 1;
}
/* Custom SVG icons render as <img> (never inlined) */
.hy-icon-svg { width: 100%; height: 100%; object-fit: contain; }
.hy-video__overlay:hover .hy-video__play { transform: scale(1.08); }

/* ── Button widget ───────────────────────────────────────────────────────────
   All styling rides CSS custom properties compiled onto .hy-btn-wrap (the
   widget's inner root) — hover states are pure CSS var fallback chains.
   Size presets define the *-def fallbacks; explicit props override them.
   The doubled .hy-btn.hy-btn (0,3,0 with the page scope) is deliberate: the
   button is an <a>, and theme rules like `.entry-content a` / `a:visited`
   (0,2,1+) out-ranked a bare .hy-btn — near-black theme link colours made
   the text invisible on the dark pill. */
.hyndle-page .hy-btn.hy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hy-btn-icon-gap, 8px);
    padding: var(--hy-btn-pad-y, var(--hy-btn-pad-y-def, 14px)) var(--hy-btn-pad-x, var(--hy-btn-pad-x-def, 28px));
    font-size: var(--hy-btn-fs, var(--hy-btn-fs-def, 16px));
    font-weight: 500;
    line-height: 1.2;
    color: var(--hy-btn-color, #FFFFFF);
    background: var(--hy-btn-bg, #1A1A2A);
    border: var(--hy-btn-border-w, 0) solid var(--hy-btn-border-color, transparent);
    border-radius: var(--hy-btn-radius, 6px);
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.hyndle-page .hy-btn.hy-btn:hover,
.hyndle-page .hy-btn.hy-btn:focus {
    color: var(--hy-btn-color-hover, var(--hy-btn-color, #FFFFFF));
    background: var(--hy-btn-bg-hover, var(--hy-btn-bg, #1A1A2A));
    border-color: var(--hy-btn-border-color-hover, var(--hy-btn-border-color, transparent));
    text-decoration: none;
}
.hyndle-page .hy-btn.hy-btn--xs { --hy-btn-pad-y-def: 8px;  --hy-btn-pad-x-def: 16px; --hy-btn-fs-def: 13px; }
.hyndle-page .hy-btn.hy-btn--sm { --hy-btn-pad-y-def: 11px; --hy-btn-pad-x-def: 22px; --hy-btn-fs-def: 14px; }
.hyndle-page .hy-btn.hy-btn--md { --hy-btn-pad-y-def: 14px; --hy-btn-pad-x-def: 28px; --hy-btn-fs-def: 16px; }
.hyndle-page .hy-btn.hy-btn--lg { --hy-btn-pad-y-def: 18px; --hy-btn-pad-x-def: 36px; --hy-btn-fs-def: 18px; }
.hyndle-page .hy-btn.hy-btn--xl { --hy-btn-pad-y-def: 22px; --hy-btn-pad-x-def: 46px; --hy-btn-fs-def: 20px; }
.hyndle-page .hy-btn.hy-btn--full { display: flex; width: 100%; }
.hy-btn__icon { display: inline-flex; align-items: center; }
.hy-btn__icon i { font-size: 1em; }
.hy-btn__icon svg,
.hy-btn__icon .hy-icon-svg { width: 1em; height: 1em; }

/* ── Call To Action widget ───────────────────────────────────────────────────
   Skins: classic (image beside content) / cover (image behind content).
   Title / description / button / ribbon are independent siblings, so each
   gets its own scoped --hy-cta-{title,desc,btn,ribbon}-* namespace (compiled
   by Typography::compileAsVars() in Control.php) instead of inheritable
   direct properties — the same reason button uses --hy-btn-fs for font-size. */
.hy-cta {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: inherit;
}
a.hy-cta { text-decoration: none; color: inherit; }
.hy-cta.hy-cta--skin-classic.hy-cta--pos-left   { flex-direction: row; }
.hy-cta.hy-cta--skin-classic.hy-cta--pos-right  { flex-direction: row-reverse; }
.hy-cta.hy-cta--skin-classic.hy-cta--pos-top    { flex-direction: column; }
.hy-cta.hy-cta--skin-classic.hy-cta--pos-bottom { flex-direction: column-reverse; }
.hy-cta.hy-cta--skin-cover { min-height: 320px; }

/* Classic skin: side image */
.hy-cta__media { flex: 0 0 40%; min-width: 0; align-self: stretch; }
.hy-cta.hy-cta--skin-classic.hy-cta--pos-top .hy-cta__media,
.hy-cta.hy-cta--skin-classic.hy-cta--pos-bottom .hy-cta__media { flex-basis: auto; width: 100%; }
.hyndle-page .hy-cta__media-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-height: 200px;
    object-fit: cover;
}

/* Cover skin: full-bleed background, content overlaid */
.hy-cta__bg { position: absolute; inset: 0; z-index: 0; }
.hyndle-page .hy-cta__bg-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
}
.hy-cta__overlay {
    position: absolute;
    inset: 0;
    background: var(--hy-cta-overlay-color, #0E0E10);
    opacity: var(--hy-cta-overlay-opacity, 0.5);
}

/* Content */
.hy-cta__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: var(--hy-cta-align-items, flex-start);
    flex: 1 1 auto;
    min-width: 0;
    padding: 40px;
    gap: 10px;
}
.hy-cta.hy-cta--valign-top .hy-cta__content { justify-content: flex-start; }
.hy-cta.hy-cta--valign-middle .hy-cta__content { justify-content: center; }
.hy-cta.hy-cta--valign-bottom .hy-cta__content { justify-content: flex-end; }
.hy-cta.hy-cta--skin-cover .hy-cta__content { color: #FFFFFF; }

/* Ribbon — a flat corner badge (not Elementor's rotated-diagonal banner,
   which needs careful width/overflow math to avoid clipping at small sizes). */
.hy-cta__ribbon { position: absolute; top: 16px; z-index: 2; }
.hy-cta__ribbon--left { left: 16px; }
.hy-cta__ribbon--right { right: 16px; }
.hy-cta__ribbon-inner {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--hy-cta-ribbon-color, #FFFFFF);
    background: var(--hy-cta-ribbon-bg, #70D6FF);
    font-family: var(--hy-cta-ribbon-font-family, inherit);
    font-size: var(--hy-cta-ribbon-font-size, 12px);
    font-weight: var(--hy-cta-ribbon-font-weight, 600);
    text-transform: var(--hy-cta-ribbon-text-transform, uppercase);
    font-style: var(--hy-cta-ribbon-font-style, normal);
    text-decoration: var(--hy-cta-ribbon-text-decoration, none);
    line-height: var(--hy-cta-ribbon-line-height, 1.4);
    letter-spacing: var(--hy-cta-ribbon-letter-spacing, 0.02em);
    text-shadow: var(--hy-cta-ribbon-text-shadow, none);
}

/* Graphic icon */
.hy-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--hy-cta-icon-gap, 16px);
    color: var(--hy-cta-icon-color, #1A1A2A);
    font-size: var(--hy-cta-icon-size, 40px);
    line-height: 1;
}
.hy-cta.hy-cta--skin-cover .hy-cta__icon { color: var(--hy-cta-icon-color, #FFFFFF); }
.hy-cta__icon svg,
.hy-cta__icon .hy-icon-svg { width: 1em; height: 1em; }

/* Title */
.hy-cta__title {
    margin: 0;
    color: var(--hy-cta-title-color, #1A1A2A);
    font-family: var(--hy-cta-title-font-family, inherit);
    font-size: var(--hy-cta-title-font-size, 28px);
    font-weight: var(--hy-cta-title-font-weight, 700);
    text-transform: var(--hy-cta-title-text-transform, none);
    font-style: var(--hy-cta-title-font-style, normal);
    text-decoration: var(--hy-cta-title-text-decoration, none);
    line-height: var(--hy-cta-title-line-height, 1.25);
    letter-spacing: var(--hy-cta-title-letter-spacing, normal);
    text-shadow: var(--hy-cta-title-text-shadow, none);
}
.hy-cta.hy-cta--skin-cover .hy-cta__title { color: var(--hy-cta-title-color, #FFFFFF); }
.hy-cta:hover .hy-cta__title { color: var(--hy-cta-title-color-h, var(--hy-cta-title-color, inherit)); }

/* Description */
.hy-cta__desc {
    color: var(--hy-cta-desc-color, #6E6E7C);
    font-family: var(--hy-cta-desc-font-family, inherit);
    font-size: var(--hy-cta-desc-font-size, 16px);
    font-weight: var(--hy-cta-desc-font-weight, 400);
    text-transform: var(--hy-cta-desc-text-transform, none);
    font-style: var(--hy-cta-desc-font-style, normal);
    text-decoration: var(--hy-cta-desc-text-decoration, none);
    line-height: var(--hy-cta-desc-line-height, 1.6);
    letter-spacing: var(--hy-cta-desc-letter-spacing, normal);
    text-shadow: var(--hy-cta-desc-text-shadow, none);
}
.hy-cta.hy-cta--skin-cover .hy-cta__desc { color: var(--hy-cta-desc-color, rgba(255, 255, 255, .85)); }
.hy-cta:hover .hy-cta__desc { color: var(--hy-cta-desc-color-h, var(--hy-cta-desc-color, inherit)); }

/* Button — same var-driven shape as the standalone Button widget, own
   namespace. Doubled class + .hyndle-page (0,3,0) beats theme `.entry-content
   a` link colours, same lesson as .hy-btn. */
.hyndle-page .hy-cta__btn.hy-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: var(--hy-cta-btn-pad-y, var(--hy-cta-btn-pad-y-def, 12px)) var(--hy-cta-btn-pad-x, var(--hy-cta-btn-pad-x-def, 24px));
    color: var(--hy-cta-btn-color, #FFFFFF);
    background: var(--hy-cta-btn-bg, #1A1A2A);
    border: var(--hy-cta-btn-border-w, 0) solid var(--hy-cta-btn-border-color, transparent);
    border-radius: var(--hy-cta-btn-radius, 6px);
    font-family: var(--hy-cta-btn-font-family, inherit);
    font-size: var(--hy-cta-btn-font-size, var(--hy-cta-btn-fs-def, 15px));
    font-weight: var(--hy-cta-btn-font-weight, 500);
    text-transform: var(--hy-cta-btn-text-transform, none);
    font-style: var(--hy-cta-btn-font-style, normal);
    text-decoration: none;
    line-height: var(--hy-cta-btn-line-height, 1.2);
    letter-spacing: var(--hy-cta-btn-letter-spacing, normal);
    text-shadow: var(--hy-cta-btn-text-shadow, none);
    box-shadow: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.hyndle-page .hy-cta__btn.hy-cta__btn--xs { --hy-cta-btn-pad-y-def: 7px;  --hy-cta-btn-pad-x-def: 14px; --hy-cta-btn-fs-def: 12px; }
.hyndle-page .hy-cta__btn.hy-cta__btn--sm { --hy-cta-btn-pad-y-def: 9px;  --hy-cta-btn-pad-x-def: 18px; --hy-cta-btn-fs-def: 13px; }
.hyndle-page .hy-cta__btn.hy-cta__btn--md { --hy-cta-btn-pad-y-def: 12px; --hy-cta-btn-pad-x-def: 24px; --hy-cta-btn-fs-def: 15px; }
.hyndle-page .hy-cta__btn.hy-cta__btn--lg { --hy-cta-btn-pad-y-def: 15px; --hy-cta-btn-pad-x-def: 30px; --hy-cta-btn-fs-def: 16px; }
.hyndle-page .hy-cta__btn.hy-cta__btn--xl { --hy-cta-btn-pad-y-def: 18px; --hy-cta-btn-pad-x-def: 38px; --hy-cta-btn-fs-def: 18px; }
/* Ancestor-hover (whole-card link mode) as well as self-hover (button-only
   link mode) both drive the same visual state. */
.hyndle-page .hy-cta:hover .hy-cta__btn.hy-cta__btn,
.hyndle-page .hy-cta__btn.hy-cta__btn:hover,
.hyndle-page .hy-cta__btn.hy-cta__btn:focus {
    color: var(--hy-cta-btn-color-h, var(--hy-cta-btn-color, #FFFFFF));
    background: var(--hy-cta-btn-bg-h, var(--hy-cta-btn-bg, #1A1A2A));
    border-color: var(--hy-cta-btn-border-color-h, var(--hy-cta-btn-border-color, transparent));
    text-decoration: none;
}

@media (max-width: 640px) {
    .hy-cta.hy-cta--skin-classic { flex-direction: column !important; }
    .hy-cta.hy-cta--skin-classic .hy-cta__media { width: 100%; flex-basis: auto; }
}

/* ── Testimonial Carousel + Reviews — shared person chrome ───────────────────
   Both widgets share ONE avatar/name/title/quote-text vocabulary (built by
   Hyndle\Widgets\Testimonials — same reasoning as LoopQuery's shared card):
   .hy-test__avatar / __cite / __name / __title / __text render and style
   identically wherever they appear, so these rules are NOT scoped to either
   widget's own wrapper. Carousel chrome is the existing .hy-loopcar (Loop
   Carousel) — no new carousel engine. */

/* Arrow-overlap fix (same lesson as Slides' .hy-slides__content 88px padding):
   both widgets commonly show ONE full-width card (slides_to_show defaults to
   1), so the 40px arrow buttons at left:8px/right:8px sit directly on top of
   the card's edge text with nothing to clear them. Padding the TRACK (not
   each card) insets space only at the very first/last card, so multi-per-view
   layouts don't waste space between middle cards. Scoped to these two
   widgets' own wrapper classes — loop-carousel/video-carousel keep their
   existing (unaffected) spacing. */
.hy-testcar .hy-loopcar__track,
.hy-revcar .hy-loopcar__track {
    padding: 0 64px;
}
@media (max-width: 480px) {
    .hy-testcar .hy-loopcar__track,
    .hy-revcar .hy-loopcar__track {
        padding: 0 40px;
    }
}

.hy-test__avatar {
    display: block;
    width: var(--hy-test-avatar-size, 56px);
    height: var(--hy-test-avatar-size, 56px);
    flex: 0 0 auto;
    border-radius: var(--hy-test-avatar-radius, 999px);
    object-fit: cover;
    border: var(--hy-test-avatar-border-w, 0) solid var(--hy-test-avatar-border-color, transparent);
}
.hy-test__cite { display: flex; flex-direction: column; gap: 2px; font-style: normal; min-width: 0; }
.hy-test__name {
    color: var(--hy-test-name-color, #1A1A2A);
    font-family: var(--hy-test-name-font-family, inherit);
    font-size: var(--hy-test-name-font-size, 16px);
    font-weight: var(--hy-test-name-font-weight, 600);
    text-transform: var(--hy-test-name-text-transform, none);
    font-style: var(--hy-test-name-font-style, normal);
    text-decoration: var(--hy-test-name-text-decoration, none);
    line-height: var(--hy-test-name-line-height, 1.3);
    letter-spacing: var(--hy-test-name-letter-spacing, normal);
}
.hy-test__title {
    color: var(--hy-test-title-color, #6E6E7C);
    font-family: var(--hy-test-title-font-family, inherit);
    font-size: var(--hy-test-title-font-size, 14px);
    font-weight: var(--hy-test-title-font-weight, 400);
    text-transform: var(--hy-test-title-text-transform, none);
    font-style: var(--hy-test-title-font-style, normal);
    text-decoration: var(--hy-test-title-text-decoration, none);
    line-height: var(--hy-test-title-line-height, 1.3);
    letter-spacing: var(--hy-test-title-letter-spacing, normal);
}
.hy-test__text {
    color: var(--hy-test-content-color, #3F3F49);
    font-family: var(--hy-test-content-font-family, inherit);
    font-size: var(--hy-test-content-font-size, 16px);
    font-weight: var(--hy-test-content-font-weight, 400);
    text-transform: var(--hy-test-content-text-transform, none);
    font-style: var(--hy-test-content-font-style, normal);
    text-decoration: var(--hy-test-content-text-decoration, none);
    line-height: var(--hy-test-content-line-height, 1.6);
    letter-spacing: var(--hy-test-content-letter-spacing, normal);
    text-shadow: var(--hy-test-content-text-shadow, none);
}
.hy-test:hover .hy-test__name { color: var(--hy-test-name-color-h, var(--hy-test-name-color, inherit)); }
.hy-test:hover .hy-test__title { color: var(--hy-test-title-color-h, var(--hy-test-title-color, inherit)); }
.hy-test:hover .hy-test__text { color: var(--hy-test-content-color-h, var(--hy-test-content-color, inherit)); }

/* ── Testimonial Carousel ─────────────────────────────────────────────────── */
.hy-test {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    align-items: flex-start;
    text-align: left;
}
.hy-testcar--align-center .hy-test { align-items: center; text-align: center; }
.hy-testcar--align-right .hy-test { align-items: flex-end; text-align: right; }

.hy-test__footer { display: flex; align-items: center; gap: var(--hy-test-avatar-gap, 12px); }
.hy-testcar--layout-image_stacked .hy-test__footer,
.hy-testcar--layout-image_above .hy-test__footer { flex-direction: column; }

.hy-testcar--layout-image_left .hy-test,
.hy-testcar--layout-image_right .hy-test {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--hy-test-avatar-gap, 20px);
}
.hy-testcar--layout-image_right .hy-test { flex-direction: row-reverse; }
.hy-testcar--layout-image_left.hy-testcar--align-center .hy-test,
.hy-testcar--layout-image_right.hy-testcar--align-center .hy-test { align-items: center; }
.hy-test__media { flex: 0 0 auto; }
.hy-test__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.hy-test__bubble { width: 100%; }
.hy-testcar--skin-bubble .hy-test__bubble {
    position: relative;
    background: var(--hy-test-bubble-bg, #F4F4F7);
    padding: var(--hy-test-bubble-pad, 24px);
    border-radius: var(--hy-test-bubble-radius, 12px);
    border: var(--hy-test-bubble-border-w, 0) solid var(--hy-test-bubble-border-color, transparent);
}
/* Speech-bubble tail: classic rotated-square technique, fixed position (not
   dynamically re-positioned per alignment — deliberate scope simplification,
   same call as the Call To Action ribbon being a flat badge). */
.hy-testcar--skin-bubble .hy-test__bubble::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 28px;
    width: 14px;
    height: 14px;
    background: var(--hy-test-bubble-bg, #F4F4F7);
    border-right: var(--hy-test-bubble-border-w, 0) solid var(--hy-test-bubble-border-color, transparent);
    border-bottom: var(--hy-test-bubble-border-w, 0) solid var(--hy-test-bubble-border-color, transparent);
    transform: rotate(45deg);
}
.hy-testcar--skin-bubble.hy-testcar--align-center .hy-test__bubble::after,
.hy-testcar--skin-bubble.hy-testcar--layout-image_above .hy-test__bubble::after { left: 50%; margin-left: -7px; }
.hy-testcar--skin-bubble.hy-testcar--align-right .hy-test__bubble::after { left: auto; right: 28px; }
.hy-testcar--skin-bubble.hy-testcar--layout-image_left .hy-test__bubble::after,
.hy-testcar--skin-bubble.hy-testcar--layout-image_right .hy-test__bubble::after { display: none; }

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.hy-rev { display: flex; flex-direction: column; height: 100%; }
.hyndle-page .hy-rev__header {
    display: flex;
    align-items: center;
    gap: var(--hy-test-avatar-gap, 12px);
    text-decoration: none;
    color: inherit;
    background: var(--hy-rev-header-bg, transparent);
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: var(--hy-rev-separator-w, 1px) solid var(--hy-rev-separator-color, #E5E5EA);
}
.hy-revcar--no-separator .hy-rev__header { border-bottom-color: transparent; }
.hy-rev__content { flex: 1 1 auto; }

.hy-rev__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    flex-shrink: 0;
    color: var(--hy-rev-icon-color, #9A9AA8);
    font-size: var(--hy-rev-icon-size, 18px);
    line-height: 1;
}
.hy-rev__icon svg,
.hy-rev__icon .hy-icon-svg { width: 1em; height: 1em; }

.hy-rev__stars {
    display: inline-flex;
    gap: var(--hy-rev-star-gap, 2px);
    margin: 2px 0;
}
.hy-rev__star { position: relative; display: inline-block; width: var(--hy-rev-star-size, 16px); height: var(--hy-rev-star-size, 16px); }
.hy-rev__star-bg,
.hy-rev__star-fg { position: absolute; inset: 0; overflow: hidden; }
.hy-rev__star-bg svg { width: var(--hy-rev-star-size, 16px); height: var(--hy-rev-star-size, 16px); fill: var(--hy-rev-star-empty, #D1D5DB); }
.hy-rev__star-fg svg { width: var(--hy-rev-star-size, 16px); height: var(--hy-rev-star-size, 16px); fill: var(--hy-rev-star-color, #FBBF24); }

/* Unmarked = Outline: empty stars render stroke-only instead of dimmed-solid. */
.hy-revcar--unmarked-outline .hy-rev__star-bg svg { fill: none; stroke: var(--hy-rev-star-empty, #D1D5DB); stroke-width: 1.5; }

/* ── Divider widget ──────────────────────────────────────────────────────── */
.hy-divider {
    display: flex;
    justify-content: var(--hy-div-justify, center);
    padding: var(--hy-div-gap, 15px) 0;
}
.hy-divider__inner {
    display: flex;
    align-items: center;
    width: var(--hy-div-width, 100%);
    min-width: 0;
}
.hy-divider__sep {
    flex: 1;
    border-top: var(--hy-div-weight, 1px) var(--hy-div-style, solid) var(--hy-div-color, #D5D8DC);
}
.hy-divider__el {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin: 0 14px;
    color: var(--hy-div-el-color, #6E6E7C);
    font-size: var(--hy-div-el-size, 15px);
    line-height: 1;
    white-space: nowrap;
}
.hy-divider__el i { font-size: inherit; }
.hy-divider__el .hy-icon-svg { width: 1em; height: 1em; }

/* ── Breadcrumbs widget ────────────────────────────────────────────────────
   Content (the trail, separator, prefixes) is entirely site-wide-settings
   driven — only presentation rides these CSS custom properties. */
.hy-breadcrumbs {
    display: flex;
    justify-content: var(--hy-bc-justify, flex-start);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--hy-bc-font-size, 13px);
    gap: var(--hy-bc-gap, 8px);
    line-height: 1.4;
}
.hy-breadcrumbs--disabled {
    font-size: 12px;
    color: #9A9AA8;
    font-style: italic;
}
.hy-breadcrumbs__prefix {
    color: inherit;
    opacity: 0.75;
}
.hy-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hy-bc-gap, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hy-breadcrumbs__item { display: inline-flex; align-items: center; }
.hy-breadcrumbs__item a {
    color: var(--hy-bc-link, #33333F);
    text-decoration: none;
}
.hy-breadcrumbs__item a:hover { color: var(--hy-bc-link-hover, #70D6FF); text-decoration: underline; }
.hy-breadcrumbs__item--current { color: var(--hy-bc-current, #6E6E7C); }
.hy-breadcrumbs__sep {
    color: var(--hy-bc-sep, #B4B4BE);
    user-select: none;
}

/* ── Spacer widget — the compiled height IS the widget ───────────────────── */
.hy-spacer { width: 100%; }
.hy-video--empty {
    height: auto;
    padding-bottom: 0;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-video__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Google Maps widget ─────────────────────────────────────────────────────
   All styling rides CSS custom properties compiled onto .hy-map (the
   widget's inner root); hover filters override --hy-map-filter via the
   compiled :hover rule.
   Height comes from the generic SIZING group (min-height on the wrapper) —
   the flex chain wrapper → .hy-map → iframe stretches the map to fill it;
   with no min-height set, the iframe's 300px default wins. */
.hyndle-widget--hyndle-google-maps {
    display: flex;
    flex-direction: column;
}
.hy-map {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.hy-map__frame {
    display: block;
    width: 100%;
    height: var(--hy-map-h, 300px);
    flex: 1 1 auto;
    border: 0;
    filter: var(--hy-map-filter, none);
    transition: var(--hy-map-tr, none);
}
.hy-map--empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-map__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Icon widget ─────────────────────────────────────────────────────────────
   Vars ride on .hy-iconbox-wrap (the inner root); .hy-iconbox consumes them.
   ('hy-iconbox', never 'hy-icon' — .hy-icon is the editor chrome's Material
   Symbols class.) Hover is pure CSS var fallback chains. The doubled
   .hy-iconbox.hy-iconbox is deliberate: a linked icon is an <a>, and theme
   link rules (.entry-content a, a:visited) out-rank a single class — same
   lesson as the button. */
.hy-iconbox-wrap { line-height: 0; }
.hyndle-page .hy-iconbox.hy-iconbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hy-icon-size, 50px);
    line-height: 1;
    color: var(--hy-icon-color, #1A1A2A);
    text-decoration: none;
    box-shadow: none;
    transition: var(--hy-icon-tr, color 150ms ease, background-color 150ms ease, border-color 150ms ease);
}
.hyndle-page .hy-iconbox.hy-iconbox:hover,
.hyndle-page .hy-iconbox.hy-iconbox:focus {
    color: var(--hy-icon-color-h, var(--hy-icon-color, #1A1A2A));
    text-decoration: none;
}
.hyndle-page .hy-iconbox.hy-iconbox--stacked {
    color: var(--hy-icon-color-2, #FFFFFF);
    background-color: var(--hy-icon-color, #1A1A2A);
    padding: var(--hy-icon-pad, 0.5em);
}
.hyndle-page .hy-iconbox.hy-iconbox--stacked:hover,
.hyndle-page .hy-iconbox.hy-iconbox--stacked:focus {
    color: var(--hy-icon-color-2-h, var(--hy-icon-color-2, #FFFFFF));
    background-color: var(--hy-icon-color-h, var(--hy-icon-color, #1A1A2A));
}
.hyndle-page .hy-iconbox.hy-iconbox--framed {
    background-color: var(--hy-icon-color-2, transparent);
    border: var(--hy-icon-bw, 3px) solid currentColor;
    padding: var(--hy-icon-pad, 0.5em);
}
.hyndle-page .hy-iconbox.hy-iconbox--framed:hover,
.hyndle-page .hy-iconbox.hy-iconbox--framed:focus {
    background-color: var(--hy-icon-color-2-h, var(--hy-icon-color-2, transparent));
}
.hy-iconbox--square  { border-radius: var(--hy-icon-radius, 0); }
.hy-iconbox--rounded { border-radius: var(--hy-icon-radius, 10%); }
.hy-iconbox--circle  { border-radius: var(--hy-icon-radius, 50%); }
.hy-iconbox i {
    font-size: 1em;
    transform: rotate(var(--hy-icon-rotate, 0deg));
}
.hy-iconbox svg,
.hy-iconbox .hy-icon-svg {
    width: 1em;
    height: 1em;
    transform: rotate(var(--hy-icon-rotate, 0deg));
}

/* ── Loop widgets: shared card component ─────────────────────────────────────
   One card, two containers: .hy-loopgrid lays cards in a CSS grid,
   .hy-loopcar in a scroll-snap carousel. Card styling rides --hy-loop-*
   custom properties compiled by LoopQuery::compileCardVars(). Links inside
   the card are <a> — doubled-class-equivalent (0,3,0) rules beat theme
   link colours (same lesson as the button). */
.hy-loop-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--hy-loop-card-bg, transparent);
    border-radius: var(--hy-loop-card-radius, 0);
    padding: var(--hy-loop-card-pad, 0);
}
.hy-loop-card__img-link { display: block; line-height: 0; }
.hyndle-page .hy-loop-card__img {
    display: block;
    width: 100% !important;
    height: var(--hy-loop-img-h, 220px) !important;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: var(--hy-loop-img-radius, 0);
}
.hy-loop-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
}
.hy-loop-card__title {
    margin: 0;
    font-size: var(--hy-loop-title-size, 20px);
    line-height: 1.3;
    color: var(--hy-loop-title-color, #1A1A2A);
}
.hyndle-page .hy-loop-card .hy-loop-card__tlink {
    color: var(--hy-loop-title-color, #1A1A2A);
    text-decoration: none;
}
.hyndle-page .hy-loop-card .hy-loop-card__tlink:hover { text-decoration: underline; }
.hy-loop-card__meta {
    font-size: 13px;
    color: var(--hy-loop-meta-color, #9A9AA8);
}
.hy-loop-card__excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: var(--hy-loop-text-color, #6E6E7C);
}
.hyndle-page .hy-loop-card .hy-loop-card__more {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 500;
    color: var(--hy-loop-more-color, #1A1A2A);
    text-decoration: underline;
}
.hy-loop--empty {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-loop__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Loop Grid ──────────────────────────────────────────────────────────────
   Columns compile to --hy-lg-cols-d (desktop); the live var is derived here
   so the tablet/mobile overrides can win regardless of where the compiled
   page block sits in the cascade. */
.hy-loopgrid {
    --hy-lg-cols: var(--hy-lg-cols-d, 3);
    display: grid;
    grid-template-columns: repeat(var(--hy-lg-cols), 1fr);
    gap: var(--hy-lg-gap, 24px);
    width: 100%;
}
@media (max-width: 768px) {
    .hy-loopgrid { --hy-lg-cols: min(var(--hy-lg-cols-d, 3), 2); }
}
@media (max-width: 480px) {
    .hy-loopgrid { --hy-lg-cols: 1; }
}

/* ── Loop Carousel — scroll-snap, no library ───────────────────────────── */
.hy-loopcar {
    --hy-lc-spv: var(--hy-lc-spv-d, 3);
    position: relative;
    width: 100%;
}
@media (max-width: 768px) {
    .hy-loopcar { --hy-lc-spv: min(var(--hy-lc-spv-d, 3), 2); }
}
@media (max-width: 480px) {
    .hy-loopcar { --hy-lc-spv: 1; }
}
.hy-loopcar__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hy-loopcar__viewport::-webkit-scrollbar { display: none; }
.hy-loopcar__track {
    display: flex;
    gap: var(--hy-lc-gap, 24px);
}
.hy-loopcar__slide {
    flex: 0 0 calc((100% - (var(--hy-lc-spv) - 1) * var(--hy-lc-gap, 24px)) / var(--hy-lc-spv));
    min-width: 0;
    scroll-snap-align: start;
}
.hyndle-page .hy-loopcar__arrow {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid #E5E5EA;
    border-radius: 50%;
    background: var(--hy-lc-arrow-bg, #FFFFFF);
    color: var(--hy-lc-arrow-color, #1A1A2A);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    line-height: 0;
    cursor: pointer;
}
.hy-loopcar__arrow svg { width: 16px; height: 16px; }
.hy-loopcar__arrow--prev { left: 8px; }
.hy-loopcar__arrow--next { right: 8px; }
.hy-loopcar__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.hyndle-page .hy-loopcar__dot {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #D5D8DC;
    box-shadow: none;
    cursor: pointer;
}
.hyndle-page .hy-loopcar__dot.is-active { background: var(--hy-lc-dot-color, #70D6FF); }

/* ── Login widget — WordPress core wp_login_form(), styled via vars ──────── */
.hy-login { max-width: 420px; }
.hy-login form p { margin: 0 0 var(--hy-login-gap, 16px); }
.hy-login label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hy-login-label, #1A1A2A);
}
.hy-login--nolabels .login-username > label,
.hy-login--nolabels .login-password > label { display: none; }
.hyndle-page .hy-login input[type="text"],
.hyndle-page .hy-login input[type="password"] {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--hy-login-text, #1A1A2A);
    background: var(--hy-login-field-bg, #FFFFFF);
    border: 1px solid var(--hy-login-border, #E5E5EA) !important;
    border-radius: var(--hy-login-field-radius, 6px);
    box-shadow: none;
}
.hy-login .login-remember label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    color: var(--hy-login-text, #1A1A2A);
}
/* !important colours: theme button rules are frequently !important */
.hyndle-page .hy-login input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--hy-login-btn-color, #FFFFFF) !important;
    background: var(--hy-login-btn-bg, #1A1A2A) !important;
    border: 0 !important;
    border-radius: var(--hy-login-btn-radius, 6px);
    cursor: pointer;
    transition: background 150ms ease;
}
.hyndle-page .hy-login input[type="submit"]:hover {
    background: var(--hy-login-btn-bg-h, var(--hy-login-btn-bg, #1A1A2A)) !important;
}
.hy-login__links {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}
.hyndle-page .hy-login .hy-login__link,
.hyndle-page .hy-login .hy-login__logout {
    font-size: 13px;
    color: var(--hy-login-link, #6E6E7C);
    text-decoration: underline;
}
.hy-login--logged-in { font-size: 15px; color: #1A1A2A; }
.hy-login--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-login__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Menu widget — wp_nav_menu on our chrome; submenus pure CSS ──────────── */
.hy-menu { position: relative; width: 100%; }
/* !important resets: theme list rules (.entry-content ul/li — bullets,
   padding, item margins) must never restyle menu structure */
.hyndle-page .hy-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hyndle-page .hy-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.hy-menu__list {
    display: flex;
    gap: var(--hy-menu-gap, 8px);
}
.hy-menu--horizontal .hy-menu__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: var(--hy-menu-jc, flex-start);
}
.hy-menu--vertical .hy-menu__list { flex-direction: column; }
.hy-menu .menu-item { position: relative; }
/* !important colour: theme link rules (.entry-content a, a:visited — often
   !important themselves) must never repaint menu items */
.hyndle-page .hy-menu .hy-menu__list a {
    position: relative;
    display: block;
    padding: var(--hy-menu-pad-y, 10px) var(--hy-menu-pad-x, 14px);
    color: var(--hy-menu-color, #1A1A2A) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none !important;
    border-radius: 6px;
    transition: color 150ms ease, background 150ms ease;
}
.hyndle-page .hy-menu .hy-menu__list a:hover {
    color: var(--hy-menu-hover, var(--hy-menu-color, #1A1A2A)) !important;
}
.hyndle-page .hy-menu .hy-menu__list .current-menu-item > a,
.hyndle-page .hy-menu .hy-menu__list .current_page_item > a {
    color: var(--hy-menu-active, var(--hy-menu-color, #1A1A2A)) !important;
}
/* Pointer: underline */
.hy-menu--pointer-underline .hy-menu__list a::after {
    content: '';
    position: absolute;
    left: var(--hy-menu-pad-x, 14px);
    right: var(--hy-menu-pad-x, 14px);
    bottom: 4px;
    height: 2px;
    background: var(--hy-menu-pointer, #70D6FF);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}
.hy-menu--pointer-underline .hy-menu__list a:hover::after,
.hy-menu--pointer-underline .hy-menu__list .current-menu-item > a::after { transform: scaleX(1); }
/* Pointer: background */
.hy-menu--pointer-background .hy-menu__list a:hover,
.hy-menu--pointer-background .hy-menu__list .current-menu-item > a {
    background: var(--hy-menu-pointer, #F4F4F7);
}
/* Submenus — dropdown (horizontal) / indent (vertical) */
.hy-menu .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 8px;
    background: var(--hy-menu-sub-bg, #FFFFFF);
    border: 1px solid #E5E5EA;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.hy-menu--horizontal .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease;
}
.hy-menu--horizontal .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}
.hy-menu--horizontal .sub-menu .sub-menu { top: 0; left: 100%; }
.hy-menu--vertical .sub-menu {
    margin: 2px 0 4px 16px;
    box-shadow: none;
}
/* Mobile dropdown */
.hyndle-page .hy-menu__toggle {
    appearance: none;
    -webkit-appearance: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #E5E5EA;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--hy-menu-color, #1A1A2A);
    cursor: pointer;
}
.hy-menu__toggle svg { width: 22px; height: 22px; }
@media (max-width: 768px) {
    .hy-menu--collapsible .hy-menu__toggle { display: flex; }
    .hy-menu--collapsible .hy-menu__list { display: none; }
    .hy-menu--collapsible.is-open .hy-menu__list {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
    }
    .hy-menu--collapsible .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        margin-left: 16px;
    }
}
.hy-menu--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-menu__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Hotspot widget — pins ride numbered position vars (--hy-hs-x-N/-y-N);
   hover/focus tooltips are pure CSS, click mode toggles .is-open (JS). ──── */
.hy-hotspot {
    /* block, not inline-block: a shrink-to-fit container whose only child
       is width:100% resolves circularly to 0×0 */
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
.hyndle-page .hy-hotspot__img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
}
.hyndle-page .hy-hotspot__pin {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--hy-hs-pin-size, 28px);
    height: var(--hy-hs-pin-size, 28px);
    margin: 0;
    padding: 0 6px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--hy-hs-pin-bg, #70D6FF) !important;
    color: var(--hy-hs-pin-color, #1A1A2A) !important;
    font-size: calc(var(--hy-hs-pin-size, 28px) * 0.45);
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none;
    cursor: pointer;
    z-index: 2;
}
.hy-hotspot__pin--1  { left: var(--hy-hs-x-1, 50%);  top: var(--hy-hs-y-1, 50%); }
.hy-hotspot__pin--2  { left: var(--hy-hs-x-2, 50%);  top: var(--hy-hs-y-2, 50%); }
.hy-hotspot__pin--3  { left: var(--hy-hs-x-3, 50%);  top: var(--hy-hs-y-3, 50%); }
.hy-hotspot__pin--4  { left: var(--hy-hs-x-4, 50%);  top: var(--hy-hs-y-4, 50%); }
.hy-hotspot__pin--5  { left: var(--hy-hs-x-5, 50%);  top: var(--hy-hs-y-5, 50%); }
.hy-hotspot__pin--6  { left: var(--hy-hs-x-6, 50%);  top: var(--hy-hs-y-6, 50%); }
.hy-hotspot__pin--7  { left: var(--hy-hs-x-7, 50%);  top: var(--hy-hs-y-7, 50%); }
.hy-hotspot__pin--8  { left: var(--hy-hs-x-8, 50%);  top: var(--hy-hs-y-8, 50%); }
.hy-hotspot__pin--9  { left: var(--hy-hs-x-9, 50%);  top: var(--hy-hs-y-9, 50%); }
.hy-hotspot__pin--10 { left: var(--hy-hs-x-10, 50%); top: var(--hy-hs-y-10, 50%); }
.hy-hotspot__pin--11 { left: var(--hy-hs-x-11, 50%); top: var(--hy-hs-y-11, 50%); }
.hy-hotspot__pin--12 { left: var(--hy-hs-x-12, 50%); top: var(--hy-hs-y-12, 50%); }
.hy-hotspot--pulse .hy-hotspot__pin { animation: hy-hs-pulse 2s ease-out infinite; }
@keyframes hy-hs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(112, 214, 255, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(112, 214, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(112, 214, 255, 0); }
}
.hy-hotspot__face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.hy-hotspot__face i { font-size: inherit; }
.hy-hotspot__face .hy-icon-svg { width: 1em; height: 1em; }
.hy-hotspot__face--dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.hy-hotspot__tooltip {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: var(--hy-hs-tip-w, 220px);
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--hy-hs-tip-bg, #1A1A2A);
    color: var(--hy-hs-tip-color, #FFFFFF);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease;
    pointer-events: none;
}
.hy-hotspot--tip-top    .hy-hotspot__tooltip { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.hy-hotspot--tip-bottom .hy-hotspot__tooltip { top: calc(100% + 10px);    left: 50%; transform: translateX(-50%); }
.hy-hotspot--tip-left   .hy-hotspot__tooltip { right: calc(100% + 10px);  top: 50%;  transform: translateY(-50%); }
.hy-hotspot--tip-right  .hy-hotspot__tooltip { left: calc(100% + 10px);   top: 50%;  transform: translateY(-50%); }
.hy-hotspot--hover .hy-hotspot__pin:hover .hy-hotspot__tooltip,
.hy-hotspot--hover .hy-hotspot__pin:focus .hy-hotspot__tooltip,
.hy-hotspot__pin.is-open .hy-hotspot__tooltip {
    opacity: 1;
    visibility: visible;
}
.hy-hotspot--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
    line-height: 1.4;
}
.hy-hotspot__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Animated Text widget — first word renders statically without JS ─────── */
.hy-antext__rotator {
    position: relative;
    display: inline-block;
    color: var(--hy-antext-color, inherit);
}
.hy-antext__word {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    opacity: 0;
    white-space: nowrap;
}
.hy-antext__word.is-active {
    position: static;
    opacity: 1;
}
/* Entrance rides the transient .is-in (added by JS on each swap, removed
   after it plays) — the steady .is-active state never depends on animation
   state, so a stalled/suppressed animation can't leave the word invisible. */
.hy-antext--fade       .hy-antext__word.is-active.is-in { animation: hy-at-fade 500ms ease; }
.hy-antext--slide      .hy-antext__word.is-active.is-in { animation: hy-at-slide-up 500ms ease; }
.hy-antext--slide-down .hy-antext__word.is-active.is-in { animation: hy-at-slide-down 500ms ease; }
.hy-antext--zoom       .hy-antext__word.is-active.is-in { animation: hy-at-zoom 500ms ease; }
.hy-antext--bounce     .hy-antext__word.is-active.is-in { animation: hy-at-bounce 600ms ease; }
@media (prefers-reduced-motion: reduce) {
    .hy-antext__word.is-active.is-in { animation: none !important; }
    .hy-hotspot--pulse .hy-hotspot__pin { animation: none; }
}
@keyframes hy-at-fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes hy-at-slide-up   { from { opacity: 0; transform: translateY(0.6em); }  to { opacity: 1; transform: none; } }
@keyframes hy-at-slide-down { from { opacity: 0; transform: translateY(-0.6em); } to { opacity: 1; transform: none; } }
@keyframes hy-at-zoom       { from { opacity: 0; transform: scale(0.4); }         to { opacity: 1; transform: none; } }
@keyframes hy-at-bounce {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { transform: scale(1); }
}
.hy-antext__typed { color: var(--hy-antext-color, inherit); }
.hy-antext__caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.1em;
    background: currentColor;
    animation: hy-at-caret 1s steps(1) infinite;
}
@keyframes hy-at-caret { 50% { opacity: 0; } }

/* ── Full-width wrappers ─────────────────────────────────────────────────────
   These widgets' roots have no intrinsic width (absolute or percentage-sized
   children), so in shrink-to-fit contexts (row-direction flex sections) the
   wrapper collapses to 0 and the widget vanishes. The wrapper owns the width;
   a Boxed width still wins — it compiles later in the page style block. */
.hyndle-widget--hyndle-flipbox,
.hyndle-widget--hyndle-video-carousel,
.hyndle-widget--hyndle-slides,
.hyndle-widget--hyndle-loop-carousel,
.hyndle-widget--hyndle-loop-grid,
.hyndle-widget--hyndle-gallery,
.hyndle-widget--hyndle-google-maps,
.hyndle-widget--hyndle-video,
.hyndle-widget--hyndle-menu,
.hyndle-widget--hyndle-hotspot,
.hyndle-widget--hyndle-login,
.hyndle-widget--hyndle-social-embed,
.hyndle-widget--hyndle-lottie,
.hyndle-widget--hyndle-video-playlist { width: 100%; }

/* ── Flip Box widget — pure CSS hover flip (works in canvas too) ──────────── */
.hy-flipbox {
    position: relative;
    width: 100%;
    height: var(--hy-fb-h, 280px);
    perspective: 1000px;
    /* contain the rotating plane — mid-flip its 3D projection otherwise
       extends the page's scrollable overflow (the "jumpy canvas") */
    overflow: hidden;
}
.hy-flipbox__side {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: var(--hy-fb-ai, center);
    justify-content: center;
    padding: 32px;
    text-align: var(--hy-fb-ta, center);
    border-radius: var(--hy-fb-radius, 8px);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 600ms ease, opacity 600ms ease;
}
.hy-flipbox__front {
    z-index: 1;
    background-color: var(--hy-fb-front-bg, #1A1A2A);
    background-image: var(--hy-fb-front-img, none);
    background-size: cover;
    background-position: center;
    color: var(--hy-fb-front-color, #FFFFFF);
}
.hy-flipbox__back {
    background-color: var(--hy-fb-back-bg, #70D6FF);
    color: var(--hy-fb-back-color, #1A1A2A);
}
.hy-flipbox__inner { max-width: 100%; }
.hy-flipbox__icon {
    display: inline-flex;
    margin-bottom: 16px;
    font-size: var(--hy-fb-icon, 48px);
    line-height: 1;
}
.hy-flipbox__icon i { font-size: inherit; }
.hy-flipbox__icon svg,
.hy-flipbox__icon .hy-icon-svg { width: 1em; height: 1em; }
.hy-flipbox__title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: inherit;
}
.hy-flipbox__text { margin: 0; font-size: 15px; line-height: 1.6; }
/* the back button is an <a> — (0,3,0) + !important colours beat theme links */
.hyndle-page .hy-flipbox__btn.hy-flipbox__btn {
    display: inline-flex;
    margin-top: 18px;
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hy-fb-btn-color, currentColor) !important;
    background: var(--hy-fb-btn-bg, transparent) !important;
    border: 1px solid currentColor;
    border-radius: 4px;
    text-decoration: none !important;
    cursor: pointer;
}
/* Flip — direction variants */
.hy-flipbox--flip.hy-flipbox--dir-right .hy-flipbox__back        { transform: rotateY(-180deg); }
.hy-flipbox--flip.hy-flipbox--dir-right:hover .hy-flipbox__front { transform: rotateY(180deg); }
.hy-flipbox--flip.hy-flipbox--dir-right:hover .hy-flipbox__back  { transform: rotateY(0); }
.hy-flipbox--flip.hy-flipbox--dir-left .hy-flipbox__back         { transform: rotateY(180deg); }
.hy-flipbox--flip.hy-flipbox--dir-left:hover .hy-flipbox__front  { transform: rotateY(-180deg); }
.hy-flipbox--flip.hy-flipbox--dir-left:hover .hy-flipbox__back   { transform: rotateY(0); }
.hy-flipbox--flip.hy-flipbox--dir-up .hy-flipbox__back           { transform: rotateX(-180deg); }
.hy-flipbox--flip.hy-flipbox--dir-up:hover .hy-flipbox__front    { transform: rotateX(180deg); }
.hy-flipbox--flip.hy-flipbox--dir-up:hover .hy-flipbox__back     { transform: rotateX(0); }
.hy-flipbox--flip.hy-flipbox--dir-down .hy-flipbox__back         { transform: rotateX(180deg); }
.hy-flipbox--flip.hy-flipbox--dir-down:hover .hy-flipbox__front  { transform: rotateX(-180deg); }
.hy-flipbox--flip.hy-flipbox--dir-down:hover .hy-flipbox__back   { transform: rotateX(0); }
/* Slide — the back slides over the front */
.hy-flipbox--slide {
    overflow: hidden;
    border-radius: var(--hy-fb-radius, 8px);
}
.hy-flipbox--slide .hy-flipbox__back { z-index: 2; }
.hy-flipbox--slide.hy-flipbox--dir-right .hy-flipbox__back { transform: translateX(100%); }
.hy-flipbox--slide.hy-flipbox--dir-left .hy-flipbox__back  { transform: translateX(-100%); }
.hy-flipbox--slide.hy-flipbox--dir-up .hy-flipbox__back    { transform: translateY(100%); }
.hy-flipbox--slide.hy-flipbox--dir-down .hy-flipbox__back  { transform: translateY(-100%); }
.hy-flipbox--slide:hover .hy-flipbox__back { transform: translate(0, 0); }
/* Zoom / Fade */
.hy-flipbox--zoom .hy-flipbox__back { z-index: 2; opacity: 0; transform: scale(0.6); }
.hy-flipbox--zoom:hover .hy-flipbox__back { opacity: 1; transform: scale(1); }
.hy-flipbox--fade .hy-flipbox__back { z-index: 2; opacity: 0; }
.hy-flipbox--fade:hover .hy-flipbox__back { opacity: 1; }

/* ── Video Carousel — the Slides chrome, one video per slide ──────────────── */
.hy-vcar__slide { position: relative; }
.hy-vcar__frame {
    position: relative;
    height: 0;
    padding-bottom: var(--hy-vc-pb, 56.25%);
    background: #000;
}
/* !important fill: theme iframe/video rules must never resize the player */
.hyndle-page .hy-vcar__frame iframe,
.hyndle-page .hy-vcar__frame video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border: 0;
}
.hy-vcar__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px 18px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: var(--hy-vc-title-color, #FFFFFF);
    font-size: var(--hy-vc-title-size, 15px);
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none; /* never block the player controls */
}
.hy-vcar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-vcar__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Gallery widget ─────────────────────────────────────────────────────────
   aspect-ratio on the <img> (intrinsic size); 'Original' ratio = auto. */
.hy-gallery {
    --hy-gal-cols: var(--hy-gal-cols-d, 4);
    display: grid;
    grid-template-columns: repeat(var(--hy-gal-cols), 1fr);
    gap: var(--hy-gal-gap, 10px);
    width: 100%;
}
@media (max-width: 768px) {
    .hy-gallery { --hy-gal-cols: min(var(--hy-gal-cols-d, 4), 3); }
}
@media (max-width: 480px) {
    .hy-gallery { --hy-gal-cols: 2; }
}
.hy-gallery__item {
    margin: 0;
    min-width: 0;
}
/* Fixed-ratio frames use the theme-proof padding box; --natural (Original
   ratio) lets the image keep its own height. */
.hyndle-page .hy-gallery__frame {
    position: relative;
    height: 0;
    padding-bottom: var(--hy-gal-pb, 100%);
    overflow: hidden;
    border-radius: var(--hy-gal-radius, 0);
    line-height: 0;
}
.hyndle-page .hy-gallery__frame--natural {
    height: auto;
    padding-bottom: 0;
}
.hy-gallery__link { display: block; line-height: 0; }
.hyndle-page .hy-gallery__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    transition: transform 300ms ease;
}
.hyndle-page .hy-gallery__frame--natural .hy-gallery__img {
    position: static;
    height: auto !important;
}
.hyndle-page .hy-gallery__frame:hover .hy-gallery__img { transform: scale(var(--hy-gal-zoom, 1)); }
.hy-gallery__cap {
    padding: 8px 2px 0;
    font-size: var(--hy-gal-cap-size, 13px);
    line-height: 1.5;
    color: var(--hy-gal-cap-color, #6E6E7C);
}
.hy-gallery--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-gallery__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Slides widget — full-bleed slider on the shared carousel chrome ────────
   Per-slide backgrounds ride numbered vars (--hy-sl-bg-N / --hy-sl-bgc-N)
   compiled by the style closure — no inline styles. */
.hy-slides .hy-loopcar__slide,
.hy-slides__slide {
    position: relative;
    display: flex;
    height: var(--hy-sl-h, 400px);
    align-items: var(--hy-sl-ai, center);
    justify-content: var(--hy-sl-jc, flex-start);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hy-slides__slide--1 { background-image: var(--hy-sl-bg-1, none); background-color: var(--hy-sl-bgc-1, #F4F4F7); }
.hy-slides__slide--2 { background-image: var(--hy-sl-bg-2, none); background-color: var(--hy-sl-bgc-2, #F4F4F7); }
.hy-slides__slide--3 { background-image: var(--hy-sl-bg-3, none); background-color: var(--hy-sl-bgc-3, #F4F4F7); }
.hy-slides__slide--4 { background-image: var(--hy-sl-bg-4, none); background-color: var(--hy-sl-bgc-4, #F4F4F7); }
.hy-slides__slide--5 { background-image: var(--hy-sl-bg-5, none); background-color: var(--hy-sl-bgc-5, #F4F4F7); }
.hy-slides__slide--6 { background-image: var(--hy-sl-bg-6, none); background-color: var(--hy-sl-bgc-6, #F4F4F7); }
.hy-slides__slide--7 { background-image: var(--hy-sl-bg-7, none); background-color: var(--hy-sl-bgc-7, #F4F4F7); }
.hy-slides__slide--8 { background-image: var(--hy-sl-bg-8, none); background-color: var(--hy-sl-bgc-8, #F4F4F7); }
.hy-slides__slide--9 { background-image: var(--hy-sl-bg-9, none); background-color: var(--hy-sl-bgc-9, #F4F4F7); }
.hy-slides__slide--10 { background-image: var(--hy-sl-bg-10, none); background-color: var(--hy-sl-bgc-10, #F4F4F7); }
.hy-slides__slide--11 { background-image: var(--hy-sl-bg-11, none); background-color: var(--hy-sl-bgc-11, #F4F4F7); }
.hy-slides__slide--12 { background-image: var(--hy-sl-bg-12, none); background-color: var(--hy-sl-bgc-12, #F4F4F7); }
.hy-slides--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-slides__placeholder { color: #9A9AA8; font-size: 13px; }
.hy-slides__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hy-sl-overlay, transparent);
}
.hy-slides__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    /* 88px side padding clears the 48px overlay arrows — they were sitting
       on top of the slide text */
    padding: 48px 88px;
    text-align: var(--hy-sl-ta, left);
    line-height: 1.4;
}
.hy-slides__title {
    margin: 0 0 12px;
    font-size: var(--hy-sl-title-size, 36px);
    font-weight: 600;
    color: var(--hy-sl-title-color, #1A1A2A);
}
.hy-slides__text {
    margin: 0 0 20px;
    font-size: var(--hy-sl-text-size, 16px);
    line-height: 1.6;
    color: var(--hy-sl-text-color, #1A1A2A);
}
/* The slide button is an <a> — (0,3,0) beats theme link rules (button lesson) */
.hyndle-page .hy-slides__btn.hy-slides__btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--hy-sl-btn-color, #1A1A2A);
    background: var(--hy-sl-btn-bg, #70D6FF);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
/* Slider chrome over the slide: transparent arrows, dots inside */
.hyndle-page .hy-slides .hy-loopcar__arrow {
    background: none;
    border: 0;
    box-shadow: none;
    width: 48px;
    height: 48px;
    color: var(--hy-lc-arrow-color, #1A1A2A);
}
.hy-slides .hy-loopcar__arrow svg { width: 28px; height: 28px; }
.hy-slides .hy-loopcar__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    z-index: 2;
}

/* ── Countdown widget ─────────────────────────────────────────────────────────
   Digits/label/message are independent siblings under the root, so each gets
   its own --hy-cd-{digits,label,message}-* namespace (Typography::compileAsVars
   in Control.php) instead of inheritable direct properties. */
.hy-countdown { display: block; }
.hy-countdown__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--hy-cd-justify, flex-start);
    gap: var(--hy-cd-gap, 16px);
}
.hy-countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: var(--hy-cd-box-pad, 12px);
    background: var(--hy-cd-box-bg, transparent);
    border-width: var(--hy-cd-box-border-w, 0px);
    border-style: solid;
    border-color: var(--hy-cd-box-border-color, transparent);
    border-radius: var(--hy-cd-box-radius, 8px);
}
.hy-countdown--inline .hy-countdown__items { align-items: baseline; }
.hy-countdown--inline .hy-countdown__item { flex-direction: row; align-items: baseline; gap: 6px; }
.hy-countdown__digits {
    display: block;
    color: var(--hy-cd-digits-color, #1A1A2A);
    font-family: var(--hy-cd-digits-font-family, inherit);
    font-size: var(--hy-cd-digits-font-size, 32px);
    font-weight: var(--hy-cd-digits-font-weight, 700);
    text-transform: var(--hy-cd-digits-text-transform, none);
    font-style: var(--hy-cd-digits-font-style, normal);
    text-decoration: var(--hy-cd-digits-text-decoration, none);
    line-height: var(--hy-cd-digits-line-height, 1.1);
    letter-spacing: var(--hy-cd-digits-letter-spacing, normal);
    font-variant-numeric: tabular-nums;
}
.hy-countdown__label {
    display: block;
    margin-top: 4px;
    color: var(--hy-cd-label-color, #6B6B76);
    font-family: var(--hy-cd-label-font-family, inherit);
    font-size: var(--hy-cd-label-font-size, 13px);
    font-weight: var(--hy-cd-label-font-weight, 400);
    text-transform: var(--hy-cd-label-text-transform, uppercase);
    font-style: var(--hy-cd-label-font-style, normal);
    text-decoration: var(--hy-cd-label-text-decoration, none);
    line-height: var(--hy-cd-label-line-height, 1.3);
    letter-spacing: var(--hy-cd-label-letter-spacing, normal);
}
.hy-countdown--inline .hy-countdown__label { margin-top: 0; }
.hy-countdown__message {
    display: none;
    margin-top: var(--hy-cd-gap, 16px);
    text-align: var(--hy-cd-message-align, center);
    color: var(--hy-cd-message-color, #1A1A2A);
    font-family: var(--hy-cd-message-font-family, inherit);
    font-size: var(--hy-cd-message-font-size, 16px);
    font-weight: var(--hy-cd-message-font-weight, 400);
    text-transform: var(--hy-cd-message-text-transform, none);
    font-style: var(--hy-cd-message-font-style, normal);
    text-decoration: var(--hy-cd-message-text-decoration, none);
    line-height: var(--hy-cd-message-line-height, 1.5);
    letter-spacing: var(--hy-cd-message-letter-spacing, normal);
}
.hy-countdown__message.is-visible { display: block; }

/* ── Blockquote widget ────────────────────────────────────────────────────── */
.hy-blockquote {
    display: block;
    margin: 0;
}
.hy-blockquote__content {
    margin: 0 0 var(--hy-bq-content-gap, 16px);
    color: var(--hy-bq-content-color, #1A1A2A);
    font-family: var(--hy-bq-content-font-family, inherit);
    font-size: var(--hy-bq-content-font-size, 20px);
    font-weight: var(--hy-bq-content-font-weight, 500);
    text-transform: var(--hy-bq-content-text-transform, none);
    font-style: var(--hy-bq-content-font-style, normal);
    text-decoration: var(--hy-bq-content-text-decoration, none);
    line-height: var(--hy-bq-content-line-height, 1.5);
    letter-spacing: var(--hy-bq-content-letter-spacing, normal);
}
.hy-blockquote__author {
    margin: 0 0 var(--hy-bq-author-gap, 12px);
    color: var(--hy-bq-author-color, #6B6B76);
    font-family: var(--hy-bq-author-font-family, inherit);
    font-size: var(--hy-bq-author-font-size, 15px);
    font-weight: var(--hy-bq-author-font-weight, 600);
    text-transform: var(--hy-bq-author-text-transform, none);
    font-style: var(--hy-bq-author-font-style, normal);
    text-decoration: var(--hy-bq-author-text-decoration, none);
    line-height: var(--hy-bq-author-line-height, 1.4);
    letter-spacing: var(--hy-bq-author-letter-spacing, normal);
}
.hy-blockquote__share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--hy-bq-share-size, 16px);
    height: calc(var(--hy-bq-share-size, 16px) * 2.2);
    color: var(--hy-bq-share-color, #1A1A2A);
    background: var(--hy-bq-share-bg, #F2F2F5);
    border-radius: var(--hy-bq-share-radius, 6px);
    font-family: var(--hy-bq-share-font-family, inherit);
    font-size: var(--hy-bq-share-font-size, 14px);
    font-weight: var(--hy-bq-share-font-weight, 500);
    text-decoration: none;
    transition: color var(--hy-bq-share-tr, 150ms) ease, background var(--hy-bq-share-tr, 150ms) ease;
}
.hy-blockquote__share:hover {
    color: var(--hy-bq-share-color-h, var(--hy-bq-share-color, #1A1A2A));
    background: var(--hy-bq-share-bg-h, var(--hy-bq-share-bg, #F2F2F5));
}
.hy-blockquote__share-icon { display: inline-flex; font-size: var(--hy-bq-share-size, 16px); }
.hy-blockquote__share-icon svg { display: block; width: 1em; height: 1em; }

/* Border skin: accent bar on the leading edge */
.hy-blockquote--border {
    border-left: var(--hy-bq-border-w, 4px) solid var(--hy-bq-border-color, #70D6FF);
    padding-left: var(--hy-bq-border-gap, 24px);
}
.hy-blockquote--border:hover {
    border-left-color: var(--hy-bq-border-color-h, var(--hy-bq-border-color, #70D6FF));
}

/* Quotation skin: decorative opening mark above the content */
.hy-blockquote--quotation .hy-blockquote__content { position: relative; }
.hy-blockquote--quotation .hy-blockquote__content::before {
    content: '\201C';
    display: block;
    color: var(--hy-bq-quote-color, #70D6FF);
    font-size: var(--hy-bq-quote-size, 64px);
    line-height: 1;
    margin-bottom: var(--hy-bq-quote-gap, 8px);
}

/* Boxed / Clean skins rely entirely on the generic widget Background/Border/
   Shadow/Padding groups (already available to every widget) — no custom
   controls of their own, so no extra CSS is needed here for them. */

/* ── Lottie widget ────────────────────────────────────────────────────────────
   .hy-lottie is flex-direction:column, so horizontal position rides
   align-items (cross axis) via --hy-lottie-align, not justify-content.
   Width comes from the generic Sizing group same as every other widget —
   no custom width control here. Animation vs. empty-content-collapse is
   handled by the grouped zero-intrinsic-width rule further down. */
.hy-lottie {
    display: flex;
    flex-direction: column;
    align-items: var(--hy-lottie-align, center);
}
a.hy-lottie { text-decoration: none; color: inherit; }
/* lottie-web mounts an SVG sized to 100%/100% of this container — with no
   height of its own the container (and the SVG inside it) collapses to
   zero, and a zero-area element never reports as intersecting to
   IntersectionObserver, silently breaking BOTH the lazyload and
   trigger:viewport features (browser-caught: neither ever fired). */
.hy-lottie__animation { width: 100%; min-height: 200px; }
.hy-lottie__animation svg { display: block; }
.hy-lottie--empty {
    width: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-lottie__placeholder { color: #9A9AA8; font-size: 13px; }
.hy-lottie__caption {
    margin: var(--hy-lottie-caption-gap, 12px) 0 0;
    width: 100%;
    text-align: var(--hy-lottie-caption-align, center);
    color: var(--hy-lottie-caption-color, #6B6B76);
    font-family: var(--hy-lottie-caption-font-family, inherit);
    font-size: var(--hy-lottie-caption-font-size, 14px);
    font-weight: var(--hy-lottie-caption-font-weight, 400);
    text-transform: var(--hy-lottie-caption-text-transform, none);
    font-style: var(--hy-lottie-caption-font-style, normal);
    text-decoration: var(--hy-lottie-caption-text-decoration, none);
    line-height: var(--hy-lottie-caption-line-height, 1.4);
    letter-spacing: var(--hy-lottie-caption-letter-spacing, normal);
}

/* ── Social Post Embed widget ─────────────────────────────────────────────────
   Height comes from the generic SIZING group (min-height on the wrapper) —
   same flex-chain trick as Google Maps: wrapper → .hy-social-embed → iframe
   stretches to fill it; with no min-height set, the 600px default wins
   (social posts run taller than a map on average). */
.hyndle-widget--hyndle-social-embed { display: flex; flex-direction: column; }
.hy-social-embed {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.hy-social-embed__frame {
    display: block;
    width: 100%;
    height: var(--hy-se-h, 600px);
    flex: 1 1 auto;
    border: 0;
}
.hy-social-embed--empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-social-embed__placeholder { color: #9A9AA8; font-size: 13px; }
.hy-social-embed__fallback {
    display: inline-flex;
    align-self: var(--hy-se-fallback-justify, center);
    margin-top: var(--hy-se-fallback-gap, 12px);
    padding: 8px 16px;
    color: var(--hy-se-fallback-color, #1A1A2A);
    background: var(--hy-se-fallback-bg, #F2F2F5);
    border-radius: var(--hy-se-fallback-radius, 6px);
    font-family: var(--hy-se-fallback-font-family, inherit);
    font-size: var(--hy-se-fallback-font-size, 14px);
    font-weight: var(--hy-se-fallback-font-weight, 500);
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease;
}
.hy-social-embed__fallback:hover {
    color: var(--hy-se-fallback-color-h, var(--hy-se-fallback-color, #1A1A2A));
    background: var(--hy-se-fallback-bg-h, var(--hy-se-fallback-bg, #F2F2F5));
}

/* ── Shortcode widget — no custom styling, entirely the generic wrapper
   box-model plus whatever the shortcode's own handler renders. */
.hy-shortcode--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-shortcode__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Video Playlist widget ─────────────────────────────────────────────────────
   Featured player uses the same padding-bottom box as the plain Video
   widget (a box with only absolute children can collapse to zero height —
   the padding percentage physically can't). Thumbnail uses aspect-ratio
   safely because it has an explicit WIDTH from flex-basis — aspect-ratio
   only becomes unsafe when neither dimension is otherwise established. */
.hy-vplaylist { display: flex; width: 100%; }
.hy-vplaylist--below { flex-direction: column; }
.hy-vplaylist--right { flex-direction: row; align-items: flex-start; }

.hy-vplaylist__featured { flex: 1 1 auto; min-width: 0; }
.hy-vplaylist__frame {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: var(--hy-vp-pb, 56.25%);
    overflow: hidden;
    background: #0E0E10;
    border-radius: inherit;
}
.hy-vplaylist__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.hy-vplaylist--below .hy-vplaylist__list { width: 100%; margin: 16px 0 0; }
.hy-vplaylist--right .hy-vplaylist__list {
    flex: 0 0 auto;
    width: var(--hy-vp-list-w, 320px);
    margin: 0 0 0 16px;
    max-height: 480px;
    overflow-y: auto;
}

.hy-vplaylist__heading {
    margin: 0 0 8px;
    color: var(--hy-vp-heading-color, #1A1A2A);
    font-size: 14px;
    font-weight: 600;
}

.hy-vplaylist__items { display: flex; flex-direction: column; gap: 2px; }

.hy-vplaylist__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hy-vp-divider-color, #E5E5EA);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 150ms ease;
}
.hy-vplaylist__item:last-child { border-bottom: 0; }
.hy-vplaylist__item:hover { background: #F4F4F7; }
.hy-vplaylist__item.is-active { background: var(--hy-vp-active-bg, #F0F9FF); }
.hy-vplaylist__item.is-active .hy-vplaylist__title { color: var(--hy-vp-active-color, #0C4A6E); }

.hy-vplaylist__thumb {
    position: relative;
    flex: 0 0 96px;
    aspect-ratio: 16 / 9;
    border-radius: var(--hy-vp-thumb-radius, 6px);
    overflow: hidden;
    background: #E5E5EA;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hy-vplaylist__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hy-vplaylist__thumb-icon { width: 22px; height: 22px; color: #9A9AA8; }
.hy-vplaylist__thumb-icon svg { display: block; width: 100%; height: 100%; }
.hy-vplaylist__duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--hy-vp-duration-color, #FFFFFF);
    background: var(--hy-vp-duration-bg, rgba(0, 0, 0, .75));
}

.hy-vplaylist__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.hy-vplaylist__number { flex: 0 0 auto; color: #9A9AA8; font-size: 13px; }
.hy-vplaylist__title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--hy-vp-title-color, #1A1A2A);
    font-size: var(--hy-vp-title-size, 14px);
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hy-vplaylist--empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}

/* ── Image Box widget ────────────────────────────────────────────────────────
   Image + title/description siblings, laid out via the shared MediaBox
   position/valign mechanics (also used by Icon Box below). Title/description
   ride scoped --hy-imgbox-{title,desc}-* namespaces, same reasoning as the
   Call To Action widget's per-element vars. */
.hy-image-box {
    display: flex;
    align-items: flex-start;
    gap: var(--hy-imgbox-gap, 20px);
    color: inherit;
}
.hyndle-page a.hy-image-box.hy-image-box { text-decoration: none; color: inherit; }
.hy-image-box.hy-image-box--pos-left  { flex-direction: row; }
.hy-image-box.hy-image-box--pos-right { flex-direction: row-reverse; }
.hy-image-box.hy-image-box--pos-top   { flex-direction: column; align-items: var(--hy-imgbox-align-items, flex-start); }
.hy-image-box.hy-image-box--valign-top    { align-items: flex-start; }
.hy-image-box.hy-image-box--valign-middle { align-items: center; }
.hy-image-box.hy-image-box--valign-bottom { align-items: flex-end; }

.hy-image-box__media { flex: 0 0 auto; }
.hyndle-page .hy-image-box__img {
    display: block;
    width: var(--hy-imgbox-img-width, 120px);
    max-width: 100%;
    height: auto;
    border-radius: var(--hy-imgbox-img-radius, 8px);
    object-fit: cover;
    transition: transform 200ms ease, opacity 200ms ease;
}
.hy-image-box:hover .hy-image-box__img {
    transform: scale(var(--hy-imgbox-img-zoom, 1));
    opacity: var(--hy-imgbox-img-opacity-h, 1);
}

.hy-image-box__content {
    display: flex;
    flex-direction: column;
    align-items: var(--hy-imgbox-align-items, flex-start);
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.hy-image-box__title {
    margin: 0;
    color: var(--hy-imgbox-title-color, #1A1A2A);
    font-family: var(--hy-imgbox-title-font-family, inherit);
    font-size: var(--hy-imgbox-title-font-size, 20px);
    font-weight: var(--hy-imgbox-title-font-weight, 600);
    text-transform: var(--hy-imgbox-title-text-transform, none);
    font-style: var(--hy-imgbox-title-font-style, normal);
    text-decoration: var(--hy-imgbox-title-text-decoration, none);
    line-height: var(--hy-imgbox-title-line-height, 1.3);
    letter-spacing: var(--hy-imgbox-title-letter-spacing, normal);
    text-shadow: var(--hy-imgbox-title-text-shadow, none);
}
.hy-image-box:hover .hy-image-box__title { color: var(--hy-imgbox-title-color-h, var(--hy-imgbox-title-color, inherit)); }

.hy-image-box__desc {
    color: var(--hy-imgbox-desc-color, #6E6E7C);
    font-family: var(--hy-imgbox-desc-font-family, inherit);
    font-size: var(--hy-imgbox-desc-font-size, 15px);
    font-weight: var(--hy-imgbox-desc-font-weight, 400);
    text-transform: var(--hy-imgbox-desc-text-transform, none);
    font-style: var(--hy-imgbox-desc-font-style, normal);
    text-decoration: var(--hy-imgbox-desc-text-decoration, none);
    line-height: var(--hy-imgbox-desc-line-height, 1.6);
    letter-spacing: var(--hy-imgbox-desc-letter-spacing, normal);
    text-shadow: var(--hy-imgbox-desc-text-shadow, none);
}
.hy-image-box:hover .hy-image-box__desc { color: var(--hy-imgbox-desc-color-h, var(--hy-imgbox-desc-color, inherit)); }

@media (max-width: 480px) {
    .hy-image-box.hy-image-box--pos-left,
    .hy-image-box.hy-image-box--pos-right { flex-direction: column; align-items: var(--hy-imgbox-align-items, flex-start); }
}

/* ── Icon Box widget ─────────────────────────────────────────────────────────
   Icon + title/description siblings, laid out via the same shared MediaBox
   mechanics as Image Box above. The icon reuses the standalone Icon widget's
   exact view/shape/color mechanics (compare .hy-iconbox further up this
   file) under its own --hy-icbox-icon-* namespace and .hy-icon-box__icon-wrap
   class — 'hy-icon-box', never 'hy-iconbox', which already belongs to the
   standalone Icon widget's wrapper element. */
.hy-icon-box {
    display: flex;
    align-items: flex-start;
    gap: var(--hy-icbox-gap, 20px);
    color: inherit;
}
.hyndle-page a.hy-icon-box.hy-icon-box { text-decoration: none; color: inherit; }
.hy-icon-box.hy-icon-box--pos-left  { flex-direction: row; }
.hy-icon-box.hy-icon-box--pos-right { flex-direction: row-reverse; }
.hy-icon-box.hy-icon-box--pos-top   { flex-direction: column; align-items: var(--hy-icbox-align-items, flex-start); }
.hy-icon-box.hy-icon-box--valign-top    { align-items: flex-start; }
.hy-icon-box.hy-icon-box--valign-middle { align-items: center; }
.hy-icon-box.hy-icon-box--valign-bottom { align-items: flex-end; }

.hy-icon-box__icon-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hy-icbox-icon-size, 50px);
    line-height: 1;
    color: var(--hy-icbox-icon-color, #1A1A2A);
    transition: var(--hy-icbox-icon-tr, color 150ms ease, background-color 150ms ease, border-color 150ms ease);
}
.hy-icon-box:hover .hy-icon-box__icon-wrap {
    color: var(--hy-icbox-icon-color-h, var(--hy-icbox-icon-color, #1A1A2A));
}
.hy-icon-box__icon-wrap--stacked {
    color: var(--hy-icbox-icon-color-2, #FFFFFF);
    background-color: var(--hy-icbox-icon-color, #1A1A2A);
    padding: var(--hy-icbox-icon-pad, 0.5em);
}
.hy-icon-box:hover .hy-icon-box__icon-wrap--stacked {
    color: var(--hy-icbox-icon-color-2-h, var(--hy-icbox-icon-color-2, #FFFFFF));
    background-color: var(--hy-icbox-icon-color-h, var(--hy-icbox-icon-color, #1A1A2A));
}
.hy-icon-box__icon-wrap--framed {
    background-color: var(--hy-icbox-icon-color-2, transparent);
    border: var(--hy-icbox-icon-bw, 3px) solid currentColor;
    padding: var(--hy-icbox-icon-pad, 0.5em);
}
.hy-icon-box:hover .hy-icon-box__icon-wrap--framed {
    background-color: var(--hy-icbox-icon-color-2-h, var(--hy-icbox-icon-color-2, transparent));
}
.hy-icon-box__icon-wrap--square  { border-radius: var(--hy-icbox-icon-radius, 0); }
.hy-icon-box__icon-wrap--rounded { border-radius: var(--hy-icbox-icon-radius, 10%); }
.hy-icon-box__icon-wrap--circle  { border-radius: var(--hy-icbox-icon-radius, 50%); }
.hy-icon-box__icon-wrap i {
    font-size: 1em;
    transform: rotate(var(--hy-icbox-icon-rotate, 0deg));
}
.hy-icon-box__icon-wrap svg,
.hy-icon-box__icon-wrap .hy-icon-svg {
    width: 1em;
    height: 1em;
    transform: rotate(var(--hy-icbox-icon-rotate, 0deg));
}

.hy-icon-box__content {
    display: flex;
    flex-direction: column;
    align-items: var(--hy-icbox-align-items, flex-start);
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.hy-icon-box__title {
    margin: 0;
    color: var(--hy-icbox-title-color, #1A1A2A);
    font-family: var(--hy-icbox-title-font-family, inherit);
    font-size: var(--hy-icbox-title-font-size, 20px);
    font-weight: var(--hy-icbox-title-font-weight, 600);
    text-transform: var(--hy-icbox-title-text-transform, none);
    font-style: var(--hy-icbox-title-font-style, normal);
    text-decoration: var(--hy-icbox-title-text-decoration, none);
    line-height: var(--hy-icbox-title-line-height, 1.3);
    letter-spacing: var(--hy-icbox-title-letter-spacing, normal);
    text-shadow: var(--hy-icbox-title-text-shadow, none);
}
.hy-icon-box:hover .hy-icon-box__title { color: var(--hy-icbox-title-color-h, var(--hy-icbox-title-color, inherit)); }

.hy-icon-box__desc {
    color: var(--hy-icbox-desc-color, #6E6E7C);
    font-family: var(--hy-icbox-desc-font-family, inherit);
    font-size: var(--hy-icbox-desc-font-size, 15px);
    font-weight: var(--hy-icbox-desc-font-weight, 400);
    text-transform: var(--hy-icbox-desc-text-transform, none);
    font-style: var(--hy-icbox-desc-font-style, normal);
    text-decoration: var(--hy-icbox-desc-text-decoration, none);
    line-height: var(--hy-icbox-desc-line-height, 1.6);
    letter-spacing: var(--hy-icbox-desc-letter-spacing, normal);
    text-shadow: var(--hy-icbox-desc-text-shadow, none);
}
.hy-icon-box:hover .hy-icon-box__desc { color: var(--hy-icbox-desc-color-h, var(--hy-icbox-desc-color, inherit)); }

@media (max-width: 480px) {
    .hy-icon-box.hy-icon-box--pos-left,
    .hy-icon-box.hy-icon-box--pos-right { flex-direction: column; align-items: var(--hy-icbox-align-items, flex-start); }
}

/* ── Counter widget ──────────────────────────────────────────────────────────
   Title is always FIRST in DOM regardless of visual position (matches
   Elementor's own Counter — assistive tech gets the label before the number
   even when it displays after/beside it); title_position just picks
   flex-direction to reposition it visually. align-items means "cross-axis
   alignment" on whichever axis is active, so one alignment control drives
   horizontal centering in column modes and vertical centering in row modes
   with no extra logic. */
.hy-counter {
    display: flex;
    align-items: var(--hy-counter-align-items, center);
    gap: var(--hy-counter-gap, 10px);
}
.hy-counter.hy-counter--pos-before { flex-direction: column; }
.hy-counter.hy-counter--pos-after  { flex-direction: column-reverse; }
.hy-counter.hy-counter--pos-start  { flex-direction: row; }
.hy-counter.hy-counter--pos-end    { flex-direction: row-reverse; }

.hy-counter__title {
    margin: 0;
    color: var(--hy-counter-title-color, #6E6E7C);
    font-family: var(--hy-counter-title-font-family, inherit);
    font-size: var(--hy-counter-title-font-size, 19px);
    font-weight: var(--hy-counter-title-font-weight, 400);
    text-transform: var(--hy-counter-title-text-transform, none);
    font-style: var(--hy-counter-title-font-style, normal);
    text-decoration: var(--hy-counter-title-text-decoration, none);
    line-height: var(--hy-counter-title-line-height, 1.4);
    letter-spacing: var(--hy-counter-title-letter-spacing, normal);
    text-shadow: var(--hy-counter-title-text-shadow, none);
}

.hy-counter__number-wrap {
    display: flex;
    align-items: baseline;
    color: var(--hy-counter-number-color, #1A1A2A);
    font-family: var(--hy-counter-number-font-family, inherit);
    font-size: var(--hy-counter-number-font-size, 60px);
    font-weight: var(--hy-counter-number-font-weight, 600);
    text-transform: var(--hy-counter-number-text-transform, none);
    font-style: var(--hy-counter-number-font-style, normal);
    text-decoration: var(--hy-counter-number-text-decoration, none);
    line-height: var(--hy-counter-number-line-height, 1);
    letter-spacing: var(--hy-counter-number-letter-spacing, normal);
    text-shadow: var(--hy-counter-number-text-shadow, none);
}
.hy-counter__prefix,
.hy-counter__suffix { white-space: pre-wrap; }

/* ── Icon List widget ────────────────────────────────────────────────────────
   Real <ul>/<li> semantic list. The divider is a ::after pseudo-element sized
   by a percentage length rather than a plain border — a border-bottom can't
   be "50% wide, right-aligned" without the absolute-positioning trick, same
   technique Elementor's own Icon List uses. Hover is scored on the whole
   <li>, not just the link — hovering a non-linked item's icon or text still
   triggers the hover color (matches Elementor's own, slightly surprising,
   confirmed behaviour). */
.hy-icon-list {
    display: flex;
    flex-direction: column;
    gap: var(--hy-ilist-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hy-icon-list.hy-icon-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: var(--hy-ilist-justify, flex-start);
}

.hy-icon-list__item { position: relative; }
.hy-icon-list--divider.hy-icon-list--vertical .hy-icon-list__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: calc(var(--hy-ilist-gap, 12px) / -2);
    width: var(--hy-ilist-divider-length, 100%);
    border-top: var(--hy-ilist-divider-weight, 1px) var(--hy-ilist-divider-style, solid) var(--hy-ilist-divider-color, #E5E5EA);
}
.hy-icon-list--divider.hy-icon-list--inline .hy-icon-list__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--hy-ilist-gap, 12px) / -2);
    height: var(--hy-ilist-divider-length, 100%);
    transform: translateY(-50%);
    border-left: var(--hy-ilist-divider-weight, 1px) var(--hy-ilist-divider-style, solid) var(--hy-ilist-divider-color, #E5E5EA);
}

.hyndle-page a.hy-icon-list__row.hy-icon-list__row { text-decoration: none; color: inherit; }
.hy-icon-list__row {
    display: inline-flex;
    align-items: var(--hy-ilist-icon-valign, center);
    gap: var(--hy-ilist-icon-gap, 8px);
    color: inherit;
    transition: var(--hy-ilist-tr, none);
}
.hy-icon-list--link-full .hy-icon-list__row { display: flex; width: 100%; }

.hy-icon-list__item:hover .hy-icon-list__icon { color: var(--hy-ilist-icon-color-h, var(--hy-ilist-icon-color, currentColor)); }
.hy-icon-list__item:hover .hy-icon-list__text { color: var(--hy-ilist-text-color-h, var(--hy-ilist-text-color, inherit)); }

.hy-icon-list__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--hy-ilist-icon-color, #1A1A2A);
    font-size: var(--hy-ilist-icon-size, 16px);
    line-height: 1;
}
.hy-icon-list__icon svg,
.hy-icon-list__icon .hy-icon-svg { width: 1em; height: 1em; }

.hy-icon-list__text {
    color: var(--hy-ilist-text-color, #1A1A2A);
    font-family: var(--hy-ilist-text-font-family, inherit);
    font-size: var(--hy-ilist-text-font-size, 15px);
    font-weight: var(--hy-ilist-text-font-weight, 400);
    text-transform: var(--hy-ilist-text-text-transform, none);
    font-style: var(--hy-ilist-text-font-style, normal);
    text-decoration: var(--hy-ilist-text-text-decoration, none);
    line-height: var(--hy-ilist-text-line-height, 1.5);
    letter-spacing: var(--hy-ilist-text-letter-spacing, normal);
    text-shadow: var(--hy-ilist-text-text-shadow, none);
}

.hy-icon-list--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-icon-list__placeholder { color: #9A9AA8; font-size: 13px; }
.hy-vplaylist__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Progress Bar widget ─────────────────────────────────────────────────────
   Track (outer, carries the ARIA role) + Bar (inner, animated width). The
   bar starts at width:0 here — no inline style in the PHP output — and JS
   sets the real width once it scrolls into view (initProgressBars() in this
   file), letting this transition animate the visual change. Matches
   Elementor's own Progress Bar mechanism (IntersectionObserver + a plain
   CSS width transition), fixed to clamp BOTH percentage bounds and to
   apply one consistent radius to both track and fill (Elementor's own
   border-radius control only ever reaches the track, relying on
   overflow:hidden to clip the fill — a minor inconsistency not worth
   copying). */
.hy-progress__title {
    display: block;
    margin: 0 0 8px;
    color: var(--hy-progress-title-color, #1A1A2A);
    font-family: var(--hy-progress-title-font-family, inherit);
    font-size: var(--hy-progress-title-font-size, 16px);
    font-weight: var(--hy-progress-title-font-weight, 500);
    text-transform: var(--hy-progress-title-text-transform, none);
    font-style: var(--hy-progress-title-font-style, normal);
    text-decoration: var(--hy-progress-title-text-decoration, none);
    line-height: var(--hy-progress-title-line-height, 1.4);
    letter-spacing: var(--hy-progress-title-letter-spacing, normal);
    text-shadow: var(--hy-progress-title-text-shadow, none);
}

.hy-progress__track {
    position: relative;
    width: 100%;
    height: var(--hy-progress-height, 30px);
    border-radius: var(--hy-progress-radius, 2px);
    background: var(--hy-progress-track-color, #EEEEEE);
    overflow: hidden;
}

.hy-progress__bar {
    display: flex;
    align-items: center;
    width: 0;
    height: 100%;
    background: var(--hy-progress-bar-color, #70D6FF);
    border-radius: inherit;
    transition: width 1s ease-in-out;
    color: var(--hy-progress-text-color, #FFFFFF);
    font-family: var(--hy-progress-text-font-family, inherit);
    font-size: var(--hy-progress-text-font-size, 13px);
    font-weight: var(--hy-progress-text-font-weight, 400);
    text-transform: var(--hy-progress-text-text-transform, none);
    font-style: var(--hy-progress-text-font-style, normal);
    text-decoration: var(--hy-progress-text-text-decoration, none);
    line-height: var(--hy-progress-text-line-height, 1.4);
    letter-spacing: var(--hy-progress-text-letter-spacing, normal);
    text-shadow: var(--hy-progress-text-text-shadow, none);
}

.hy-progress__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-start: 15px;
}

.hy-progress__percentage {
    flex: 0 0 auto;
    padding-inline-end: 15px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hy-progress__text { padding-inline-start: 10px; }
}

/* ── Social Icons widget ─────────────────────────────────────────────────────
   Per-item colour (official brand lookup, or custom, or the global uniform
   override — all reconciled server-side into ONE final value per item, see
   Control.php) rides indexed custom properties, consumed here by static
   :nth-child(N) rules — the only way to vary per-item styling without an
   inline style attribute, since the shared style-closure mechanism only
   targets one selector per widget instance. */
.hy-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: var(--hy-social-justify, center);
    gap: 5px var(--hy-social-gap, 5px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.hy-social-icons--cols-1 { display: grid; grid-template-columns: repeat(1, auto); justify-content: var(--hy-social-justify, center); }
.hy-social-icons--cols-2 { display: grid; grid-template-columns: repeat(2, auto); justify-content: var(--hy-social-justify, center); }
.hy-social-icons--cols-3 { display: grid; grid-template-columns: repeat(3, auto); justify-content: var(--hy-social-justify, center); }
.hy-social-icons--cols-4 { display: grid; grid-template-columns: repeat(4, auto); justify-content: var(--hy-social-justify, center); }
.hy-social-icons--cols-5 { display: grid; grid-template-columns: repeat(5, auto); justify-content: var(--hy-social-justify, center); }
.hy-social-icons--cols-6 { display: grid; grid-template-columns: repeat(6, auto); justify-content: var(--hy-social-justify, center); }

.hy-social-icons__item { display: inline-flex; }

/* Indexed colour hand-off — one rule per repeater slot (capped at 12,
   matching the repeater's own item cap), shared across every instance;
   only the --hy-social-{fg,bg}-N VALUES differ per instance. */
.hy-social-icons__item:nth-child(1)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-0);  --hy-social-bg: var(--hy-social-bg-0); }
.hy-social-icons__item:nth-child(2)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-1);  --hy-social-bg: var(--hy-social-bg-1); }
.hy-social-icons__item:nth-child(3)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-2);  --hy-social-bg: var(--hy-social-bg-2); }
.hy-social-icons__item:nth-child(4)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-3);  --hy-social-bg: var(--hy-social-bg-3); }
.hy-social-icons__item:nth-child(5)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-4);  --hy-social-bg: var(--hy-social-bg-4); }
.hy-social-icons__item:nth-child(6)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-5);  --hy-social-bg: var(--hy-social-bg-5); }
.hy-social-icons__item:nth-child(7)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-6);  --hy-social-bg: var(--hy-social-bg-6); }
.hy-social-icons__item:nth-child(8)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-7);  --hy-social-bg: var(--hy-social-bg-7); }
.hy-social-icons__item:nth-child(9)  .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-8);  --hy-social-bg: var(--hy-social-bg-8); }
.hy-social-icons__item:nth-child(10) .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-9);  --hy-social-bg: var(--hy-social-bg-9); }
.hy-social-icons__item:nth-child(11) .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-10); --hy-social-bg: var(--hy-social-bg-10); }
.hy-social-icons__item:nth-child(12) .hy-social-icons__link { --hy-social-fg: var(--hy-social-fg-11); --hy-social-bg: var(--hy-social-bg-11); }

.hyndle-page a.hy-social-icons__link.hy-social-icons__link { text-decoration: none; }
.hy-social-icons__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--hy-social-icon-size, 25px) + 2 * var(--hy-social-icon-pad, 8px));
    height: calc(var(--hy-social-icon-size, 25px) + 2 * var(--hy-social-icon-pad, 8px));
    font-size: var(--hy-social-icon-size, 25px);
    line-height: 1;
    color: var(--hy-social-fg, #FFFFFF);
    background-color: var(--hy-social-bg, #69727D);
    border: var(--hy-social-border-width, 0) solid var(--hy-social-border-color, transparent);
    box-shadow: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.hy-social-icons--square .hy-social-icons__link  { border-radius: var(--hy-social-radius, 0); }
.hy-social-icons--rounded .hy-social-icons__link { border-radius: var(--hy-social-radius, 10%); }
.hy-social-icons--circle .hy-social-icons__link  { border-radius: var(--hy-social-radius, 50%); }

.hy-social-icons__link:hover,
.hy-social-icons__link:focus {
    color: var(--hy-social-hover-fg, var(--hy-social-fg, #FFFFFF));
    background-color: var(--hy-social-hover-bg, var(--hy-social-bg, #69727D));
    border-color: var(--hy-social-hover-border, var(--hy-social-border-color, transparent));
}

.hy-social-icons__link i,
.hy-social-icons__link svg,
.hy-social-icons__link .hy-icon-svg { width: 1em; height: 1em; font-size: 1em; }

/* Visually-hidden accessible label (the icon itself is aria-hidden) —
   standard "screen-reader only" clip technique. */
.hy-social-icons__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hy-social-icons--empty {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-social-icons__placeholder { color: #9A9AA8; font-size: 13px; }

/* Hover animations — a curated subset of Elementor's own set. */
.hy-social-icons__link--grow:hover   { transform: scale(1.15); }
.hy-social-icons__link--shrink:hover { transform: scale(0.85); }
.hy-social-icons__link--float:hover  { transform: translateY(-6px); }
.hy-social-icons__link--sink:hover   { transform: translateY(4px); }
.hy-social-icons__link--pulse:hover           { animation: hy-social-pulse 400ms ease; }
.hy-social-icons__link--wobble-horizontal:hover { animation: hy-social-wobble-h 700ms ease; }
.hy-social-icons__link--bounce-in:hover       { animation: hy-social-bounce-in 400ms ease; }
@keyframes hy-social-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.9); }
}
@keyframes hy-social-wobble-h {
    16.65%  { transform: translateX(8px); }
    33.3%   { transform: translateX(-6px); }
    49.95%  { transform: translateX(4px); }
    66.6%   { transform: translateX(-2px); }
    83.25%  { transform: translateX(1px); }
    100%    { transform: translateX(0); }
}
@keyframes hy-social-bounce-in {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* ── Alert widget ──────────────────────────────────────────────────────────
   The alert box IS the widget's own inner root (Render.php's root element) —
   background/border-inline-start default per alert_type, overridden by a
   plain direct property from the style closure when the user sets an
   explicit override (higher-specificity ".hyndle-page .hy-w-x > *" rule
   always wins over these single-class type defaults). */
.hy-alert {
    display: block;
    position: relative;
    padding: 15px;
    border-inline-start: 5px solid transparent;
    border-radius: 0;
    text-align: start;
}
.hy-alert--info    { background-color: #D9EDF7; border-inline-start-color: #BCDFF1; color: #31708F; }
.hy-alert--success { background-color: #DFF0D8; border-inline-start-color: #CAE6BE; color: #3C763D; }
.hy-alert--warning { background-color: #FCF8E3; border-inline-start-color: #F9F0C3; color: #8A6D3B; }
.hy-alert--danger  { background-color: #F2DEDE; border-inline-start-color: #E8C4C4; color: #A94442; }

.hy-alert__title {
    display: block;
    color: var(--hy-alert-title-color, inherit);
    font-family: var(--hy-alert-title-font-family, inherit);
    font-size: var(--hy-alert-title-font-size, inherit);
    font-weight: var(--hy-alert-title-font-weight, 700);
    text-transform: var(--hy-alert-title-text-transform, none);
    font-style: var(--hy-alert-title-font-style, normal);
    text-decoration: var(--hy-alert-title-text-decoration, none);
    line-height: var(--hy-alert-title-line-height, inherit);
    letter-spacing: var(--hy-alert-title-letter-spacing, normal);
    text-shadow: var(--hy-alert-title-text-shadow, none);
}

.hy-alert__desc {
    display: block;
    color: var(--hy-alert-desc-color, inherit);
    font-family: var(--hy-alert-desc-font-family, inherit);
    font-size: var(--hy-alert-desc-font-size, 13px);
    font-weight: var(--hy-alert-desc-font-weight, 400);
    text-transform: var(--hy-alert-desc-text-transform, none);
    font-style: var(--hy-alert-desc-font-style, normal);
    text-decoration: var(--hy-alert-desc-text-decoration, none);
    line-height: var(--hy-alert-desc-line-height, inherit);
    letter-spacing: var(--hy-alert-desc-letter-spacing, normal);
    text-shadow: var(--hy-alert-desc-text-shadow, none);
}

.hy-alert__dismiss {
    position: absolute;
    inset-block-start: var(--hy-alert-dismiss-top, 10px);
    inset-inline-end: var(--hy-alert-dismiss-right, 10px);
    background: transparent;
    border: none;
    padding: 3px;
    line-height: 1;
    cursor: pointer;
    color: var(--hy-alert-dismiss-color, inherit);
    font-size: var(--hy-alert-dismiss-size, 20px);
    transition-duration: var(--hy-alert-dismiss-transition, 300ms);
}
.hy-alert__dismiss:hover { color: var(--hy-alert-dismiss-color-h, var(--hy-alert-dismiss-color, inherit)); }
.hy-alert__dismiss svg { width: 1em; height: 1em; fill: currentColor; }
.hy-alert__dismiss i { font-size: 1em; }

@media (max-width: 767px) {
    .hy-alert { padding: 10px; }
    .hy-alert__dismiss { inset-block-start: 7px; inset-inline-end: 7px; }
}

/* ── Custom HTML widget — no custom styling, entirely the generic wrapper
   box-model plus whatever markup the user pastes renders as. */
.hy-html--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-html__placeholder { color: #9A9AA8; font-size: 13px; }

/* ── Tabs widget ───────────────────────────────────────────────────────────
   Nav + content panel share one "chrome" (border/background) — matches
   Elementor's own classic Tabs widget, whose border/background controls
   target both the active nav item and the content wrapper. Border defaults
   to a visible 1px even when untouched, same as Elementor's own default. */
.hy-tabs--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-tabs__placeholder { color: #9A9AA8; font-size: 13px; }

.hy-tabs { display: block; }
.hy-tabs--dir-vertical { display: flex; align-items: flex-start; }

.hy-tabs__nav {
    display: flex;
    margin: 0;
    padding: 0;
}
.hy-tabs--dir-horizontal .hy-tabs__nav { flex-direction: row; flex-wrap: wrap; }
.hy-tabs--dir-vertical .hy-tabs__nav {
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--hy-tabs-nav-width, 30%);
}
.hy-tabs--dir-vertical .hy-tabs__panels { flex: 1 1 0; min-width: 0; }

.hy-tabs--align-start .hy-tabs__nav   { justify-content: flex-start; align-items: flex-start; }
.hy-tabs--align-center .hy-tabs__nav  { justify-content: center; align-items: center; }
.hy-tabs--align-end .hy-tabs__nav     { justify-content: flex-end; align-items: flex-end; }
.hy-tabs--align-stretch .hy-tabs__nav { justify-content: stretch; align-items: stretch; }
.hy-tabs--align-stretch.hy-tabs--dir-horizontal .hy-tabs__nav-item { flex: 1 1 0; }
.hy-tabs--align-stretch.hy-tabs--dir-vertical .hy-tabs__nav-item   { width: 100%; }

.hy-tabs__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    border: var(--hy-tabs-border-w, 1px) solid var(--hy-tabs-border-color, #E5E5EA);
    cursor: pointer;
    font: inherit;
    color: var(--hy-tabs-title-color, inherit);
    font-family: var(--hy-tabs-title-font-family, inherit);
    font-size: var(--hy-tabs-title-font-size, 15px);
    font-weight: var(--hy-tabs-title-font-weight, 600);
    text-transform: var(--hy-tabs-title-text-transform, none);
    font-style: var(--hy-tabs-title-font-style, normal);
    text-decoration: var(--hy-tabs-title-text-decoration, none);
    line-height: var(--hy-tabs-title-line-height, 1.3);
    letter-spacing: var(--hy-tabs-title-letter-spacing, normal);
    text-shadow: var(--hy-tabs-title-text-shadow, none);
}
.hy-tabs--dir-horizontal .hy-tabs__nav-item + .hy-tabs__nav-item { margin-inline-start: -1px; }
.hy-tabs--dir-vertical .hy-tabs__nav-item + .hy-tabs__nav-item { margin-block-start: -1px; }
.hy-tabs__nav-item.is-active {
    background: var(--hy-tabs-bg, #FFFFFF);
    border-color: var(--hy-tabs-border-color, #E5E5EA);
    color: var(--hy-tabs-active-color, var(--hy-tabs-title-color, inherit));
    position: relative;
    z-index: 1;
}
.hy-tabs__nav-title { text-align: var(--hy-tabs-title-align, inherit); }
.hy-tabs__nav-icon { display: inline-flex; align-items: center; line-height: 1; }
.hy-tabs__nav-icon svg,
.hy-tabs__nav-icon .hy-icon-svg { width: 1em; height: 1em; }

.hy-tabs__panels { flex: 1 1 auto; min-width: 0; }
.hy-tabs__panel {
    display: none;
    background: var(--hy-tabs-bg, transparent);
    border: var(--hy-tabs-border-w, 1px) solid var(--hy-tabs-border-color, #E5E5EA);
    padding: 22px;
}
.hy-tabs__panel.is-active { display: block; }
.hy-tabs__content {
    color: var(--hy-tabs-content-color, inherit);
    font-family: var(--hy-tabs-content-font-family, inherit);
    font-size: var(--hy-tabs-content-font-size, 15px);
    font-weight: var(--hy-tabs-content-font-weight, 400);
    text-transform: var(--hy-tabs-content-text-transform, none);
    font-style: var(--hy-tabs-content-font-style, normal);
    text-decoration: var(--hy-tabs-content-text-decoration, none);
    line-height: var(--hy-tabs-content-line-height, 1.6);
    letter-spacing: var(--hy-tabs-content-letter-spacing, normal);
    text-shadow: var(--hy-tabs-content-text-shadow, none);
}

/* ── Shared closed/open icon pair (Accordion + Toggle) — both icons stay in
   the DOM, CSS shows exactly one based on the item's own .is-open state, so
   no JS icon-swap is needed. Colour/gap vars are set per-widget below since
   each widget's own ancestor class scopes which var this reads. */
.hy-collapse__icon { display: inline-flex; align-items: center; line-height: 1; }
.hy-collapse__icon svg,
.hy-collapse__icon .hy-icon-svg { width: 1em; height: 1em; }
.hy-collapse__icon-open { display: none; }
.is-open .hy-collapse__icon-closed { display: none; }
.is-open .hy-collapse__icon-open { display: inline-flex; }
.hy-collapse__icon--left { order: -1; }
.hy-collapse__icon--right { order: 1; }

/* ── Accordion widget — items merge into one continuous bordered box; the
   open item's panel border-top divides it visually from its own title
   instead of Elementor's border-collapse trick between separate elements. */
.hy-accordion--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-accordion__placeholder { color: #9A9AA8; font-size: 13px; }

.hy-accordion__item {
    border: var(--hy-acc-border-w, 1px) solid var(--hy-acc-border-color, #E5E5EA);
}
.hy-accordion__item + .hy-accordion__item { margin-block-start: -1px; }
.hy-accordion__header { margin: 0; }
.hy-accordion__title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--hy-acc-title-pad-y, 16px) var(--hy-acc-title-pad-x, 20px);
    background: var(--hy-acc-title-bg, transparent);
    border: none;
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: var(--hy-acc-title-color, inherit);
    font-family: var(--hy-acc-title-font-family, inherit);
    font-size: var(--hy-acc-title-font-size, 16px);
    font-weight: var(--hy-acc-title-font-weight, 600);
    text-transform: var(--hy-acc-title-text-transform, none);
    font-style: var(--hy-acc-title-font-style, normal);
    text-decoration: var(--hy-acc-title-text-decoration, none);
    line-height: var(--hy-acc-title-line-height, 1.3);
    letter-spacing: var(--hy-acc-title-letter-spacing, normal);
    text-shadow: var(--hy-acc-title-text-shadow, none);
}
.hy-accordion__item.is-open .hy-accordion__title {
    color: var(--hy-acc-active-color, var(--hy-acc-title-color, inherit));
}
.hy-accordion .hy-collapse__icon {
    color: var(--hy-acc-icon-color, inherit);
    margin-inline-end: var(--hy-acc-icon-gap, 10px);
}
.hy-accordion .hy-collapse__icon--right { margin-inline-end: 0; margin-inline-start: var(--hy-acc-icon-gap, 10px); }
.hy-accordion__item.is-open .hy-collapse__icon {
    color: var(--hy-acc-icon-active-color, var(--hy-acc-icon-color, inherit));
}
.hy-accordion__panel {
    display: none;
    border-block-start: 1px solid var(--hy-acc-border-color, #E5E5EA);
    background: var(--hy-acc-content-bg, transparent);
}
.hy-accordion__item.is-open .hy-accordion__panel { display: block; }
.hy-accordion__content {
    padding: var(--hy-acc-content-pad-y, 16px) var(--hy-acc-content-pad-x, 20px);
    color: var(--hy-acc-content-color, inherit);
    font-family: var(--hy-acc-content-font-family, inherit);
    font-size: var(--hy-acc-content-font-size, 15px);
    font-weight: var(--hy-acc-content-font-weight, 400);
    text-transform: var(--hy-acc-content-text-transform, none);
    font-style: var(--hy-acc-content-font-style, normal);
    text-decoration: var(--hy-acc-content-text-decoration, none);
    line-height: var(--hy-acc-content-line-height, 1.6);
    letter-spacing: var(--hy-acc-content-letter-spacing, normal);
    text-shadow: var(--hy-acc-content-text-shadow, none);
}

/* ── Toggle widget — independent boxed items with a gap between them, no
   merged-border behaviour. */
.hy-toggle--empty {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCFCFD;
    border: 1px dashed #E5E5EA;
}
.hy-toggle__placeholder { color: #9A9AA8; font-size: 13px; }

.hy-toggle__item {
    border: var(--hy-tog-border-w, 1px) solid var(--hy-tog-border-color, #E5E5EA);
}
.hy-toggle__item:not(:last-child) { margin-block-end: var(--hy-tog-gap, 12px); }
.hy-toggle__header { margin: 0; }
.hy-toggle__title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--hy-tog-title-pad-y, 16px) var(--hy-tog-title-pad-x, 20px);
    background: var(--hy-tog-title-bg, transparent);
    border: none;
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: var(--hy-tog-title-color, inherit);
    font-family: var(--hy-tog-title-font-family, inherit);
    font-size: var(--hy-tog-title-font-size, 16px);
    font-weight: var(--hy-tog-title-font-weight, 600);
    text-transform: var(--hy-tog-title-text-transform, none);
    font-style: var(--hy-tog-title-font-style, normal);
    text-decoration: var(--hy-tog-title-text-decoration, none);
    line-height: var(--hy-tog-title-line-height, 1.3);
    letter-spacing: var(--hy-tog-title-letter-spacing, normal);
    text-shadow: var(--hy-tog-title-text-shadow, none);
}
.hy-toggle__item.is-open .hy-toggle__title {
    color: var(--hy-tog-active-color, var(--hy-tog-title-color, inherit));
}
.hy-toggle .hy-collapse__icon {
    color: var(--hy-tog-icon-color, inherit);
    margin-inline-end: var(--hy-tog-icon-gap, 10px);
}
.hy-toggle .hy-collapse__icon--right { margin-inline-end: 0; margin-inline-start: var(--hy-tog-icon-gap, 10px); }
.hy-toggle__item.is-open .hy-collapse__icon {
    color: var(--hy-tog-icon-active-color, var(--hy-tog-icon-color, inherit));
}
.hy-toggle__panel {
    display: none;
    border-block-start: 1px solid var(--hy-tog-border-color, #E5E5EA);
    background: var(--hy-tog-content-bg, transparent);
}
.hy-toggle__item.is-open .hy-toggle__panel { display: block; }
.hy-toggle__content {
    padding: var(--hy-tog-content-pad-y, 16px) var(--hy-tog-content-pad-x, 20px);
    color: var(--hy-tog-content-color, inherit);
    font-family: var(--hy-tog-content-font-family, inherit);
    font-size: var(--hy-tog-content-font-size, 15px);
    font-weight: var(--hy-tog-content-font-weight, 400);
    text-transform: var(--hy-tog-content-text-transform, none);
    font-style: var(--hy-tog-content-font-style, normal);
    text-decoration: var(--hy-tog-content-text-decoration, none);
    line-height: var(--hy-tog-content-line-height, 1.6);
    letter-spacing: var(--hy-tog-content-letter-spacing, normal);
    text-shadow: var(--hy-tog-content-text-shadow, none);
}

/* ── Ratings widget — arbitrary decimal fill (not just halves/tenths) via
   an indexed CSS custom property per star (--hy-rating-fill-{n}, compiled
   server-side by the style closure) read back by fixed :nth-child rules
   here — the same technique Social Icons uses for per-item colours. No
   inline style="" anywhere. */
.hy-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: var(--hy-rating-justify, flex-start);
    gap: var(--hy-rating-title-gap, 10px);
}
.hy-rating__title {
    color: var(--hy-rating-title-color, inherit);
    font-family: var(--hy-rating-title-font-family, inherit);
    font-size: var(--hy-rating-title-font-size, inherit);
    font-weight: var(--hy-rating-title-font-weight, inherit);
    text-transform: var(--hy-rating-title-text-transform, none);
    font-style: var(--hy-rating-title-font-style, normal);
    text-decoration: var(--hy-rating-title-text-decoration, none);
    line-height: var(--hy-rating-title-line-height, inherit);
    letter-spacing: var(--hy-rating-title-letter-spacing, normal);
    text-shadow: var(--hy-rating-title-text-shadow, none);
}
.hy-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: var(--hy-rating-icon-gap, 4px);
}
.hy-rating__star {
    position: relative;
    display: inline-flex;
    font-size: var(--hy-rating-icon-size, 20px);
    line-height: 1;
}
.hy-rating__star-bg { display: block; color: var(--hy-rating-unmarked-color, #D1D1D6); }
.hy-rating__star-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    color: var(--hy-rating-color, #FFB400);
    white-space: nowrap;
}
.hy-rating__star-bg i, .hy-rating__star-fill i { display: block; }
.hy-rating__star-bg svg, .hy-rating__star-fill svg,
.hy-rating__star-bg .hy-icon-svg, .hy-rating__star-fill .hy-icon-svg { width: 1em; height: 1em; display: block; }

.hy-rating__star:nth-child(1) .hy-rating__star-fill { width: var(--hy-rating-fill-1, 100%); }
.hy-rating__star:nth-child(2) .hy-rating__star-fill { width: var(--hy-rating-fill-2, 100%); }
.hy-rating__star:nth-child(3) .hy-rating__star-fill { width: var(--hy-rating-fill-3, 100%); }
.hy-rating__star:nth-child(4) .hy-rating__star-fill { width: var(--hy-rating-fill-4, 100%); }
.hy-rating__star:nth-child(5) .hy-rating__star-fill { width: var(--hy-rating-fill-5, 100%); }
.hy-rating__star:nth-child(6) .hy-rating__star-fill { width: var(--hy-rating-fill-6, 100%); }
.hy-rating__star:nth-child(7) .hy-rating__star-fill { width: var(--hy-rating-fill-7, 100%); }
.hy-rating__star:nth-child(8) .hy-rating__star-fill { width: var(--hy-rating-fill-8, 100%); }
.hy-rating__star:nth-child(9) .hy-rating__star-fill { width: var(--hy-rating-fill-9, 100%); }
.hy-rating__star:nth-child(10) .hy-rating__star-fill { width: var(--hy-rating-fill-10, 100%); }

/* ── Text Path widget — SVG <text> curving along a <path>. Path shape is
   plugin-authored (six bundled presets) or a safely-extracted single <path>
   d value from an uploaded SVG (see Render.php's doc comment). */
.hy-textpath {
    display: inline-block;
    width: var(--hy-tp-width, 500px);
    max-width: 100%;
    transform: rotate(var(--hy-tp-rotate, 0deg));
}
.hy-textpath__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hy-textpath__path {
    fill: var(--hy-tp-path-fill, none);
    stroke: var(--hy-tp-path-stroke, none);
    stroke-width: var(--hy-tp-path-stroke-width, 1px);
    transition: fill var(--hy-tp-path-transition, 300ms) ease,
                stroke var(--hy-tp-path-transition, 300ms) ease,
                stroke-width var(--hy-tp-path-transition, 300ms) ease;
}
.hy-textpath__path--hidden { fill: none; stroke: none; }
.hy-textpath:hover .hy-textpath__path:not(.hy-textpath__path--hidden) {
    fill: var(--hy-tp-path-fill-hover, var(--hy-tp-path-fill, none));
    stroke: var(--hy-tp-path-stroke-hover, var(--hy-tp-path-stroke, none));
    stroke-width: var(--hy-tp-path-stroke-width-hover, var(--hy-tp-path-stroke-width, 1px));
}
.hy-textpath__text {
    fill: var(--hy-tp-color, #1A1A2A);
    font-family: var(--hy-tp-font-family, inherit);
    font-size: var(--hy-tp-font-size, 20px);
    font-weight: var(--hy-tp-font-weight, inherit);
    text-transform: var(--hy-tp-text-transform, none);
    font-style: var(--hy-tp-font-style, normal);
    text-decoration: var(--hy-tp-text-decoration, none);
    letter-spacing: var(--hy-tp-letter-spacing, normal);
    word-spacing: var(--hy-tp-word-spacing, normal);
    text-anchor: var(--hy-tp-anchor, start);
    stroke: var(--hy-tp-stroke-color, none);
    stroke-width: var(--hy-tp-stroke-width, 0);
    paint-order: stroke fill;
    transition: fill var(--hy-tp-transition, 300ms) ease;
}
.hy-textpath:hover .hy-textpath__text { fill: var(--hy-tp-color-hover, var(--hy-tp-color, #1A1A2A)); }
.hy-textpath__text a { fill: inherit; text-decoration: inherit; cursor: pointer; }