/**
 * LO-AN component styles — Frontend Foundation v1.
 *
 * Architecture: base → layout → components → commerce adaptations → states.
 * Design tokens come from theme.json (--wp--preset--*): no magic values.
 * Mobile-first; breakpoints: 640px (sm), 900px (md), 1200px (lg).
 */

/* ========================================================= base */

:root {
    --loan-radius-sm: 4px;
    --loan-radius-md: 8px;
    --loan-radius-lg: 16px;
    --loan-transition: 180ms ease;
}

:where(a):focus-visible,
:where(button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--wp--preset--color--brand-primary);
    outline-offset: 2px;
    border-radius: var(--loan-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

img {
    height: auto;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Off-canvas drawers (mini-cart) must never create horizontal scroll.
   clip (not hidden) preserves position:sticky on the header. */
body {
    overflow-x: clip;
}

/* ===================================================== header */

/* Brand bands: turquoise background, dark text (#0b1f21 on #0099a2 = 4.93:1,
   WCAG AA; white would be 3.45:1). Scoped so the rest of the theme keeps its
   own surface-inverse and brand-primary tokens. */
.loan-header,
.loan-footer {
    --wp--preset--color--surface-inverse: var(--wp--preset--color--brand-turquoise);
    --wp--preset--color--text-inverse: var(--wp--preset--color--text-on-turquoise);
}

.loan-header :focus-visible,
.loan-footer :focus-visible {
    outline-color: var(--wp--preset--color--text-on-turquoise);
}

.wp-block-template-part:has(> .loan-header) {
    display: contents;
}

/* Sticky brand header: utility bar, logo bar and navbar stay pinned
   together while scrolling. Dark green, coherent with the footer. */
.loan-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--wp--preset--color--surface-inverse);
    color: var(--wp--preset--color--text-inverse);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--text-inverse) 18%, transparent);
    box-shadow: 0 2px 12px rgba(11, 31, 33, 0.22);
}

/* Logged-in: sit below the fixed WP admin bar. Under 600px the admin bar
   is position:absolute (scrolls away), so the header pins back to 0. */
.admin-bar .loan-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
    .admin-bar .loan-header {
        top: 0;
    }
}

/* Anchor/skip-link targets must not land hidden under the pinned header. */
html {
    scroll-padding-top: 220px;
}

/* Content sits flush under the navbar: cancel the root blockGap. */
.wp-site-blocks > .wp-block-template-part:has(> .loan-header) + * {
    margin-block-start: 0;
}

/* Bands stack flush: cancel the default blockGap between header rows. */
.loan-header > :is(.loan-topbar, .loan-header__inner, .loan-header__navbar) {
    margin-block-start: 0;
}

/* Utility bar: real contact info + free-shipping claim (soglia 50 €
   inclusa, confermata in docs/SHIPPING.md). */
.loan-topbar {
    background: var(--wp--preset--color--surface-inverse);
    color: var(--wp--preset--color--text-inverse);
}

.loan-topbar__row {
    display: flex;
    align-items: center;
    /* Management (2026-10-26): both utilities sit on the right; the logo row
       below keeps its own layout. */
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--40);
    padding: 0 var(--wp--preset--spacing--40);
}

.loan-topbar__promo {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    flex: 0 0 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    font-size: var(--wp--preset--font-size--label);
}

.loan-topbar__promo svg {
    flex: none;
}

/* Management request (2026-10): the free-shipping claim is the headline of
   the utility bar — heavier type, slightly larger, light pill on the turquoise
   band (dark AA text kept). Copy matches the inclusive >= 50,00 EUR threshold. */
.loan-topbar__promo--highlight {
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.01em;
}

.loan-topbar__promo-text {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
    color: var(--wp--preset--color--brand-turquoise-dark);
    font-weight: 700;
    line-height: 1.3;
}

/* "Assistenza" entry: same pill as the shipping claim (light fill, dark
   turquoise text, headset glyph); links keep the 44px targets and underline
   on hover/focus. */
.loan-topbar__assist {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
    font-size: var(--wp--preset--font-size--small);
}

.loan-topbar__assist-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
    color: var(--wp--preset--color--brand-turquoise-dark);
    line-height: 1.3;
    margin-right: var(--wp--preset--spacing--10);
}

.loan-topbar__assist-icon {
    flex: none;
}

.loan-topbar__assist-label {
    color: inherit;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.01em;
}

.loan-topbar__assist .loan-topbar__link {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.loan-topbar__assist .loan-topbar__link:hover,
.loan-topbar__assist .loan-topbar__link:focus-visible {
    text-decoration-color: currentColor;
}

.loan-topbar__item {
    margin: 0;
    font-size: var(--wp--preset--font-size--label);
    white-space: nowrap;
}

.loan-topbar__label {
    color: var(--wp--preset--color--text-inverse);
    font-weight: 400;
}

.loan-topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--wp--preset--spacing--10);
    color: inherit;
    text-decoration: none;
}

.loan-topbar__link:hover,
.loan-topbar__link:focus-visible {
    text-decoration: underline;
}

@media (max-width: 639px) {
    .loan-topbar__link--email,
    .loan-topbar__sep {
        display: none;
    }

    .loan-topbar__row {
        flex-wrap: wrap;
        justify-content: center;
        padding-block: var(--wp--preset--spacing--10);
    }

    .loan-topbar__promo--highlight {
        justify-content: center;
        min-height: 36px;
        font-size: var(--wp--preset--font-size--label);
    }

    .loan-topbar__assist {
        min-height: 36px;
    }
}

/* Trust strip: prepared, intentionally unused. DO NOT render until Trustpilot
   is configured and real review data exists — no fake stars/ratings. */
.loan-trustbar {
    display: none;
}

.loan-header__bar {
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    min-height: 64px;
}

.loan-header__logo {
    margin: 0;
    flex-shrink: 0;
    line-height: 0;
}

/* Official logo (teal #009ba4 lettering) needs a light support surface on the
   turquoise band: without it the wordmark would blend into the background.
   Surface = brand off-white (#f6f4ee, management 2026-10-26). */
.loan-site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    box-sizing: border-box;
    padding: 8px;
    background: var(--wp--preset--color--surface-muted);
    border-radius: var(--loan-radius-sm);
}

.loan-site-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loan-site-logo--header {
    width: 170px;
    height: 60px;
    transform: translateY(4px);
}

@media (min-width: 640px) {
    .loan-site-logo--header {
        width: 212px;
        height: 74px;
    }
}

@media (min-width: 900px) {
    .loan-site-logo--header {
        width: 260px;
        height: 91px;
    }
}

.loan-site-logo--footer {
    width: 200px;
    height: 70px;
}

@media (max-width: 639px) {
    .loan-site-logo--footer {
        width: 160px;
        height: 56px;
    }
}

.loan-footer__logo {
    margin: 0 0 var(--wp--preset--spacing--30);
}

/* Navigation band: same wp_navigation entity, moved below the main bar. */
.loan-header__navbar {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text-inverse) 18%, transparent);
}

.loan-header__navbar .wp-block-navigation {
    min-height: 44px;
    padding: 0 var(--wp--preset--spacing--40);
    align-items: center;
}

/* Primary nav: few premium entries — uppercase via CSS, no duplicated text. */
.loan-header__nav :is(a, .loan-meganav__toggle) {
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
}

/* Turquoise band: hover/active keep the dark AA text and add a non-colour cue
   (gold on turquoise would be 1.44:1). The light mobile overlay keeps brand green. */
.loan-header__nav :is(a, .loan-meganav__toggle):hover,
.loan-header__nav :is(a, .loan-meganav__toggle):focus-visible,
.loan-header__nav .current-menu-item > a,
.loan-header__nav .loan-meganav.is-open > .loan-meganav__toggle {
    color: var(--wp--preset--color--text-inverse);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.loan-header__nav .wp-block-navigation__responsive-container.is-menu-open :is(a, .loan-meganav__toggle):hover,
.loan-header__nav .wp-block-navigation__responsive-container.is-menu-open :is(a, .loan-meganav__toggle):focus-visible {
    color: var(--wp--preset--color--brand-primary);
    text-decoration: none;
}

/* Mobile overlay stays on a light surface regardless of the turquoise band. */
.loan-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text-primary);
}

/* Dropdown chrome only outside the mobile overlay (overlay keeps core list). */
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container {
    color: var(--wp--preset--color--text-primary);
    background: var(--wp--preset--color--surface);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
    border-radius: var(--loan-radius-md);
    box-shadow: var(--wp--preset--shadow--overlay);
    padding: var(--wp--preset--spacing--10);
    min-width: 220px;
}

.loan-header__nav .wp-block-navigation__submenu-container a {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--small);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    border-radius: var(--loan-radius-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container a:hover,
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container a:focus-visible {
    background: var(--wp--preset--color--surface-muted);
    color: var(--wp--preset--color--brand-primary);
}

/* ===== ESIGENZE mega menu (server-rendered, one shared data source) */

.loan-header__navbar {
    position: relative;
}

/* Core sets position:relative on the whole nav chain; neutralize it (outside
   the overlay only) so the panel's containing block is the navbar band.
   .has-child items keep their own relative positioning (Prodotti dropdown). */
nav.loan-header__nav,
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container,
.loan-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) li.loan-meganav {
    position: static;
}

.loan-meganav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
    min-height: 44px;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.loan-meganav__chevron {
    transition: transform 0.18s ease;
}

.loan-meganav.is-open .loan-meganav__chevron {
    transform: rotate(180deg);
}

/* Full-band panel anchored under the sticky navbar. */
.loan-meganav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--wp--preset--color--surface);
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
    box-shadow: var(--wp--preset--shadow--overlay);
}

.loan-meganav.is-open > .loan-meganav__panel {
    display: block;
}

/* Hover opening only where hover is real (desktop pointer, not touch). */
@media (hover: hover) {
    .wp-block-navigation__responsive-container:not(.is-menu-open) .loan-meganav:hover > .loan-meganav__panel {
        display: block;
    }
}

.loan-esigenze-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

.loan-esigenze-grid--menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50);
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
    .loan-esigenze-grid--menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Shared macro-area item: icon chip + label. */
.loan-esigenza {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
    min-height: 44px;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    border-radius: var(--loan-radius-md);
    color: var(--wp--preset--color--text-primary);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.loan-esigenza__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--loan-radius-pill, 999px);
    background: color-mix(in srgb, var(--loan-esigenza-accent, var(--wp--preset--color--brand-primary)) 12%, var(--wp--preset--color--surface));
    color: var(--loan-esigenza-accent, var(--wp--preset--color--brand-primary));
    transition: transform 0.18s ease;
}

.loan-esigenza__icon svg {
    width: 24px;
    height: 24px;
}

.loan-esigenza__label {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    line-height: 1.35;
}

a.loan-esigenza:hover,
a.loan-esigenza:focus-visible {
    background: var(--wp--preset--color--surface-muted);
    color: var(--wp--preset--color--brand-primary);
}

a.loan-esigenza:hover .loan-esigenza__icon {
    transform: translateY(-2px);
}

/* Per-area thematic accents, muted to sit with the brand palette. */
.loan-esigenza--immunologia {
    --loan-esigenza-accent: var(--wp--preset--color--brand-primary);
}

.loan-esigenza--gastroenterologia-otorinolaringoiatria {
    --loan-esigenza-accent: #b07d3e;
}

.loan-esigenza--cardio-metabolico {
    --loan-esigenza-accent: #b4544a;
}

.loan-esigenza--reumatologia {
    --loan-esigenza-accent: var(--wp--preset--color--brand-secondary);
}

.loan-esigenza--dermatologia {
    --loan-esigenza-accent: #c77e5a;
}

.loan-esigenza--urologia-ginecologia {
    --loan-esigenza-accent: #96688c;
}

.loan-esigenza--oculistica {
    --loan-esigenza-accent: #4a7d9b;
}

.loan-esigenza--medicina-preventiva {
    --loan-esigenza-accent: #3f7d74;
}

.loan-esigenza--integrazione-sostegno {
    --loan-esigenza-accent: var(--wp--preset--color--accent);
}

/* Mobile overlay: ESIGENZE becomes a plain accordion, no floating panel. */
.is-menu-open .loan-meganav {
    width: 100%;
}

.is-menu-open .loan-meganav__toggle {
    width: 100%;
    justify-content: space-between;
    padding-left: 0;
    padding-right: 0;
}

.is-menu-open .loan-meganav__panel {
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.is-menu-open .loan-esigenze-grid--menu {
    display: block;
    max-width: none;
    padding: 0 0 var(--wp--preset--spacing--30);
}

.is-menu-open .loan-esigenza {
    padding-left: 0;
    padding-right: 0;
}

.is-menu-open .loan-esigenza__icon {
    width: 36px;
    height: 36px;
}

.is-menu-open .loan-esigenza__icon svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 639px) {
    .loan-header__navbar .wp-block-navigation {
        justify-content: flex-start;
    }
}

/* Core renders the overlay toggles at 24px; enforce 44px touch targets.
   No `display` here: core hides the open toggle on wider viewports. */
.loan-header__nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.loan-header__actions {
    gap: var(--wp--preset--spacing--20);
}

/* Off-canvas mini-cart drawer is light: never inherit the inverse header color. */
.loan-header .wc-block-components-drawer {
    color: var(--wp--preset--color--text-primary);
}

/* Search: quiet pill, no double chrome, brand button integrated. */
.loan-header__search input[type="search"] {
    min-height: 44px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0 var(--wp--preset--spacing--40);
    background: transparent;
    font-size: var(--wp--preset--font-size--small);
}

.loan-header__search input[type="search"]:focus-visible {
    outline: none;
}

.loan-header__search .wp-block-search__inside-wrapper {
    box-sizing: border-box;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--text-primary) 25%, transparent);
    border-radius: var(--loan-radius-pill, 999px);
    padding: 0;
    background: var(--wp--preset--color--surface-muted);
}

.loan-header__search .wp-block-search__inside-wrapper:focus-within {
    background: var(--wp--preset--color--surface);
    outline: 3px solid var(--wp--preset--color--text-on-turquoise);
    outline-offset: 3px;
}

.loan-header__search .wp-block-search__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: var(--loan-radius-pill, 999px);
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--text-secondary);
}

.loan-header__search .wp-block-search__button:hover,
.loan-header__search .wp-block-search__button:focus-visible {
    background: var(--wp--preset--color--brand-turquoise-dark);
    color: #fff;
}

.loan-header__search .wp-block-search__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Mobile: search gets its own full-width row; keep touch targets >= 44px. */
.loan-header__search {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
}

.loan-header__actions .wp-block-woocommerce-customer-account a,
.loan-header__actions .wc-block-mini-cart__button {
    color: var(--wp--preset--color--text-inverse);
}

.loan-header__actions :where(a, button) {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 900px) {
    .loan-header__search {
        order: 0;
        flex: 1 1 auto;
        max-width: 360px;
    }
}

@media (min-width: 1200px) {
    .loan-header__search {
        max-width: 560px;
    }
}

/* The block checkout template ships its own minimal WooCommerce header;
   this guard compacts the theme header on checkout endpoints that do
   render it (e.g. order confirmation). Cart keeps the full header. */
.woocommerce-checkout .loan-topbar,
.woocommerce-checkout .loan-header__navbar {
    display: none;
}

/* ===================================================== footer */

.loan-footer a {
    color: var(--wp--preset--color--text-inverse);
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
}

.loan-footer a:hover {
    text-decoration-color: currentColor;
}

.loan-footer .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--x-large);
    text-decoration: none;
}

/* Footer texts stay fully opaque: alpha-muted copy would drop below AA on turquoise. */
.loan-footer__tagline {
    color: var(--wp--preset--color--text-inverse);
    max-width: 36ch;
}

.loan-footer__heading {
    font-family: var(--wp--preset--font-family--body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--wp--preset--color--text-inverse);
}

.loan-footer__nav {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
}

.loan-footer__nav a {
    text-decoration: none;
}

.loan-footer__nav a:hover {
    text-decoration: underline;
}

.loan-footer__legal {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text-inverse) 25%, transparent);
}

.loan-footer__legal p {
    color: var(--wp--preset--color--text-inverse);
}

/* =================================================== sections */

/* Home sections sit flush: no white blockGap strips between the
   full-bleed backgrounds (hero / cream / muted / white alternation). */
.wp-block-post-content > :is(.loan-section, .loan-hero) {
    margin-block-start: 0;
}

.loan-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--wp--preset--color--brand-primary);
}

.loan-section__title {
    margin-bottom: var(--wp--preset--spacing--40);
}

.loan-section__head {
    margin-bottom: var(--wp--preset--spacing--40);
}

.loan-section__head .loan-section__title {
    margin-bottom: 0;
}

.loan-section__more a {
    font-weight: 600;
    text-decoration: none;
}

.loan-section__more a:hover {
    text-decoration: underline;
}

/* ================================================ homepage hero */

.loan-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 620px;
    background-color: var(--wp--preset--color--surface-muted);
}

.loan-hero > * {
    position: relative;
    z-index: 1;
}

.loan-hero__track {
    display: grid;
}

.loan-hero__slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loan-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loan-hero__slide--waterfall {
    background-image:
        linear-gradient(90deg, rgba(30, 42, 36, 0.08) 0%, rgba(246, 244, 238, 0.12) 32%, rgba(246, 244, 238, 0.68) 56%, rgba(246, 244, 238, 0.78) 76%, rgba(246, 244, 238, 0.32) 100%),
        url("../images/home/hero-waterfall.webp");
}

.loan-hero__slide--lake {
    background-image:
        linear-gradient(90deg, rgba(30, 42, 36, 0.1) 0%, rgba(246, 244, 238, 0.16) 32%, rgba(246, 244, 238, 0.72) 56%, rgba(246, 244, 238, 0.82) 76%, rgba(246, 244, 238, 0.36) 100%),
        url("../images/home/hero-lake.webp");
}

.loan-hero__slide--botanical {
    background-image:
        linear-gradient(90deg, rgba(246, 244, 238, 0.04) 0%, rgba(246, 244, 238, 0.1) 32%, rgba(246, 244, 238, 0.68) 56%, rgba(246, 244, 238, 0.78) 76%, rgba(246, 244, 238, 0.24) 100%),
        url("../images/home/hero-wild-roses.webp");
    background-repeat: no-repeat;
}

/* staggered entrance of hero content on slide activation */
.loan-hero__slide .loan-eyebrow,
.loan-hero__slide .loan-hero__title,
.loan-hero__slide .loan-hero__description,
.loan-hero__slide .wp-block-buttons {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.loan-hero__slide.is-active .loan-eyebrow,
.loan-hero__slide.is-active .loan-hero__title,
.loan-hero__slide.is-active .loan-hero__description,
.loan-hero__slide.is-active .wp-block-buttons {
    opacity: 1;
    transform: none;
}

.loan-hero__slide.is-active .loan-eyebrow {
    transition-delay: 0.18s;
}

.loan-hero__slide.is-active .loan-hero__title {
    transition-delay: 0.28s;
}

.loan-hero__slide.is-active .loan-hero__description {
    transition-delay: 0.38s;
}

.loan-hero__slide.is-active .wp-block-buttons {
    transition-delay: 0.48s;
}

@media (prefers-reduced-motion: reduce) {
    .loan-hero__slide,
    .loan-hero__slide .loan-eyebrow,
    .loan-hero__slide .loan-hero__title,
    .loan-hero__slide .loan-hero__description,
    .loan-hero__slide .wp-block-buttons {
        transition: none;
        transform: none;
    }
}

.loan-hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(30, 42, 36, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--wp--preset--color--text-primary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.loan-hero__arrow:hover,
.loan-hero__arrow:focus-visible {
    background: var(--wp--preset--color--brand-primary);
    border-color: var(--wp--preset--color--brand-primary);
    color: var(--wp--preset--color--text-inverse);
}

.loan-hero__arrow:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.loan-hero__arrow--prev {
    left: 20px;
}

.loan-hero__arrow--next {
    right: 20px;
}

.loan-hero__dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.loan-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(30, 42, 36, 0.28);
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}

.loan-hero__dot:hover {
    background: rgba(30, 42, 36, 0.5);
}

.loan-hero__dot:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.loan-hero__dot.is-active {
    width: 26px;
    background: var(--wp--preset--color--accent);
}

.loan-hero__inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 1280px;
    min-height: 620px;
    margin-inline: auto;
    padding: 48px 24px;
}

.loan-hero__content {
    grid-area: 1 / 1;
    justify-self: end;
    width: calc(50% - 24px);
    min-width: 0;
    padding: 24px 0;
}

.loan-hero__title {
    max-width: 11ch;
    margin-block: 24px;
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--display);
    font-size: 64px;
    font-weight: 600;
    line-height: 1.04;
}

.loan-hero__description {
    max-width: 42ch;
    color: var(--wp--preset--color--text-primary);
    line-height: 1.5;
}

.loan-hero__content .wp-block-buttons {
    margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 640px) and (max-width: 899px) {
    .loan-hero,
    .loan-hero__inner {
        min-height: 560px;
    }

    .loan-hero__inner {
        padding-inline: 32px;
    }

    .loan-hero__content {
        width: calc(50% - 14px);
    }

    .loan-hero__title {
        font-size: 48px;
    }
}

@media (max-width: 639px) {
    .loan-hero {
        min-height: 0;
    }

    .loan-hero__slide--waterfall {
        background-image:
            linear-gradient(180deg, rgba(246, 244, 238, 0.88) 0%, rgba(246, 244, 238, 0.78) 48%, rgba(246, 244, 238, 0.28) 72%, rgba(246, 244, 238, 0.08) 100%),
            url("../images/home/hero-waterfall-mobile.webp");
    }

    .loan-hero__slide--lake {
        background-image:
            linear-gradient(180deg, rgba(246, 244, 238, 0.9) 0%, rgba(246, 244, 238, 0.8) 48%, rgba(246, 244, 238, 0.32) 72%, rgba(246, 244, 238, 0.12) 100%),
            url("../images/home/hero-lake.webp");
    }

    .loan-hero__slide--botanical {
        background-image:
            linear-gradient(180deg, rgba(246, 244, 238, 0.9) 0%, rgba(246, 244, 238, 0.8) 48%, rgba(246, 244, 238, 0.3) 72%, rgba(246, 244, 238, 0.1) 100%),
            url("../images/home/hero-wild-roses.webp");
    }

    .loan-hero__arrow {
        top: auto;
        bottom: 12px;
        width: 40px;
        height: 40px;
        transform: none;
    }

    .loan-hero__arrow--prev {
        left: 10px;
    }

    .loan-hero__arrow--next {
        right: 10px;
    }

    .loan-hero__dots {
        bottom: 27px;
    }

    .loan-hero__inner {
        min-height: 0;
        padding: 40px 20px 72px;
    }

    .loan-hero__content {
        width: 100%;
        padding: 0;
    }

    .loan-hero__title {
        max-width: 12ch;
        margin-block: 16px;
        font-size: 40px;
    }

    .loan-hero__description {
        font-size: var(--wp--preset--font-size--medium);
    }

    .loan-hero__content .wp-block-buttons {
        margin-top: var(--wp--preset--spacing--30);
    }
}

/* ================================================ featured products decor */

.loan-section--products {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fbfaf6 40%,
            #faf8f1 100%
        );
}

/* Watercolor botanicals stay behind heading, copy and product cards. */
.loan-section--products > * {
    position: relative;
    z-index: 1;
}

.loan-section--products::before,
.loan-section--products::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

.loan-section--products::before {
    background-image: url("../images/home/featured-products-botanical-left.png");
    left: 0;
    bottom: 0;
    width: clamp(320px, 32vw, 620px);
    height: clamp(420px, 50vw, 760px);
    background-position: left bottom;
    opacity: 0.4;
}

.loan-section--products::after {
    background-image: url("../images/home/featured-products-botanical-right.png");
    right: 0;
    top: 0;
    width: clamp(300px, 30vw, 580px);
    height: clamp(400px, 48vw, 720px);
    background-position: right top;
    opacity: 0.32;
}

@media (max-width: 781px) {
    .loan-section--products::before {
        width: 220px;
        height: 320px;
        opacity: 0.2;
    }

    /* Single column on mobile: the cards span the full width, so keep
       only the bottom-left decor to avoid clutter behind the grid. */
    .loan-section--products::after {
        display: none;
    }
}

/* ================================================ category cards */

.loan-category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--loan-radius-lg);
    overflow: hidden;
    background: var(--wp--preset--color--surface-muted);
    text-decoration: none;
    color: var(--wp--preset--color--text-primary);
    transition: box-shadow var(--loan-transition), transform var(--loan-transition);
}

.loan-category-card:hover,
.loan-category-card:focus-visible {
    box-shadow: var(--wp--preset--shadow--card);
    transform: translateY(-2px);
}

.loan-category-card__media {
    aspect-ratio: 16 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(100% 140% at 80% 0%, color-mix(in srgb, var(--wp--preset--color--brand-secondary) 26%, transparent), transparent 65%),
        color-mix(in srgb, var(--wp--preset--color--brand-secondary) 14%, var(--wp--preset--color--surface));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.loan-category-card__media--integratori {
    background-image: url("../images/home/category-integratori-v3.webp");
}

.loan-category-card__media-note {
    font-size: var(--wp--preset--font-size--label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-secondary);
}

.loan-category-card__body {
    display: grid;
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--50);
}

.loan-category-card__title {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 600;
    line-height: 1.2;
}

.loan-category-card__text {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--small);
}

.loan-category-card__cta {
    font-weight: 600;
    color: var(--wp--preset--color--brand-turquoise-dark);
}

.loan-category-card:hover .loan-category-card__cta {
    text-decoration: underline;
}

/* ================================================ trust items */

.loan-trust__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title icon"
        "text icon";
    align-items: center;
    column-gap: var(--wp--preset--spacing--40);
    row-gap: var(--wp--preset--spacing--20);
    height: 100%;
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--loan-radius-lg);
    background: var(--wp--preset--color--surface-inverse);
    color: var(--wp--preset--color--text-inverse);
}

.loan-trust__icon {
    grid-area: icon;
    display: inline-flex;
    color: color-mix(in srgb, var(--wp--preset--color--text-inverse) 92%, transparent);
}

.loan-trust__title {
    grid-area: title;
    align-self: end;
    margin: 0;
    /* Global heading color is dark; the card background is inverse. */
    color: var(--wp--preset--color--text-inverse);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.loan-trust__text {
    grid-area: text;
    align-self: start;
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--text-inverse) 82%, transparent);
    font-size: var(--wp--preset--font-size--small);
    max-width: 38ch;
}

.loan-trust__text a {
    color: var(--wp--preset--color--text-inverse);
    font-weight: 600;
}

/* ================================================ reviews-ready */

.loan-reviews-ready__inner {
    text-align: center;
    display: grid;
    gap: var(--wp--preset--spacing--20);
    justify-items: center;
}

.loan-reviews-ready__mark {
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--display);
    line-height: 0.6;
    color: color-mix(in srgb, var(--wp--preset--color--brand-primary) 45%, transparent);
}

.loan-reviews-ready__title {
    margin: 0;
}

.loan-reviews-ready__text {
    margin: 0;
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--small);
    max-width: 52ch;
}

/* ================================================ newsletter band */

.loan-newsletter {
    border-top: 1px solid var(--wp--preset--color--border);
}

/* ====================================================== cards */

/* Base card: still used by the agent portal stat card. */
.loan-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-lg);
    padding: var(--wp--preset--spacing--50);
    height: 100%;
    transition: box-shadow var(--loan-transition), transform var(--loan-transition);
}

/* ================================================== buttons */

.wp-element-button,
.wp-block-button__link,
button.button,
.woocommerce a.button,
.woocommerce button.button {
    min-height: 44px;
    border-radius: var(--loan-radius-md);
    font-weight: 600;
    transition: background-color var(--loan-transition), color var(--loan-transition);
    cursor: pointer;
}

/* Primary discovery CTA (hero, shop CTAs): brand turquoise.
   Default keeps dark text (4.93:1 AA); hover/active invert to white on the
   darker shades (4.98:1 / 6.73:1). Every other button below follows the same scheme. */
.loan-btn--primary .wp-block-button__link {
    background-color: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    border: 0;
    transition: background-color var(--loan-transition), color var(--loan-transition), transform var(--loan-transition);
}

.loan-btn--primary .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--brand-turquoise-dark);
    color: #fff;
}

.loan-btn--primary .wp-block-button__link:active {
    background-color: color-mix(in srgb, var(--wp--preset--color--brand-turquoise-dark) 82%, #000);
    color: #fff;
    transform: translateY(1px);
}

.loan-btn--primary .wp-block-button__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--text-on-turquoise);
    outline-offset: 3px;
}

.loan-btn--primary .wp-block-button__link:is([aria-disabled="true"], .is-disabled, :disabled) {
    background-color: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .loan-btn--primary .wp-block-button__link:active {
        transform: none;
    }
}

/* Commerce buttons (add to cart, loop buttons, checkout, My Account, Blocks
   place-order): same turquoise scheme as the CTA. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.wc-block-components-button:not(.is-link),
.loan-newsletter .wp-block-button__link {
    background: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    border-color: var(--wp--preset--color--brand-turquoise);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus-visible,
.loan-newsletter .wp-block-button__link:hover {
    background: var(--wp--preset--color--brand-turquoise-dark);
    color: #fff;
    border-color: var(--wp--preset--color--brand-turquoise-dark);
}

.woocommerce .button:focus-visible,
.wc-block-components-button:not(.is-link):focus-visible {
    outline: 3px solid var(--wp--preset--color--text-on-turquoise);
    outline-offset: 3px;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Loading affordance without layout shift */
.wp-element-button[aria-busy="true"],
.woocommerce .button.loading {
    position: relative;
    color: transparent !important;
}

.woocommerce .button.loading::after {
    position: absolute;
    inset: 0;
    margin: auto;
    content: "";
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    color: var(--wp--preset--color--text-inverse);
    animation: loan-spin 700ms linear infinite;
}

@keyframes loan-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================== forms */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input {
    min-height: 44px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: 0.5rem 0.75rem;
    background: var(--wp--preset--color--surface);
    width: 100%;
}

.woocommerce form .form-row label {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
}

/* Field feedback: never color-only — icons/labels come from WC markup. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: var(--wp--preset--color--danger);
    border-width: 2px;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
    border-color: var(--wp--preset--color--success);
}

/* Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
    border-radius: var(--loan-radius-md);
    border-left-width: 4px;
}

.woocommerce-error { border-left-color: var(--wp--preset--color--danger); }
.woocommerce-message { border-left-color: var(--wp--preset--color--success); }
.woocommerce-info { border-left-color: var(--wp--preset--color--brand-secondary); }

/* ====================================== product grid & cards */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
}

/* WooCommerce clearfix pseudo-elements become empty grid cells: drop them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

@media (min-width: 640px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); }
}

.woocommerce ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    background: var(--wp--preset--color--surface);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 65%, transparent);
    border-radius: var(--loan-radius-lg);
    padding: var(--wp--preset--spacing--30);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--loan-transition), border-color var(--loan-transition);
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--wp--preset--shadow--card);
    border-color: var(--wp--preset--color--border);
}

.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--loan-radius-md);
    background: var(--wp--preset--color--surface-muted);
    transition: transform var(--loan-transition);
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.02);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    line-height: 1.35;
    padding-top: var(--wp--preset--spacing--30);
}

/* Review stars sit directly under the title; the fixed line height keeps the
   block compact whether or not a product has reviews. */
.woocommerce ul.products li.product .star-rating {
    margin: var(--wp--preset--spacing--20) 0 0;
    height: 1em;
}

.woocommerce ul.products li.product .price {
    color: var(--wp--preset--color--text-primary);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    padding-top: var(--wp--preset--spacing--20);
}

.woocommerce ul.products li.product .price del {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--wp--preset--color--danger);
}

/* Button anchored to the card bottom (last flex child takes the slack), so
   every button in a row lines up whatever the title/rating height. */
.woocommerce ul.products li.product .price {
    margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce ul.products li.product .button {
    margin-top: auto;
    text-align: center;
}

/* Badges: one shape/typography/position system (sale + sold-out). */
.woocommerce span.onsale,
.loan-badge {
    display: inline-block;
    min-height: auto;
    min-width: auto;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    position: absolute;
    top: var(--wp--preset--spacing--30);
    left: var(--wp--preset--spacing--30);
    right: auto;
    margin: 0;
    z-index: 2;
}

.woocommerce span.onsale {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--text-primary);
}

.loan-badge--soldout {
    background: var(--wp--preset--color--surface-inverse);
    color: var(--wp--preset--color--text-inverse);
}

/* Sold-out: dimmed image; state is conveyed by the badge (not color-only). */
.woocommerce ul.products li.product.outofstock a img {
    filter: grayscale(0.7);
    opacity: 0.6;
}

/* ============================================ single product */

.loan-pdp .woocommerce div.product div.images img {
    border-radius: var(--loan-radius-lg);
    background: var(--wp--preset--color--surface-muted);
}

.loan-pdp .woocommerce div.product .product_title {
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.15;
}

.loan-pdp .woocommerce div.product p.price {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
    color: var(--wp--preset--color--text-primary);
    margin-bottom: var(--wp--preset--spacing--30);
}

.loan-pdp .woocommerce div.product p.price del {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 400;
}

.loan-pdp .woocommerce div.product p.price ins {
    text-decoration: none;
}

.loan-pdp .woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--wp--preset--color--text-secondary);
}

/* Single source of truth for the variation select (44px, visible focus). */
.loan-pdp .woocommerce div.product form.cart .variations select {
    min-height: 44px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: 0.4rem 0.75rem;
    font-size: var(--wp--preset--font-size--medium);
    background-color: var(--wp--preset--color--surface);
}

.loan-pdp .woocommerce div.product form.cart .variations select:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-primary);
    outline-offset: 2px;
}

.loan-pdp .woocommerce div.product form.cart .variations label {
    font-weight: 600;
}

.loan-pdp .woocommerce div.product form.cart {
    margin-block: var(--wp--preset--spacing--40);
}

.loan-pdp .woocommerce div.product form.cart div.quantity .qty {
    min-height: 44px;
    width: 5rem;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    text-align: center;
}

.loan-pdp .woocommerce div.product .stock.in-stock {
    color: var(--wp--preset--color--success);
    font-weight: 600;
}

.loan-pdp .woocommerce div.product .stock.out-of-stock {
    color: var(--wp--preset--color--danger);
    font-weight: 600;
}

.loan-pdp .woocommerce div.product .product_meta {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
    padding-top: var(--wp--preset--spacing--30);
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 70%, transparent);
}

/* ================================================ PDP structured content */

/* Below-the-fold block: escapes the floated gallery/summary two-column top. */
.loan-product-content {
    clear: both;
    float: none;
    width: 100%;
    max-width: none;
    padding-top: var(--wp--preset--spacing--50);
}

.loan-product-content p {
    line-height: 1.6;
}

.loan-pc-subtitle {
    margin: -4px 0 var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.45;
}

.loan-pc-claims {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--wp--preset--spacing--30);
    padding: 0;
    list-style: none;
}

.loan-pc-claims__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-primary) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--wp--preset--color--brand-primary) 8%, #fff);
    color: var(--wp--preset--color--brand-primary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}

.loan-pc-heading {
    margin: 0 0 var(--wp--preset--spacing--30);
    font-family: var(--wp--preset--font-family--display);
    font-size: 26px;
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
}

.loan-pc-highlights {
    max-width: 860px;
    margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.loan-pc-highlights__lead {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.6;
    color: var(--wp--preset--color--text-primary);
}

.loan-pc-highlights__block {
    margin-top: var(--wp--preset--spacing--50);
}

.loan-pc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.loan-pc-chips__item {
    padding: 6px 14px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 999px;
    background: var(--wp--preset--color--surface-muted);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
}

.loan-pc-list {
    margin: 0;
    padding-left: 1.2em;
    line-height: 1.6;
}

.loan-pc-list li + li {
    margin-top: 6px;
}

.loan-pc-details {
    max-width: 860px;
    margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.loan-pc-section {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    background: #fff;
}

.loan-pc-section + .loan-pc-section {
    margin-top: 10px;
}

.loan-pc-section__summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
    list-style: none;
    position: relative;
}

.loan-pc-section__summary::-webkit-details-marker {
    display: none;
}

.loan-pc-section__summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--wp--preset--color--brand-primary);
}

.loan-pc-section[open] > .loan-pc-section__summary::after {
    content: "−";
}

.loan-pc-section__summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--brand-primary);
    outline-offset: 2px;
    border-radius: var(--loan-radius-md);
}

.loan-pc-section__body {
    padding: 0 18px 16px;
    line-height: 1.6;
    color: var(--wp--preset--color--text-primary);
}

.loan-pc-section__body p {
    margin: 0 0 10px;
}

.loan-pc-section__body p:last-child {
    margin-bottom: 0;
}

.loan-pc-dose {
    margin: 0;
}

.loan-pc-nutrition {
    margin-top: var(--wp--preset--spacing--60);
}

/* "Dose giornaliera" band: brand Tiffany (brand-turquoise) with the AA dark
   text token — never white on turquoise (3.3:1). Accents follow the same hue. */
.loan-pc-dose__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--wp--preset--color--brand-turquoise);
    border-radius: var(--loan-radius-md);
}

.loan-pc-dose table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--small);
    font-variant-numeric: lining-nums tabular-nums;
}

.loan-pc-dose col:first-child {
    width: 52%;
}

.loan-pc-dose col:nth-child(2) {
    width: 28%;
}

.loan-pc-dose col:nth-child(3) {
    width: 20%;
}

.loan-pc-dose caption {
    text-align: left;
    font-weight: 600;
    padding: 12px 18px;
}

.loan-pc-dose thead {
    background: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
}

.loan-pc-dose thead th {
    font-weight: 600;
    vertical-align: bottom;
}

.loan-pc-dose thead th span {
    display: block;
    font-size: var(--wp--preset--font-size--label);
    font-weight: 400;
}

.loan-pc-dose th,
.loan-pc-dose td {
    text-align: left;
    padding: 13px 18px;
    overflow-wrap: anywhere;
    font-weight: 400;
}

.loan-pc-dose tbody th {
    font-weight: 500;
}

.loan-pc-dose tbody tr + tr {
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-turquoise) 25%, #fff);
}

.loan-pc-dose tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--wp--preset--color--brand-turquoise) 6%, #fff);
}

.loan-pc-dose tbody td {
    border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-turquoise) 25%, #fff);
}

.loan-pc-dose__row--sub th {
    padding-left: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--text-secondary);
}

.loan-pc-dose__footnote {
    margin: 8px 0 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
}

@media (max-width: 639px) {
    .loan-pc-dose table {
        font-size: 13px;
    }

    .loan-pc-dose th,
    .loan-pc-dose td,
    .loan-pc-dose caption {
        padding: 11px 8px;
    }

    .loan-pc-dose thead th span {
        font-size: 12px;
    }

    .loan-pc-dose__row--sub th {
        padding-left: 18px;
    }
}


/* Tabs → readable accordion-like list on mobile */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 var(--wp--preset--spacing--40);
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--wp--preset--color--surface-muted);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--wp--preset--color--surface);
    border-color: var(--wp--preset--color--brand-primary);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .related.products > h2 {
    font-size: var(--wp--preset--font-size--xx-large);
    margin-bottom: var(--wp--preset--spacing--50);
}

/* ================================================ cart/checkout */

.wc-block-components-button:not(.is-link) {
    border-radius: var(--loan-radius-md);
    font-weight: 600;
}

.wc-block-cart,
.wc-block-checkout {
    font-size: var(--wp--preset--font-size--medium);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
    border-radius: var(--loan-radius-md);
}

/* Order summary: quiet contained panel, clear total hierarchy. */
.wc-block-cart .wc-block-cart__sidebar,
.wc-block-checkout .wc-block-checkout__sidebar {
    background: var(--wp--preset--color--surface-muted);
    border-radius: var(--loan-radius-lg);
    padding: var(--wp--preset--spacing--40);
}

/* Keep totals readable and hierarchy clear */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 700;
}

/* Payment/shipping options: calmer radio cards. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
    font-size: var(--wp--preset--font-size--small);
}

/* Legacy wc-block product grid (empty-cart “New in store”): remove the
   negative margins that create horizontal scroll on small viewports. */
.wc-block-grid__products {
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--40);
}

.wc-block-grid__products .wc-block-grid__product {
    margin: 0;
    max-width: none;
    flex: none;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-lg);
    padding: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
    .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =================================================== states */

.loan-empty-state {
    text-align: center;
    padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

/* ============================================ my account */

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--wp--preset--spacing--20);
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    text-decoration: none;
    color: var(--wp--preset--color--text-primary);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    border-color: var(--wp--preset--color--brand-primary);
    background: var(--wp--preset--color--surface-muted);
    font-weight: 600;
}

/* ============================================ agent portal */

.loan-portal {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--text-primary);
    font-family: var(--wp--preset--font-family--body);
    margin: 0;
}

.loan-portal__header {
    background: var(--wp--preset--color--surface-inverse);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.loan-portal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
    align-items: center;
    max-width: 1280px;
    margin-inline: auto;
}

.loan-portal__nav a {
    color: var(--wp--preset--color--text-inverse);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.loan-portal__brand {
    font-weight: 700;
    letter-spacing: 0.03em;
}

.loan-portal__main {
    max-width: 960px;
    margin-inline: auto;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
}

.loan-portal__stat {
    max-width: 260px;
}

.loan-portal__stat-label {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
    margin: 0;
}

.loan-portal__stat-value {
    font-size: var(--wp--preset--font-size--display);
    font-weight: 700;
    margin: 0;
}

.loan-portal__table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--wp--preset--spacing--40);
}

.loan-portal__table th,
.loan-portal__table td {
    text-align: left;
    padding: var(--wp--preset--spacing--30);
    border-bottom: 1px solid var(--wp--preset--color--border);
    font-size: var(--wp--preset--font-size--small);
}

/* Mobile: table collapses into cards, no horizontal overflow. */
@media (max-width: 639px) {
    .loan-portal__table thead {
        position: absolute;
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .loan-portal__table tr {
        display: block;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: var(--loan-radius-md);
        margin-bottom: var(--wp--preset--spacing--30);
        padding: var(--wp--preset--spacing--20);
    }

    .loan-portal__table td {
        display: block;
        border: 0;
    }
}

/* ============================================ ui/ux b — shop filters */

.loan-shop__layout {
    display: grid;
    gap: var(--wp--preset--spacing--50);
    align-items: start;
}

@media (min-width: 1024px) {
    .loan-shop__layout {
        grid-template-columns: 236px minmax(0, 1fr);
        gap: var(--wp--preset--spacing--60);
    }
}

.loan-shop__filter-label {
    margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--text-secondary);
}

.loan-shop__filters {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    background: var(--wp--preset--color--surface);
}

.loan-shop__filters > summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    /* Sidebar mode: quiet panel — separators instead of a boxed widget. */
    .loan-shop__filters {
        border: 0;
        padding: 0;
        background: transparent;
    }

    .loan-shop__filters > summary {
        pointer-events: none;
        list-style: none;
        font-size: var(--wp--preset--font-size--large);
        font-weight: 650;
        min-height: 0;
        padding-bottom: var(--wp--preset--spacing--30);
        border-bottom: 1px solid var(--wp--preset--color--border);
    }

    .loan-shop__filters > summary::-webkit-details-marker {
        display: none;
    }
}

.loan-shop__filters .wp-block-woocommerce-filter-wrapper {
    margin-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 60%, transparent);
}

.loan-shop__filters .wp-block-woocommerce-filter-wrapper:last-child {
    border-bottom: 0;
}

.loan-shop__filters h3 {
    margin: 0 0 var(--wp--preset--spacing--20);
}

/* De-widgetize the native filter internals (checkboxes, slider, inputs). */
.loan-shop__filters .wc-block-components-price-slider__range-input-wrapper {
    margin-bottom: var(--wp--preset--spacing--30);
}

.loan-shop__filters .wc-block-components-price-slider__controls input {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    min-height: 40px;
    background: var(--wp--preset--color--surface);
}

.loan-shop__filters .wc-block-checkbox-list label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    font-size: var(--wp--preset--font-size--small);
}

.loan-shop__filters .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-sm);
}

.loan-shop__filters .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
    background: var(--wp--preset--color--brand-primary);
    border-color: var(--wp--preset--color--brand-primary);
}

/* Shop toolbar: result count + ordering on one quiet line. */
.loan-shop .woocommerce-result-count {
    color: var(--wp--preset--color--text-secondary);
    font-size: var(--wp--preset--font-size--small);
    margin: 0;
    align-self: center;
}

.loan-shop .woocommerce-ordering {
    margin: 0 0 var(--wp--preset--spacing--40);
}

.loan-shop .woocommerce-ordering select {
    min-height: 44px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    background-color: var(--wp--preset--color--surface);
    font-size: var(--wp--preset--font-size--small);
}

.loan-shop .woocommerce-products-header {
    margin-bottom: var(--wp--preset--spacing--40);
}

/* ============================================ ui/ux b — product card states */
/* Badge shapes/colors/positions unified with span.onsale in the grid section. */

/* ============================================ ui/ux b — pdp confidence */

.loan-pdp__confidence {
    margin-top: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--brand-primary) 40%, transparent);
}

.loan-pdp__confidence-item {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--text-secondary);
}

.loan-pdp__confidence-item + .loan-pdp__confidence-item {
    margin-top: var(--wp--preset--spacing--10);
}

/* Duplicated variation-select rule removed — see the single-product section. */

/* ============================================ ui/ux b — sections */

.loan-why__grid h3 {
    margin-top: 0;
}

.loan-why__item-title {
    padding-top: var(--wp--preset--spacing--30);
    border-top: 2px solid color-mix(in srgb, var(--wp--preset--color--brand-primary) 30%, transparent);
}

/* ============================================ ui/ux b — documents */

.loan-documents-empty {
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: var(--wp--preset--spacing--50);
    text-align: center;
    color: var(--wp--preset--color--text-secondary);
}

.loan-documents-empty p:first-child {
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
}

.loan-documents-table td,
.loan-documents-table th {
    padding: var(--wp--preset--spacing--30);
}

/* ============================================ ui/ux b — fixes */

/* WooCommerce placeholder images can exceed the viewport by 1px on small
   screens (sub-pixel rounding in the empty-cart product grid). */
img.woocommerce-placeholder {
    max-width: 100%;
    height: auto;
}

.wp-block-woocommerce-empty-cart-block {
    overflow-x: clip;
}

.loan-portal__form,
.loan-portal__search {
    max-width: 480px;
    display: grid;
    gap: var(--wp--preset--spacing--30);
    margin-block: var(--wp--preset--spacing--40);
}

.loan-portal__form fieldset {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: var(--wp--preset--spacing--30);
}

.loan-portal__field label {
    display: block;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: var(--wp--preset--spacing--10);
}

.loan-portal input[type="text"],
.loan-portal input[type="email"],
.loan-portal input[type="tel"],
.loan-portal input[type="search"],
.loan-portal input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: 0.5rem 0.75rem;
}

.loan-portal .wp-element-button {
    background: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    border: 0;
    border-radius: var(--loan-radius-md);
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.loan-portal .wp-element-button:hover {
    background: var(--wp--preset--color--brand-turquoise-dark);
    color: #fff;
}

.loan-portal .loan-btn--secondary {
    background: transparent;
    color: var(--wp--preset--color--brand-turquoise-dark);
    border: 1px solid var(--wp--preset--color--brand-turquoise-dark);
}

.loan-notice {
    border-radius: var(--loan-radius-md);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    border-left: 4px solid var(--wp--preset--color--border);
}

.loan-notice--success {
    border-left-color: var(--wp--preset--color--success);
    background: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--surface));
}

.loan-notice--error {
    border-left-color: var(--wp--preset--color--danger);
    background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--surface));
}

.loan-portal__pagination {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    flex-wrap: wrap;
}

.loan-portal__pagination a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    text-decoration: none;
}

.loan-portal__pagination a[aria-current="page"] {
    background: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    border-color: var(--wp--preset--color--brand-turquoise);
}

.loan-portal__login-card {
    max-width: 420px;
    margin: var(--wp--preset--spacing--80) auto;
    padding: var(--wp--preset--spacing--50);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    background: var(--wp--preset--color--surface);
}

.loan-portal__login-card h1 {
    margin-top: 0;
}

.loan-portal__login-card .loan-portal__form {
    margin-block: var(--wp--preset--spacing--30);
}

.loan-portal input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--loan-radius-md);
    padding: 0.5rem 0.75rem;
}

/* ===== Empty product taxonomy archive: branded "coming soon" (2026-10).
   Macro-areas stay published and navigable; no error, no fake products. */
.loan-coming-soon {
    max-width: 640px;
    margin: var(--wp--preset--spacing--60) auto;
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-turquoise) 35%, #fff);
    border-radius: var(--loan-radius-md);
    background: color-mix(in srgb, var(--wp--preset--color--brand-turquoise) 6%, var(--wp--preset--color--surface));
}

.loan-coming-soon__title {
    margin: 0 0 var(--wp--preset--spacing--20);
    font-family: var(--wp--preset--font-family--display);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 600;
    color: var(--wp--preset--color--brand-primary);
}

.loan-coming-soon__text {
    margin: 0 0 var(--wp--preset--spacing--50);
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--text-secondary);
}

.loan-coming-soon__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--wp--preset--spacing--50);
    border-radius: 999px;
    background: var(--wp--preset--color--brand-turquoise);
    color: var(--wp--preset--color--text-on-turquoise);
    font-weight: 600;
    text-decoration: none;
}

.loan-coming-soon__cta:hover,
.loan-coming-soon__cta:focus-visible {
    background: var(--wp--preset--color--brand-turquoise-dark);
    color: #fff;
}

/* ===== Ministry of Health notification badge (every PDP; emblem only if supplied). */
.loan-registry-notice {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    margin: var(--wp--preset--spacing--30) 0 0;
    padding: 0;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--text-primary);
}

.loan-registry-notice__icon {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--wp--preset--color--brand-turquoise-dark);
}

.loan-registry-notice__icon--emblem {
    width: 28px;
    height: 32px;
    object-fit: contain;
}

.loan-registry-notice__ref {
    white-space: nowrap;
    font-weight: 400;
    color: var(--wp--preset--color--text-secondary, inherit);
}

/* ===== Cart/Checkout Blocks: field outlines in the site accent (turquoise), never the green primary. */
.wp-block-woocommerce-checkout :where(input, select, textarea, button, [tabindex]):focus-visible,
.wp-block-woocommerce-cart :where(input, select, textarea, button, [tabindex]):focus-visible,
.woocommerce-checkout form.checkout :where(input, select, textarea, button):focus-visible {
    outline-color: var(--wp--preset--color--brand-turquoise);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox.is-active .components-combobox-control__input,
.wp-block-woocommerce-checkout .wc-block-components-select .components-custom-select-control__button:focus,
.wp-block-woocommerce-checkout .wc-block-components-select.is-active .components-custom-select-control__button,
.wp-block-woocommerce-checkout .wc-block-components-select select:focus,
.wp-block-woocommerce-cart .wc-block-components-text-input input:focus,
.wp-block-woocommerce-cart .wc-block-components-select select:focus {
    --wc-form-border-color: var(--wp--preset--color--brand-turquoise);
    border-color: var(--wp--preset--color--brand-turquoise) !important;
    box-shadow: 0 0 0 1px var(--wp--preset--color--brand-turquoise);
    outline-offset: 2px;
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:focus,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:focus {
    outline-color: var(--wp--preset--color--brand-turquoise);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
    border-color: var(--wp--preset--color--brand-turquoise);
}

/* Selected payment/shipping option: WooCommerce draws the highlight as an inset shadow. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--brand-turquoise);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked {
    background: var(--wp--preset--color--brand-turquoise);
}

.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: var(--wp--preset--color--text-on-turquoise);
}

.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
    background: var(--wp--preset--color--brand-turquoise);
}

@media (max-width: 639px) {
    .loan-coming-soon {
        margin-inline: 0;
        padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    }

    .loan-registry-notice__ref {
        white-space: normal;
    }
}