/* ── Chrome variants — header / footer / layout ─────────────────── */

/* getme-css-bundle: css/chrome/header.css */
/* ════════════════════════════════════════════════════════════════════
   header — Chrome component variants.
   Variants: default (.gm-header), centered, compact.
   Mobile-first: stacks gracefully below 760px.
   ════════════════════════════════════════════════════════════════════ */

/* Centered variant — logo on top, nav below, all centered. */
.gm-header--centered {
    flex-direction: column;
    gap: 18px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 0 18px;
}

.gm-header--centered .gm-brand--centered {
    justify-content: center;
    font-size: 18px;
}

.gm-nav--centered {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.gm-header-location-selector {
    --gm-location-selector-accent: var(--gm-primary);
    --gm-location-selector-background: var(--gm-surface);
    --gm-location-selector-border: var(--gm-border);
    --gm-location-selector-color: var(--gm-text);
    --gm-location-selector-muted: var(--gm-muted);
    color: var(--gm-header-nav-link, var(--gm-muted));
    flex: none;
    text-align: start;
}

.gm-header--centered .gm-header-location-selector {
    margin-top: 2px;
}

.gm-nav--centered .gm-nav__link {
    padding: 9px 14px;
    position: relative;
}

/* Centered variant uses an underline-grow hover (distinct from the default pill). */
.gm-nav--centered .gm-nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--gm-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.gm-nav--centered .gm-nav__link:hover {
    background: transparent;
    color: var(--gm-primary-dark);
}

.gm-nav--centered .gm-nav__link:hover::after {
    transform: scaleX(1);
}

.gm-language-switcher--centered {
    margin-top: 4px;
}

/* Compact variant — logo + single CTA, minimal chrome. */
.gm-header--compact {
    padding: 16px 0;
}

.gm-header-actions--compact {
    gap: 10px;
}

.gm-header-cta {
    align-items: center;
    background: var(--gm-primary);
    border: 1px solid var(--gm-primary);
    border-radius: var(--gm-button-radius, var(--theme-radius-md, 8px));
    color: var(--gm-on-primary, #ffffff);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    text-decoration: none;
    transition: filter var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.gm-header-cta:hover {
    filter: brightness(0.92);
}

.gm-nav__label--hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.gm-nav__link--icon-only {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    justify-content: center;
    min-height: 38px;
    min-width: 38px;
    padding: 0;
    position: relative;
}

.gm-nav__link--icon-only:hover {
    background: color-mix(in srgb, currentColor 11%, transparent);
}

.gm-nav__link--icon-only .gm-nav__icon {
    font-size: 1rem;
}

.gm-nav__link--icon-only .gm-nav__badge {
    position: absolute;
    right: -5px;
    top: -7px;
}

@media (max-width: 760px) {
    .gm-header--mobile-menu .gm-header-actions .gm-nav__link--icon-only {
        justify-content: flex-start;
        min-width: 0;
        padding: 9px 12px;
        width: 100%;
    }

    .gm-header--mobile-menu .gm-header-actions .gm-nav__link--icon-only .gm-nav__label--hidden {
        clip: auto;
        clip-path: none;
        height: auto;
        overflow: visible;
        position: static;
        white-space: normal;
        width: auto;
    }

    .gm-header--mobile-menu .gm-header-actions .gm-nav__link--icon-only .gm-nav__badge {
        margin-left: auto;
        position: static;
    }
}

/* Compact variant keeps the filled CTA as the clear focal point; a touch more
   breathing room when a language switcher precedes it. */
.gm-header-actions--compact > * + .gm-header-cta {
    margin-left: 6px;
}

/* Header-owned presentation controls. The values come from component settings
   and navigation presentation hints; commerce/category data remains runtime
   owned. */
.gm-header {
    position: relative;
}

.gm-header .gm-brand-logo {
    max-width: var(--gm-header-logo-width, 160px);
}

.gm-header .gm-nav__item--has-children > .gm-nav__link {
    gap: 4px;
}

.gm-header .gm-nav__item--has-children > .gm-nav__link::after {
    align-self: center;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    content: "";
    flex: 0 0 auto;
    font-size: 14px;
    height: 6px;
    line-height: 1;
    margin-left: 1px;
    opacity: 0.72;
    transform: rotate(45deg);
    transform-origin: center;
    transition:
        transform var(--gm-transition-fast),
        opacity var(--gm-transition-fast);
    width: 6px;
}

.gm-header .gm-nav__item--has-children:hover > .gm-nav__link::after,
.gm-header .gm-nav__item--has-children:focus-within > .gm-nav__link::after,
.gm-header .gm-nav__item--has-children[data-open="true"] > .gm-nav__link::after {
    opacity: 1;
    transform: rotate(-135deg);
}

@media (min-width: 761px) {
    .gm-header .gm-nav__item--presentation-featured-panel {
        position: static;
    }

    .gm-header .gm-nav__item--presentation-featured-panel > .gm-nav__submenu--featured-panel {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        left: 0;
        max-width: none;
        padding: 18px;
        right: 0;
        top: calc(100% + var(--gm-submenu-offset, 8px));
        transform: translateY(-4px);
        width: 100%;
    }

    .gm-header .gm-nav__item--presentation-featured-panel:hover > .gm-nav__submenu--featured-panel,
    .gm-header .gm-nav__item--presentation-featured-panel:focus-within > .gm-nav__submenu--featured-panel,
    .gm-header .gm-nav__item--presentation-featured-panel[data-open="true"] > .gm-nav__submenu--featured-panel {
        transform: translateY(0);
    }
}

@media (max-width: 760px) {
    .gm-header.gm-header--mobile-menu .gm-brand,
    .gm-header.gm-header--mobile-menu .gm-header-menu-toggle,
    .gm-header.gm-header--mobile-menu .gm-header-mobile-actions {
        align-self: center;
        grid-row: 1;
    }

    .gm-header.gm-header--mobile-menu .gm-header-menu-toggle,
    .gm-header.gm-header--mobile-menu .gm-header-menu-toggle:hover,
    .gm-header.gm-header--mobile-menu .gm-header-menu-toggle[aria-expanded="true"] {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: var(--gm-header-nav-link, var(--gm-muted));
    }

    .gm-header.gm-header--mobile-menu .gm-nav__submenu {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__item[data-open="true"] > .gm-nav__submenu {
        display: grid;
        opacity: 1;
        pointer-events: auto;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__item--has-children > .gm-nav__link::after,
    .gm-header.gm-header--mobile-menu .gm-nav__item--has-children:hover > .gm-nav__link::after,
    .gm-header.gm-header--mobile-menu .gm-nav__item--has-children:focus-within > .gm-nav__link::after {
        transform: rotate(45deg);
    }

    .gm-header.gm-header--mobile-menu .gm-nav__item--has-children[data-open="true"] > .gm-nav__link::after {
        transform: rotate(-135deg);
    }

    .gm-header.gm-header--mobile-menu .gm-nav__submenu--logo-grid,
    .gm-header.gm-header--mobile-menu .gm-nav__submenu--card-grid,
    .gm-header.gm-header--mobile-menu .gm-nav__submenu--featured-panel {
        gap: 6px;
        grid-template-columns: minmax(0, 1fr);
        padding: 8px;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__tile {
        gap: 10px;
        grid-template-columns: 36px minmax(0, 1fr);
        justify-items: start;
        min-height: 52px;
        padding: 7px 10px;
        text-align: left;
        width: 100%;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__tile-media {
        height: 32px;
        width: 36px;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__tile-media img {
        max-height: 32px;
        max-width: 36px;
    }

    .gm-header.gm-header--mobile-menu .gm-nav__tile-label {
        align-self: center;
        text-align: left;
    }

    .gm-header--centered {
        padding: 18px 0 12px;
    }

    .gm-header--centered .gm-brand--centered {
        font-size: 17px;
    }

    .gm-nav--centered {
        gap: 4px;
    }

    .gm-nav--centered a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .gm-header--compact {
        align-items: center;
        flex-direction: row;
        gap: 12px;
        padding: 14px 0;
    }

    .gm-header.gm-header--mobile-menu .gm-header-location-selector {
        width: 100%;
    }

    .gm-header.gm-header--mobile-menu .gm-location-selector__trigger {
        max-width: none;
        width: 100%;
    }

    .gm-header.gm-header--mobile-menu .gm-location-selector__panel {
        inset-inline: 0;
        min-width: 100%;
    }

    .gm-header-cta {
        font-size: 13px;
        min-height: 34px;
        padding: 0 12px;
    }
}

/* getme-css-bundle:end css/chrome/header.css */


/* getme-css-bundle: css/chrome/footer.css */
/* ════════════════════════════════════════════════════════════════════
   footer — Chrome component variants.
   Variants: default (.gm-footer), columns, minimal.
   Mobile-first: columns collapse from 4 -> 2 -> 1.
   ════════════════════════════════════════════════════════════════════ */

/* Multi-column variant — 4 columns of links plus a copyright row. */
.gm-footer--columns {
    border-top: 1px solid var(--gm-border);
    padding: 48px 0 24px;
}

.gm-footer-columns {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gm-footer-column h3 {
    color: var(--gm-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.gm-footer-column ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-footer-column a {
    color: var(--gm-muted);
    font-size: 14px;
    text-decoration: none;
}

.gm-footer-column a:hover {
    color: var(--gm-text);
}

/* (0,2,0) instead of !important (CLAUDE.md §4.6). */
.gm-footer .gm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gm-footer-social a {
    background: var(--color-bg-tertiary, transparent);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md, 8px);
    color: var(--gm-muted);
    font-size: 13px;
    padding: 8px 12px;
}

.gm-footer-bottom {
    align-items: center;
    border-top: 1px solid var(--gm-border);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-top: 36px;
    padding-top: 22px;
}

.gm-footer-brand {
    align-items: center;
    color: var(--gm-text);
    display: inline-flex;
    font-weight: 700;
    gap: 10px;
}

.gm-footer-bottom p {
    color: var(--gm-muted);
    font-size: 13px;
    margin: 0;
}

/* Minimal variant — copyright + 2 links, single line on desktop. */
.gm-footer--minimal {
    align-items: center;
    border-top: 1px solid var(--gm-border);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    padding: 22px 0 32px;
}

.gm-footer--minimal p {
    color: var(--gm-muted);
    font-size: 13px;
    margin: 0;
}

.gm-footer-minimal-links {
    display: flex;
    gap: 16px;
}

.gm-footer-minimal-links a {
    color: var(--gm-muted);
    font-size: 13px;
    text-decoration: none;
}

.gm-footer-minimal-links a:hover {
    color: var(--gm-text);
    text-decoration: underline;
}

@media (max-width: 980px) {
    .gm-footer-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .gm-footer--columns {
        padding: 36px 0 18px;
    }

    .gm-footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .gm-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 24px;
    }

    .gm-footer--minimal {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* getme-css-bundle:end css/chrome/footer.css */


/* getme-css-bundle: css/chrome/layout.css */
/* ════════════════════════════════════════════════════════════════════
   layout — Chrome layout-variant containers.
   Variants: base (default .gm-main), focused, bare.
   ════════════════════════════════════════════════════════════════════ */

.gm-layout-focused {
    background: var(--gm-bg);
    min-height: 100vh;
}

.gm-main--focused {
    padding: 32px 0 64px;
}

.gm-layout-bare {
    background: var(--gm-bg);
    min-height: 100vh;
}

/* The base main stays flush when header chrome is present. When the resolved
   layout contract renders no header, preserve a small token-driven breathing
   space so page content does not attach to the browser edge. */
.gm-layout-no-header > .gm-main {
    padding-block-start: var(--theme-spacing-lg, 24px);
}

.gm-main--bare {
    margin: 0 auto;
    padding: 24px 0 40px;
    width: min(var(--gm-page-max-width, 1440px), calc(100% - (var(--gm-page-gutter, 16px) * 2)));
}

@media (max-width: 760px) {
    .gm-layout-no-header > .gm-main {
        padding-block-start: var(--theme-spacing-md, 16px);
    }

    .gm-main--focused {
        padding: 20px 0 40px;
    }

    .gm-main--bare {
        padding: 16px 0 32px;
        width: calc(100% - (var(--gm-page-gutter, 16px) * 2));
    }
}

/* getme-css-bundle:end css/chrome/layout.css */


/* getme-css-bundle: css/chrome/media-modal.css */
/* ════════════════════════════════════════════════════════════════════
   media-modal — central, reusable image lightbox.

   Owner   : assets/js/theme.js (window.GetmeMediaModal) — single instance.
   Trigger : any element carrying [data-gm-media-zoom] (product gallery today,
             reusable for other surfaces later).
   Theme   : appearance is editor-driven via the existing "Dropdowns & popups"
             room — surface uses --theme-dropdown-popup-background, corners use
             --theme-dropdown-popup-radius; backdrop derives from --color-bg-dark.
             No dedicated settings group (keeps the theme CSS contract intact).
   ════════════════════════════════════════════════════════════════════ */

[data-gm-media-zoom] { cursor: zoom-in; }

.gm-media-modal {
    --gm-media-modal-backdrop: color-mix(in srgb, var(--color-bg-dark, #0f172a) 86%, transparent);
    --gm-media-modal-surface: var(--gm-dropdown-bg, var(--gm-bg));
    --gm-media-modal-radius: var(--theme-dropdown-popup-radius, var(--theme-radius-lg, 12px));
    align-items: center;
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 1000;
}

.gm-media-modal[hidden] { display: none; }

.gm-media-modal__backdrop {
    background: var(--gm-media-modal-backdrop);
    inset: 0;
    position: absolute;
}

.gm-media-modal__dialog {
    align-items: center;
    display: flex;
    gap: 12px;
    max-width: min(1100px, 96vw);
    position: relative;
    z-index: 1;
}

.gm-media-modal__figure {
    margin: 0;
    max-height: 88vh;
    max-width: 100%;
}

.gm-media-modal__image {
    background: var(--gm-media-modal-surface);
    border-radius: var(--gm-media-modal-radius);
    display: block;
    max-height: 88vh;
    max-width: 100%;
    object-fit: contain;
}

.gm-media-modal__close {
    align-items: center;
    background: var(--gm-media-modal-surface);
    border: none;
    border-radius: 999px;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 42px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: -14px;
    top: -14px;
    width: 42px;
    z-index: 2;
}

.gm-media-modal__nav {
    align-items: center;
    background: var(--gm-media-modal-surface);
    border: none;
    border-radius: 999px;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 26px;
    height: 48px;
    justify-content: center;
    line-height: 1;
    opacity: 0.95;
    width: 48px;
}

.gm-media-modal__nav:hover,
.gm-media-modal__close:hover { opacity: 1; filter: brightness(0.95); }

.gm-media-modal__counter {
    bottom: -34px;
    color: #ffffff;
    font-size: 14px;
    left: 50%;
    opacity: 0.85;
    position: absolute;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
    .gm-media-modal__dialog { gap: 6px; max-width: 100vw; padding: 0 8px; }
    .gm-media-modal__nav { height: 40px; width: 40px; font-size: 22px; }
    .gm-media-modal__close { right: 6px; top: -48px; }
}

/* getme-css-bundle:end css/chrome/media-modal.css */


/* getme-css-bundle: css/chrome/header-panel.css */
/* ════════════════════════════════════════════════════════════════════
   header--panel — proportional top bar + full-height side menu
   (components/header--panel.html). Sizes: calc(var(--gm-u) * N), N = px in
   the reference frame (1502 desktop · 680 tablet · 390 phone). Colours:
   semantic --gm-* only, so both schemes work.
   ════════════════════════════════════════════════════════════════════ */

/* ── Bar ─────────────────────────────────────────────────────────────── */
/* Uploaded logo sized by Header > Logo width (data-gm-logo-w, --gm-logo-n =
   reference px): the image overflows the bar-height lockup, centred on it, so a
   wide or tall logo stays on the bar's line. Tablets show it at 0.8×, phones 0.75×.
   Logo vertical offset (--gm-logo-y, % of the image) lines the wordmark up with the buttons. */
.gm-topbar[data-gm-logo-w] {
    --gm-logo-f: 1;
}

.gm-topbar[data-gm-logo-w] .gm-topbar__logo.gm-brand-lockup--logo {
    overflow: visible;
}

.gm-topbar[data-gm-logo-w] .gm-brand-lockup--logo .gm-brand-lockup__img {
    height: auto;
    max-width: none;
    width: calc(var(--gm-logo-n) * var(--gm-u) * var(--gm-logo-f));
    transform: translateY(var(--gm-logo-y, 0%));
}

/* WhatsApp's own brand green (a third-party mark, not a theme colour) —
   defined once here; used by the phone link when it opens WhatsApp. */
.gm-topbar-root {
    --gm-whatsapp: #25D366;
}

.gm-topbar__wa {
    color: var(--gm-whatsapp);
    font-size: 1.15em;
    margin-right: 0.35em;
    vertical-align: -0.1em;
}

.gm-topbar {
    animation: gm-slide-down var(--gm-t-header) var(--gm-ease-expo) both;
    background: var(--gm-bg);
    color: var(--gm-text);
    margin-inline: 0;
    z-index: 5;
}

.gm-topbar__address {
    color: var(--gm-muted);
    font-style: normal;
    letter-spacing: -0.01em;
    white-space: pre-line;
}

.gm-topbar__phone {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.gm-topbar__phone:hover {
    color: var(--gm-primary);
}

/* Phone link = both: the number (tel:) and the WhatsApp icon are two links in one slot. */
.gm-topbar__phone--split a {
    color: inherit;
    text-decoration: none;
}

.gm-topbar__phone--split:hover {
    color: inherit;
}

.gm-topbar__phone--split a[href^="tel:"]:hover {
    color: var(--gm-primary);
}

.gm-topbar__scheme {
    position: relative;
}

/* Bar button = the theme's pill (.gm-button) scaled to the bar: same height
   as the round buttons beside it. `a.` lifts it over the global pill rules
   (phone full width, 10u right padding) without !important. */
.gm-topbar__scheme,
.gm-topbar__menu {
    flex: none;
}

.gm-topbar a.gm-topbar__cta {
    box-shadow: none;
    flex: none;
    white-space: nowrap;
    width: auto;
}

.gm-topbar__ico {
    fill: none;
    inset: 0;
    margin: auto;
    position: absolute;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform var(--gm-t-hover) var(--gm-ease-back), opacity var(--gm-t-quick) ease;
}

.gm-topbar__ico--sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
}

:root[data-gm-scheme="light"] .gm-topbar__ico--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

:root[data-gm-scheme="light"] .gm-topbar__ico--sun {
    opacity: 1;
    transform: none;
}

.gm-topbar__menu svg path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.2;
}

/* The scheme switch is a View Transition; theme.js grows a circle from the button. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    z-index: 2;
}

/* ── Side menu ─────────────────────────────────────────────────────────
   Link sizes and vertical spacing take the SMALLER of the width scale and a
   share of the viewport height (dvh), so the whole panel — CTA included —
   fits short screens; it still scrolls if a menu is unusually long. */
html.gm-menu-open {
    overflow: hidden;
}

.gm-menu-backdrop {
    backdrop-filter: blur(calc(var(--gm-u) * 10));
    background: var(--gm-backdrop);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity var(--gm-t-menu-close) ease, visibility 0s linear var(--gm-t-menu-close);
    visibility: hidden;
    z-index: 90;
}

.gm-menu {
    background: var(--gm-surface);
    border-left: calc(var(--gm-u) * 1) solid var(--gm-border);
    bottom: 0;
    box-shadow: calc(var(--gm-u) * -30) 0 calc(var(--gm-u) * 80) var(--gm-shadow-color);
    color: var(--gm-text);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform var(--gm-t-menu-close) var(--gm-ease-quart), visibility 0s linear var(--gm-t-menu-close);
    visibility: hidden;
    width: var(--gm-menu-w);
    z-index: 100;
}

html.gm-menu-open .gm-menu-backdrop {
    opacity: 1;
    transition: opacity var(--gm-t-menu-close) ease;
    visibility: visible;
}

html.gm-menu-open .gm-menu {
    transform: none;
    transition: transform var(--gm-t-menu-open) var(--gm-ease-quart);
    visibility: visible;
}

.gm-menu__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.gm-menu__label {
    color: var(--gm-subtle);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 500;
    letter-spacing: 0.18em;
    margin: 0;
    text-transform: uppercase;
}

.gm-menu__close svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.gm-menu__links {
    border-top: calc(var(--gm-u) * 1) solid var(--gm-border);
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.gm-menu__links li {
    border-bottom: calc(var(--gm-u) * 1) solid var(--gm-border);
    overflow: hidden;
}

.gm-menu__links a {
    align-items: baseline;
    color: var(--gm-text);
    display: flex;
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    opacity: 0;
    text-decoration: none;
    transform: translateY(105%);
    transition: transform calc(var(--gm-t-menu-close) * 0.8) var(--gm-ease-quart), opacity calc(var(--gm-t-menu-close) * 0.6) ease;
}

html.gm-menu-open .gm-menu__links a {
    opacity: 1;
    transform: none;
    transition:
        transform var(--gm-t-menu-open) var(--gm-ease-expo) calc(var(--gm-d-menu-link) + var(--i, 0) * var(--gm-d-menu-step)),
        opacity var(--gm-t-menu-open) ease calc(var(--gm-d-menu-link) + var(--i, 0) * var(--gm-d-menu-step));
}

.gm-menu__num {
    color: var(--gm-primary);
    flex: none;
    font-family: var(--font-primary, sans-serif);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.gm-menu__txt {
    transition: transform var(--gm-t-hover) var(--gm-ease-soft), color var(--gm-t-quick) ease;
}

.gm-menu__links a:hover .gm-menu__txt {
    color: var(--gm-primary);
    transform: translateX(calc(var(--gm-u) * 8));
}

.gm-menu__foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    opacity: 0;
    transition: opacity calc(var(--gm-t-menu-close) * 0.6) ease, translate calc(var(--gm-t-menu-close) * 0.6) ease;
    translate: 0 calc(var(--gm-u) * 16);
}

html.gm-menu-open .gm-menu__foot {
    opacity: 1;
    transition: opacity var(--gm-t-fade) var(--gm-ease-soft) var(--gm-d-menu-foot), translate var(--gm-t-fade) var(--gm-ease-soft) var(--gm-d-menu-foot);
    translate: 0 0;
}

.gm-menu__foot .gm-menu__k {
    color: var(--gm-subtle);
    font-family: var(--font-primary, sans-serif);
    font-weight: 500;
    letter-spacing: 0.16em;
    margin: 0;
    text-transform: uppercase;
}

.gm-menu__foot p {
    color: var(--gm-muted);
    margin: 0;
}

.gm-menu__address {
    white-space: pre-line;
}

.gm-menu__tel {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 600;
    text-decoration: none;
}

.gm-menu__cta {
    grid-column: 1 / -1;
}

.gm-menu__context:empty {
    display: none;
}

/* ── Desktop ≥981 · reference 1502 × 97 ─────────────────────────────
   A grid, not absolute positions: the columns reproduce the reference
   (address column 197 wide, ending 16 before the phone; phone, scheme and
   menu buttons at their reference gaps), so a long address wraps inside its
   own column and a wider phone font can never run into its neighbours. */
@media (min-width: 981px) {
    .gm-topbar {
        align-items: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) calc(var(--gm-u) * 213) auto auto auto auto;
        height: calc(var(--gm-u) * 97);
        padding: calc(var(--gm-u) * 31) calc(var(--gm-u) * 41) 0 calc(var(--gm-u) * 43);
    }

    .gm-topbar .gm-topbar__logo { font-size: calc(var(--gm-u) * 21); gap: calc(var(--gm-u) * 8); grid-column: 1; height: calc(var(--gm-u) * 32); justify-self: start; }
    .gm-topbar .gm-brand-lockup__mark { height: calc(var(--gm-u) * 32); width: calc(var(--gm-u) * 26); }
    .gm-topbar[data-gm-logo-w] .gm-topbar__logo { margin-top: calc(var(--gm-u) * 1); }   /* centre 17u = the phone's line */
    /* Address shares the phone's line box (same top offset, at least its 22u
       line height, text centred in it): a one-line address sits exactly on the
       phone's line, a two-line address starts at the phone's top. */
    .gm-topbar__address { align-items: center; display: flex; font-size: calc(var(--gm-u) * 14.1); grid-column: 2; line-height: calc(var(--gm-u) * 20); margin: calc(var(--gm-u) * 6) 0 0; min-height: calc(var(--gm-u) * 22); text-wrap: balance; }
    .gm-topbar__phone { font-size: calc(var(--gm-u) * 17.3); grid-column: 3; line-height: calc(var(--gm-u) * 22); margin: calc(var(--gm-u) * 6) calc(var(--gm-u) * 14) 0 calc(var(--gm-u) * 16); }
    .gm-topbar a.gm-topbar__cta { font-size: calc(var(--gm-u) * 13.5); gap: calc(var(--gm-u) * 10); grid-column: 4; height: calc(var(--gm-u) * 35); margin-right: calc(var(--gm-u) * 12); min-height: 0; padding: 0 calc(var(--gm-u) * 4) 0 calc(var(--gm-u) * 16); }
    .gm-topbar__cta .gm-button__circle { height: calc(var(--gm-u) * 27); width: calc(var(--gm-u) * 27); }
    .gm-topbar__cta .gm-arrow { height: calc(var(--gm-u) * 6); width: calc(var(--gm-u) * 13); }
    .gm-topbar__scheme { border-width: calc(var(--gm-u) * 1.7); grid-column: 5; height: calc(var(--gm-u) * 35); margin-right: calc(var(--gm-u) * 12); width: calc(var(--gm-u) * 35); }
    .gm-topbar__ico { height: calc(var(--gm-u) * 16); width: calc(var(--gm-u) * 16); }
    .gm-topbar__menu { border-width: calc(var(--gm-u) * 1.7); grid-column: 6; height: calc(var(--gm-u) * 35); width: calc(var(--gm-u) * 35); }
    .gm-topbar__menu svg { height: calc(var(--gm-u) * 10); width: calc(var(--gm-u) * 16); }

    .gm-menu { --gm-menu-w: calc(var(--gm-u) * 560); padding: calc(var(--gm-u) * 31) calc(var(--gm-u) * 41) calc(var(--gm-u) * 44) calc(var(--gm-u) * 56); }
    .gm-menu__close { border-width: calc(var(--gm-u) * 1.7); height: calc(var(--gm-u) * 35); width: calc(var(--gm-u) * 35); }
    .gm-menu__close svg { height: calc(var(--gm-u) * 12); width: calc(var(--gm-u) * 12); }
    .gm-menu__links { margin-top: min(calc(var(--gm-u) * 44), 4.5dvh); }
    .gm-menu__links a { font-size: min(calc(var(--gm-u) * 40), 5.2dvh); gap: calc(var(--gm-u) * 22); padding: min(calc(var(--gm-u) * 13), 1.4dvh) 0 min(calc(var(--gm-u) * 11), 1.2dvh); }
    .gm-menu__num { font-size: calc(var(--gm-u) * 13); width: calc(var(--gm-u) * 26); }
    .gm-menu__foot { gap: min(calc(var(--gm-u) * 22), 2.4dvh) calc(var(--gm-u) * 24); padding-top: min(calc(var(--gm-u) * 36), 3.5dvh); }
    .gm-menu__foot .gm-menu__k { font-size: calc(var(--gm-u) * 11); margin-bottom: calc(var(--gm-u) * 8); }
    .gm-menu__foot p { font-size: calc(var(--gm-u) * 14); line-height: calc(var(--gm-u) * 21); }
    .gm-menu__tel { font-size: calc(var(--gm-u) * 17); }
    .gm-menu__cta { font-size: calc(var(--gm-u) * 16); margin-top: calc(var(--gm-u) * 6); min-height: calc(var(--gm-u) * 58); padding-left: calc(var(--gm-u) * 28); }
}

/* ── Tablet 641–980 · reference 680 ─────────────────────────────────── */
@media (min-width: 641px) and (max-width: 980px) {
    .gm-topbar { align-items: center; display: flex; gap: calc(var(--gm-u) * 12); padding: calc(var(--gm-u) * 32); }
    .gm-topbar .gm-topbar__logo { font-size: calc(var(--gm-u) * 21); gap: calc(var(--gm-u) * 8); height: calc(var(--gm-u) * 30); margin-right: auto; }
    .gm-topbar .gm-brand-lockup__mark { height: calc(var(--gm-u) * 30); width: calc(var(--gm-u) * 24); }
    .gm-topbar[data-gm-logo-w] { --gm-logo-f: 0.8; }
    .gm-topbar__address { display: none; }
    .gm-topbar__phone { font-size: calc(var(--gm-u) * 17); margin-right: calc(var(--gm-u) * 6); }
    .gm-topbar a.gm-topbar__cta { font-size: calc(var(--gm-u) * 15); gap: calc(var(--gm-u) * 12); height: calc(var(--gm-u) * 46); min-height: 0; padding: 0 calc(var(--gm-u) * 5) 0 calc(var(--gm-u) * 20); }
    .gm-topbar__cta .gm-button__circle { height: calc(var(--gm-u) * 36); width: calc(var(--gm-u) * 36); }
    .gm-topbar__cta .gm-arrow { height: calc(var(--gm-u) * 7); width: calc(var(--gm-u) * 16); }
    .gm-topbar__scheme,
    .gm-topbar__menu { border-width: calc(var(--gm-u) * 1.6); height: calc(var(--gm-u) * 46); width: calc(var(--gm-u) * 46); }
    .gm-topbar__ico { height: calc(var(--gm-u) * 19); width: calc(var(--gm-u) * 19); }
    .gm-topbar__menu svg { height: calc(var(--gm-u) * 12); width: calc(var(--gm-u) * 19); }

    .gm-menu { --gm-menu-w: calc(var(--gm-u) * 460); padding: calc(var(--gm-u) * 24) calc(var(--gm-u) * 32) calc(var(--gm-u) * 36) calc(var(--gm-u) * 40); }
    .gm-menu__close { border-width: calc(var(--gm-u) * 1.6); height: calc(var(--gm-u) * 46); width: calc(var(--gm-u) * 46); }
    .gm-menu__close svg { height: calc(var(--gm-u) * 14); width: calc(var(--gm-u) * 14); }
    .gm-menu__links { margin-top: min(calc(var(--gm-u) * 40), 4.5dvh); }
    .gm-menu__links a { font-size: min(calc(var(--gm-u) * 34), 4.8dvh); gap: calc(var(--gm-u) * 18); padding: min(calc(var(--gm-u) * 12), 1.3dvh) 0 min(calc(var(--gm-u) * 10), 1.1dvh); }
    .gm-menu__num { font-size: calc(var(--gm-u) * 13); width: calc(var(--gm-u) * 24); }
    .gm-menu__foot { gap: min(calc(var(--gm-u) * 20), 2.4dvh) calc(var(--gm-u) * 20); padding-top: min(calc(var(--gm-u) * 32), 3.5dvh); }
    .gm-menu__foot .gm-menu__k { font-size: calc(var(--gm-u) * 11); margin-bottom: calc(var(--gm-u) * 6); }
    .gm-menu__foot p { font-size: calc(var(--gm-u) * 14); line-height: calc(var(--gm-u) * 21); }
    .gm-menu__tel { font-size: calc(var(--gm-u) * 17); }
    .gm-menu__cta { font-size: calc(var(--gm-u) * 16); min-height: calc(var(--gm-u) * 58); }
}

/* ── Phone ≤640 · reference 390 ─────────────────────────────────────── */
@media (max-width: 640px) {
    /* Phone bar = 0.8 × the reference sizes (lighter on small screens); side gutter stays 16u. */
    .gm-topbar { align-items: center; display: flex; gap: calc(var(--gm-u) * 8); padding: calc(var(--gm-u) * 20) calc(var(--gm-u) * 16); }
    .gm-topbar .gm-topbar__logo { font-size: calc(var(--gm-u) * 16); gap: calc(var(--gm-u) * 6.4); height: calc(var(--gm-u) * 22.4); margin-right: auto; }
    .gm-topbar .gm-brand-lockup__mark { height: calc(var(--gm-u) * 22.4); width: calc(var(--gm-u) * 18.4); }
    .gm-topbar[data-gm-logo-w] { --gm-logo-f: 0.75; }
    .gm-topbar__address,
    .gm-topbar__phone { display: none; }
    /* Phone: the same pill + arrow circle as desktop/tablet, scaled to the 0.8× bar.
       The label may shrink with an ellipsis so the row never overflows. */
    .gm-topbar a.gm-topbar__cta { flex: 0 1 auto; font-size: calc(var(--gm-u) * 11.2); gap: calc(var(--gm-u) * 8); height: calc(var(--gm-u) * 35.2); min-height: 0; min-width: 0; padding: 0 calc(var(--gm-u) * 3.6) 0 calc(var(--gm-u) * 12.8); }
    .gm-topbar__cta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* Header > "Show the bar button on phones" off: the logo gets the room. */
    .gm-topbar a.gm-topbar__cta--no-phone { display: none; }
    .gm-topbar__cta .gm-button__circle { height: calc(var(--gm-u) * 28); width: calc(var(--gm-u) * 28); }
    .gm-topbar__cta .gm-arrow { height: calc(var(--gm-u) * 5.6); width: calc(var(--gm-u) * 12); }
    .gm-topbar__scheme,
    .gm-topbar__menu { border-width: calc(var(--gm-u) * 1.3); height: calc(var(--gm-u) * 35.2); width: calc(var(--gm-u) * 35.2); }
    .gm-topbar__ico { height: calc(var(--gm-u) * 14.4); width: calc(var(--gm-u) * 14.4); }
    .gm-topbar__menu svg { height: calc(var(--gm-u) * 8.8); width: calc(var(--gm-u) * 14.4); }

    .gm-menu { --gm-menu-w: 100%; border-left: 0; padding: calc(var(--gm-u) * 18) calc(var(--gm-u) * 16) calc(var(--gm-u) * 28) calc(var(--gm-u) * 20); }
    .gm-menu__close { border-width: calc(var(--gm-u) * 1.6); height: calc(var(--gm-u) * 44); width: calc(var(--gm-u) * 44); }
    .gm-menu__close svg { height: calc(var(--gm-u) * 14); width: calc(var(--gm-u) * 14); }
    .gm-menu__links { margin-top: min(calc(var(--gm-u) * 28), 3.5dvh); }
    .gm-menu__links a { font-size: min(calc(var(--gm-u) * 30), 4.4dvh); gap: calc(var(--gm-u) * 14); padding: min(calc(var(--gm-u) * 10), 1.2dvh) 0 min(calc(var(--gm-u) * 8), 1dvh); }
    .gm-menu__num { font-size: calc(var(--gm-u) * 12); width: calc(var(--gm-u) * 22); }
    .gm-menu__foot { gap: min(calc(var(--gm-u) * 16), 2.2dvh) calc(var(--gm-u) * 16); padding-top: min(calc(var(--gm-u) * 26), 3dvh); }
    .gm-menu__foot .gm-menu__k { font-size: calc(var(--gm-u) * 11); margin-bottom: calc(var(--gm-u) * 6); }
    .gm-menu__foot p { font-size: calc(var(--gm-u) * 13); line-height: calc(var(--gm-u) * 20); }
    .gm-menu__tel { font-size: calc(var(--gm-u) * 16); }
    .gm-menu__cta { font-size: calc(var(--gm-u) * 15); min-height: calc(var(--gm-u) * 56); }
}

/* getme-css-bundle:end css/chrome/header-panel.css */


/* getme-css-bundle: css/chrome/footer-panel.css */
/* ════════════════════════════════════════════════════════════════════
   footer--panel (components/footer--panel.html) — follows the page scheme.
   Sizes: calc(var(--gm-u) * N), N = px in the reference frame.
   ════════════════════════════════════════════════════════════════════ */

.gm-foot {
    background: var(--gm-bg);
    color: var(--gm-text);
}

.gm-foot__top {
    align-items: center;
    display: grid;
}

.gm-foot__nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-foot__nav a {
    color: var(--gm-muted);
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color var(--gm-t-quick) ease;
}

.gm-foot__nav a:hover {
    color: var(--gm-primary);
}

.gm-foot__end {
    align-items: center;
    display: flex;
}

.gm-foot__social {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-foot__social a {
    border: calc(var(--gm-u) * 1) solid var(--gm-border);
    border-radius: 50%;
    color: var(--gm-muted);
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: background-color var(--gm-t-quick) var(--gm-ease-soft), border-color var(--gm-t-quick) var(--gm-ease-soft), color var(--gm-t-quick) var(--gm-ease-soft), translate var(--gm-t-quick) var(--gm-ease-soft);
}

.gm-foot__social a:hover {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary);
    translate: 0 calc(var(--gm-u) * -3);
}

.gm-foot__top-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.gm-foot__top-btn:hover svg {
    animation: gm-nudge-up var(--gm-t-nudge) var(--gm-ease-inout) infinite;
}

@keyframes gm-nudge-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--gm-u) * -4); } }

.gm-foot__bottom {
    border-top: calc(var(--gm-u) * 1) solid var(--gm-border);
    color: var(--gm-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: calc(var(--gm-u) * 13);
    justify-content: space-between;
    letter-spacing: -0.005em;
}

.gm-foot__bottom p {
    margin: 0;
}

/* Credit: optional copyright + "Powered by Getme" (name in the text colour). */
.gm-foot__credit {
    align-items: baseline;
    display: inline-flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * 6) calc(var(--gm-u) * 16);
}

.gm-foot__powered {
    color: var(--gm-subtle);
    text-decoration: none;
}

.gm-foot__powered strong {
    color: var(--gm-text);
    font-weight: 700;
    transition: color var(--gm-t-quick) ease;
}

a.gm-foot__powered:hover strong {
    color: var(--gm-primary);
}

/* Getme wordmark: black on the light scheme, white on the dark one (the
   platform SVGs can't be recoloured cross-origin, so both ship and swap). */
.gm-foot__powered {
    align-items: center;
    display: inline-flex;
    gap: calc(var(--gm-u) * 7);
}

.gm-foot__pb-logo {
    display: block;
    height: calc(var(--gm-u) * 22);   /* the SVG has wide padding: 22u box ≈ 13u text */
    margin-block: calc(var(--gm-u) * -4);
    transition: opacity var(--gm-t-quick) ease;
    width: auto;
}

.gm-foot__pb-logo--dark,
:root[data-gm-scheme="dark"] .gm-foot__pb-logo--light {
    display: none;
}

:root[data-gm-scheme="dark"] .gm-foot__pb-logo--dark {
    display: block;
}

a.gm-foot__powered:hover .gm-foot__pb-logo {
    opacity: 0.75;
}

.gm-foot__dot {
    color: var(--gm-primary-ink);
}

/* Quote button: the header's bar button (.gm-button, same sizes per
   breakpoint as .gm-topbar__cta in header-panel.css). */
.gm-foot a.gm-foot__cta {
    box-shadow: none;
    flex: none;
    min-height: 0;
    white-space: nowrap;
    width: auto;
}

/* ── Desktop ≥981 · reference 1502 ──────────────────────────────────── */
@media (min-width: 981px) {
    .gm-foot { --gm-cv-h: calc(var(--gm-u) * 253); }
    .gm-foot { padding: calc(var(--gm-u) * 72) calc(var(--gm-u) * 42) calc(var(--gm-u) * 40) calc(var(--gm-u) * 43); }
    .gm-foot__top { gap: calc(var(--gm-u) * 48); grid-template-columns: auto minmax(0, 1fr) auto; padding-bottom: calc(var(--gm-u) * 48); }
    .gm-foot__end { gap: calc(var(--gm-u) * 28); }
    .gm-foot__social { border-right: calc(var(--gm-u) * 1) solid var(--gm-border); gap: calc(var(--gm-u) * 10); padding-right: calc(var(--gm-u) * 28); }
    .gm-foot__social a { font-size: calc(var(--gm-u) * 17); height: calc(var(--gm-u) * 42); width: calc(var(--gm-u) * 42); }
    .gm-foot__logo { font-size: calc(var(--gm-u) * 21); gap: calc(var(--gm-u) * 8); height: calc(var(--gm-u) * 32); }
    .gm-foot .gm-brand-lockup__mark { height: calc(var(--gm-u) * 32); width: calc(var(--gm-u) * 26); }
    .gm-foot__nav ul { gap: calc(var(--gm-u) * 8) calc(var(--gm-u) * 40); justify-content: center; }
    .gm-foot__nav a { font-size: calc(var(--gm-u) * 15); }
    .gm-foot__top-btn { border-width: calc(var(--gm-u) * 1.5); height: calc(var(--gm-u) * 48); width: calc(var(--gm-u) * 48); }
    .gm-foot__top-btn svg { height: calc(var(--gm-u) * 16); width: calc(var(--gm-u) * 12); }
    .gm-foot__bottom { gap: calc(var(--gm-u) * 12) calc(var(--gm-u) * 40); padding-top: calc(var(--gm-u) * 28); }
    .gm-foot a.gm-foot__cta { font-size: calc(var(--gm-u) * 13.5); gap: calc(var(--gm-u) * 10); height: calc(var(--gm-u) * 35); padding: 0 calc(var(--gm-u) * 4) 0 calc(var(--gm-u) * 16); }
    .gm-foot__cta .gm-button__circle { height: calc(var(--gm-u) * 27); width: calc(var(--gm-u) * 27); }
    .gm-foot__cta .gm-arrow { height: calc(var(--gm-u) * 6); width: calc(var(--gm-u) * 13); }
}

/* ── Tablet 641–980 · reference 680 ─────────────────────────────────── */
@media (min-width: 641px) and (max-width: 980px) {
    .gm-foot { --gm-cv-h: calc(var(--gm-u) * 261); }
    .gm-foot { padding: calc(var(--gm-u) * 56) calc(var(--gm-u) * 32) calc(var(--gm-u) * 36); }
    .gm-foot__top { gap: calc(var(--gm-u) * 28); grid-template-columns: minmax(0, 1fr) auto; padding-bottom: calc(var(--gm-u) * 36); }
    .gm-foot__end { gap: calc(var(--gm-u) * 20); }
    .gm-foot__social { border-right: calc(var(--gm-u) * 1) solid var(--gm-border); gap: calc(var(--gm-u) * 8); padding-right: calc(var(--gm-u) * 20); }
    .gm-foot__social a { font-size: calc(var(--gm-u) * 17); height: calc(var(--gm-u) * 42); width: calc(var(--gm-u) * 42); }
    .gm-foot__nav { grid-column: 1 / -1; grid-row: 2; }
    .gm-foot__logo { font-size: calc(var(--gm-u) * 21); gap: calc(var(--gm-u) * 8); height: calc(var(--gm-u) * 30); }
    .gm-foot .gm-brand-lockup__mark { height: calc(var(--gm-u) * 30); width: calc(var(--gm-u) * 24); }
    .gm-foot__nav ul { gap: calc(var(--gm-u) * 10) calc(var(--gm-u) * 28); }
    .gm-foot__nav a { font-size: calc(var(--gm-u) * 15); }
    .gm-foot__top-btn { border-width: calc(var(--gm-u) * 1.5); height: calc(var(--gm-u) * 46); width: calc(var(--gm-u) * 46); }
    .gm-foot__top-btn svg { height: calc(var(--gm-u) * 16); width: calc(var(--gm-u) * 12); }
    .gm-foot__bottom { gap: calc(var(--gm-u) * 10) calc(var(--gm-u) * 28); padding-top: calc(var(--gm-u) * 24); }
    .gm-foot a.gm-foot__cta { font-size: calc(var(--gm-u) * 15); gap: calc(var(--gm-u) * 12); height: calc(var(--gm-u) * 46); padding: 0 calc(var(--gm-u) * 5) 0 calc(var(--gm-u) * 20); }
    .gm-foot__cta .gm-button__circle { height: calc(var(--gm-u) * 36); width: calc(var(--gm-u) * 36); }
    .gm-foot__cta .gm-arrow { height: calc(var(--gm-u) * 7); width: calc(var(--gm-u) * 16); }
}

/* ── Phone ≤640 · reference 390 ─────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-foot { --gm-cv-h: calc(var(--gm-u) * 408); }
    .gm-foot { padding: calc(var(--gm-u) * 48) calc(var(--gm-u) * 16) calc(var(--gm-u) * 32); }
    .gm-foot__top { gap: calc(var(--gm-u) * 24); grid-template-columns: minmax(0, 1fr) auto; padding-bottom: calc(var(--gm-u) * 28); }
    .gm-foot__end { display: contents; }
    .gm-foot__social { border-top: calc(var(--gm-u) * 1) solid var(--gm-border); gap: calc(var(--gm-u) * 10); grid-column: 1 / -1; grid-row: 3; padding-top: calc(var(--gm-u) * 20); }
    .gm-foot__social a { font-size: calc(var(--gm-u) * 18); height: calc(var(--gm-u) * 44); width: calc(var(--gm-u) * 44); }
    .gm-foot__top-btn { border-width: calc(var(--gm-u) * 1.5); grid-column: 2; grid-row: 1; height: calc(var(--gm-u) * 44); width: calc(var(--gm-u) * 44); }
    .gm-foot__top-btn svg { height: calc(var(--gm-u) * 16); width: calc(var(--gm-u) * 12); }
    .gm-foot__nav { grid-column: 1 / -1; grid-row: 2; }
    .gm-foot__logo { font-size: calc(var(--gm-u) * 20); gap: calc(var(--gm-u) * 8); height: calc(var(--gm-u) * 28); }
    .gm-foot .gm-brand-lockup__mark { height: calc(var(--gm-u) * 28); width: calc(var(--gm-u) * 23); }
    .gm-foot__nav ul { display: grid; gap: calc(var(--gm-u) * 12) calc(var(--gm-u) * 16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-foot__nav a { font-size: calc(var(--gm-u) * 15); }
    .gm-foot a.gm-foot__cta--no-phone { display: none; }
    .gm-foot__bottom { flex-direction: column; font-size: calc(var(--gm-u) * 12); gap: calc(var(--gm-u) * 6); padding-top: calc(var(--gm-u) * 20); }
    /* Phone: the tagline moves up under the menu (above the social line);
       the top row and the bottom line merge into one grid for that. */
    .gm-foot:has(.gm-foot__tagline) { column-gap: calc(var(--gm-u) * 24); display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .gm-foot:has(.gm-foot__tagline) .gm-foot__top,
    .gm-foot:has(.gm-foot__tagline) .gm-foot__bottom { display: contents; }
    .gm-foot:has(.gm-foot__tagline) .gm-foot__logo { grid-column: 1; grid-row: 1; }
    .gm-foot:has(.gm-foot__tagline) .gm-foot__nav { margin-top: calc(var(--gm-u) * 24); }
    .gm-foot .gm-foot__bottom .gm-foot__tagline { color: var(--gm-subtle); font-size: calc(var(--gm-u) * 13); grid-column: 1 / -1; grid-row: 3; margin-top: calc(var(--gm-u) * 28); }
    .gm-foot:has(.gm-foot__tagline) .gm-foot__social { grid-row: 4; margin-top: calc(var(--gm-u) * 24); }
    .gm-foot:has(.gm-foot__tagline) .gm-foot__credit { border-top: calc(var(--gm-u) * 1) solid var(--gm-border); font-size: calc(var(--gm-u) * 12); grid-column: 1 / -1; grid-row: 5; margin-top: calc(var(--gm-u) * 28); padding-top: calc(var(--gm-u) * 20); }
}

/* Uploaded logo sized by Footer > Logo width (data-gm-logo-w, --gm-logo-n =
   reference px): the brand line grows to the logo's own height. Tablets show
   it at 0.8×, phones 0.75×. Logo vertical offset (--gm-logo-y, % of the image)
   lines the wordmark up with the menu and back-to-top button. */
.gm-foot[data-gm-logo-w] {
    --gm-logo-f: 1;
}

.gm-foot[data-gm-logo-w] .gm-foot__logo.gm-brand-lockup--logo {
    height: auto;
}

.gm-foot[data-gm-logo-w] .gm-brand-lockup--logo .gm-brand-lockup__img {
    height: auto;
    max-width: none;
    width: calc(var(--gm-logo-n) * var(--gm-u) * var(--gm-logo-f));
    transform: translateY(var(--gm-logo-y, 0%));
}

/* The brand line is exactly the logo's box (no inline line-box gap below it),
   and the phone's back-to-top button centres on it like the desktop row does. */
.gm-foot[data-gm-logo-w] .gm-foot__brand {
    display: flex;
}

.gm-foot[data-gm-logo-w] .gm-foot__top-btn {
    align-self: center;
}

/* Desktop row: each menu item is exactly its link's line, so the link text
   sits on the row's centre line with the wordmark. */
@media (min-width: 981px) {
    .gm-foot[data-gm-logo-w] .gm-foot__nav li { display: flex; }
}

@media (min-width: 641px) and (max-width: 980px) {
    .gm-foot[data-gm-logo-w] { --gm-logo-f: 0.8; }
}

@media (max-width: 640px) {
    .gm-foot[data-gm-logo-w] { --gm-logo-f: 0.75; }
}

/* getme-css-bundle:end css/chrome/footer-panel.css */


/* getme-css-bundle: css/chrome/preloader.css */
/* ── Preloader — brand intro over the first paint (components/preloader.html)
   The layer leaves on its own animation: no script decides when the page is
   "ready", so it can never trap the content. It holds, then fades and stops
   taking space from the stacking order (visibility: hidden at the end).
   Colours: the page ground (--gm-bg follows the colour scheme); the dark
   scheme swaps in the on-dark mark (--pl-mark-dk) when one is set.
   Hold times follow the Tekdal loader: the buildings rise by ~1.4s, roof and
   sweep land by ~1.8s, the windows light by ~2.2s. */

.gm-preloader {
    --pl-bg: var(--gm-bg, var(--color-background, Canvas));
    --pl-hold: 1.9s;
    --pl-exit: var(--theme-animation-duration-slow);
    --pl-ease: var(--theme-animation-easing-standard);
    --pl-mark-size: clamp(150px, 40vw, 220px);

    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: var(--pl-bg);
    pointer-events: none;
    animation: gm-preloader-out var(--pl-exit) var(--pl-ease) var(--pl-hold) forwards;
}

.gm-preloader--short { --pl-hold: 1.45s; }
.gm-preloader--long  { --pl-hold: 2.4s; }

/* A background (set by the component as --pl-mark), so a hidden layer never
   downloads it. The box is portrait like most marks; contain fits any logo. */
.gm-preloader__mark {
    display: block;
    width: var(--pl-mark-size);
    aspect-ratio: 823 / 565;
    background: var(--pl-mark) center / contain no-repeat;
    animation: gm-preloader-mark-out var(--pl-exit) var(--pl-ease) var(--pl-hold) forwards;
}

[data-gm-scheme="dark"] .gm-preloader__mark {
    background-image: var(--pl-mark-dk, var(--pl-mark));
}

/* fade: the Branding logo is a still image, so the motion is applied here. */
.gm-preloader--fade .gm-preloader__mark {
    opacity: 0;
    animation:
        gm-preloader-mark-in calc(var(--pl-hold) * 0.6) var(--pl-ease) forwards,
        gm-preloader-mark-out var(--pl-exit) var(--pl-ease) var(--pl-hold) forwards;
}

/* Seen this session (components/preloader.html sets the class before the
   layer is parsed). */
.gm-preloader-seen .gm-preloader {
    display: none;
}

/* Wait screen (components/preloader.html, data-gm-preloader-wait): the same
   layer while an account page loads. No intro animation of its own (the SVG
   mark still plays its own); shown and hidden by the component's script. */
.gm-preloader.gm-preloader--wait,
.gm-preloader.gm-preloader--wait .gm-preloader__mark {
    animation: none;
}

.gm-preloader.gm-preloader--wait {
    opacity: 0;
    transition: opacity var(--theme-animation-duration-fast) var(--pl-ease);
    z-index: 100000;
}

.gm-preloader.gm-preloader--wait.is-on { opacity: 1; }
.gm-preloader.gm-preloader--wait[hidden] { display: none; }

/* "Seen this session" hides every .gm-preloader; the wait screen is not the
   intro, so it still shows. */
.gm-preloader-seen .gm-preloader.gm-preloader--wait:not([hidden]) { display: grid; }

/* "Only in the Home Screen app" (preloader.app_only): outside the installed
   app the layer is never shown. Only hides, so it never overrides the
   seen / reduced-motion rules. */
@media not all and (display-mode: standalone) {
    .gm-preloader--app-only {
        display: none;
    }
}

@keyframes gm-preloader-out {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes gm-preloader-mark-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes gm-preloader-mark-out {
    to { transform: scale(1.04); }
}

/* The intro is decoration: visitors who prefer reduced motion never get it. */
@media (prefers-reduced-motion: reduce) {
    .gm-preloader {
        display: none;
    }
}

/* getme-css-bundle:end css/chrome/preloader.css */


/* getme-css-bundle: css/chrome/action-bar.css */
/* ════════════════════════════════════════════════════════════════════
   action-bar (components/action-bar.html)
   Namespace: --gm-abar-*   Scope: .gm-abar
   A solid bar fixed to the bottom on phones (tablets too with show_on =
   tablet): call · contact · quote. Dark = .gm-ink (Color schemes), light =
   the page palette. The page gets bottom padding of the bar's height so the
   footer is never covered; the bar slides away while the menu is open.
   Sits under the search overlay (80), menu backdrop (90) and menu (100).
   Sizes follow the scale unit (phone reference 390).
   ════════════════════════════════════════════════════════════════════ */

:root {
    --gm-abar-pad: calc(var(--gm-u) * 10);   /* same space above and below the items */
    --gm-abar-h: calc(var(--gm-u) * 60);     /* 40 (tallest item) + 2 × 10 */
}

.gm-abar {
    display: none;
}

.gm-abar--light {
    background: var(--gm-bg);
    color: var(--gm-text);
}

@media (max-width: 640px) {
    .gm-abar {
        align-items: center;
        border-top: 1px solid var(--gm-border);
        bottom: 0;
        box-shadow: 0 calc(var(--gm-u) * -8) calc(var(--gm-u) * 24) var(--gm-shadow-color);
        column-gap: calc(var(--gm-u) * 10);
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto auto minmax(0, 1fr);
        left: 0;
        /* Bottom = the same space as the top; on phones with a home indicator
           the safe area takes over when it is larger (never both added). */
        padding: var(--gm-abar-pad) calc(var(--gm-u) * var(--gm-band-x)) max(var(--gm-abar-pad), env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        transition: translate var(--gm-t-menu-close) var(--gm-ease-quart);
        z-index: 60;
    }

    /* Fewer items: the quote button still takes the remaining width. */
    .gm-abar:not(:has(.gm-abar__call)),
    .gm-abar:not(:has(.gm-abar__contact)) { grid-template-columns: auto minmax(0, 1fr); }
    .gm-abar:not(:has(.gm-abar__quote)) { grid-template-columns: minmax(0, 1fr) auto; }

    body:has(> .gm-abar) {
        padding-bottom: calc(var(--gm-abar-h) + env(safe-area-inset-bottom));
    }

    html.gm-menu-open .gm-abar {
        translate: 0 110%;
    }
}

@media (min-width: 641px) and (max-width: 980px) {
    .gm-abar--tablet {
        align-items: center;
        border-top: 1px solid var(--gm-border);
        bottom: 0;
        box-shadow: 0 calc(var(--gm-u) * -8) calc(var(--gm-u) * 24) var(--gm-shadow-color);
        column-gap: calc(var(--gm-u) * 16);
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto auto minmax(0, 1fr);
        left: 0;
        padding: var(--gm-abar-pad) calc(var(--gm-u) * var(--gm-band-x)) max(var(--gm-abar-pad), env(safe-area-inset-bottom));
        position: fixed;
        right: 0;
        transition: translate var(--gm-t-menu-close) var(--gm-ease-quart);
        z-index: 60;
    }

    body:has(> .gm-abar--tablet) {
        padding-bottom: calc(var(--gm-abar-h) + env(safe-area-inset-bottom));
    }

    html.gm-menu-open .gm-abar--tablet {
        translate: 0 110%;
    }
}

/* ── Items ─────────────────────────────────────────────────────────── */
.gm-abar__call,
.gm-abar__contact {
    align-items: center;
    color: var(--gm-text);
    display: flex;
    gap: calc(var(--gm-u) * 8);
    min-width: 0;
    text-decoration: none;
}

.gm-abar__contact {
    flex-direction: column;
    gap: calc(var(--gm-u) * 3);
}

.gm-abar__circle {
    border: calc(var(--gm-u) * 1.5) solid var(--gm-line);
    border-radius: 50%;
    color: var(--gm-muted);
    display: grid;
    flex: none;
    height: calc(var(--gm-u) * 36);
    place-items: center;
    transition: background-color var(--gm-t-quick) var(--gm-ease-soft), border-color var(--gm-t-quick) var(--gm-ease-soft), color var(--gm-t-quick) var(--gm-ease-soft);
    width: calc(var(--gm-u) * 36);
}

/* Phone icon: green from --gm-phone-icon (Colors > Success & phone icons). */
.gm-abar__circle.gm-phone-icon {
    border-color: color-mix(in srgb, var(--gm-phone-icon) 45%, transparent);
    color: var(--gm-phone-icon);
}

.gm-abar__contact .gm-abar__circle {
    height: calc(var(--gm-u) * 32);
    width: calc(var(--gm-u) * 32);
}

.gm-abar__icon {
    height: calc(var(--gm-u) * 18);
    width: calc(var(--gm-u) * 18);
}

.gm-abar__call:active .gm-abar__circle.gm-phone-icon {
    background: var(--gm-phone-icon);
    border-color: var(--gm-phone-icon);
    color: var(--gm-on-primary);
}

.gm-abar__contact:active .gm-abar__circle {
    background: var(--gm-hover);
    border-color: var(--gm-primary);
    color: var(--gm-primary);
}

.gm-abar__stack {
    display: grid;
    line-height: 1.2;
    min-width: 0;
}

.gm-abar__small {
    color: var(--gm-subtle);
    font-size: calc(var(--gm-u) * 10.5);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-abar__number {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 14);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* The theme's pill button, sized for the bar (colour stays the button token). */
.gm-abar .gm-abar__quote {
    font-size: calc(var(--gm-u) * 13);
    justify-content: center;
    min-height: calc(var(--gm-u) * 40);
    min-width: 0;
    padding: 0 calc(var(--gm-u) * 14);
    width: 100%;
}

.gm-abar .gm-abar__quote span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-abar :focus-visible {
    outline: calc(var(--gm-u) * 2) solid var(--gm-primary);
    outline-offset: calc(var(--gm-u) * 2);
}

/* getme-css-bundle:end css/chrome/action-bar.css */


/* ── Section stylesheets — token-aware, self-contained ─────────── */
/* Commerce data sections (route-bound) */

/* getme-css-bundle: css/commerce/product-action-loading.css */
button[data-product-card-action],
button[data-commerce-purchase-action] {
    position: relative;
}

.gm-product-action-primary,
.gm-featured-products-section__cta,
.gm-category-detail__product-action-primary,
.gm-product-buy-button,
.gm-related-card__cta {
    --gm-product-action-spinner-color: var(--pl-button-text, var(--fp-button-text, var(--cd-button-text, var(--pd-button-text, var(--gm-on-primary, #ffffff)))));
}

.gm-product-action-secondary,
.gm-featured-products-section__cta--secondary,
.gm-category-detail__product-action-secondary,
.gm-product-buy-button--secondary,
.gm-related-card__cta--secondary {
    --gm-product-action-spinner-color: var(--pl-button-bg, var(--fp-button-bg, var(--cd-button-bg, var(--pd-button-bg, var(--gm-primary, #111827)))));
}

/* Spinner gorunurken buton metni saydam olur. Bes ayri section butona kendi rengini
   verir; en yuksek rakip (0,2,0). Attribute tekrari ile (0,3,1) -- !important
   gerekmiyor (CLAUDE.md §4.6). */
button[data-product-card-action][data-product-card-action][data-loading="true"],
button[data-commerce-purchase-action][data-commerce-purchase-action][data-loading="true"],
button[data-product-card-action][data-product-card-action][data-success="true"],
button[data-commerce-purchase-action][data-commerce-purchase-action][data-success="true"] {
    color: transparent;
    pointer-events: none;
}

button[data-product-card-action][data-loading="true"]::after,
button[data-commerce-purchase-action][data-loading="true"]::after {
    animation: gm-product-action-spin 720ms linear infinite;
    border: 2px solid color-mix(in srgb, var(--gm-product-action-spinner-color, currentColor) 28%, transparent);
    border-radius: 999px;
    border-top-color: var(--gm-product-action-spinner-color, currentColor);
    content: "";
    height: 18px;
    inset: 50% auto auto 50%;
    margin: -9px 0 0 -9px;
    position: absolute;
    width: 18px;
}

button[data-product-card-action][data-success="true"]::before,
button[data-commerce-purchase-action][data-success="true"]::before {
    animation: gm-product-action-check 520ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
    border: solid var(--gm-product-action-spinner-color, currentColor);
    border-width: 0 3px 3px 0;
    content: "";
    height: 16px;
    inset: 50% auto auto 50%;
    margin: -11px 0 0 -5px;
    position: absolute;
    transform: rotate(45deg) scale(0.2);
    transform-origin: 50% 70%;
    width: 8px;
}

button[data-product-card-action][data-success="true"]::after,
button[data-commerce-purchase-action][data-success="true"]::after {
    animation: gm-product-action-success-ring 480ms ease-out both;
    border: 2px solid color-mix(in srgb, var(--gm-product-action-spinner-color, currentColor) 42%, transparent);
    border-radius: 999px;
    content: "";
    height: 18px;
    inset: 50% auto auto 50%;
    margin: -9px 0 0 -9px;
    position: absolute;
    width: 18px;
}

@keyframes gm-product-action-spin {
    to { transform: rotate(360deg); }
}

@keyframes gm-product-action-check {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0.2);
    }
    55% {
        opacity: 1;
        transform: rotate(45deg) scale(1.18);
    }
    100% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }
}

@keyframes gm-product-action-success-ring {
    0% {
        opacity: 1;
        transform: scale(0.82) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.65) rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    button[data-product-card-action][data-loading="true"]::after,
    button[data-commerce-purchase-action][data-loading="true"]::after,
    button[data-product-card-action][data-success="true"]::before,
    button[data-commerce-purchase-action][data-success="true"]::before,
    button[data-product-card-action][data-success="true"]::after,
    button[data-commerce-purchase-action][data-success="true"]::after {
        animation: none;
    }
}

/* getme-css-bundle:end css/commerce/product-action-loading.css */


/* getme-css-bundle: css/commerce/sections/product-listing.css */
/* ════════════════════════════════════════════════════════════════════
   product-listing — section stylesheet (self-contained)

   Owner       : sections/product-listing.json + sections/product-listing.html
   Namespace   : --pl-*  (product-listing). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.gm-product-section` so multiple
                 instances on a page cannot bleed into one another.
   Editor      : Per-instance overrides are written as inline CSS variables
                 in the section's <section style="..."> attribute. The
                 visual editor uses `css_vars_patch` to mutate them live.
   Token chain : --pl-<x>  →  var(--theme-<x>) / var(--gm-<x>).
                 settings_data.theme.colors/spacing/borders.radius/shadows
                 supplies the --theme-<x> layer via theme.css :root.

   Multi-instance safety
   ─────────────────────
   CSS custom properties are scoped to the element they are declared on
   and inherited by descendants. Each <section class="gm-product-section">
   carries its own inline style="" so two listings on the same page can
   render with different button colors / spacing / radius without leaking.
   ════════════════════════════════════════════════════════════════════ */

.gm-product-section {
    /* Default token chain — overridable by inline style on the section. */
    --pl-section-bg: transparent;
    --pl-text-color: var(--gm-text);
    --pl-title-color: var(--gm-text);
    --pl-kicker-color: var(--gm-primary);
    --pl-card-bg: var(--gm-surface);
    --pl-card-border: var(--gm-border);
    --pl-price-color: var(--gm-text);
    --pl-compare-color: var(--gm-muted);
    --pl-button-bg: var(--gm-primary);
    --pl-button-text: var(--gm-on-primary, #ffffff);
    --pl-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    --pl-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --pl-section-padding-block: var(--theme-spacing-xl, 32px);
    --pl-grid-gap: var(--theme-spacing-lg);
    --pl-card-radius: var(--theme-card-radius, var(--theme-radius-lg));
    --pl-card-shadow: var(--theme-shadow-sm);
    --pl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --pl-body-font: var(--font-primary, sans-serif);
    --pl-grid-columns: 3;

    /* Flat, page-integrated listing — no card frame around the section.
       Cards keep their own --pl-card-* radius/shadow. */
    background: var(--pl-section-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--pl-text-color);
    font-family: var(--pl-body-font);
    padding: var(--pl-section-padding-block) var(--gm-section-inline-padding);
}

/* ── Header / heading area ──────────────────────────────────────── */
.gm-product-section__head {
    margin-bottom: 24px;
}

.gm-product-section__title {
    color: var(--pl-title-color);
    font-family: var(--pl-title-font);
    margin: 4px 0 8px;
}

.gm-product-section .gm-kicker {
    color: var(--pl-kicker-color);
}

.gm-product-section__intro {
    color: var(--pl-text-color);
    opacity: 0.85;
}

.gm-product-section__empty {
    color: var(--pl-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

/* ── Modifier classes (driven by section settings enums) ────────── */
.gm-product-section--columns-2 { --pl-grid-columns: 2; }
.gm-product-section--columns-3 { --pl-grid-columns: 3; }
.gm-product-section--columns-4 { --pl-grid-columns: 4; }
.gm-product-section--card-minimal { border: none; box-shadow: none; }
.gm-product-section--card-elevated .gm-product-card {
    box-shadow: var(--theme-shadow-lg);
}
.gm-product-section--card-compact .gm-product-grid {
    gap: 16px;
}
.gm-product-section--card-compact .gm-product-card h3 {
    font-size: 15px;
}

.gm-product-section--image-landscape .gm-product-card img,
.gm-product-section--image-landscape .gm-product-image-placeholder {
    aspect-ratio: 4 / 3;
}
.gm-product-section--image-portrait .gm-product-card img,
.gm-product-section--image-portrait .gm-product-image-placeholder {
    aspect-ratio: 3 / 4;
}
.gm-product-section--image-tall .gm-product-card img,
.gm-product-section--image-tall .gm-product-image-placeholder {
    aspect-ratio: 2 / 3;
}

.gm-product-section--hover-border .gm-product-card:hover {
    box-shadow: none;
    transform: none;
}
.gm-product-section--hover-none .gm-product-card:hover {
    border-color: var(--pl-card-border);
    box-shadow: none;
    transform: none;
}
.gm-product-section--hover-zoom .gm-product-card img {
    transition: transform 240ms ease;
}
.gm-product-section--hover-zoom .gm-product-card:hover img {
    transform: scale(1.04);
}

/* ── Grid ───────────────────────────────────────────────────────── */
.gm-product-section .gm-product-grid {
    display: grid;
    gap: var(--pl-grid-gap);
    grid-template-columns: repeat(var(--pl-grid-columns), minmax(0, 1fr));
}

/* ── Card ───────────────────────────────────────────────────────── */
.gm-product-section .gm-product-card {
    align-items: stretch;
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-card-border);
    border-radius: var(--pl-card-radius);
    box-shadow: var(--pl-card-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-product-section .gm-product-card:hover {
    border-color: color-mix(in srgb, var(--pl-button-bg) 35%, var(--pl-card-border));
    box-shadow: var(--theme-shadow-xl);
    transform: translateY(-2px);
}

.gm-product-section .gm-product-card__link {
    color: var(--pl-text-color);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    text-decoration: none;
}

.gm-product-section .gm-product-card img,
.gm-product-section .gm-product-image-placeholder {
    aspect-ratio: 1 / 1;
}

.gm-product-section .gm-product-card img {
    background: var(--gm-media-surface);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.gm-product-section .gm-product-image-placeholder {
    background: var(--gm-media-surface);
    display: block;
    width: 100%;
}

/* ── Card content typography ────────────────────────────────────── */
.gm-product-section .gm-product-brand {
    color: var(--pl-text-color);
    display: block;
    font-size: 11px;
    font-weight: 700;
    min-height: 16px;
    opacity: 0.65;
    overflow: hidden;
    padding: 14px 14px 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-product-section .gm-product-card h3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--pl-title-color);
    display: -webkit-box;
    font-family: var(--pl-title-font);
    font-size: 16px;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    margin: 6px 14px 0;
    min-height: calc(1.3em * 2);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-product-section .gm-product-card strong {
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ── Price stack ────────────────────────────────────────────────── */
.gm-product-section .gm-product-price-stack {
    align-content: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: auto 14px 14px;
    min-height: 54px;
    padding-top: 12px;
}

.gm-product-section .gm-product-price {
    color: var(--pl-price-color);
}

.gm-product-section .gm-product-compare-price {
    color: var(--pl-compare-color);
    font-size: 13px;
    text-decoration: line-through;
}

/* ── Actions ────────────────────────────────────────────────────── */
.gm-product-section .gm-product-actions {
    align-self: stretch;
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    grid-auto-rows: minmax(40px, auto);
    margin-top: 0;
    padding: 0 14px 14px;
}

.gm-product-section .gm-product-action-primary {
    align-items: center;
    background: var(--pl-button-bg);
    border: 1px solid var(--pl-button-bg);
    border-radius: var(--pl-button-radius);
    box-shadow: var(--pl-button-shadow);
    box-sizing: border-box;
    color: var(--pl-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
    transition: filter 150ms ease, box-shadow 150ms ease;
    white-space: normal;
    width: 100%;
}

.gm-product-section .gm-product-action-primary:hover:not([disabled]) {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pl-button-bg) 28%, transparent);
    filter: brightness(0.92);
}

.gm-product-section .gm-product-action-primary:active:not([disabled]) {
    box-shadow: var(--pl-button-shadow);
    filter: brightness(0.86);
}

.gm-product-section .gm-product-action-secondary {
    align-items: center;
    background: var(--gm-surface);
    border: 1px solid var(--pl-button-bg);
    border-radius: var(--pl-button-radius);
    box-sizing: border-box;
    color: var(--pl-button-bg);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;
    padding: 0 14px;
    text-align: center;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    white-space: normal;
    width: 100%;
}

/* Elegant outline → fill on hover (the "Buy now" button adopts the primary colour). */
.gm-product-section .gm-product-action-secondary:hover:not([disabled]) {
    background: var(--pl-button-bg);
    color: var(--pl-button-text);
}

.gm-product-section .gm-product-action-secondary:active:not([disabled]) {
    filter: brightness(0.92);
}

.gm-product-section .gm-product-action-primary[disabled],
.gm-product-section .gm-product-action-secondary[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-product-section .gm-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gm-product-section .gm-product-grid {
        grid-template-columns: 1fr;
    }
    .gm-product-section {
        padding: var(--pl-section-padding-block) var(--gm-section-inline-padding);
    }
}

/* getme-css-bundle:end css/commerce/sections/product-listing.css */


/* getme-css-bundle: css/commerce/sections/product-detail.css */
/* ════════════════════════════════════════════════════════════════════
   product-detail — section stylesheet (self-contained)

   Owner       : sections/product-detail.json + sections/product-detail.html
   Namespace   : --pd-*  (product-detail). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.gm-product-detail-section`.
   Editor      : Per-instance overrides via inline CSS variables in the
                 section's <section style=""> attribute. Editor uses
                 `css_vars_patch` to mutate them live.
   Token chain : --pd-<x>  →  var(--theme-<x>) / var(--gm-<x>).

   Multi-instance safety
   ─────────────────────
   CSS custom properties are scoped per element. Each
   .gm-product-detail-section instance carries its own inline style,
   so two product-detail sections on the same page render independently.
   ════════════════════════════════════════════════════════════════════ */

.gm-product-detail-section {
    /* Token chain — overridable by inline style on the section. */
    --pd-section-bg: transparent;
    --pd-text-color: var(--gm-text);
    --pd-title-color: var(--gm-text);
    --pd-kicker-color: var(--gm-muted);
    --pd-price-color: var(--gm-text);
    --pd-compare-color: var(--gm-muted);
    --pd-button-bg: var(--gm-primary);
    --pd-button-text: var(--gm-on-primary);
    --pd-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    --pd-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --pd-section-padding-block: var(--theme-spacing-3xl);
    --pd-content-gap: var(--theme-spacing-xl);
    --pd-media-radius: var(--theme-radius-lg);
    --pd-media-shadow: var(--theme-shadow-sm);
    --pd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --pd-body-font: var(--font-primary, sans-serif);

    /* Flat, page-integrated surface — shared standard with service-detail. */
    background: var(--pd-section-bg);
    border: none;
    border-radius: 0;
    color: var(--pd-text-color);
    font-family: var(--pd-body-font);
    padding: var(--pd-section-padding-block) var(--gm-section-inline-padding);
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.gm-product-detail-section .gm-product-detail__breadcrumb {
    color: var(--pd-text-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 18px;
    opacity: 0.7;
}

.gm-product-detail-section .gm-product-detail__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.gm-product-detail-section .gm-product-detail__breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Layout: gallery + info ─────────────────────────────────────── */
.gm-product-detail-section .gm-product-detail {
    display: grid;
    gap: var(--pd-content-gap);
    /* Media ~42% of the row — shared standard with service-detail. */
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.28fr);
}

.gm-product-detail-section--layout-stacked .gm-product-detail,
.gm-product-detail-section--layout-wide_gallery .gm-product-detail {
    grid-template-columns: 1fr;
}

.gm-product-detail-section--layout-wide_gallery .gm-product-gallery {
    width: 100%;
}

/* ── Gallery (hero + thumbs) ────────────────────────────────────── */
.gm-product-detail-section .gm-product-gallery {
    min-width: 0;
}

.gm-product-detail-section .gm-product-detail-media {
    /* Frameless media — rounded image on the shared media surface, no box. */
    background: var(--gm-media-surface);
    border-radius: var(--pd-media-radius);
    overflow: hidden;
    position: relative;
}

.gm-product-detail-section .gm-product-detail-media img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.gm-product-detail-section--image-landscape .gm-product-detail-media img { aspect-ratio: 4 / 3; }
.gm-product-detail-section--image-portrait .gm-product-detail-media img { aspect-ratio: 3 / 4; }
.gm-product-detail-section--image-auto .gm-product-detail-media img { aspect-ratio: auto; }

.gm-product-detail-section .gm-product-image-placeholder {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-tertiary);
    display: block;
    width: 100%;
}

.gm-product-detail-section .gm-product-thumbs {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 12px;
}

.gm-product-detail-section .gm-product-thumb {
    aspect-ratio: 1 / 1;
    background: var(--gm-media-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--pd-media-radius);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color 140ms ease;
}

.gm-product-detail-section .gm-product-thumb.is-active {
    border-color: var(--pd-button-bg);
    box-shadow: 0 0 0 1px var(--pd-button-bg);
}

.gm-product-detail-section .gm-product-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ── Gallery navigation arrows (over the main media) ────────────── */
.gm-product-detail-section .gm-gallery-nav {
    align-items: center;
    background: var(--gm-dropdown-bg, var(--gm-bg));
    border: 1px solid var(--gm-border);
    border-radius: 999px;
    color: var(--pd-text-color);
    cursor: pointer;
    display: flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    opacity: 0.92;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 140ms ease, background 140ms ease;
    width: 40px;
    z-index: 2;
}

.gm-product-detail-section .gm-gallery-nav:hover { opacity: 1; }
.gm-product-detail-section .gm-gallery-nav--prev { left: 12px; }
.gm-product-detail-section .gm-gallery-nav--next { right: 12px; }

/* ── Info column ────────────────────────────────────────────────── */
.gm-product-detail-section .gm-product-detail-body {
    min-width: 0;
}

.gm-product-detail-section .gm-kicker {
    color: var(--pd-kicker-color);
}

.gm-product-detail-section .gm-product-detail__title {
    color: var(--pd-title-color);
    font-family: var(--pd-title-font);
    font-size: 40px;
    line-height: 1.15;
    margin: 6px 0 12px;
    overflow-wrap: anywhere;
}

.gm-product-detail-section .gm-product-summary {
    color: var(--pd-text-color);
    line-height: 1.65;
    margin: 0 0 16px;
    opacity: 0.85;
}

/* ── Price ──────────────────────────────────────────────────────── */
.gm-product-detail-section .gm-product-detail-price {
    display: grid;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    gap: 4px;
    margin: 20px 0;
}

.gm-product-detail-section .gm-product-price {
    color: var(--pd-price-color);
}

.gm-product-detail-section .gm-product-compare-price {
    color: var(--pd-compare-color);
    font-size: 13px;
    text-decoration: line-through;
}

/* ── Options ────────────────────────────────────────────────────── */
.gm-product-detail-section .gm-product-option-group {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.gm-product-detail-section .gm-product-option-name {
    color: color-mix(in srgb, var(--pd-text-color) 74%, transparent);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.gm-product-detail-section .gm-product-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gm-product-detail-section .gm-product-option-chip {
    background: color-mix(in srgb, var(--gm-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--gm-border) 88%, transparent);
    border-radius: var(--theme-variant-pill-radius, var(--theme-radius-pill));
    color: var(--pd-text-color);
    cursor: pointer;
    font-weight: 700;
    min-height: 42px;
    padding: 0 20px;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.gm-product-detail-section .gm-product-option-chip:hover {
    border-color: color-mix(in srgb, var(--pd-button-bg) 48%, var(--gm-border));
    transform: translateY(-1px);
}

.gm-product-detail-section .gm-product-option-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--pd-button-bg) 70%, transparent);
    outline-offset: 3px;
}

.gm-product-detail-section .gm-product-option-chip.is-selected {
    background: var(--pd-button-bg);
    border-color: var(--pd-button-bg);
    color: var(--pd-button-text);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--pd-button-bg) 24%, transparent);
}

.gm-product-detail-section .gm-product-option-chip.is-unavailable {
    cursor: not-allowed;
    opacity: 0.48;
    text-decoration: line-through;
    transform: none;
}

/* ── Purchase actions ───────────────────────────────────────────── */
.gm-product-detail-section .gm-product-purchase {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0;
}

.gm-product-detail-section .gm-product-detail__pickup-availability {
    --gm-pickup-accent: var(--pd-button-bg);
    --gm-pickup-border: color-mix(in srgb, var(--gm-border) 88%, transparent);
    --gm-pickup-color: var(--pd-text-color);
    --gm-pickup-muted: color-mix(in srgb, var(--pd-text-color) 68%, transparent);
    --gm-pickup-radius: var(--pd-button-radius);
    margin: 20px 0;
}

.gm-product-detail-section .gm-product-buy-button {
    background: var(--pd-button-bg);
    border: 1px solid var(--pd-button-bg);
    border-radius: var(--pd-button-radius);
    box-shadow: var(--pd-button-shadow);
    color: var(--pd-button-text);
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    padding: 0 18px;
    transition: filter 160ms ease;
}

.gm-product-detail-section .gm-product-buy-button:hover {
    filter: brightness(0.92);
}

.gm-product-detail-section .gm-product-buy-button--secondary {
    background: var(--gm-surface);
    color: var(--pd-button-bg);
}

.gm-product-detail-section .gm-product-buy-button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.gm-product-detail-section .gm-product-selling-plans {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.gm-product-detail-section .gm-product-selling-plans__title,
.gm-product-detail-section .gm-product-selling-plan-group strong {
    color: var(--pd-text-color);
    font-weight: 700;
}

.gm-product-detail-section .gm-product-selling-plan-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.gm-product-detail-section .gm-product-selling-plan-option {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-variant-pill-radius, var(--theme-radius-pill));
    color: var(--pd-text-color);
    cursor: pointer;
    min-height: 38px;
    padding: 0 14px;
}

.gm-product-detail-section .gm-product-selling-plan-option.is-selected {
    border-color: var(--pd-button-bg);
    color: var(--pd-button-bg);
    font-weight: 700;
}

.gm-product-detail-section .gm-product-ask-link {
    align-self: center;
    color: var(--pd-button-bg);
    text-decoration: none;
}

.gm-product-detail-section .gm-product-ask-link:hover {
    text-decoration: underline;
}

/* ── Meta / spec table ──────────────────────────────────────────── */
.gm-product-detail-section .gm-product-meta {
    border-top: 1px solid var(--gm-border);
    display: grid;
    gap: 6px 16px;
    grid-template-columns: max-content 1fr;
    margin-top: 18px;
    padding-top: 16px;
}

.gm-product-detail-section .gm-product-meta dt {
    color: var(--pd-text-color);
    font-weight: 700;
    opacity: 0.7;
}

.gm-product-detail-section .gm-product-meta dd {
    color: var(--pd-text-color);
    margin: 0;
    overflow-wrap: anywhere;
}

/* ── Description block ──────────────────────────────────────────── */
.gm-product-detail-section .gm-product-description {
    border-top: 1px solid var(--gm-border);
    margin-top: 24px;
    padding-top: 20px;
}

.gm-product-detail-section .gm-product-description h2 {
    font-family: var(--pd-title-font);
    font-size: 18px;
    margin: 0 0 12px;
}

.gm-product-detail-section .gm-rich-text {
    color: var(--pd-text-color);
    font-size: 15px;
    line-height: 1.7;
}

.gm-product-detail-section .gm-product-description p {
    color: var(--pd-text-color);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.gm-product-detail-section .gm-rich-text p:first-child {
    margin-top: 0;
}

/* ── Media strip ────────────────────────────────────────────────── */
.gm-product-detail-section .gm-product-media-strip {
    border-top: 1px solid var(--gm-border);
    margin-top: 28px;
    padding-top: 24px;
}

.gm-product-detail-section .gm-product-media-strip h2 {
    font-family: var(--pd-title-font);
    font-size: 20px;
    margin: 0 0 14px;
}

.gm-product-detail-section .gm-product-media-strip > div {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.gm-product-detail-section .gm-product-media-strip figure {
    margin: 0;
}

.gm-product-detail-section .gm-product-media-strip img {
    aspect-ratio: 1 / 1;
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--pd-media-radius);
    box-shadow: var(--pd-media-shadow);
    display: block;
    object-fit: cover;
    width: 100%;
}

.gm-product-detail-section .gm-product-media-strip figcaption {
    color: var(--pd-text-color);
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Missing-product fallback ───────────────────────────────────── */
.gm-product-detail-section--missing {
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-product-detail-section .gm-product-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .gm-product-detail-section .gm-product-detail__title {
        font-size: 32px;
    }
    .gm-product-detail-section .gm-product-thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .gm-product-detail-section .gm-product-meta {
        grid-template-columns: 1fr;
    }
    .gm-product-detail-section .gm-product-meta dt {
        border-bottom: 0;
        padding-bottom: 2px;
    }
    .gm-product-detail-section .gm-product-meta dd {
        padding-top: 0;
    }
}

@media (max-width: 640px) {
    .gm-product-detail-section {
        padding: var(--pd-section-padding-block) 18px;
    }
}

/* getme-css-bundle:end css/commerce/sections/product-detail.css */


/* getme-css-bundle: css/commerce/sections/service-listing.css */
/* ════════════════════════════════════════════════════════════════════
   service-listing — section stylesheet (self-contained)

   Owner       : sections/service-listing.json + sections/service-listing.html
   Namespace   : --sl-*  (service-listing). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.gm-service-listing-section`.
   Editor      : Per-instance overrides via inline CSS variables in the
                 section's <section style=""> attribute. Editor uses
                 `css_vars_patch` to mutate them live.
   Token chain : --sl-<x>  →  var(--theme-<x>) / var(--gm-<x>).
   ════════════════════════════════════════════════════════════════════ */

.gm-service-listing-section {
    --sl-section-bg: transparent;
    --sl-text-color: var(--gm-text);
    --sl-title-color: var(--gm-text);
    --sl-kicker-color: var(--gm-primary);
    --sl-card-bg: #ffffff;
    --sl-card-border: var(--gm-border);
    --sl-price-color: var(--gm-text);
    --sl-button-bg: var(--gm-primary);
    --sl-button-text: #ffffff;
    --sl-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --sl-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --sl-section-padding-block: var(--theme-spacing-xl, 32px);
    --sl-grid-gap: var(--theme-spacing-lg, 24px);
    --sl-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 12px));
    --sl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --sl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --sl-body-font: var(--font-primary, sans-serif);
    --sl-grid-columns: 4;

    /* Flat, page-integrated listing — no card frame around the section. */
    background: var(--sl-section-bg);
    color: var(--sl-text-color);
    font-family: var(--sl-body-font);
    padding: var(--sl-section-padding-block) var(--gm-section-inline-padding);
}

/* ── Header ─────────────────────────────────────────────────────── */
.gm-service-listing-section__head { margin-bottom: 24px; }
.gm-service-listing-section__head .gm-kicker {
    color: var(--sl-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-service-listing-section__title {
    color: var(--sl-title-color);
    font-family: var(--sl-title-font);
    margin: 0 0 8px;
}
.gm-service-listing-section__intro { color: var(--sl-text-color); margin: 0; opacity: 0.85; max-width: 760px; }

/* ── Column / card-style / image modifiers ─────────────────────── */
.gm-service-listing-section--columns-2 { --sl-grid-columns: 2; }
.gm-service-listing-section--columns-3 { --sl-grid-columns: 3; }
.gm-service-listing-section--columns-4 { --sl-grid-columns: 4; }
.gm-service-listing-section--card-minimal .gm-service-listing-section__card { border: none; box-shadow: none; }
.gm-service-listing-section--card-elevated .gm-service-listing-section__card { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); }
.gm-service-listing-section--image-square .gm-service-listing-section__card img,
.gm-service-listing-section--image-square .gm-service-listing-section__placeholder { aspect-ratio: 1 / 1; }
.gm-service-listing-section--image-landscape .gm-service-listing-section__card img,
.gm-service-listing-section--image-landscape .gm-service-listing-section__placeholder { aspect-ratio: 4 / 3; }
.gm-service-listing-section--image-portrait .gm-service-listing-section__card img,
.gm-service-listing-section--image-portrait .gm-service-listing-section__placeholder { aspect-ratio: 3 / 4; }

/* Image fit — `contain` letterboxes the full artwork (logos) inside the
   ratio frame instead of cropping it like `cover`. */
.gm-service-listing-section--fit-contain .gm-service-listing-section__card img {
    background: var(--gm-media-surface);
    box-sizing: border-box;
    object-fit: contain;
    padding: 18px;
}

/* Content alignment — centered card body (matches featured-services). */
.gm-service-listing-section--align-center .gm-service-listing-section__body { align-items: center; text-align: center; }
.gm-service-listing-section--align-center .gm-service-listing-section__price-stack { justify-content: center; }
.gm-service-listing-section--align-center .gm-service-listing-section__actions { justify-items: center; }

/* ── Grid ───────────────────────────────────────────────────────── */
.gm-service-listing-section__grid {
    display: grid;
    gap: var(--sl-grid-gap);
    grid-template-columns: repeat(var(--sl-grid-columns), minmax(0, 1fr));
}

/* ── Card ───────────────────────────────────────────────────────── */
.gm-service-listing-section__card {
    background: var(--sl-card-bg);
    border: 1px solid var(--sl-card-border);
    border-radius: var(--sl-card-radius);
    box-shadow: var(--sl-card-shadow);
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-service-listing-section__badge {
    background: var(--sl-button-bg);
    border-radius: 999px;
    color: var(--sl-button-text);
    font-size: 11px;
    font-weight: 700;
    left: 12px;
    letter-spacing: 0.05em;
    padding: 4px 11px;
    position: absolute;
    text-transform: uppercase;
    top: 12px;
    z-index: 1;
}
.gm-service-listing-section__card:hover {
    border-color: color-mix(in srgb, var(--sl-button-bg) 35%, var(--sl-card-border));
    transform: translateY(-2px);
}
.gm-service-listing-section__card-link {
    color: var(--sl-text-color);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    text-decoration: none;
}

.gm-service-listing-section__card img,
.gm-service-listing-section__placeholder {
    background: var(--gm-media-surface);
    display: block;
    object-fit: cover;
    width: 100%;
}
.gm-service-listing-section__placeholder { background: linear-gradient(135deg, #eef2f7, #dbe3ef); }

.gm-service-listing-section__body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    padding: 18px;
}
.gm-service-listing-section__body h3 {
    color: var(--sl-title-color);
    font-family: var(--sl-title-font);
    font-size: 16px;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}
.gm-service-listing-section__body p {
    color: var(--sl-text-color);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0;
    opacity: 0.75;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.gm-service-listing-section__price-stack {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}
.gm-service-listing-section__price {
    color: var(--sl-price-color);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.gm-service-listing-section__compare-price {
    color: var(--gm-muted);
    font-size: 13px;
    text-decoration: line-through;
}
.gm-service-listing-section__price-stack small { color: var(--sl-text-color); font-size: 13px; opacity: 0.7; }

/* ── Actions ────────────────────────────────────────────────────── */
.gm-service-listing-section__actions {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}
.gm-service-listing-section__cta {
    align-items: center;
    background: var(--sl-button-bg);
    border: 1px solid var(--sl-button-bg);
    border-radius: var(--sl-button-radius);
    box-shadow: var(--sl-button-shadow);
    color: var(--sl-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    width: 100%;
}
.gm-service-listing-section__cta--secondary { background: transparent; color: var(--sl-button-bg); }
.gm-service-listing-section__cta:hover { filter: brightness(0.92); }
.gm-service-listing-section__cta:disabled,
.gm-service-listing-section__cta[aria-disabled="true"] { cursor: not-allowed; opacity: 0.68; }

/* ── Empty + current-category note ──────────────────────────────── */
.gm-service-listing-section__empty {
    color: var(--sl-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}
.gm-service-listing-section__category-note {
    border-top: 1px solid var(--gm-border);
    margin-top: 28px;
    padding-top: 20px;
}
.gm-service-listing-section__category-note h2 { font-family: var(--sl-title-font); font-size: 20px; margin: 0 0 10px; }
.gm-service-listing-section__category-note p { color: var(--sl-text-color); margin: 0; max-width: 760px; opacity: 0.85; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-service-listing-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-service-listing-section__grid { grid-template-columns: 1fr; }
}

/* getme-css-bundle:end css/commerce/sections/service-listing.css */


/* getme-css-bundle: css/commerce/sections/service-detail.css */
/* ════════════════════════════════════════════════════════════════════
   service-detail — section stylesheet (self-contained)

   Owner       : sections/service-detail.json + sections/service-detail.html
   Namespace   : --sd-*  (service-detail). Do NOT reuse for other sections.
   Scope       : Every rule starts with `.gm-service-detail-section`.
   Editor      : Per-instance overrides via inline CSS variables in the
                 section's <section style=""> attribute. Editor uses
                 `css_vars_patch` to mutate them live.
   Token chain : --sd-<x>  →  var(--theme-<x>) / var(--gm-<x>).
   ════════════════════════════════════════════════════════════════════ */

.gm-service-detail-section {
    /* Token chain — overridable by inline style on the section. */
    --sd-section-bg: transparent;
    --sd-text-color: var(--gm-text);
    --sd-title-color: var(--gm-text);
    --sd-kicker-color: var(--gm-muted);
    --sd-price-color: var(--gm-text);
    --sd-compare-color: var(--gm-muted);
    --sd-button-bg: var(--gm-primary);
    --sd-button-text: var(--gm-on-primary);
    --sd-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    --sd-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --sd-section-padding-block: var(--theme-spacing-3xl);
    --sd-content-gap: var(--theme-spacing-xl);
    --sd-media-radius: var(--theme-radius-lg);
    --sd-media-shadow: var(--theme-shadow-sm);
    --sd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --sd-body-font: var(--font-primary, sans-serif);

    /* Flat, page-integrated surface — no card frame around the section. */
    background: var(--sd-section-bg);
    border: none;
    border-radius: 0;
    color: var(--sd-text-color);
    font-family: var(--sd-body-font);
    padding: var(--sd-section-padding-block) var(--gm-section-inline-padding);
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__breadcrumb {
    color: var(--sd-text-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 6px;
    margin-bottom: 18px;
    opacity: 0.7;
}

.gm-service-detail-section .gm-service-detail__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.gm-service-detail-section .gm-service-detail__breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Layout: media + info ───────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__layout {
    display: grid;
    gap: var(--sd-content-gap);
    /* Media ~42% of the row — shared standard with product-detail. */
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.28fr);
}

.gm-service-detail-section .gm-service-detail__gallery,
.gm-service-detail-section .gm-service-detail__info {
    min-width: 0;
}

/* Keep the hero media in view while the info column scrolls —
   matches the storefront product-page reading pattern. */
.gm-service-detail-section .gm-service-detail__gallery {
    align-self: start;
    position: sticky;
    top: 24px;
}

/* ── Media ──────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__media {
    /* Frameless media — rounded image, no border/shadow box around it. */
    background: var(--gm-surface);
    border-radius: var(--sd-media-radius);
    overflow: hidden;
}

.gm-service-detail-section .gm-service-detail__media img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.gm-service-detail-section--image-landscape .gm-service-detail__media img { aspect-ratio: 4 / 3; }
.gm-service-detail-section--image-portrait .gm-service-detail__media img { aspect-ratio: 3 / 4; }
.gm-service-detail-section--image-auto .gm-service-detail__media img { aspect-ratio: auto; }

.gm-service-detail-section .gm-service-detail__media-placeholder {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    display: block;
    width: 100%;
}

/* ── Info column ────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__kicker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.gm-service-detail-section .gm-kicker {
    color: var(--sd-kicker-color);
    line-height: 1.4;
    /* Global .gm-kicker carries margin-bottom: 12px — inside the flex
       kicker row it breaks vertical centering against the badge. */
    margin: 0;
}

.gm-service-detail-section .gm-service-detail__badge {
    line-height: 1.4;
}

.gm-service-detail-section .gm-service-detail__badge {
    background: color-mix(in srgb, var(--sd-button-bg) 12%, transparent);
    border-radius: var(--theme-radius-pill, 999px);
    color: var(--sd-button-bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.gm-service-detail-section .gm-service-detail__title {
    color: var(--sd-title-color);
    font-family: var(--sd-title-font);
    font-size: 40px;
    line-height: 1.15;
    margin: 6px 0 12px;
    overflow-wrap: anywhere;
}

.gm-service-detail-section .gm-service-detail__summary {
    color: var(--sd-text-color);
    line-height: 1.65;
    margin: 0 0 16px;
    opacity: 0.85;
}

/* ── Price ──────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 8px;
}

.gm-service-detail-section .gm-service-detail__amount {
    color: var(--sd-price-color);
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.gm-service-detail-section .gm-service-detail__compare-price {
    color: var(--sd-compare-color);
    font-size: 15px;
    text-decoration: line-through;
}

.gm-service-detail-section .gm-service-detail__period {
    color: var(--sd-text-color);
    font-size: 15px;
    opacity: 0.7;
}

/* ── Availability badge ─────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__availability {
    align-items: center;
    color: var(--sd-text-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    margin: 0 0 8px;
    opacity: 0.85;
}

.gm-service-detail-section .gm-service-detail__availability-dot {
    background: var(--gm-muted);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.gm-service-detail-section .gm-service-detail__availability.is-available .gm-service-detail__availability-dot {
    background: #16a34a;
}

/* ── Actions ────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__actions {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.gm-service-detail-section .gm-service-detail__cta {
    align-items: center;
    background: var(--sd-button-bg);
    border: 1px solid var(--sd-button-bg);
    border-radius: var(--sd-button-radius);
    box-shadow: var(--sd-button-shadow);
    color: var(--sd-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    text-decoration: none;
    transition: filter 160ms ease;
    width: 100%;
}

.gm-service-detail-section .gm-service-detail__cta:hover {
    filter: brightness(0.92);
}

.gm-service-detail-section .gm-service-detail__cta--secondary {
    background: transparent;
    color: var(--sd-button-bg);
}

.gm-service-detail-section .gm-service-detail__cta:disabled,
.gm-service-detail-section .gm-service-detail__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Tags ───────────────────────────────────────────────────────── */
.gm-service-detail-section .gm-service-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.gm-service-detail-section .gm-service-detail__tags li {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-pill, 999px);
    color: var(--sd-text-color);
    font-size: 13px;
    opacity: 0.85;
    padding: 4px 12px;
}

/* ── Content sections (description / features) — info column ────── */
.gm-service-detail-section .gm-service-detail__section {
    border-top: 1px solid var(--gm-border);
    margin-top: 24px;
    padding-top: 20px;
}

.gm-service-detail-section .gm-service-detail__section h2 {
    font-family: var(--sd-title-font);
    font-size: 18px;
    margin: 0 0 12px;
}

.gm-service-detail-section .gm-rich-text {
    color: var(--sd-text-color);
    font-size: 15px;
    line-height: 1.7;
}

.gm-service-detail-section .gm-rich-text p:first-child {
    margin-top: 0;
}

.gm-service-detail-section .gm-service-detail__description-text {
    color: var(--sd-text-color);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.gm-service-detail-section .gm-service-detail__features {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-service-detail-section .gm-service-detail__features li {
    align-items: flex-start;
    color: var(--sd-text-color);
    display: flex;
    font-size: 15px;
    gap: 10px;
    line-height: 1.55;
}

.gm-service-detail-section .gm-service-detail__features svg {
    color: var(--sd-button-bg);
    flex-shrink: 0;
    height: 18px;
    margin-top: 2px;
    width: 18px;
}

/* ── Missing-service fallback ───────────────────────────────────── */
.gm-service-detail-section--missing {
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-service-detail-section .gm-service-detail__layout {
        grid-template-columns: 1fr;
    }
    .gm-service-detail-section .gm-service-detail__gallery {
        position: static;
    }
}

@media (max-width: 760px) {
    .gm-service-detail-section .gm-service-detail__title {
        font-size: 32px;
    }
}

@media (max-width: 640px) {
    .gm-service-detail-section {
        padding: var(--sd-section-padding-block) 18px;
    }
}

/* getme-css-bundle:end css/commerce/sections/service-detail.css */


/* getme-css-bundle: css/commerce/sections/related-items.css */
/* Shared related commerce cards for product and service detail pages. */
.gm-related-items {
    border-top: 1px solid var(--gm-border);
    margin-top: clamp(32px, 5vw, 72px);
    padding-top: clamp(24px, 4vw, 44px);
}

.gm-related-items__head {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.gm-related-items__head h2 {
    color: var(--pd-title-color, var(--sd-title-color, var(--gm-text)));
    font-family: var(--pd-title-font, var(--sd-title-font, var(--font-heading, inherit)));
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
    margin: 0;
}

.gm-related-items__head p {
    color: var(--gm-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-width: 680px;
}

.gm-related-items__grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gm-related-card {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-card-radius, var(--theme-radius-lg, 16px));
    box-shadow: var(--theme-card-shadow, none);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-related-card:hover {
    border-color: color-mix(in srgb, var(--gm-primary) 32%, var(--gm-border));
    box-shadow: var(--theme-shadow-md, 0 12px 28px rgba(15, 23, 42, 0.1));
    transform: translateY(-2px);
}

.gm-related-card__link {
    color: inherit;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-decoration: none;
}

.gm-related-card__media {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: var(--gm-media-surface);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.gm-related-card--product .gm-related-card__media {
    aspect-ratio: 1 / 1;
}

.gm-related-card__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gm-related-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 14px;
    text-align: center;
}

.gm-related-card__kicker {
    color: var(--gm-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: uppercase;
}

.gm-related-card__title {
    color: var(--gm-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    min-height: 2.7em;
}

.gm-related-card__summary {
    color: var(--gm-muted);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.45;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gm-related-card__price {
    color: var(--pd-price-color, var(--sd-price-color, var(--gm-text)));
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: auto;
}

.gm-related-card__price small {
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 500;
    margin-left: 4px;
}

.gm-related-card__actions {
    display: grid;
    gap: 10px;
    padding: 0 18px 18px;
}

.gm-related-card__cta {
    align-items: center;
    appearance: none;
    background: var(--pd-button-bg, var(--sd-button-bg, var(--gm-primary)));
    border: 1px solid transparent;
    border-radius: var(--theme-button-radius, var(--theme-radius-md, 12px));
    color: var(--pd-button-text, var(--sd-button-text, var(--gm-on-primary)));
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 44px;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    width: 100%;
}

.gm-related-card__cta:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(0.97);
    transform: translateY(-1px);
}

.gm-related-card__cta--secondary {
    background: transparent;
    border-color: var(--pd-button-bg, var(--sd-button-bg, var(--gm-primary)));
    color: var(--pd-button-bg, var(--sd-button-bg, var(--gm-primary)));
}

.gm-related-card__cta:disabled,
.gm-related-card__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 640px) {
    .gm-related-items__grid {
        grid-template-columns: 1fr;
    }
}

/* getme-css-bundle:end css/commerce/sections/related-items.css */


/* getme-css-bundle: css/commerce/sections/category-listing.css */
/* ════════════════════════════════════════════════════════════════════
   category-listing — section stylesheet (self-contained)

   Owner       : sections/category-listing.json + .html
   Namespace   : --cl-* (category-listing). Unique to this section.
   Scope       : Every rule starts with `.gm-category-listing-section`.
   Editor      : Inline CSS variables on the <section> via the template.
                 `css_vars_patch` previews mutate them live.
   ════════════════════════════════════════════════════════════════════ */

.gm-category-listing-section {
    --cl-section-bg: transparent;
    --cl-text-color: var(--gm-text);
    --cl-title-color: var(--gm-text);
    --cl-kicker-color: var(--gm-muted);
    --cl-card-bg: #ffffff;
    --cl-card-border: var(--gm-border);
    --cl-card-text: var(--gm-text);
    --cl-card-meta: var(--gm-muted);
    --cl-button-bg: var(--gm-primary);
    --cl-button-text: #ffffff;
    --cl-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --cl-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --cl-section-padding-block: var(--theme-spacing-xl, 32px);
    --cl-grid-gap: var(--theme-spacing-lg, 24px);
    --cl-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 12px));
    --cl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --cl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --cl-body-font: var(--font-primary, sans-serif);
    --cl-grid-columns: 3;

    /* Flat, page-integrated listing — shared standard with product/service listing. */
    background: var(--cl-section-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--cl-text-color);
    font-family: var(--cl-body-font);
    padding: var(--cl-section-padding-block) var(--gm-section-inline-padding);
}

.gm-category-listing-section__head { margin-bottom: 24px; }
.gm-category-listing-section__title {
    color: var(--cl-title-color);
    font-family: var(--cl-title-font);
    margin: 4px 0 8px;
}
.gm-category-listing-section .gm-kicker { color: var(--cl-kicker-color); }
.gm-category-listing-section__intro { color: var(--cl-text-color); opacity: 0.85; }
.gm-category-listing-section__empty {
    color: var(--cl-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

/* Modifiers ── columns / card / image / hover */
.gm-category-listing-section--columns-2 { --cl-grid-columns: 2; }
.gm-category-listing-section--columns-3 { --cl-grid-columns: 3; }
.gm-category-listing-section--columns-4 { --cl-grid-columns: 4; }
.gm-category-listing-section--card-minimal { border: none; box-shadow: none; }
.gm-category-listing-section--card-elevated .gm-category-card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.gm-category-listing-section--image-landscape .gm-category-card img,
.gm-category-listing-section--image-landscape .gm-category-image-placeholder { aspect-ratio: 4 / 3; }
.gm-category-listing-section--image-portrait .gm-category-card img,
.gm-category-listing-section--image-portrait .gm-category-image-placeholder { aspect-ratio: 3 / 4; }
.gm-category-listing-section--image-tall .gm-category-card img,
.gm-category-listing-section--image-tall .gm-category-image-placeholder { aspect-ratio: 2 / 3; }

.gm-category-listing-section--hover-border .gm-category-card:hover {
    box-shadow: none;
    transform: none;
}
.gm-category-listing-section--hover-none .gm-category-card:hover {
    border-color: var(--cl-card-border);
    box-shadow: none;
    transform: none;
}
.gm-category-listing-section--hover-zoom .gm-category-card img { transition: transform 240ms ease; }
.gm-category-listing-section--hover-zoom .gm-category-card:hover img { transform: scale(1.04); }

/* Grid */
.gm-category-listing-section .gm-category-grid {
    display: grid;
    gap: var(--cl-grid-gap);
    grid-template-columns: repeat(var(--cl-grid-columns), minmax(0, 1fr));
}

/* Card */
.gm-category-listing-section .gm-category-card {
    background: var(--cl-card-bg);
    border: 1px solid var(--cl-card-border);
    border-radius: var(--cl-card-radius);
    box-shadow: var(--cl-card-shadow);
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-category-listing-section .gm-category-card:hover {
    border-color: color-mix(in srgb, var(--cl-button-bg) 35%, var(--cl-card-border));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}

.gm-category-listing-section .gm-category-card__link {
    color: var(--cl-card-text);
    display: grid;
    grid-template-rows: auto auto auto auto;
    min-height: 100%;
    text-decoration: none;
}

.gm-category-listing-section .gm-category-card__image,
.gm-category-listing-section .gm-category-image-placeholder {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
}

.gm-category-listing-section .gm-category-card__image {
    background: var(--gm-media-surface);
    height: auto;
    object-fit: cover;
}

.gm-category-listing-section .gm-category-image-placeholder {
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
}

.gm-category-listing-section .gm-category-card__meta {
    color: var(--cl-card-meta);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    padding: 14px 14px 0;
    text-transform: uppercase;
}

.gm-category-listing-section .gm-category-card__count,
.gm-category-listing-section .gm-category-card__locale {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-category-listing-section .gm-category-card__name {
    color: var(--cl-card-text);
    font-family: var(--cl-title-font);
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 14px 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-category-listing-section .gm-category-card__description {
    color: var(--cl-card-text);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 18px 0;
    opacity: 0.7;
    overflow: hidden;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gm-category-listing-section .gm-category-card__actions {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.gm-category-listing-section .gm-category-card__cta {
    align-items: center;
    background: var(--cl-button-bg);
    border: 1px solid var(--cl-button-bg);
    border-radius: var(--cl-button-radius);
    box-shadow: var(--cl-button-shadow);
    color: var(--cl-button-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.gm-category-listing-section .gm-category-card__cta:hover { filter: brightness(0.92); }

@media (max-width: 980px) {
    .gm-category-listing-section .gm-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .gm-category-listing-section .gm-category-grid {
        grid-template-columns: 1fr;
    }
    .gm-category-listing-section {
        padding: var(--cl-section-padding-block) var(--gm-section-inline-padding);
    }
}

/* getme-css-bundle:end css/commerce/sections/category-listing.css */


/* getme-css-bundle: css/commerce/sections/category-detail.css */
/* ════════════════════════════════════════════════════════════════════
   category-detail — section stylesheet (self-contained)

   Owner       : sections/category-detail.json + .html
   Namespace   : --cd-* (category-detail). Unique to this section.
   Scope       : Every rule starts with `.gm-category-detail-section`.
   ════════════════════════════════════════════════════════════════════ */

.gm-category-detail-section {
    --cd-section-bg: transparent;
    --cd-text-color: var(--gm-text);
    --cd-title-color: var(--gm-text);
    --cd-kicker-color: var(--gm-muted);
    --cd-card-bg: #ffffff;
    --cd-card-border: var(--gm-border);
    --cd-card-meta: var(--gm-muted);
    --cd-button-bg: var(--gm-primary);
    --cd-button-text: #ffffff;
    --cd-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --cd-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --cd-section-padding-block: var(--theme-spacing-3xl, 64px);
    --cd-content-gap: var(--theme-spacing-xl, 32px);
    --cd-media-radius: var(--theme-radius-lg, 12px);
    --cd-media-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --cd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --cd-body-font: var(--font-primary, sans-serif);
    --cd-product-media-ratio: 1 / 1;
    --cd-product-card-max-width: 280px;

    /* Flat, page-integrated collection page — shared standard with detail pages. */
    background: var(--cd-section-bg);
    border: none;
    border-radius: 0;
    color: var(--cd-text-color);
    font-family: var(--cd-body-font);
    padding: var(--cd-section-padding-block) var(--gm-section-inline-padding);
}

.gm-category-detail-section .gm-category-detail {
    display: grid;
    gap: var(--cd-content-gap);
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
}

.gm-category-detail-section--layout-stacked .gm-category-detail,
.gm-category-detail-section--layout-wide_hero .gm-category-detail {
    grid-template-columns: 1fr;
}

.gm-category-detail-section--layout-wide_hero .gm-category-detail__gallery {
    width: 100%;
}

.gm-category-detail-section .gm-category-detail__gallery { min-width: 0; }

.gm-category-detail-section .gm-category-detail__media {
    /* Frameless hero media — rounded image on the shared media surface, no box. */
    background: var(--gm-media-surface);
    border-radius: var(--cd-media-radius);
    box-shadow: var(--cd-media-shadow);
    overflow: hidden;
}

.gm-category-detail-section .gm-category-detail__media img {
    aspect-ratio: 4 / 3;
    display: block;
    height: min(42vw, 420px);
    object-fit: contain;
    width: 100%;
}

.gm-category-detail-section--image-square .gm-category-detail__media img { aspect-ratio: 1 / 1; }
.gm-category-detail-section--image-portrait .gm-category-detail__media img { aspect-ratio: 3 / 4; }
.gm-category-detail-section--image-auto .gm-category-detail__media img { aspect-ratio: auto; }

.gm-category-detail-section .gm-category-detail__image-placeholder {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    display: block;
    width: 100%;
}

.gm-category-detail-section .gm-category-detail__body { min-width: 0; }
.gm-category-detail-section .gm-kicker { color: var(--cd-kicker-color); }
.gm-category-detail-section .gm-category-detail__title {
    color: var(--cd-title-color);
    font-family: var(--cd-title-font);
    font-size: 40px;
    line-height: 1.15;
    margin: 6px 0 12px;
    overflow-wrap: anywhere;
}

.gm-category-detail-section .gm-category-detail__summary {
    color: var(--cd-text-color);
    line-height: 1.65;
    margin: 0 0 16px;
    opacity: 0.85;
}

.gm-category-detail-section .gm-category-detail__count {
    color: var(--cd-card-meta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 16px 0 0;
    text-transform: uppercase;
}

.gm-category-detail-section .gm-category-detail__description,
.gm-category-detail-section .gm-category-detail__seo,
.gm-category-detail-section .gm-category-detail__products {
    border-top: 1px solid var(--gm-border);
    margin-top: 28px;
    padding-top: 24px;
}

.gm-category-detail-section .gm-category-detail__description h2,
.gm-category-detail-section .gm-category-detail__seo h2,
.gm-category-detail-section .gm-category-detail__products h2 {
    color: var(--cd-title-color);
    font-family: var(--cd-title-font);
    font-size: 20px;
    margin: 0 0 14px;
}

.gm-category-detail-section .gm-rich-text {
    color: var(--cd-text-color);
    line-height: 1.75;
    max-width: 760px;
}
.gm-category-detail-section .gm-rich-text p:first-child { margin-top: 0; }

/* ── Embedded product grid (scoped) ────────────────────────────── */
.gm-category-detail-section .gm-category-detail__product-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), var(--cd-product-card-max-width)));
    justify-content: start;
}

.gm-category-detail-section .gm-category-detail__product-card {
    align-items: stretch;
    background: var(--cd-card-bg);
    border: 1px solid var(--cd-card-border);
    border-radius: var(--cd-media-radius);
    box-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-category-detail-section .gm-category-detail__product-card:hover {
    border-color: color-mix(in srgb, var(--cd-button-bg) 35%, var(--cd-card-border));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.gm-category-detail-section .gm-category-detail__product-link {
    color: var(--cd-text-color);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    text-decoration: none;
}

.gm-category-detail-section .gm-category-detail__product-image,
.gm-category-detail-section .gm-category-detail__product-placeholder {
    background: var(--gm-media-surface);
    display: block;
    flex: 0 0 auto;
    width: 100%;
}

.gm-category-detail-section .gm-category-detail__product-image {
    aspect-ratio: var(--cd-product-media-ratio);
    height: auto;
    object-fit: contain;
    padding: clamp(10px, 3vw, 18px);
}

.gm-category-detail-section .gm-category-detail__product-placeholder {
    aspect-ratio: var(--cd-product-media-ratio);
    width: 100%;
}

.gm-category-detail-section .gm-category-detail__product-placeholder {
    background: var(--gm-media-surface);
}

.gm-category-detail-section .gm-category-detail__product-meta {
    color: var(--cd-card-meta);
    display: block;
    font-size: 11px;
    font-weight: 700;
    padding: 14px 18px 0;
    text-transform: uppercase;
}

.gm-category-detail-section .gm-category-detail__product-card h3 {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cd-text-color);
    display: -webkit-box;
    font-family: var(--cd-title-font);
    font-size: 16px;
    line-height: 1.3;
    margin: 12px 16px 0;
    max-height: calc(1.3em * 2);
    min-height: calc(1.3em * 2);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-category-detail-section .gm-category-detail__product-price-stack {
    align-content: center;
    color: var(--cd-text-color);
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: auto 16px 14px;
    min-height: 54px;
    padding-top: 12px;
}

.gm-category-detail-section .gm-category-detail__product-price {
    color: var(--cd-text-color);
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.gm-category-detail-section .gm-category-detail__product-compare-price {
    color: var(--cd-card-meta);
    font-size: 13px;
    text-decoration: line-through;
}

.gm-category-detail-section .gm-category-detail__product-actions {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    grid-auto-rows: minmax(40px, auto);
    padding: 0 16px 16px;
}

.gm-category-detail-section .gm-category-detail__product-action-primary,
.gm-category-detail-section .gm-category-detail__product-action-secondary {
    align-items: center;
    border-radius: var(--cd-button-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    width: 100%;
}

.gm-category-detail-section .gm-category-detail__product-action-primary {
    background: var(--cd-button-bg);
    border: 1px solid var(--cd-button-bg);
    box-shadow: var(--cd-button-shadow);
    color: var(--cd-button-text);
}

.gm-category-detail-section .gm-category-detail__product-action-primary:hover:not([disabled]) {
    filter: brightness(0.92);
}

.gm-category-detail-section .gm-category-detail__product-action-secondary {
    background: var(--gm-surface);
    border: 1px solid var(--cd-button-bg);
    color: var(--cd-button-bg);
}

.gm-category-detail-section .gm-category-detail__product-action-secondary:hover:not([disabled]) {
    background: color-mix(in srgb, var(--cd-button-bg) 8%, var(--gm-surface));
}

.gm-category-detail-section .gm-category-detail__product-action-primary[disabled],
.gm-category-detail-section .gm-category-detail__product-action-secondary[disabled],
.gm-category-detail-section .gm-category-detail__product-action-primary[aria-disabled="true"],
.gm-category-detail-section .gm-category-detail__product-action-secondary[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

.gm-category-detail-section .gm-category-detail__empty {
    color: var(--cd-text-color);
    opacity: 0.7;
    padding: 12px;
}

.gm-category-detail-section--missing { text-align: center; }

@media (max-width: 980px) {
    .gm-category-detail-section .gm-category-detail { grid-template-columns: 1fr; }
    .gm-category-detail-section .gm-category-detail__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gm-category-detail-section { padding: var(--cd-section-padding-block) 18px; }
    .gm-category-detail-section .gm-category-detail__product-grid { grid-template-columns: 1fr; }
    .gm-category-detail-section .gm-category-detail__title { font-size: 32px; }
    .gm-category-detail-section .gm-category-detail__meta { grid-template-columns: 1fr; }
}

/* getme-css-bundle:end css/commerce/sections/category-detail.css */


/* getme-css-bundle: css/commerce/sections/brand-listing.css */
/* ════════════════════════════════════════════════════════════════════
   brand-listing — section stylesheet (self-contained)

   Owner       : sections/brand-listing.json + .html
   Namespace   : --bl-* (brand-listing). Unique to this section.
   Scope       : Every rule starts with `.gm-brand-listing-section`.

   Note: the LEGACY .gm-brand-section class still exists in
   commerce/listings.css for non-section-based brand listings. The two
   class names intentionally differ so the legacy path keeps working
   during migration.
   ════════════════════════════════════════════════════════════════════ */

.gm-brand-listing-section {
    --bl-section-bg: transparent;
    --bl-text-color: var(--gm-text);
    --bl-title-color: var(--gm-text);
    --bl-kicker-color: var(--gm-muted);
    --bl-card-bg: #ffffff;
    --bl-card-border: var(--gm-border);
    --bl-card-text: var(--gm-text);
    --bl-card-meta: var(--gm-muted);
    --bl-button-bg: var(--gm-primary);
    --bl-button-text: #ffffff;
    --bl-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --bl-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --bl-section-padding-block: var(--theme-spacing-xl, 32px);
    --bl-grid-gap: var(--theme-spacing-lg, 24px);
    --bl-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 12px));
    --bl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --bl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --bl-body-font: var(--font-primary, sans-serif);
    --bl-grid-columns: 3;

    /* Flat, page-integrated listing — shared standard with product/service/category listing. */
    background: var(--bl-section-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--bl-text-color);
    font-family: var(--bl-body-font);
    padding: var(--bl-section-padding-block) var(--gm-section-inline-padding);
}

.gm-brand-listing-section__head { margin-bottom: 24px; }
.gm-brand-listing-section__title {
    color: var(--bl-title-color);
    font-family: var(--bl-title-font);
    margin: 4px 0 8px;
}
.gm-brand-listing-section .gm-kicker { color: var(--bl-kicker-color); }
.gm-brand-listing-section__intro { color: var(--bl-text-color); opacity: 0.85; }
.gm-brand-listing-section__empty {
    color: var(--bl-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

/* Modifiers */
.gm-brand-listing-section--columns-2 { --bl-grid-columns: 2; }
.gm-brand-listing-section--columns-3 { --bl-grid-columns: 3; }
.gm-brand-listing-section--columns-4 { --bl-grid-columns: 4; }
.gm-brand-listing-section--card-minimal { border: none; box-shadow: none; }
.gm-brand-listing-section--card-elevated .gm-brand-listing-section__card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.gm-brand-listing-section--image-landscape .gm-brand-listing-section__card-image,
.gm-brand-listing-section--image-landscape .gm-brand-listing-section__placeholder { aspect-ratio: 4 / 3; }
.gm-brand-listing-section--image-portrait .gm-brand-listing-section__card-image,
.gm-brand-listing-section--image-portrait .gm-brand-listing-section__placeholder { aspect-ratio: 3 / 4; }

.gm-brand-listing-section--hover-border .gm-brand-listing-section__card:hover {
    box-shadow: none;
    transform: none;
}
.gm-brand-listing-section--hover-none .gm-brand-listing-section__card:hover {
    border-color: var(--bl-card-border);
    box-shadow: none;
    transform: none;
}
.gm-brand-listing-section--hover-zoom .gm-brand-listing-section__card-image { transition: transform 240ms ease; }
.gm-brand-listing-section--hover-zoom .gm-brand-listing-section__card:hover .gm-brand-listing-section__card-image {
    transform: scale(1.04);
}

/* Grid + card */
.gm-brand-listing-section .gm-brand-listing-section__grid {
    display: grid;
    gap: var(--bl-grid-gap);
    grid-template-columns: repeat(var(--bl-grid-columns), minmax(0, 1fr));
}

.gm-brand-listing-section .gm-brand-listing-section__card {
    background: var(--bl-card-bg);
    border: 1px solid var(--bl-card-border);
    border-radius: var(--bl-card-radius);
    box-shadow: var(--bl-card-shadow);
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-brand-listing-section .gm-brand-listing-section__card:hover {
    border-color: color-mix(in srgb, var(--bl-button-bg) 35%, var(--bl-card-border));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}

.gm-brand-listing-section .gm-brand-listing-section__card-link {
    color: var(--bl-card-text);
    display: grid;
    grid-template-rows: auto auto auto auto;
    min-height: 100%;
    text-decoration: none;
}

.gm-brand-listing-section .gm-brand-listing-section__card-image,
.gm-brand-listing-section .gm-brand-listing-section__placeholder {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
}

.gm-brand-listing-section .gm-brand-listing-section__card-image {
    background: var(--gm-media-surface);
    height: auto;
    object-fit: cover;
}

.gm-brand-listing-section .gm-brand-listing-section__placeholder {
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
}

.gm-brand-listing-section .gm-brand-listing-section__card-meta {
    color: var(--bl-card-meta);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    padding: 14px 14px 0;
    text-align: center;
    text-transform: uppercase;
}

.gm-brand-listing-section .gm-brand-listing-section__card-name {
    color: var(--bl-card-text);
    font-family: var(--bl-title-font);
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 14px 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-brand-listing-section .gm-brand-listing-section__card-description {
    color: var(--bl-card-text);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 18px 0;
    opacity: 0.7;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gm-brand-listing-section .gm-brand-listing-section__card-actions {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.gm-brand-listing-section .gm-brand-listing-section__card-cta {
    align-items: center;
    background: var(--bl-button-bg);
    border: 1px solid var(--bl-button-bg);
    border-radius: var(--bl-button-radius);
    box-shadow: var(--bl-button-shadow);
    color: var(--bl-button-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.gm-brand-listing-section .gm-brand-listing-section__card-cta:hover { filter: brightness(0.92); }

@media (max-width: 980px) {
    .gm-brand-listing-section .gm-brand-listing-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .gm-brand-listing-section .gm-brand-listing-section__grid {
        grid-template-columns: 1fr;
    }
    .gm-brand-listing-section {
        padding: var(--bl-section-padding-block) var(--gm-section-inline-padding);
    }
}

/* getme-css-bundle:end css/commerce/sections/brand-listing.css */


/* getme-css-bundle: css/commerce/sections/brand-detail.css */
/* ════════════════════════════════════════════════════════════════════
   brand-detail — section stylesheet (self-contained)

   Owner       : sections/brand-detail.json + .html
   Namespace   : --bd-* (brand-detail). Unique to this section.
   Scope       : Every rule starts with `.gm-brand-detail-section`.
   ════════════════════════════════════════════════════════════════════ */

.gm-brand-detail-section {
    --bd-section-bg: transparent;
    --bd-text-color: var(--gm-text);
    --bd-title-color: var(--gm-text);
    --bd-kicker-color: var(--gm-muted);
    --bd-card-bg: #ffffff;
    --bd-card-border: var(--gm-border);
    --bd-card-meta: var(--gm-muted);
    --bd-button-bg: var(--gm-primary);
    --bd-button-text: #ffffff;
    --bd-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --bd-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --bd-section-padding-block: var(--theme-spacing-3xl, 64px);
    --bd-content-gap: var(--theme-spacing-xl, 32px);
    --bd-media-radius: var(--theme-radius-lg, 12px);
    --bd-media-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --bd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --bd-body-font: var(--font-primary, sans-serif);

    /* Flat, page-integrated brand page — shared standard with detail pages. */
    background: var(--bd-section-bg);
    border: none;
    border-radius: 0;
    color: var(--bd-text-color);
    font-family: var(--bd-body-font);
    padding: var(--bd-section-padding-block) var(--gm-section-inline-padding);
}

.gm-brand-detail-section .gm-brand-detail-section__hero {
    display: grid;
    gap: var(--bd-content-gap);
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
}

.gm-brand-detail-section--layout-stacked .gm-brand-detail-section__hero,
.gm-brand-detail-section--layout-wide_hero .gm-brand-detail-section__hero {
    grid-template-columns: 1fr;
}

.gm-brand-detail-section--layout-wide_hero .gm-brand-detail-section__gallery {
    width: 100%;
}

.gm-brand-detail-section .gm-brand-detail-section__gallery { min-width: 0; }

.gm-brand-detail-section .gm-brand-detail-section__media {
    /* Frameless hero media — rounded image on the shared media surface, no box. */
    background: var(--gm-media-surface);
    border-radius: var(--bd-media-radius);
    overflow: hidden;
}

.gm-brand-detail-section .gm-brand-detail-section__media img {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.gm-brand-detail-section--image-square .gm-brand-detail-section__media img { aspect-ratio: 1 / 1; }
.gm-brand-detail-section--image-portrait .gm-brand-detail-section__media img { aspect-ratio: 3 / 4; }
.gm-brand-detail-section--image-auto .gm-brand-detail-section__media img { aspect-ratio: auto; }

.gm-brand-detail-section .gm-brand-detail-section__image-placeholder {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    display: block;
    width: 100%;
}

.gm-brand-detail-section .gm-brand-detail-section__body { min-width: 0; }
.gm-brand-detail-section .gm-kicker { color: var(--bd-kicker-color); }
.gm-brand-detail-section .gm-brand-detail-section__title {
    color: var(--bd-title-color);
    font-family: var(--bd-title-font);
    font-size: 40px;
    line-height: 1.15;
    margin: 6px 0 12px;
    overflow-wrap: anywhere;
}

.gm-brand-detail-section .gm-brand-detail-section__summary {
    color: var(--bd-text-color);
    line-height: 1.65;
    margin: 0 0 16px;
    opacity: 0.85;
}

.gm-brand-detail-section .gm-brand-detail-section__count {
    color: var(--bd-card-meta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 16px 0 0;
    text-transform: uppercase;
}

.gm-brand-detail-section .gm-brand-detail-section__description,
.gm-brand-detail-section .gm-brand-detail-section__products {
    border-top: 1px solid var(--gm-border);
    margin-top: 28px;
    padding-top: 24px;
}

.gm-brand-detail-section .gm-brand-detail-section__description h2,
.gm-brand-detail-section .gm-brand-detail-section__products h2 {
    color: var(--bd-title-color);
    font-family: var(--bd-title-font);
    font-size: 20px;
    margin: 0 0 14px;
}

.gm-brand-detail-section .gm-rich-text {
    color: var(--bd-text-color);
    line-height: 1.75;
    max-width: 760px;
}
.gm-brand-detail-section .gm-rich-text p:first-child { margin-top: 0; }

/* ── Embedded product grid (scoped) ────────────────────────────── */
.gm-brand-detail-section .gm-brand-detail-section__product-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gm-brand-detail-section .gm-brand-detail-section__product-card {
    background: var(--bd-card-bg);
    border: 1px solid var(--bd-card-border);
    border-radius: var(--bd-media-radius);
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-brand-detail-section .gm-brand-detail-section__product-card:hover {
    border-color: color-mix(in srgb, var(--bd-button-bg) 35%, var(--bd-card-border));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.gm-brand-detail-section .gm-brand-detail-section__product-card a {
    color: var(--bd-text-color);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    text-decoration: none;
}

.gm-brand-detail-section .gm-brand-detail-section__product-card img,
.gm-brand-detail-section .gm-brand-detail-section__product-placeholder {
    aspect-ratio: 1 / 1;
    background: var(--gm-media-surface);
    display: block;
    object-fit: cover;
    width: 100%;
}

.gm-brand-detail-section .gm-brand-detail-section__product-placeholder {
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
}

.gm-brand-detail-section .gm-brand-detail-section__product-meta {
    color: var(--bd-card-meta);
    display: block;
    font-size: 11px;
    font-weight: 700;
    padding: 14px 14px 0;
    text-transform: uppercase;
}

.gm-brand-detail-section .gm-brand-detail-section__product-card h3 {
    color: var(--bd-text-color);
    font-family: var(--bd-title-font);
    font-size: 16px;
    line-height: 1.3;
    margin: 16px 18px 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-brand-detail-section .gm-brand-detail-section__product-price {
    color: var(--bd-text-color);
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin: auto 18px 16px;
    padding-top: 12px;
    text-align: center;
}

.gm-brand-detail-section .gm-brand-detail-section__product-actions {
    padding: 0 18px 18px;
}

.gm-brand-detail-section .gm-brand-detail-section__product-cta {
    align-items: center;
    background: var(--bd-button-bg);
    border: 1px solid var(--bd-button-bg);
    border-radius: var(--bd-button-radius);
    box-shadow: var(--bd-button-shadow);
    color: var(--bd-button-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    width: 100%;
}

.gm-brand-detail-section .gm-brand-detail-section__product-cta:hover { filter: brightness(0.92); }

.gm-brand-detail-section .gm-brand-detail-section__empty {
    color: var(--bd-text-color);
    opacity: 0.7;
    padding: 12px;
}

.gm-brand-detail-section--missing { text-align: center; }

@media (max-width: 980px) {
    .gm-brand-detail-section .gm-brand-detail-section__hero { grid-template-columns: 1fr; }
    .gm-brand-detail-section .gm-brand-detail-section__product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gm-brand-detail-section { padding: var(--bd-section-padding-block) 18px; }
    .gm-brand-detail-section .gm-brand-detail-section__product-grid { grid-template-columns: 1fr; }
    .gm-brand-detail-section .gm-brand-detail-section__title { font-size: 32px; }
    .gm-brand-detail-section .gm-brand-detail-section__meta { grid-template-columns: 1fr; }
}

/* getme-css-bundle:end css/commerce/sections/brand-detail.css */

/* Editorial data sections */

/* getme-css-bundle: css/content/sections/blog.css */
.gm-blog-listing-section,
.gm-blog-post-section {
    --bl-section-bg: transparent;
    --bl-text-color: var(--gm-text);
    --bl-title-color: var(--gm-text);
    --bl-kicker-color: var(--gm-primary);
    --bl-card-bg: var(--gm-surface);
    --bl-card-border: var(--gm-border);
    --bl-link-color: var(--gm-primary-dark, var(--gm-primary));
    --bl-section-padding-block: var(--theme-spacing-3xl, 56px);
    --bl-grid-gap: var(--theme-spacing-lg, 24px);
    --bl-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 8px));
    --bl-card-shadow: var(--theme-shadow-sm, none);
    --bl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --bl-body-font: var(--font-primary, sans-serif);
    color: var(--bl-text-color);
    font-family: var(--bl-body-font);
}

.gm-blog-listing-section {
    background: var(--bl-section-bg);
    padding-block: var(--bl-section-padding-block);
}

.gm-blog-listing-section__head,
.gm-blog-post-section__header {
    max-width: 760px;
    margin: 0 auto var(--theme-spacing-xl, 32px);
    text-align: center;
}

.gm-blog-listing-section__title,
.gm-blog-post-section__title {
    margin: 0;
    color: var(--bl-title-color);
    font-family: var(--bl-title-font);
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.08;
}

.gm-blog-listing-section__intro,
.gm-blog-post-section__excerpt {
    margin: 14px auto 0;
    max-width: 640px;
    color: var(--gm-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.gm-blog-listing-section__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 var(--theme-spacing-xl, 32px);
}

.gm-blog-listing-section__filter,
.gm-blog-listing-section__pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--bl-card-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    background: var(--bl-card-bg);
    color: var(--gm-muted);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none;
}

.gm-blog-listing-section__filter:hover,
.gm-blog-listing-section__filter.is-active,
.gm-blog-listing-section__pagination a[aria-current="page"] {
    border-color: var(--gm-primary);
    color: var(--bl-link-color);
}

.gm-blog-listing-section__grid {
    display: grid;
    gap: var(--bl-grid-gap);
}

.gm-blog-listing-section--columns-2 .gm-blog-listing-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-blog-listing-section--columns-3 .gm-blog-listing-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gm-blog-listing-section--columns-4 .gm-blog-listing-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gm-blog-listing-section__card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bl-card-border);
    border-radius: var(--bl-card-radius);
    background: var(--bl-card-bg);
    box-shadow: var(--bl-card-shadow);
}

.gm-blog-listing-section--card-minimal .gm-blog-listing-section__card {
    border-color: transparent;
    box-shadow: none;
}

.gm-blog-listing-section__media {
    display: block;
    overflow: hidden;
    background: var(--color-bg-secondary, var(--gm-bg));
}

.gm-blog-listing-section__media img,
.gm-blog-post-section__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gm-blog-listing-section--image-landscape .gm-blog-listing-section__media {
    aspect-ratio: 4 / 3;
}

.gm-blog-listing-section--image-wide .gm-blog-listing-section__media {
    aspect-ratio: 16 / 9;
}

.gm-blog-listing-section--image-square .gm-blog-listing-section__media {
    aspect-ratio: 1 / 1;
}

.gm-blog-listing-section--image-portrait .gm-blog-listing-section__media {
    aspect-ratio: 3 / 4;
}

.gm-blog-listing-section__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    background: var(--color-bg-secondary, var(--gm-bg));
}

.gm-blog-listing-section__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.gm-blog-listing-section__meta,
.gm-blog-post-section__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.gm-blog-listing-section__meta time,
.gm-blog-post-section__meta time {
    font-variant-numeric: tabular-nums;
}

/* Article (detail) header is centered → keep its meta/date centered too (listing stays left). */
.gm-blog-post-section__meta {
    justify-content: center;
}

.gm-blog-listing-section__card-title {
    margin: 0;
    color: var(--bl-title-color);
    font-family: var(--bl-title-font);
    font-size: 1.25rem;
    line-height: 1.25;
}

.gm-blog-listing-section__card-title a,
.gm-blog-post-section__breadcrumb a,
.gm-blog-post-section__back,
.gm-blog-post-section__share a {
    color: inherit;
    text-decoration: none;
}

.gm-blog-listing-section__card-title a:hover,
.gm-blog-post-section__breadcrumb a:hover,
.gm-blog-post-section__back:hover,
.gm-blog-post-section__share a:hover {
    color: var(--bl-link-color);
}

.gm-blog-listing-section__excerpt {
    margin: 0;
    color: var(--gm-muted);
    line-height: 1.65;
}

.gm-blog-listing-section__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
}

.gm-blog-listing-section__author {
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 700;
}

.gm-blog-listing-section__readmore {
    color: var(--bl-link-color);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.gm-blog-listing-section__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: var(--theme-spacing-xl, 32px);
}

.gm-blog-listing-section__empty,
.gm-blog-post-section__missing {
    max-width: 620px;
    margin: 0 auto;
    border: 1px solid var(--bl-card-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 12px));
    background: var(--bl-card-bg);
    padding: 32px;
    text-align: center;
}

.gm-blog-listing-section__empty h2,
.gm-blog-post-section__missing h1 {
    margin: 0 0 8px;
}

.gm-blog-listing-section__empty p {
    margin: 0;
    color: var(--gm-muted);
}

.gm-blog-post-section {
    --bp-section-bg: transparent;
    --bp-text-color: var(--gm-text);
    --bp-title-color: var(--gm-text);
    --bp-kicker-color: var(--gm-primary);
    --bp-surface-bg: transparent;
    --bp-border: var(--gm-border);
    --bp-section-padding-block: var(--theme-spacing-3xl, 56px);
    --bp-content-gap: var(--theme-spacing-lg, 24px);
    --bp-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --bp-body-font: var(--font-primary, sans-serif);
    max-width: 920px;
    margin: 0 auto;
    background: var(--bp-section-bg);
    color: var(--bp-text-color);
    font-family: var(--bp-body-font);
    padding-block: var(--bp-section-padding-block);
}

.gm-blog-post-section--width-sm {
    max-width: 760px;
}

.gm-blog-post-section--width-lg {
    max-width: 1080px;
}

.gm-blog-post-section__header {
    display: grid;
    gap: 14px;
}

.gm-blog-post-section__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    color: var(--gm-muted);
    font-size: 14px;
    font-weight: 700;
}

.gm-blog-post-section__media {
    overflow: hidden;
    margin: 0 0 var(--bp-content-gap);
    border-radius: var(--theme-media-radius, var(--theme-radius-lg, 12px));
    background: var(--color-bg-secondary, var(--gm-bg));
}

.gm-blog-post-section--image-wide .gm-blog-post-section__media {
    aspect-ratio: 16 / 9;
}

.gm-blog-post-section--image-landscape .gm-blog-post-section__media {
    aspect-ratio: 4 / 3;
}

.gm-blog-post-section--image-square .gm-blog-post-section__media {
    aspect-ratio: 1 / 1;
}

.gm-blog-post-section__body {
    display: block;
    border-top: 1px solid var(--bp-border);
    padding-top: var(--bp-content-gap);
    color: var(--bp-text-color);
    font-size: 1.05rem;
    line-height: 1.78;
}

.gm-blog-post-section__body > *:first-child {
    margin-top: 0;
}

.gm-blog-post-section__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--theme-media-radius, var(--theme-radius-lg, 12px));
}

.gm-blog-post-section__tags,
.gm-blog-post-section__footer,
.gm-blog-post-section__share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gm-blog-post-section__tags {
    margin-top: var(--bp-content-gap);
}

.gm-blog-post-section__tags span,
.gm-blog-post-section__share a {
    border: 1px solid var(--bp-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 10px;
}

.gm-blog-post-section__footer {
    align-items: center;
    justify-content: space-between;
    margin-top: var(--theme-spacing-xl, 32px);
}

.gm-blog-post-section__back {
    color: var(--bl-link-color);
    font-weight: 800;
}

@media (max-width: 980px) {
    .gm-blog-listing-section--columns-3 .gm-blog-listing-section__grid,
    .gm-blog-listing-section--columns-4 .gm-blog-listing-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .gm-blog-listing-section--columns-2 .gm-blog-listing-section__grid,
    .gm-blog-listing-section--columns-3 .gm-blog-listing-section__grid,
    .gm-blog-listing-section--columns-4 .gm-blog-listing-section__grid {
        grid-template-columns: 1fr;
    }

    .gm-blog-listing-section__footer,
    .gm-blog-post-section__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* getme-css-bundle:end css/content/sections/blog.css */


/* getme-css-bundle: css/content/sections/docs.css */
.gm-docs-listing-section,
.gm-doc-detail-section {
    color: var(--dl-text-color, var(--dd-text-color, var(--gm-text)));
    font-family: var(--dl-body-font, var(--dd-body-font, var(--font-primary, sans-serif)));
}

.gm-docs-listing-section {
    --dl-section-bg: transparent;
    --dl-text-color: var(--gm-text);
    --dl-title-color: var(--gm-text);
    --dl-kicker-color: var(--gm-primary);
    --dl-card-bg: var(--gm-surface);
    --dl-card-border: var(--gm-border);
    --dl-link-color: var(--gm-primary-dark, var(--gm-primary));
    --dl-section-padding-block: var(--theme-spacing-3xl, 56px);
    --dl-grid-gap: var(--theme-spacing-lg, 24px);
    --dl-card-radius: var(--theme-radius-lg, 8px);
    --dl-card-shadow: var(--theme-shadow-sm, none);
    --dl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --dl-body-font: var(--font-primary, sans-serif);
    background: var(--dl-section-bg);
    padding-block: var(--dl-section-padding-block);
}

.gm-docs-listing-section__head,
.gm-doc-detail-section__header {
    max-width: 780px;
    margin: 0 auto var(--theme-spacing-xl, 32px);
    text-align: center;
}

.gm-docs-listing-section__title,
.gm-doc-detail-section__title {
    margin: 0;
    color: var(--dl-title-color, var(--dd-title-color, var(--gm-text)));
    font-family: var(--dl-title-font, var(--dd-title-font, var(--font-heading, var(--font-primary, sans-serif))));
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.08;
}

.gm-docs-listing-section__intro,
.gm-doc-detail-section__summary {
    max-width: 660px;
    margin: 14px auto 0;
    color: var(--gm-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.gm-docs-listing-section__filters,
.gm-docs-listing-section__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.gm-docs-listing-section__filters {
    margin: 0 0 var(--theme-spacing-xl, 32px);
}

.gm-docs-listing-section__filter,
.gm-docs-listing-section__pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--dl-card-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    background: var(--dl-card-bg);
    color: var(--gm-muted);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none;
}

.gm-docs-listing-section__filter:hover,
.gm-docs-listing-section__filter.is-active,
.gm-docs-listing-section__pagination a[aria-current="page"] {
    border-color: var(--gm-primary);
    color: var(--dl-link-color);
}

.gm-docs-listing-section__grid {
    display: grid;
    gap: var(--dl-grid-gap);
}

.gm-docs-listing-section--columns-2 .gm-docs-listing-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-docs-listing-section--columns-3 .gm-docs-listing-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gm-docs-listing-section--columns-4 .gm-docs-listing-section__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gm-docs-listing-section__card {
    display: flex;
    min-width: 0;
    min-height: 220px;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--dl-card-border);
    border-radius: var(--dl-card-radius);
    background: var(--dl-card-bg);
    box-shadow: var(--dl-card-shadow);
    padding: 24px;
}

.gm-docs-listing-section--card-minimal .gm-docs-listing-section__card {
    border-color: transparent;
    box-shadow: none;
}

.gm-docs-listing-section__meta,
.gm-doc-detail-section__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 12px;
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.gm-docs-listing-section__meta time,
.gm-doc-detail-section__meta time {
    font-variant-numeric: tabular-nums;
}

/* Detail header is centered → keep its meta/date centered too (listing stays left). */
.gm-doc-detail-section__meta {
    justify-content: center;
}

.gm-docs-listing-section__card-title {
    margin: 0;
    color: var(--dl-title-color);
    font-family: var(--dl-title-font);
    font-size: 1.25rem;
    line-height: 1.25;
}

.gm-docs-listing-section__card-title a,
.gm-doc-detail-section__breadcrumb a,
.gm-doc-detail-section__back {
    color: inherit;
    text-decoration: none;
}

.gm-docs-listing-section__card-title a:hover,
.gm-doc-detail-section__breadcrumb a:hover,
.gm-doc-detail-section__back:hover {
    color: var(--dl-link-color, var(--dd-link-color, var(--gm-primary)));
}

.gm-docs-listing-section__summary {
    margin: 0;
    color: var(--gm-muted);
    line-height: 1.65;
}

.gm-docs-listing-section__readmore {
    margin-top: auto;
    color: var(--dl-link-color);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.gm-docs-listing-section__pagination {
    margin-top: var(--theme-spacing-xl, 32px);
}

.gm-docs-listing-section__empty,
.gm-doc-detail-section__missing {
    max-width: 620px;
    margin: 0 auto;
    border: 1px solid var(--dl-card-border, var(--dd-border, var(--gm-border)));
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 12px));
    background: var(--dl-card-bg, var(--dd-surface-bg, var(--gm-surface)));
    padding: 32px;
    text-align: center;
}

.gm-docs-listing-section__empty h2,
.gm-doc-detail-section__missing h1 {
    margin: 0 0 8px;
}

.gm-docs-listing-section__empty p {
    margin: 0;
    color: var(--gm-muted);
}

.gm-doc-detail-section {
    --dd-section-bg: transparent;
    --dd-text-color: var(--gm-text);
    --dd-title-color: var(--gm-text);
    --dd-kicker-color: var(--gm-primary);
    --dd-surface-bg: transparent;
    --dd-border: var(--gm-border);
    --dd-section-padding-block: var(--theme-spacing-3xl, 56px);
    --dd-content-gap: var(--theme-spacing-lg, 24px);
    --dd-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --dd-body-font: var(--font-primary, sans-serif);
    max-width: 920px;
    margin: 0 auto;
    background: var(--dd-section-bg);
    padding-block: var(--dd-section-padding-block);
}

.gm-doc-detail-section--width-sm {
    max-width: 760px;
}

.gm-doc-detail-section--width-lg {
    max-width: 1080px;
}

.gm-doc-detail-section__breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--gm-muted);
    font-size: 14px;
    font-weight: 700;
}

.gm-doc-detail-section__body {
    display: grid;
    gap: var(--dd-content-gap);
    border-top: 1px solid var(--dd-border);
    padding-top: var(--theme-spacing-xl, 32px);
    line-height: 1.75;
}

.gm-doc-detail-section__body > * {
    margin-block: 0;
}

.gm-doc-detail-section__body a {
    color: var(--gm-primary-dark, var(--gm-primary));
}

.gm-doc-detail-section__footer {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--dd-border);
    margin-top: var(--theme-spacing-xl, 32px);
    padding-top: var(--theme-spacing-lg, 24px);
}

.gm-doc-detail-section__back {
    border: 1px solid var(--dd-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    padding: 10px 16px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .gm-docs-listing-section__grid {
        grid-template-columns: 1fr;
    }
}

/* getme-css-bundle:end css/content/sections/docs.css */

/* Customer account application surfaces */

/* getme-css-bundle: css/customer/portal.css */
.gm-page-customer-account.gm-layout-focused,
.gm-page-customer-login.gm-layout-focused {
    background: var(--gm-bg);
}

.gm-page-customer-account .gm-main--focused,
.gm-page-customer-login .gm-main--focused {
    margin: 0;
    padding: 0;
    width: 100%;
}

.gm-customer-portal-section {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    place-items: stretch;
    width: 100%;
}

.gm-customer-portal-section__mount {
    min-width: 0;
    width: 100%;
}

.gm-customer-login-section {
    display: block;
    margin-inline: auto;
    width: 100%;
}

.gm-page-customer-login .gm-customer-login-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
}

.gm-customer-login-section--drawer,
.gm-customer-login-section--modal {
    width: min(100%, 440px);
}

/* getme-css-bundle:end css/customer/portal.css */

/* Curated commerce strips (reusable on home / promo pages) */

/* getme-css-bundle: css/commerce/sections/featured-products.css */
/* ════════════════════════════════════════════════════════════════════
   featured-products — Curated product strip.
   Namespace: --fp-*   Scope: .gm-featured-products-section
   ════════════════════════════════════════════════════════════════════ */

.gm-featured-products-section {
    --fp-section-bg: transparent;
    --fp-text-color: var(--gm-text);
    --fp-title-color: var(--gm-text);
    --fp-kicker-color: var(--gm-primary);
    --fp-card-bg: var(--gm-surface);
    --fp-card-border: var(--gm-border);
    --fp-price-color: var(--gm-text);
    --fp-button-bg: var(--gm-primary);
    --fp-button-text: var(--gm-on-primary, #ffffff);
    --fp-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --fp-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --fp-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fp-grid-gap: var(--theme-spacing-lg, 24px);
    --fp-card-radius: var(--theme-radius-lg, 12px);
    --fp-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --fp-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fp-body-font: var(--font-primary, sans-serif);
    --fp-grid-columns: 3;

    background: var(--fp-section-bg);
    color: var(--fp-text-color);
    font-family: var(--fp-body-font);
    padding: var(--fp-section-padding-block) var(--gm-section-inline-padding);
}

.gm-featured-products-section__head {
    margin: 0 auto 32px;
    max-width: 800px;
    text-align: center;
}
.gm-featured-products-section__head .gm-kicker {
    color: var(--fp-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-featured-products-section__title {
    color: var(--fp-title-color);
    font-family: var(--fp-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-featured-products-section__intro {
    color: var(--fp-text-color);
    font-size: 16px;
    margin: 0;
    opacity: 0.85;
}

.gm-featured-products-section--columns-2 { --fp-grid-columns: 2; }
.gm-featured-products-section--columns-3 { --fp-grid-columns: 3; }
.gm-featured-products-section--columns-4 { --fp-grid-columns: 4; }
.gm-featured-products-section--card-minimal .gm-featured-products-section__card {
    border: none;
    box-shadow: none;
}
.gm-featured-products-section--card-elevated .gm-featured-products-section__card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.gm-featured-products-section--image-landscape .gm-featured-products-section__card img,
.gm-featured-products-section--image-landscape .gm-featured-products-section__placeholder { aspect-ratio: 4 / 3; }
.gm-featured-products-section--image-portrait .gm-featured-products-section__card img,
.gm-featured-products-section--image-portrait .gm-featured-products-section__placeholder { aspect-ratio: 3 / 4; }

.gm-featured-products-section__grid {
    display: grid;
    gap: var(--fp-grid-gap);
    grid-template-columns: repeat(var(--fp-grid-columns), minmax(0, 1fr));
}

.gm-featured-products-section__card {
    align-items: stretch;
    background: var(--fp-card-bg);
    border: 1px solid var(--fp-card-border);
    border-radius: var(--fp-card-radius);
    box-shadow: var(--fp-card-shadow);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.gm-featured-products-section__card:hover {
    border-color: color-mix(in srgb, var(--fp-button-bg) 35%, var(--fp-card-border));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}

.gm-featured-products-section__card-link {
    color: var(--fp-text-color);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    text-decoration: none;
}

.gm-featured-products-section__card img,
.gm-featured-products-section__placeholder {
    aspect-ratio: 1 / 1;
    background: var(--gm-media-surface);
    display: block;
    object-fit: cover;
    width: 100%;
}
.gm-featured-products-section__placeholder {
    background: linear-gradient(135deg, var(--color-bg-tertiary, #eef2f7), color-mix(in srgb, var(--gm-border) 42%, transparent));
}

.gm-featured-products-section__brand {
    color: var(--fp-text-color);
    display: block;
    font-size: 11px;
    font-weight: 700;
    min-height: 16px;
    opacity: 0.65;
    overflow: hidden;
    padding: 14px 14px 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-featured-products-section__name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--fp-title-color);
    display: -webkit-box;
    font-family: var(--fp-title-font);
    font-size: 16px;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    margin: 6px 14px 0;
    min-height: calc(1.3em * 2);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-featured-products-section__price-stack {
    align-content: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: auto 14px 14px;
    min-height: 54px;
    padding-top: 12px;
}
.gm-featured-products-section__price { color: var(--fp-price-color); }
.gm-featured-products-section__compare-price {
    color: var(--fp-text-color);
    font-size: 13px;
    opacity: 0.7;
    text-decoration: line-through;
}

.gm-featured-products-section__actions {
    align-self: stretch;
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    grid-auto-rows: minmax(40px, auto);
    margin-top: 0;
    padding: 0 14px 14px;
}
.gm-featured-products-section__cta {
    align-items: center;
    background: var(--fp-button-bg);
    border: 1px solid var(--fp-button-bg);
    border-radius: var(--fp-button-radius);
    box-shadow: var(--fp-button-shadow);
    box-sizing: border-box;
    color: var(--fp-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;
    padding: 0 14px;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    width: 100%;
    transition: background 150ms ease, color 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}
.gm-featured-products-section__cta--secondary {
    background: transparent;
    color: var(--fp-button-bg);
}
.gm-featured-products-section__cta:hover:not([disabled]):not([aria-disabled="true"]) {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--fp-button-bg) 28%, transparent);
    filter: brightness(0.92);
}
/* Outline secondary fills with the primary colour on hover (not a no-op brightness). */
.gm-featured-products-section__cta--secondary:hover:not([disabled]):not([aria-disabled="true"]) {
    background: var(--fp-button-bg);
    box-shadow: none;
    color: var(--fp-button-text);
    filter: none;
}
.gm-featured-products-section__cta:active:not([disabled]):not([aria-disabled="true"]) {
    filter: brightness(0.88);
}
.gm-featured-products-section__cta[disabled],
.gm-featured-products-section__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
}

.gm-featured-products-section__viewall {
    margin-top: 28px;
    text-align: center;
}
.gm-featured-products-section__viewall-link {
    color: var(--fp-button-bg);
    font-weight: 700;
    text-decoration: none;
}
.gm-featured-products-section__viewall-link:hover { text-decoration: underline; }

.gm-featured-products-section__empty {
    color: var(--fp-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-featured-products-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-featured-products-section__grid { grid-template-columns: 1fr; }
    .gm-featured-products-section { padding: var(--fp-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/featured-products.css */


/* getme-css-bundle: css/commerce/sections/featured-categories.css */
/* ════════════════════════════════════════════════════════════════════
   featured-categories — Curated category strip.
   Namespace: --fc-*   Scope: .gm-featured-categories-section
   ════════════════════════════════════════════════════════════════════ */

.gm-featured-categories-section {
    --fc-section-bg: transparent;
    --fc-text-color: var(--gm-text);
    --fc-title-color: var(--gm-text);
    --fc-kicker-color: var(--gm-primary);
    --fc-card-bg: #ffffff;
    --fc-card-border: var(--gm-border);
    --fc-button-bg: var(--gm-primary);
    --fc-button-text: #ffffff;
    --fc-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fc-grid-gap: var(--theme-spacing-lg, 24px);
    --fc-card-radius: var(--theme-radius-lg, 12px);
    --fc-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --fc-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fc-body-font: var(--font-primary, sans-serif);
    --fc-grid-columns: 3;

    background: var(--fc-section-bg);
    color: var(--fc-text-color);
    font-family: var(--fc-body-font);
    padding: var(--fc-section-padding-block) var(--gm-section-inline-padding);
}

.gm-featured-categories-section__head { margin: 0 auto 32px; max-width: 800px; text-align: center; }
.gm-featured-categories-section__head .gm-kicker {
    color: var(--fc-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-featured-categories-section__title {
    color: var(--fc-title-color);
    font-family: var(--fc-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-featured-categories-section__intro { color: var(--fc-text-color); margin: 0; opacity: 0.85; }

.gm-featured-categories-section--columns-2 { --fc-grid-columns: 2; }
.gm-featured-categories-section--columns-3 { --fc-grid-columns: 3; }
.gm-featured-categories-section--columns-4 { --fc-grid-columns: 4; }

.gm-featured-categories-section--image-square .gm-featured-categories-section__card img,
.gm-featured-categories-section--image-square .gm-featured-categories-section__placeholder { aspect-ratio: 1 / 1; }
.gm-featured-categories-section--image-landscape .gm-featured-categories-section__card img,
.gm-featured-categories-section--image-landscape .gm-featured-categories-section__placeholder { aspect-ratio: 4 / 3; }
.gm-featured-categories-section--image-portrait .gm-featured-categories-section__card img,
.gm-featured-categories-section--image-portrait .gm-featured-categories-section__placeholder { aspect-ratio: 3 / 4; }

.gm-featured-categories-section__grid {
    display: grid;
    gap: var(--fc-grid-gap);
    grid-template-columns: repeat(var(--fc-grid-columns), minmax(0, 1fr));
}

.gm-featured-categories-section__card {
    background: var(--fc-card-bg);
    border: 1px solid var(--fc-card-border);
    border-radius: var(--fc-card-radius);
    box-shadow: var(--fc-card-shadow);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-featured-categories-section--card-minimal .gm-featured-categories-section__card {
    border: none; box-shadow: none;
}
.gm-featured-categories-section--card-elevated .gm-featured-categories-section__card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.gm-featured-categories-section__card:hover {
    border-color: color-mix(in srgb, var(--fc-button-bg) 35%, var(--fc-card-border));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}

.gm-featured-categories-section__card img,
.gm-featured-categories-section__placeholder {
    background: var(--gm-media-surface);
    display: block;
    object-fit: cover;
    width: 100%;
}
.gm-featured-categories-section__placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--fc-button-bg) 15%, #eef2f7), #dbe3ef);
}

.gm-featured-categories-section__caption {
    padding: 18px 18px 22px;
}
.gm-featured-categories-section__caption h3 {
    color: var(--fc-title-color);
    font-family: var(--fc-title-font);
    font-size: 18px;
    margin: 0 0 4px;
}
.gm-featured-categories-section__count {
    color: var(--fc-text-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.65;
    text-transform: uppercase;
}

/* Overlay variant — caption sits over the image */
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__card {
    aspect-ratio: 4 / 3;
    display: block;
    position: relative;
}
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__card img,
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__placeholder {
    height: 100%;
    inset: 0;
    position: absolute;
}
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    bottom: 0;
    color: var(--fc-button-text);
    inset: auto 0 0 0;
    padding: 28px 18px 18px;
    position: absolute;
}
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__caption h3 {
    color: var(--fc-button-text);
}
.gm-featured-categories-section--card-overlay .gm-featured-categories-section__count { opacity: 0.85; }

.gm-featured-categories-section__viewall { margin-top: 28px; text-align: center; }
.gm-featured-categories-section__viewall a {
    color: var(--fc-button-bg);
    font-weight: 700;
    text-decoration: none;
}
.gm-featured-categories-section__viewall a:hover { text-decoration: underline; }

.gm-featured-categories-section__empty {
    color: var(--fc-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-featured-categories-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-featured-categories-section__grid { grid-template-columns: 1fr; }
    .gm-featured-categories-section { padding: var(--fc-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/featured-categories.css */


/* getme-css-bundle: css/commerce/sections/featured-brands.css */
/* ════════════════════════════════════════════════════════════════════
   featured-brands — Curated brand strip / logo wall.
   Namespace: --fb-*   Scope: .gm-featured-brands-section
   ════════════════════════════════════════════════════════════════════ */

.gm-featured-brands-section {
    --fb-section-bg: transparent;
    --fb-text-color: var(--gm-text);
    --fb-title-color: var(--gm-text);
    --fb-kicker-color: var(--gm-primary);
    --fb-card-bg: #ffffff;
    --fb-card-border: var(--gm-border);
    --fb-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fb-grid-gap: var(--theme-spacing-lg, 24px);
    --fb-card-radius: var(--theme-radius-lg, 12px);
    --fb-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fb-body-font: var(--font-primary, sans-serif);
    --fb-grid-columns: 4;

    background: var(--fb-section-bg);
    color: var(--fb-text-color);
    font-family: var(--fb-body-font);
    padding: var(--fb-section-padding-block) var(--gm-section-inline-padding);
}

.gm-featured-brands-section__head { margin: 0 auto 32px; max-width: 800px; text-align: center; }
.gm-featured-brands-section__head .gm-kicker {
    color: var(--fb-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-featured-brands-section__title {
    color: var(--fb-title-color);
    font-family: var(--fb-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-featured-brands-section__intro { color: var(--fb-text-color); margin: 0; opacity: 0.85; }

.gm-featured-brands-section--columns-3 { --fb-grid-columns: 3; }
.gm-featured-brands-section--columns-4 { --fb-grid-columns: 4; }
.gm-featured-brands-section--columns-5 { --fb-grid-columns: 5; }
.gm-featured-brands-section--columns-6 { --fb-grid-columns: 6; }

.gm-featured-brands-section--image-square .gm-featured-brands-section__card img,
.gm-featured-brands-section--image-square .gm-featured-brands-section__placeholder { aspect-ratio: 1 / 1; }
.gm-featured-brands-section--image-landscape .gm-featured-brands-section__card img,
.gm-featured-brands-section--image-landscape .gm-featured-brands-section__placeholder { aspect-ratio: 4 / 3; }
.gm-featured-brands-section--image-wide .gm-featured-brands-section__card img,
.gm-featured-brands-section--image-wide .gm-featured-brands-section__placeholder { aspect-ratio: 16 / 9; }

.gm-featured-brands-section__grid {
    display: grid;
    gap: var(--fb-grid-gap);
    grid-template-columns: repeat(var(--fb-grid-columns), minmax(0, 1fr));
}

.gm-featured-brands-section__card {
    align-items: center;
    background: var(--fb-card-bg);
    border-radius: var(--fb-card-radius);
    color: var(--fb-text-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-featured-brands-section--card-outlined .gm-featured-brands-section__card {
    border: 1px solid var(--fb-card-border);
}
.gm-featured-brands-section--card-elevated .gm-featured-brands-section__card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.gm-featured-brands-section--card-minimal .gm-featured-brands-section__card {
    background: transparent;
}
.gm-featured-brands-section__card:hover { transform: translateY(-2px); }

.gm-featured-brands-section__card img {
    background: #ffffff;
    display: block;
    filter: grayscale(0.2);
    object-fit: contain;
    transition: filter 160ms ease;
    width: 100%;
}
.gm-featured-brands-section__card:hover img { filter: grayscale(0); }

.gm-featured-brands-section__placeholder {
    align-items: center;
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    color: var(--fb-title-color);
    display: flex;
    font-family: var(--fb-title-font);
    font-size: 28px;
    font-weight: 700;
    justify-content: center;
    text-transform: uppercase;
    width: 100%;
}

.gm-featured-brands-section__name {
    color: var(--fb-title-color);
    font-family: var(--fb-title-font);
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.gm-featured-brands-section__viewall { margin-top: 28px; text-align: center; }
.gm-featured-brands-section__viewall a {
    color: var(--fb-title-color);
    font-weight: 700;
    text-decoration: none;
}
.gm-featured-brands-section__viewall a:hover { text-decoration: underline; }

.gm-featured-brands-section__empty {
    color: var(--fb-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-featured-brands-section__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-featured-brands-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-featured-brands-section { padding: var(--fb-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/featured-brands.css */


/* getme-css-bundle: css/commerce/sections/featured-services.css */
/* ════════════════════════════════════════════════════════════════════
   featured-services — Curated service strip.
   Namespace: --fs-*   Scope: .gm-featured-services-section
   ════════════════════════════════════════════════════════════════════ */

.gm-featured-services-section {
    --fs-section-bg: transparent;
    --fs-text-color: var(--gm-text);
    --fs-title-color: var(--gm-text);
    --fs-kicker-color: var(--gm-primary);
    --fs-card-bg: #ffffff;
    --fs-card-border: var(--gm-border);
    --fs-price-color: var(--gm-text);
    --fs-button-bg: var(--gm-primary);
    --fs-button-text: #ffffff;
    --fs-button-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    --fs-button-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    --fs-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fs-grid-gap: var(--theme-spacing-lg, 24px);
    --fs-card-radius: var(--theme-radius-lg, 12px);
    --fs-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --fs-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fs-body-font: var(--font-primary, sans-serif);
    --fs-grid-columns: 3;

    background: var(--fs-section-bg);
    color: var(--fs-text-color);
    font-family: var(--fs-body-font);
    padding: var(--fs-section-padding-block) var(--gm-section-inline-padding);
}

.gm-featured-services-section__head { margin: 0 auto 32px; max-width: 800px; text-align: center; }
.gm-featured-services-section__head .gm-kicker {
    color: var(--fs-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-featured-services-section__title {
    color: var(--fs-title-color);
    font-family: var(--fs-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-featured-services-section__intro { color: var(--fs-text-color); margin: 0; opacity: 0.85; }

.gm-featured-services-section--columns-2 { --fs-grid-columns: 2; }
.gm-featured-services-section--columns-3 { --fs-grid-columns: 3; }
.gm-featured-services-section--columns-4 { --fs-grid-columns: 4; }
.gm-featured-services-section--card-minimal .gm-featured-services-section__card { border: none; box-shadow: none; }
.gm-featured-services-section--card-elevated .gm-featured-services-section__card {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.gm-featured-services-section--image-square .gm-featured-services-section__card img,
.gm-featured-services-section--image-square .gm-featured-services-section__placeholder { aspect-ratio: 1 / 1; }
.gm-featured-services-section--image-landscape .gm-featured-services-section__card img,
.gm-featured-services-section--image-landscape .gm-featured-services-section__placeholder { aspect-ratio: 4 / 3; }
.gm-featured-services-section--image-portrait .gm-featured-services-section__card img,
.gm-featured-services-section--image-portrait .gm-featured-services-section__placeholder { aspect-ratio: 3 / 4; }

/* Image fit — `contain` letterboxes the full artwork (logos, badges)
   inside the ratio frame instead of cropping it like `cover`. */
.gm-featured-services-section--fit-contain .gm-featured-services-section__card img {
    background: var(--gm-media-surface);
    box-sizing: border-box;
    object-fit: contain;
    padding: 18px;
}

/* Content alignment — keeps kicker/title/price on one axis per card. */
.gm-featured-services-section--align-center .gm-featured-services-section__body {
    align-items: center;
    text-align: center;
}
.gm-featured-services-section--align-center .gm-featured-services-section__actions { justify-items: center; }

.gm-featured-services-section__grid {
    display: grid;
    gap: var(--fs-grid-gap);
    grid-template-columns: repeat(var(--fs-grid-columns), minmax(0, 1fr));
}

.gm-featured-services-section__card {
    background: var(--fs-card-bg);
    border: 1px solid var(--fs-card-border);
    border-radius: var(--fs-card-radius);
    box-shadow: var(--fs-card-shadow);
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-featured-services-section__badge {
    background: var(--fs-button-bg);
    border-radius: 999px;
    color: var(--fs-button-text);
    font-size: 11px;
    font-weight: 700;
    left: 12px;
    letter-spacing: 0.05em;
    padding: 4px 11px;
    position: absolute;
    text-transform: uppercase;
    top: 12px;
    z-index: 1;
}
.gm-featured-services-section__card:hover {
    border-color: color-mix(in srgb, var(--fs-button-bg) 35%, var(--fs-card-border));
    transform: translateY(-2px);
}
.gm-featured-services-section__card-link {
    color: var(--fs-text-color);
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100%;
    text-decoration: none;
}

.gm-featured-services-section__card img,
.gm-featured-services-section__placeholder {
    background: var(--gm-media-surface);
    display: block;
    object-fit: cover;
    width: 100%;
}
.gm-featured-services-section__placeholder { background: linear-gradient(135deg, #eef2f7, #dbe3ef); }

.gm-featured-services-section__body {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.gm-featured-services-section__body h3 {
    color: var(--fs-title-color);
    font-family: var(--fs-title-font);
    font-size: 18px;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}
.gm-featured-services-section__body p {
    color: var(--fs-text-color);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px;
    opacity: 0.75;
}
.gm-featured-services-section__price {
    color: var(--fs-price-color);
    display: block;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-top: auto; /* pins prices to the card bottom so sibling cards line up */
}

.gm-featured-services-section__actions {
    display: grid;
    gap: 10px;
    padding: 0 20px 20px;
}
.gm-featured-services-section__cta {
    align-items: center;
    background: var(--fs-button-bg);
    border: 1px solid var(--fs-button-bg);
    border-radius: var(--fs-button-radius);
    box-shadow: var(--fs-button-shadow);
    color: var(--fs-button-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    width: 100%;
    transition: background 150ms ease, color 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}
.gm-featured-services-section__cta--secondary {
    background: transparent;
    color: var(--fs-button-bg);
}
.gm-featured-services-section__cta:hover:not([disabled]):not([aria-disabled="true"]) {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--fs-button-bg) 28%, transparent);
    filter: brightness(0.92);
}
/* Outline secondary fills with the primary colour on hover (not a no-op brightness). */
.gm-featured-services-section__cta--secondary:hover:not([disabled]):not([aria-disabled="true"]) {
    background: var(--fs-button-bg);
    box-shadow: none;
    color: var(--fs-button-text);
    filter: none;
}
.gm-featured-services-section__cta:active:not([disabled]):not([aria-disabled="true"]) {
    filter: brightness(0.88);
}
.gm-featured-services-section__cta:disabled,
.gm-featured-services-section__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.68;
}

.gm-featured-services-section__viewall { margin-top: 28px; text-align: center; }
.gm-featured-services-section__viewall a {
    color: var(--fs-button-bg);
    font-weight: 700;
    text-decoration: none;
}
.gm-featured-services-section__viewall a:hover { text-decoration: underline; }

.gm-featured-services-section__empty {
    color: var(--fs-text-color);
    opacity: 0.7;
    padding: 24px;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-featured-services-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-featured-services-section__grid { grid-template-columns: 1fr; }
    .gm-featured-services-section { padding: var(--fs-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/featured-services.css */


/* getme-css-bundle: css/commerce/sections/booking-widget.css */
.gm-booking-widget-section {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    padding: clamp(18px, 3vw, 32px);
}

.gm-booking-widget-section--compact-launcher {
    align-items: center;
    display: flex;
    justify-content: center;
}

.gm-booking-widget-section--guided-service {
    --gm-booking-widget-safe-inline: max(16px, var(--gm-page-gutter, 16px));
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 760px) {
    .gm-booking-widget-section--guided-service {
        padding-inline: max(0px, calc(var(--gm-booking-widget-safe-inline) - var(--gm-page-gutter, 16px)));
    }
}

/* Brand logo behaves as a home link (theme.js sends it to "/"). */
.gm-booking-guided__logo {
    cursor: pointer;
}

/* getme-css-bundle:end css/commerce/sections/booking-widget.css */

/* Content / cross-page sections */

/* getme-css-bundle: css/commerce/sections/hero.css */
/* ════════════════════════════════════════════════════════════════════
   hero — Reusable banner section.
   Namespace: --hr-*   Scope: .gm-hero-section
   Variants: full background, split (left/right), text only.
   ════════════════════════════════════════════════════════════════════ */

.gm-hero-section {
    --hr-section-bg: linear-gradient(135deg, color-mix(in srgb, var(--gm-primary) 12%, var(--gm-bg)), var(--gm-bg));
    --hr-text-color: var(--gm-text);
    --hr-title-color: var(--gm-text);
    --hr-kicker-color: var(--gm-primary);
    --hr-intro-color: var(--gm-muted);
    --hr-primary-bg: var(--gm-primary);
    --hr-primary-text: #ffffff;
    --hr-secondary-bg: transparent;
    --hr-secondary-text: var(--gm-text);
    --hr-section-padding-block: var(--theme-spacing-4xl, 96px);
    --hr-min-height: 560px;
    --hr-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --hr-body-font: var(--font-primary, sans-serif);
    --hr-overlay-alpha: 0%;

    background: var(--hr-section-bg);
    color: var(--hr-text-color);
    font-family: var(--hr-body-font);
    min-height: var(--hr-min-height);
    overflow: hidden;
    padding: var(--hr-section-padding-block) var(--gm-section-inline-padding);
    position: relative;
}

/* Full background image variant */
.gm-hero-section__bg {
    inset: 0;
    position: absolute;
    z-index: 0;
}
.gm-hero-section__bg img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.gm-hero-section__overlay {
    background: rgba(15, 23, 42, calc(var(--hr-overlay-alpha) / 100));
    inset: 0;
    position: absolute;
}

.gm-hero-section__inner {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

.gm-hero-section--image-right .gm-hero-section__inner,
.gm-hero-section--image-left .gm-hero-section__inner {
    align-items: center;
    grid-template-columns: 1fr 1fr;
}

.gm-hero-section--image-left .gm-hero-section__inner {
    direction: rtl;
}
.gm-hero-section--image-left .gm-hero-section__inner > * {
    direction: ltr;
}

.gm-hero-section__copy { min-width: 0; }

.gm-hero-section--text-left .gm-hero-section__copy { text-align: left; }
.gm-hero-section--text-center .gm-hero-section__copy { text-align: center; margin-inline: auto; max-width: 800px; }
.gm-hero-section--text-right .gm-hero-section__copy { text-align: right; }

.gm-hero-section__kicker {
    color: var(--hr-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.gm-hero-section__title {
    color: var(--hr-title-color);
    font-family: var(--hr-title-font);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.gm-hero-section__intro {
    color: var(--hr-intro-color);
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 28px;
}

.gm-hero-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.gm-hero-section--text-center .gm-hero-section__actions { justify-content: center; }
.gm-hero-section--text-right .gm-hero-section__actions { justify-content: flex-end; }

.gm-hero-section__button {
    align-items: center;
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-hero-section__button--primary {
    background: var(--hr-primary-bg);
    border: 1px solid var(--hr-primary-bg);
    color: var(--hr-primary-text);
}
.gm-hero-section__button--secondary {
    background: var(--hr-secondary-bg);
    border: 1px solid currentColor;
    color: var(--hr-secondary-text);
}
.gm-hero-section__button:hover { filter: brightness(0.92); transform: translateY(-1px); }

.gm-hero-section__media {
    align-self: stretch;
    border-radius: var(--theme-radius-xl, 16px);
    box-shadow: var(--theme-shadow-lg, 0 12px 24px rgba(15, 23, 42, 0.12));
    overflow: hidden;
}
.gm-hero-section__media img {
    aspect-ratio: 4 / 3;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Background variant: place text over the background image */
.gm-hero-section--image-background .gm-hero-section__inner {
    grid-template-columns: 1fr;
}
.gm-hero-section--image-background {
    color: #ffffff;
    --hr-title-color: #ffffff;
    --hr-intro-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 980px) {
    .gm-hero-section--image-right .gm-hero-section__inner,
    .gm-hero-section--image-left .gm-hero-section__inner {
        grid-template-columns: 1fr;
    }
    .gm-hero-section--image-left .gm-hero-section__inner { direction: ltr; }
}

@media (max-width: 640px) {
    .gm-hero-section { padding: var(--hr-section-padding-block) var(--gm-section-inline-padding); }
    .gm-hero-section__title { font-size: clamp(28px, 8vw, 44px); }
}

/* getme-css-bundle:end css/commerce/sections/hero.css */


/* getme-css-bundle: css/commerce/sections/hero-split-media.css */
/* ════════════════════════════════════════════════════════════════════
   hero-split-media — Editorial 50/60/70 split hero.
   Namespace: --hs-*   Scope: .gm-hero-split-media-section
   ════════════════════════════════════════════════════════════════════ */

.gm-hero-split-media-section {
    --hs-section-bg: var(--gm-bg);
    --hs-text-color: var(--gm-text);
    --hs-title-color: var(--gm-text);
    --hs-kicker-color: var(--gm-primary);
    --hs-primary-bg: var(--gm-primary);
    --hs-primary-text: #ffffff;
    --hs-secondary-bg: transparent;
    --hs-secondary-text: var(--gm-text);
    --hs-section-padding-block: var(--theme-spacing-3xl, 64px);
    --hs-content-gap: var(--theme-spacing-xl, 32px);
    --hs-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --hs-body-font: var(--font-primary, sans-serif);
    --hs-media-fr: 1.5fr;
    --hs-copy-fr: 1fr;

    background: var(--hs-section-bg);
    color: var(--hs-text-color);
    font-family: var(--hs-body-font);
    padding: var(--hs-section-padding-block) var(--gm-section-inline-padding);
}

.gm-hero-split-media-section--size-50 { --hs-media-fr: 1fr; --hs-copy-fr: 1fr; }
.gm-hero-split-media-section--size-60 { --hs-media-fr: 1.5fr; --hs-copy-fr: 1fr; }
.gm-hero-split-media-section--size-70 { --hs-media-fr: 2.3fr; --hs-copy-fr: 1fr; }

.gm-hero-split-media-section__inner {
    align-items: center;
    display: grid;
    gap: var(--hs-content-gap);
    grid-template-columns: var(--hs-media-fr) var(--hs-copy-fr);
    margin: 0 auto;
    max-width: 1280px;
}

.gm-hero-split-media-section--media-left .gm-hero-split-media-section__inner {
    grid-template-columns: var(--hs-media-fr) var(--hs-copy-fr);
}

.gm-hero-split-media-section--media-right .gm-hero-split-media-section__inner {
    grid-template-columns: var(--hs-copy-fr) var(--hs-media-fr);
    direction: rtl;
}
.gm-hero-split-media-section--media-right .gm-hero-split-media-section__inner > * {
    direction: ltr;
}

.gm-hero-split-media-section__media {
    border-radius: var(--theme-radius-xl, 16px);
    box-shadow: var(--theme-shadow-lg, 0 18px 36px rgba(15, 23, 42, 0.16));
    min-width: 0;
    overflow: hidden;
}
.gm-hero-split-media-section__media img,
.gm-hero-split-media-section__placeholder {
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}
.gm-hero-split-media-section--ratio-square .gm-hero-split-media-section__media img,
.gm-hero-split-media-section--ratio-square .gm-hero-split-media-section__placeholder { aspect-ratio: 1 / 1; }
.gm-hero-split-media-section--ratio-landscape .gm-hero-split-media-section__media img,
.gm-hero-split-media-section--ratio-landscape .gm-hero-split-media-section__placeholder { aspect-ratio: 4 / 3; }
.gm-hero-split-media-section--ratio-portrait .gm-hero-split-media-section__media img,
.gm-hero-split-media-section--ratio-portrait .gm-hero-split-media-section__placeholder { aspect-ratio: 3 / 4; }
.gm-hero-split-media-section--ratio-wide .gm-hero-split-media-section__media img,
.gm-hero-split-media-section--ratio-wide .gm-hero-split-media-section__placeholder { aspect-ratio: 16 / 9; }
.gm-hero-split-media-section--ratio-tall .gm-hero-split-media-section__media img,
.gm-hero-split-media-section--ratio-tall .gm-hero-split-media-section__placeholder { aspect-ratio: 9 / 16; }

.gm-hero-split-media-section__placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--hs-primary-bg) 24%, #eef2f7), #d2dbea);
}

.gm-hero-split-media-section__copy { min-width: 0; }
.gm-hero-split-media-section__copy .gm-kicker {
    color: var(--hs-kicker-color);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.gm-hero-split-media-section__title {
    color: var(--hs-title-color);
    font-family: var(--hs-title-font);
    font-size: clamp(28px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}
.gm-hero-split-media-section__intro {
    color: var(--hs-text-color);
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 24px;
    opacity: 0.85;
}
.gm-hero-split-media-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.gm-hero-split-media-section__button {
    align-items: center;
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-hero-split-media-section__button--primary {
    background: var(--hs-primary-bg);
    border: 1px solid var(--hs-primary-bg);
    color: var(--hs-primary-text);
}
.gm-hero-split-media-section__button--secondary {
    background: var(--hs-secondary-bg);
    border: 1px solid currentColor;
    color: var(--hs-secondary-text);
}
.gm-hero-split-media-section__button:hover { filter: brightness(0.92); transform: translateY(-1px); }

@media (max-width: 980px) {
    .gm-hero-split-media-section__inner,
    .gm-hero-split-media-section--media-right .gm-hero-split-media-section__inner,
    .gm-hero-split-media-section--media-left .gm-hero-split-media-section__inner {
        grid-template-columns: 1fr;
        direction: ltr;
    }
}
@media (max-width: 640px) {
    .gm-hero-split-media-section { padding: var(--hs-section-padding-block) var(--gm-section-inline-padding); }
    .gm-hero-split-media-section__title { font-size: clamp(26px, 7vw, 38px); }
}

/* getme-css-bundle:end css/commerce/sections/hero-split-media.css */


/* getme-css-bundle: css/commerce/sections/hero-carousel.css */
/* ════════════════════════════════════════════════════════════════════
   hero-carousel — Scroll-snap based hero slider.
   Namespace: --hc-*   Scope: .gm-hero-carousel-section
   No JS required — uses scroll-snap on a horizontal track + anchor dots.
   ════════════════════════════════════════════════════════════════════ */

.gm-hero-carousel-section {
    --hc-section-bg: linear-gradient(135deg, color-mix(in srgb, var(--gm-primary) 18%, var(--gm-bg)), var(--gm-bg));
    --hc-title-color: #ffffff;
    --hc-kicker-color: rgba(255, 255, 255, 0.85);
    --hc-intro-color: rgba(255, 255, 255, 0.88);
    --hc-cta-bg: var(--gm-primary);
    --hc-cta-text: #ffffff;
    --hc-dot-color: rgba(255, 255, 255, 0.7);
    --hc-min-height: 520px;
    --hc-overlay-alpha: 35%;
    --hc-section-padding-block: var(--theme-spacing-lg, 24px);
    --hc-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --hc-body-font: var(--font-primary, sans-serif);

    background: var(--hc-section-bg);
    font-family: var(--hc-body-font);
    padding: var(--hc-section-padding-block) 0;
    position: relative;
}

.gm-hero-carousel-section--aspect-wide .gm-hero-carousel-section__slide { aspect-ratio: 16 / 9; }
.gm-hero-carousel-section--aspect-landscape .gm-hero-carousel-section__slide { aspect-ratio: 4 / 3; }
.gm-hero-carousel-section--aspect-panoramic .gm-hero-carousel-section__slide { aspect-ratio: 21 / 9; }

.gm-hero-carousel-section__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gm-hero-carousel-section__track::-webkit-scrollbar { display: none; }

.gm-hero-carousel-section__slide {
    flex: 0 0 100%;
    min-height: var(--hc-min-height);
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    width: 100%;
}

.gm-hero-carousel-section__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.gm-hero-carousel-section__overlay {
    background: rgba(15, 23, 42, calc(var(--hc-overlay-alpha) / 100));
    inset: 0;
    position: absolute;
    z-index: 1;
}

.gm-hero-carousel-section__copy {
    align-items: flex-start;
    color: var(--hc-intro-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 1180px;
    padding: 32px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.gm-hero-carousel-section__kicker {
    color: var(--hc-kicker-color);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.gm-hero-carousel-section__title {
    color: var(--hc-title-color);
    font-family: var(--hc-title-font);
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1.08;
    margin: 0;
    max-width: 720px;
    overflow-wrap: anywhere;
}

.gm-hero-carousel-section__intro {
    color: var(--hc-intro-color);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    max-width: 600px;
}

.gm-hero-carousel-section__cta {
    align-items: center;
    background: var(--hc-cta-bg);
    border: 1px solid var(--hc-cta-bg);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    color: var(--hc-cta-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-hero-carousel-section__cta:hover { filter: brightness(0.92); transform: translateY(-1px); }

.gm-hero-carousel-section__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}

.gm-hero-carousel-section__dot {
    align-items: center;
    background: transparent;
    border: 1px solid var(--hc-dot-color);
    border-radius: 999px;
    color: var(--hc-dot-color);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    min-width: 28px;
    padding: 0 10px;
    text-decoration: none;
}
.gm-hero-carousel-section__dot:hover { background: var(--hc-dot-color); color: rgba(15, 23, 42, 0.85); }

@media (max-width: 760px) {
    .gm-hero-carousel-section__slide { aspect-ratio: auto; min-height: var(--hc-min-height); }
    .gm-hero-carousel-section__copy { padding: 24px 20px; }
    .gm-hero-carousel-section__title { font-size: clamp(24px, 7vw, 36px); }
}

/* getme-css-bundle:end css/commerce/sections/hero-carousel.css */


/* getme-css-bundle: css/commerce/sections/text-with-image.css */
/* ════════════════════════════════════════════════════════════════════
   text-with-image — Editorial 2-column block.
   Namespace: --tw-*   Scope: .gm-text-with-image-section
   ════════════════════════════════════════════════════════════════════ */

.gm-text-with-image-section {
    --tw-section-bg: transparent;
    --tw-text-color: var(--gm-text);
    --tw-title-color: var(--gm-text);
    --tw-kicker-color: var(--gm-primary);
    --tw-cta-bg: var(--gm-primary);
    --tw-cta-text: #ffffff;
    --tw-section-padding-block: var(--theme-spacing-3xl, 64px);
    --tw-content-gap: var(--theme-spacing-xl, 32px);
    --tw-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --tw-body-font: var(--font-primary, sans-serif);

    background: var(--tw-section-bg);
    color: var(--tw-text-color);
    font-family: var(--tw-body-font);
    padding: var(--tw-section-padding-block) var(--gm-section-inline-padding);
}

.gm-text-with-image-section__inner {
    align-items: center;
    display: grid;
    gap: var(--tw-content-gap);
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1200px;
}

.gm-text-with-image-section--image-left .gm-text-with-image-section__inner {
    direction: rtl;
}
.gm-text-with-image-section--image-left .gm-text-with-image-section__inner > * { direction: ltr; }

.gm-text-with-image-section__copy { min-width: 0; }
.gm-text-with-image-section__copy .gm-kicker {
    color: var(--tw-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.gm-text-with-image-section__title {
    color: var(--tw-title-color);
    font-family: var(--tw-title-font);
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 18px;
}
.gm-text-with-image-section__body {
    color: var(--tw-text-color);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 22px;
    opacity: 0.85;
}
.gm-text-with-image-section__cta {
    align-items: center;
    background: var(--tw-cta-bg);
    border: 1px solid var(--tw-cta-bg);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    color: var(--tw-cta-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-text-with-image-section__cta:hover { filter: brightness(0.92); transform: translateY(-1px); }

.gm-text-with-image-section__media {
    border-radius: var(--theme-radius-xl, 16px);
    box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    overflow: hidden;
}
.gm-text-with-image-section__media img,
.gm-text-with-image-section__placeholder {
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}
.gm-text-with-image-section__placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tw-cta-bg) 18%, #eef2f7), #dbe3ef);
}

.gm-text-with-image-section--ratio-square .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-square .gm-text-with-image-section__placeholder { aspect-ratio: 1 / 1; }
.gm-text-with-image-section--ratio-landscape .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-landscape .gm-text-with-image-section__placeholder { aspect-ratio: 4 / 3; }
.gm-text-with-image-section--ratio-portrait .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-portrait .gm-text-with-image-section__placeholder { aspect-ratio: 3 / 4; }
.gm-text-with-image-section--ratio-wide .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-wide .gm-text-with-image-section__placeholder { aspect-ratio: 16 / 9; }

@media (max-width: 980px) {
    .gm-text-with-image-section__inner { grid-template-columns: 1fr; }
    .gm-text-with-image-section--image-left .gm-text-with-image-section__inner { direction: ltr; }
}
@media (max-width: 640px) {
    .gm-text-with-image-section { padding: var(--tw-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/text-with-image.css */


/* getme-css-bundle: css/commerce/sections/feature-grid.css */
/* ════════════════════════════════════════════════════════════════════
   feature-grid — Inline feature cards (icon + title + body).
   Namespace: --fg-*   Scope: .gm-feature-grid-section
   ════════════════════════════════════════════════════════════════════ */

.gm-feature-grid-section {
    --fg-section-bg: transparent;
    --fg-text-color: var(--gm-text);
    --fg-title-color: var(--gm-text);
    --fg-kicker-color: var(--gm-primary);
    --fg-card-bg: #ffffff;
    --fg-card-border: var(--gm-border);
    --fg-icon-color: var(--gm-primary);
    --fg-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fg-grid-gap: var(--theme-spacing-lg, 24px);
    --fg-card-radius: var(--theme-radius-lg, 12px);
    --fg-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fg-body-font: var(--font-primary, sans-serif);
    --fg-grid-columns: 3;

    background: var(--fg-section-bg);
    color: var(--fg-text-color);
    font-family: var(--fg-body-font);
    padding: var(--fg-section-padding-block) var(--gm-section-inline-padding);
}

.gm-feature-grid-section__head { margin: 0 auto 36px; max-width: 800px; text-align: center; }
.gm-feature-grid-section__head .gm-kicker {
    color: var(--fg-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-feature-grid-section__title {
    color: var(--fg-title-color);
    font-family: var(--fg-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-feature-grid-section__intro {
    color: var(--fg-text-color);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
}

.gm-feature-grid-section--columns-2 { --fg-grid-columns: 2; }
.gm-feature-grid-section--columns-3 { --fg-grid-columns: 3; }
.gm-feature-grid-section--columns-4 { --fg-grid-columns: 4; }
.gm-feature-grid-section--columns-6 { --fg-grid-columns: 6; }

.gm-feature-grid-section__grid {
    display: grid;
    gap: var(--fg-grid-gap);
    grid-template-columns: repeat(var(--fg-grid-columns), minmax(0, 1fr));
}

.gm-feature-grid-section__card {
    background: var(--fg-card-bg);
    border: 1px solid var(--fg-card-border);
    border-radius: var(--fg-card-radius);
    padding: 24px;
}

.gm-feature-grid-section__icon {
    display: inline-flex;
    color: var(--fg-icon-color);
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
}

.gm-feature-grid-section__card h3 {
    color: var(--fg-title-color);
    font-family: var(--fg-title-font);
    font-size: 18px;
    margin: 0 0 8px;
}

.gm-feature-grid-section__card p {
    color: var(--fg-text-color);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
}

@media (max-width: 980px) {
    .gm-feature-grid-section--columns-6 { --fg-grid-columns: 3; }
    .gm-feature-grid-section--columns-4 { --fg-grid-columns: 2; }
}
@media (max-width: 640px) {
    .gm-feature-grid-section__grid { grid-template-columns: 1fr; }
    .gm-feature-grid-section { padding: var(--fg-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/feature-grid.css */


/* getme-css-bundle: css/commerce/sections/gallery.css */
/* ════════════════════════════════════════════════════════════════════
   gallery — Responsive image gallery with optional :target lightbox.
   Namespace: --gl-*   Scope: .gm-gallery-section
   Variants: uniform grid (--style-uniform) or masonry (--style-masonry).
   ════════════════════════════════════════════════════════════════════ */

.gm-gallery-section {
    --gl-section-bg: transparent;
    --gl-text-color: var(--gm-text);
    --gl-title-color: var(--gm-text);
    --gl-kicker-color: var(--gm-primary);
    --gl-caption-color: var(--gm-muted);
    --gl-section-padding-block: var(--theme-spacing-3xl, 64px);
    --gl-grid-gap: var(--theme-spacing-lg, 24px);
    --gl-card-radius: var(--theme-radius-lg, 12px);
    --gl-grid-columns: 3;
    --gl-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --gl-body-font: var(--font-primary, sans-serif);

    background: var(--gl-section-bg);
    color: var(--gl-text-color);
    font-family: var(--gl-body-font);
    padding: var(--gl-section-padding-block) var(--gm-section-inline-padding);
}

.gm-gallery-section__head { margin: 0 auto 32px; max-width: 800px; text-align: center; }
.gm-gallery-section__head .gm-kicker {
    color: var(--gl-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-gallery-section__title {
    color: var(--gl-title-color);
    font-family: var(--gl-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-gallery-section__intro {
    color: var(--gl-text-color);
    margin: 0;
    opacity: 0.85;
}

/* Uniform grid */
.gm-gallery-section--style-uniform .gm-gallery-section__grid {
    display: grid;
    gap: var(--gl-grid-gap);
    grid-template-columns: repeat(var(--gl-grid-columns), minmax(0, 1fr));
}

/* Masonry: CSS columns */
.gm-gallery-section--style-masonry .gm-gallery-section__grid {
    column-count: var(--gl-grid-columns);
    column-gap: var(--gl-grid-gap);
}
.gm-gallery-section--style-masonry .gm-gallery-section__item {
    break-inside: avoid;
    margin-bottom: var(--gl-grid-gap);
}

.gm-gallery-section__item {
    margin: 0;
    min-width: 0;
}
.gm-gallery-section__media {
    border-radius: var(--gl-card-radius);
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.gm-gallery-section__media img {
    display: block;
    height: auto;
    object-fit: cover;
    transition: transform 220ms ease;
    width: 100%;
}
.gm-gallery-section__media--placeholder {
    background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(226, 232, 240, 0.7)),
        linear-gradient(45deg, transparent 44%, rgba(100, 116, 139, 0.18) 45%, rgba(100, 116, 139, 0.18) 55%, transparent 56%);
    border: 1px dashed rgba(100, 116, 139, 0.34);
    min-height: 180px;
}
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-square .gm-gallery-section__media img { aspect-ratio: 1 / 1; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-landscape .gm-gallery-section__media img { aspect-ratio: 4 / 3; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-portrait .gm-gallery-section__media img { aspect-ratio: 3 / 4; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-wide .gm-gallery-section__media img { aspect-ratio: 16 / 9; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-square .gm-gallery-section__media--placeholder { aspect-ratio: 1 / 1; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-landscape .gm-gallery-section__media--placeholder { aspect-ratio: 4 / 3; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-portrait .gm-gallery-section__media--placeholder { aspect-ratio: 3 / 4; }
.gm-gallery-section--style-uniform.gm-gallery-section--ratio-wide .gm-gallery-section__media--placeholder { aspect-ratio: 16 / 9; }

.gm-gallery-section__media:hover img { transform: scale(1.03); }

.gm-gallery-section__caption {
    color: var(--gl-caption-color);
    font-size: 13px;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

/* Lightbox (CSS-only via :target) */
.gm-gallery-section__lightbox {
    display: none;
    inset: 0;
    position: fixed;
    z-index: 1000;
}
.gm-gallery-section__lightbox:target {
    align-items: center;
    display: flex;
    justify-content: center;
}
.gm-gallery-section__lightbox-backdrop {
    background: rgba(15, 23, 42, 0.88);
    inset: 0;
    position: absolute;
}
.gm-gallery-section__lightbox-frame {
    background: var(--gm-surface, #ffffff);
    border-radius: var(--theme-radius-lg, 12px);
    max-height: 90vh;
    max-width: min(1100px, 92vw);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.gm-gallery-section__lightbox-frame img {
    display: block;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    width: 100%;
}
.gm-gallery-section__lightbox-frame figcaption {
    color: var(--gm-text, #111);
    font-size: 14px;
    padding: 12px 16px;
}
.gm-gallery-section__lightbox-close {
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 22px;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 10px;
    width: 36px;
}

@media (max-width: 980px) {
    .gm-gallery-section--style-uniform .gm-gallery-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-gallery-section--style-masonry .gm-gallery-section__grid { column-count: 2; }
}
@media (max-width: 560px) {
    .gm-gallery-section { padding: var(--gl-section-padding-block) 18px; }
    .gm-gallery-section--style-uniform .gm-gallery-section__grid { grid-template-columns: 1fr; }
    .gm-gallery-section--style-masonry .gm-gallery-section__grid { column-count: 1; }
}

/* getme-css-bundle:end css/commerce/sections/gallery.css */


/* getme-css-bundle: css/commerce/sections/testimonials.css */
/* ════════════════════════════════════════════════════════════════════
   testimonials — Customer quote cards.
   Namespace: --ts-*   Scope: .gm-testimonials-section
   ════════════════════════════════════════════════════════════════════ */

.gm-testimonials-section {
    --ts-section-bg: color-mix(in srgb, var(--gm-primary) 8%, var(--gm-bg));
    --ts-text-color: var(--gm-text);
    --ts-title-color: var(--gm-text);
    --ts-kicker-color: var(--gm-primary);
    --ts-card-bg: #ffffff;
    --ts-card-border: var(--gm-border);
    --ts-quote-color: var(--gm-text);
    --ts-section-padding-block: var(--theme-spacing-3xl, 64px);
    --ts-grid-gap: var(--theme-spacing-lg, 24px);
    --ts-card-radius: var(--theme-radius-lg, 12px);
    --ts-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --ts-body-font: var(--font-primary, sans-serif);
    --ts-grid-columns: 3;

    background: var(--ts-section-bg);
    color: var(--ts-text-color);
    font-family: var(--ts-body-font);
    padding: var(--ts-section-padding-block) var(--gm-section-inline-padding);
}

.gm-testimonials-section__head { margin: 0 auto 36px; max-width: 800px; text-align: center; }
.gm-testimonials-section__head .gm-kicker {
    color: var(--ts-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-testimonials-section__title {
    color: var(--ts-title-color);
    font-family: var(--ts-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-testimonials-section__intro { color: var(--ts-text-color); margin: 0; opacity: 0.85; }

.gm-testimonials-section--columns-1 { --ts-grid-columns: 1; }
.gm-testimonials-section--columns-1 .gm-testimonials-section__grid {
    margin: 0 auto;
    max-width: 720px;
}
.gm-testimonials-section--columns-2 { --ts-grid-columns: 2; }
.gm-testimonials-section--columns-3 { --ts-grid-columns: 3; }

.gm-testimonials-section__grid {
    display: grid;
    gap: var(--ts-grid-gap);
    grid-template-columns: repeat(var(--ts-grid-columns), minmax(0, 1fr));
}

.gm-testimonials-section__card {
    background: var(--ts-card-bg);
    border: 1px solid var(--ts-card-border);
    border-radius: var(--ts-card-radius);
    margin: 0;
    padding: 28px;
    position: relative;
}

.gm-testimonials-section__card::before {
    color: var(--ts-kicker-color);
    content: "\201C";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 0.7;
    margin-bottom: 6px;
}

.gm-testimonials-section__card blockquote {
    color: var(--ts-quote-color);
    font-size: 16px;
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 16px;
}

.gm-testimonials-section__card figcaption {
    display: grid;
    gap: 2px;
}
.gm-testimonials-section__card figcaption strong {
    color: var(--ts-title-color);
    font-family: var(--ts-title-font);
    font-size: 14px;
    font-weight: 700;
}
.gm-testimonials-section__card figcaption span {
    color: var(--ts-text-color);
    font-size: 13px;
    opacity: 0.7;
}

@media (max-width: 980px) {
    .gm-testimonials-section__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .gm-testimonials-section { padding: var(--ts-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/testimonials.css */


/* getme-css-bundle: css/commerce/sections/faq.css */
/* ════════════════════════════════════════════════════════════════════
   faq — Accordion using native <details>.
   Namespace: --fq-*   Scope: .gm-faq-section
   ════════════════════════════════════════════════════════════════════ */

.gm-faq-section {
    --fq-section-bg: transparent;
    --fq-text-color: var(--gm-text);
    --fq-title-color: var(--gm-text);
    --fq-kicker-color: var(--gm-primary);
    --fq-question-color: var(--gm-text);
    --fq-answer-color: var(--gm-muted);
    --fq-item-bg: var(--gm-surface);
    --fq-item-border: var(--gm-border);
    --fq-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fq-item-gap: var(--theme-spacing-sm, 12px);
    --fq-item-radius: var(--theme-radius-md, 10px);
    --fq-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fq-body-font: var(--font-primary, sans-serif);

    background: var(--fq-section-bg);
    color: var(--fq-text-color);
    font-family: var(--fq-body-font);
    padding: var(--fq-section-padding-block) var(--gm-section-inline-padding);
}

.gm-faq-section__head { margin: 0 auto 32px; max-width: 760px; text-align: center; }
.gm-faq-section__head .gm-kicker {
    color: var(--fq-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-faq-section__title {
    color: var(--fq-title-color);
    font-family: var(--fq-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-faq-section__intro { color: var(--fq-text-color); margin: 0; opacity: 0.85; }

.gm-faq-section__list {
    display: grid;
    gap: var(--fq-item-gap);
    margin: 0 auto;
    max-width: 820px;
}

.gm-faq-section--layout-two-column .gm-faq-section__list {
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
}

.gm-faq-section__item {
    background: var(--fq-item-bg);
    border: 1px solid var(--fq-item-border);
    border-radius: var(--fq-item-radius);
    padding: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.gm-faq-section__item[open] {
    border-color: color-mix(in srgb, var(--gm-primary) 40%, var(--fq-item-border));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.gm-faq-section__question {
    align-items: center;
    color: var(--fq-question-color);
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 14px;
    justify-content: space-between;
    list-style: none;
    padding: 18px 22px;
}
.gm-faq-section__question::-webkit-details-marker { display: none; }
.gm-faq-section__question:focus-visible {
    border-radius: var(--fq-item-radius);
    outline: 2px solid var(--gm-primary);
    outline-offset: 2px;
}

.gm-faq-section__icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--fq-question-color);
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 18px;
    font-weight: 400;
    height: 28px;
    justify-content: center;
    transition: transform 180ms ease;
    width: 28px;
}
.gm-faq-section__item[open] .gm-faq-section__icon { transform: rotate(45deg); }

.gm-faq-section__answer {
    color: var(--fq-answer-color);
    line-height: 1.6;
    padding: 0 22px 20px;
}

@media (max-width: 760px) {
    .gm-faq-section--layout-two-column .gm-faq-section__list {
        grid-template-columns: 1fr;
    }
    .gm-faq-section__question { padding: 16px 18px; }
    .gm-faq-section__answer { padding: 0 18px 16px; }
}

/* getme-css-bundle:end css/commerce/sections/faq.css */


/* getme-css-bundle: css/commerce/sections/pricing.css */
/* ════════════════════════════════════════════════════════════════════
   pricing — Plan tier cards with optional "popular" emphasis.
   Namespace: --pc-*   Scope: .gm-pricing-section
   ════════════════════════════════════════════════════════════════════ */

.gm-pricing-section {
    --pc-section-bg: transparent;
    --pc-text-color: var(--gm-text);
    --pc-title-color: var(--gm-text);
    --pc-kicker-color: var(--gm-primary);
    --pc-card-bg: var(--gm-surface);
    --pc-card-border: var(--gm-border);
    --pc-popular-accent: var(--gm-primary);
    --pc-price-color: var(--gm-text);
    --pc-feature-color: var(--gm-muted);
    --pc-cta-bg: var(--gm-primary);
    --pc-cta-text: #ffffff;
    --pc-section-padding-block: var(--theme-spacing-3xl, 64px);
    --pc-grid-gap: var(--theme-spacing-lg, 24px);
    --pc-card-radius: var(--theme-radius-lg, 12px);
    --pc-grid-columns: 3;
    --pc-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --pc-body-font: var(--font-primary, sans-serif);

    background: var(--pc-section-bg);
    color: var(--pc-text-color);
    font-family: var(--pc-body-font);
    padding: var(--pc-section-padding-block) var(--gm-section-inline-padding);
}

.gm-pricing-section__head { margin: 0 auto 32px; max-width: 760px; text-align: center; }
.gm-pricing-section__head .gm-kicker {
    color: var(--pc-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-pricing-section__title {
    color: var(--pc-title-color);
    font-family: var(--pc-title-font);
    font-size: clamp(24px, 3.4vw, 38px);
    margin: 0 0 10px;
}
.gm-pricing-section__intro { color: var(--pc-text-color); margin: 0; opacity: 0.85; }

.gm-pricing-section__grid {
    display: grid;
    gap: var(--pc-grid-gap);
    grid-template-columns: repeat(var(--pc-grid-columns), minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1180px;
}

.gm-pricing-section__card {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-card-border);
    border-radius: var(--pc-card-radius);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 28px 24px;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.gm-pricing-section__card:hover {
    border-color: color-mix(in srgb, var(--pc-popular-accent) 35%, var(--pc-card-border));
    transform: translateY(-2px);
}

.gm-pricing-section__card--popular {
    border-color: var(--pc-popular-accent);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.gm-pricing-section__badge {
    align-self: flex-start;
    background: var(--pc-popular-accent);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    text-transform: uppercase;
}

.gm-pricing-section__plan-name {
    color: var(--pc-title-color);
    font-family: var(--pc-title-font);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.gm-pricing-section__price-row {
    align-items: baseline;
    color: var(--pc-price-color);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.gm-pricing-section__price {
    color: var(--pc-price-color);
    font-family: var(--pc-title-font);
    font-size: 36px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}
.gm-pricing-section__period {
    color: var(--pc-feature-color);
    font-size: 14px;
}

.gm-pricing-section__features {
    color: var(--pc-feature-color);
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gm-pricing-section__features li {
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}
.gm-pricing-section__features li::before {
    color: var(--pc-popular-accent);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
}

.gm-pricing-section__cta {
    align-items: center;
    background: var(--pc-cta-bg);
    border: 1px solid var(--pc-cta-bg);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    color: var(--pc-cta-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    margin-top: auto;
    min-height: 44px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
}
.gm-pricing-section__cta:hover { filter: brightness(0.92); }
.gm-pricing-section__card--popular .gm-pricing-section__cta { background: var(--pc-popular-accent); border-color: var(--pc-popular-accent); }

@media (max-width: 980px) {
    .gm-pricing-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .gm-pricing-section { padding: var(--pc-section-padding-block) 18px; }
    .gm-pricing-section__grid { grid-template-columns: 1fr; }
    .gm-pricing-section__price { font-size: 32px; }
}

/* getme-css-bundle:end css/commerce/sections/pricing.css */


/* getme-css-bundle: css/commerce/sections/cta-banner.css */
/* ════════════════════════════════════════════════════════════════════
   cta-banner — Compact call-to-action band.
   Namespace: --cb-*   Scope: .gm-cta-banner-section
   ════════════════════════════════════════════════════════════════════ */

.gm-cta-banner-section {
    --cb-section-bg: linear-gradient(135deg, var(--gm-primary), color-mix(in srgb, var(--gm-primary) 70%, #000));
    --cb-text-color: rgba(255, 255, 255, 0.9);
    --cb-title-color: #ffffff;
    --cb-kicker-color: rgba(255, 255, 255, 0.8);
    --cb-primary-bg: #ffffff;
    --cb-primary-text: var(--gm-primary);
    --cb-secondary-bg: transparent;
    --cb-secondary-text: #ffffff;
    --cb-section-padding-block: var(--theme-spacing-3xl, 64px);
    --cb-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --cb-body-font: var(--font-primary, sans-serif);

    background: var(--cb-section-bg);
    color: var(--cb-text-color);
    font-family: var(--cb-body-font);
    padding: var(--cb-section-padding-block) var(--gm-section-inline-padding);
}

.gm-cta-banner-section__inner {
    align-items: center;
    display: grid;
    gap: 28px;
    margin: 0 auto;
    max-width: 1200px;
}

.gm-cta-banner-section--layout-centered .gm-cta-banner-section__inner {
    justify-items: center;
    text-align: center;
}
.gm-cta-banner-section--layout-row .gm-cta-banner-section__inner {
    grid-template-columns: minmax(0, 1.6fr) auto;
}

.gm-cta-banner-section__copy .gm-kicker {
    color: var(--cb-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.gm-cta-banner-section__title {
    color: var(--cb-title-color);
    font-family: var(--cb-title-font);
    font-size: clamp(24px, 3.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
}
.gm-cta-banner-section__intro {
    color: var(--cb-text-color);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    max-width: 680px;
}

.gm-cta-banner-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.gm-cta-banner-section__button {
    align-items: center;
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-cta-banner-section__button--primary {
    background: var(--cb-primary-bg);
    border: 1px solid var(--cb-primary-bg);
    color: var(--cb-primary-text);
}
.gm-cta-banner-section__button--secondary {
    background: var(--cb-secondary-bg);
    border: 1px solid currentColor;
    color: var(--cb-secondary-text);
}
.gm-cta-banner-section__button:hover { filter: brightness(0.92); transform: translateY(-1px); }

@media (max-width: 980px) {
    .gm-cta-banner-section--layout-row .gm-cta-banner-section__inner {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .gm-cta-banner-section { padding: var(--cb-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/cta-banner.css */


/* getme-css-bundle: css/commerce/sections/newsletter.css */
/* ════════════════════════════════════════════════════════════════════
   newsletter — Inline subscribe form.
   Namespace: --nw-*   Scope: .gm-newsletter-section
   ════════════════════════════════════════════════════════════════════ */

.gm-newsletter-section {
    --nw-section-bg: var(--gm-bg);
    --nw-text-color: var(--gm-text);
    --nw-title-color: var(--gm-text);
    --nw-kicker-color: var(--gm-primary);
    --nw-field-bg: #ffffff;
    --nw-field-text: var(--gm-text);
    --nw-field-border: var(--gm-border);
    --nw-button-bg: var(--gm-primary);
    --nw-button-text: #ffffff;
    --nw-section-padding-block: var(--theme-spacing-3xl, 64px);
    --nw-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --nw-body-font: var(--font-primary, sans-serif);

    background: var(--nw-section-bg);
    color: var(--nw-text-color);
    font-family: var(--nw-body-font);
    padding: var(--nw-section-padding-block) var(--gm-section-inline-padding);
}

.gm-newsletter-section__inner {
    align-items: center;
    display: grid;
    gap: 28px;
    margin: 0 auto;
    max-width: 1080px;
}

.gm-newsletter-section--layout-centered .gm-newsletter-section__inner {
    justify-items: center;
    text-align: center;
}

.gm-newsletter-section--layout-row .gm-newsletter-section__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.gm-newsletter-section__copy { min-width: 0; }
.gm-newsletter-section__copy .gm-kicker {
    color: var(--nw-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-newsletter-section__title {
    color: var(--nw-title-color);
    font-family: var(--nw-title-font);
    font-size: clamp(22px, 3vw, 34px);
    margin: 0 0 8px;
}
.gm-newsletter-section__intro {
    color: var(--nw-text-color);
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
}

.gm-newsletter-section__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 560px;
}
.gm-newsletter-section--layout-centered .gm-newsletter-section__form { margin: 0 auto; }

.gm-newsletter-section__field {
    display: grid;
    flex: 1;
    min-width: 220px;
}
.gm-newsletter-section__field-label {
    color: var(--nw-text-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    opacity: 0.7;
    text-transform: uppercase;
}
.gm-newsletter-section--layout-centered .gm-newsletter-section__field-label {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.gm-newsletter-section__field input {
    background: var(--nw-field-bg);
    border: 1px solid var(--nw-field-border);
    border-radius: var(--gm-control-radius, var(--theme-input-radius, var(--theme-radius-md, 8px)));
    color: var(--nw-field-text);
    font-family: inherit;
    font-size: 15px;
    min-height: 48px;
    padding: 0 14px;
}

.gm-newsletter-section__button {
    align-items: center;
    background: var(--nw-button-bg);
    border: 1px solid var(--nw-button-bg);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    color: var(--nw-button-text);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    transition: filter 160ms ease, transform 160ms ease;
}
.gm-newsletter-section__button:hover { filter: brightness(0.92); transform: translateY(-1px); }

.gm-newsletter-section__consent {
    color: var(--nw-text-color);
    font-size: 12px;
    margin: 18px auto 0;
    max-width: 700px;
    opacity: 0.65;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-newsletter-section--layout-row .gm-newsletter-section__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .gm-newsletter-section { padding: var(--nw-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/newsletter.css */


/* getme-css-bundle: css/commerce/sections/announcement-bar.css */
/* ════════════════════════════════════════════════════════════════════
   announcement-bar — campaign / announcement marquee strip.

   Owner     : sections/announcement-bar.json + .html
   Namespace : --ab-*  (announcement-bar). Unique to this section.
   Scope     : Every rule starts with `.gm-announcement-bar`.
   Marquee   : CSS-only. The track holds two identical message groups and
               translates -50% for a seamless loop. Paused on hover and
               disabled (static, centered) for reduced-motion visitors.
   ════════════════════════════════════════════════════════════════════ */

.gm-announcement-bar {
    --ab-bg: var(--color-bg-dark, #0f172a);
    --ab-text: #ffffff;
    --ab-padding: var(--theme-spacing-sm, 10px);
    --ab-font-size: 14px;
    --ab-duration: 28s;

    background: var(--ab-bg);
    color: var(--ab-text);
    overflow: hidden;
}

/* Optional edge-to-edge full-bleed (off by default). overflow:hidden on the
   bar clips the marquee so the page never gains a horizontal scrollbar. */
.gm-announcement-bar--full {
    margin-inline: calc(50% - 50vw);
}

.gm-announcement-bar--font-sm { --ab-font-size: 13px; }
.gm-announcement-bar--font-md { --ab-font-size: 14px; }
.gm-announcement-bar--font-lg { --ab-font-size: 16px; }

.gm-announcement-bar--speed-slow { --ab-duration: 42s; }
.gm-announcement-bar--speed-medium { --ab-duration: 28s; }
.gm-announcement-bar--speed-fast { --ab-duration: 18s; }

.gm-announcement-bar__link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.gm-announcement-bar__viewport {
    overflow: hidden;
    padding: var(--ab-padding) 0;
}

.gm-announcement-bar__track {
    animation: gm-ab-marquee var(--ab-duration) linear infinite;
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

.gm-announcement-bar:hover .gm-announcement-bar__track {
    animation-play-state: paused;
}

.gm-announcement-bar__group {
    align-items: center;
    display: inline-flex;
}

.gm-announcement-bar__item {
    font-size: var(--ab-font-size);
    font-weight: 500;
    padding: 0 10px;
}

.gm-announcement-bar__sep {
    font-size: var(--ab-font-size);
    opacity: 0.55;
    padding: 0 2px;
}

@keyframes gm-ab-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Static (off) + reduced-motion: show one centered group, no animation. */
.gm-announcement-bar--speed-off .gm-announcement-bar__track {
    animation: none;
    justify-content: center;
    width: 100%;
}
.gm-announcement-bar--speed-off .gm-announcement-bar__group[aria-hidden="true"] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .gm-announcement-bar__track {
        animation: none;
        justify-content: center;
        width: 100%;
    }
    .gm-announcement-bar__group[aria-hidden="true"] {
        display: none;
    }
}

/* ── Arrows mode (one message, prev/next) ───────────────────────── */
.gm-announcement-bar__arrows {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: var(--ab-padding) 12px;
}

.gm-announcement-bar__stage {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    text-align: center;
}

.gm-announcement-bar__slide {
    display: none;
    font-size: var(--ab-font-size);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-announcement-bar__slide.is-active {
    animation: gm-ab-fade 280ms ease;
    display: block;
}

@keyframes gm-ab-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gm-announcement-bar__nav {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 22px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    opacity: 0.75;
    width: 28px;
}

.gm-announcement-bar__nav:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .gm-announcement-bar__slide.is-active { animation: none; }
}

/* getme-css-bundle:end css/commerce/sections/announcement-bar.css */

/* Tekdal design sections (proportional, --gm-u) */

/* getme-css-bundle: css/components/icon-panel.css */
/* ════════════════════════════════════════════════════════════════════
   icon-panel (components/icon-panel.html) — shared media panel.
   Callers size it with --ip-* (defaults = service card). Colours follow
   the band's highlight (--gm-primary*), so inverted bands work too.
   ════════════════════════════════════════════════════════════════════ */

.gm-icon-panel {
    --ip-ratio: 16 / 10;
    --ip-radius: calc(var(--gm-u) * 14);
    --ip-icon: calc(var(--gm-u) * 92);
    --ip-icon-x: calc(var(--gm-u) * 24);
    --ip-icon-y: calc(var(--gm-u) * 20);
    --ip-bubble-a: calc(var(--gm-u) * 34);
    --ip-bubble-b: calc(var(--gm-u) * 18);
    --ip-bubble-x: calc(var(--gm-u) * 70);
    --ip-bubble-y: calc(var(--gm-u) * 34);
    --ip-inset: calc(var(--gm-u) * 14);
    aspect-ratio: var(--ip-ratio);
    background: var(--gm-primary-soft);
    border-radius: var(--ip-radius);
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.gm-icon-panel__img {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    width: 100%;
}

.gm-icon-panel::before {
    background-image: radial-gradient(color-mix(in srgb, var(--gm-primary) 30%, transparent) calc(var(--gm-u) * 1), transparent calc(var(--gm-u) * 1.5));
    background-size: calc(var(--gm-u) * 18) calc(var(--gm-u) * 18);
    content: "";
    inset: 0;
    mask-image: linear-gradient(135deg, transparent 35%, var(--gm-text) 100%);
    position: absolute;
    z-index: -1;
}

.gm-icon-panel::after {
    border: calc(var(--gm-u) * 1) solid var(--gm-primary-line);
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--gm-u) * 34) color-mix(in srgb, var(--gm-primary) 6%, transparent);
    content: "";
    height: calc(var(--gm-u) * 220);
    position: absolute;
    right: calc(var(--gm-u) * -60);
    top: calc(var(--gm-u) * -80);
    width: calc(var(--gm-u) * 220);
    z-index: -1;
}

.gm-icon-panel__icon {
    bottom: var(--ip-icon-y);
    color: var(--gm-primary);
    height: var(--ip-icon);
    left: var(--ip-icon-x);
    position: absolute;
    transform-origin: left bottom;
    transition: transform var(--gm-t-hover) var(--gm-ease-back);
    width: var(--ip-icon);
}

.gm-icon-panel__bubble {
    background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--gm-surface) 90%, transparent) 0 9%, color-mix(in srgb, var(--gm-primary) 10%, transparent) 10% 60%, transparent 72%);
    border: calc(var(--gm-u) * 1) solid var(--gm-primary-line);
    border-radius: 50%;
    position: absolute;
}

.gm-icon-panel__bubble--a { bottom: var(--ip-bubble-y); height: var(--ip-bubble-a); right: var(--ip-bubble-x); width: var(--ip-bubble-a); }
.gm-icon-panel__bubble--b { bottom: var(--ip-bubble-b-y, calc(var(--ip-bubble-y) + var(--ip-bubble-a) + var(--gm-u) * 10)); height: var(--ip-bubble-b); right: var(--ip-bubble-b-x, calc(var(--ip-bubble-x) - var(--ip-bubble-b) - var(--gm-u) * 6)); width: var(--ip-bubble-b); }

.gm-icon-panel__num {
    background: var(--gm-surface);
    border-radius: var(--gm-button-radius);
    color: var(--gm-primary-ink);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 13);
    font-weight: 600;
    left: var(--ip-inset);
    letter-spacing: 0.04em;
    padding: calc(var(--gm-u) * 6) calc(var(--gm-u) * 12);
    position: absolute;
    top: var(--ip-inset);
}

.gm-icon-panel__go {
    background: var(--gm-surface);
    border-radius: 50%;
    color: var(--gm-text);
    display: grid;
    height: calc(var(--gm-u) * 44);
    place-items: center;
    position: absolute;
    right: var(--ip-inset);
    top: var(--ip-inset);
    transition: background-color var(--gm-t-hover) ease, color var(--gm-t-hover) ease;
    width: calc(var(--gm-u) * 44);
}

.gm-icon-panel__go .gm-arrow {
    transform: rotate(-45deg);
    transition: transform var(--gm-t-hover) var(--gm-ease-back);
}

/* getme-css-bundle:end css/components/icon-panel.css */


/* getme-css-bundle: css/sections/impact-hero.css */
/* ════════════════════════════════════════════════════════════════════
   impact-hero (sections/impact-hero.html)
   Namespace: --ih-*   Scope: .gm-impact-hero-section
   Full-bleed media under a scrim (Color schemes > Overlay, strength from the
   section's "Darkening" setting), text bottom-left or centred. The band is
   .gm-ink, so every colour below is the dark palette's.
   Geometry = reference px × --gm-u (1502 / 680 / 390). Height = the screen
   minus the header bar, between a floor and the chosen height's ceiling.
   Motion: media settles → roof mark draws → title lines rise → copy → actions.
   ════════════════════════════════════════════════════════════════════ */

.gm-impact-hero-section {
    --ih-top: 97;          /* header bar height (u) — the hero fills the rest of the screen */
    --ih-max: 860;
    --ih-min: 540;
    --ih-k: 1;
    --ih-pad-x: 43;
    --ih-pad-b: 76;
    --ih-d-mark: calc(var(--gm-t-fade) * 0.25);
    --ih-d-title: calc(var(--gm-t-fade) * 0.4);
    --ih-d-step: calc(var(--gm-t-fade) * 0.12);
    --ih-d-copy: calc(var(--gm-t-fade) * 0.85);
    background: var(--gm-bg);
    color: var(--gm-text);
    display: grid;
    height: clamp(calc(var(--gm-u) * var(--ih-min) * var(--ih-k)), calc(100svh - var(--gm-u) * var(--ih-top)), calc(var(--gm-u) * var(--ih-max) * var(--ih-k)));
    isolation: isolate;
    overflow: clip;
}

.gm-impact-hero-section--medium { --ih-k: 0.78; }
.gm-impact-hero-section--compact { --ih-k: 0.6; }

/* ── Media ─────────────────────────────────────────────────────────── */
.gm-impact-hero-section__media {
    animation: gm-ih-settle calc(var(--gm-t-media) * 2) var(--gm-ease-expo) both;
    display: grid;
    inset: 0;
    position: absolute;
    z-index: -1;
}

/* Scrim: the overlay colour, strongest where the text sits. */
.gm-impact-hero-section__media::after {
    background:
        linear-gradient(to top, color-mix(in srgb, var(--gm-overlay) var(--ih-overlay), transparent) 0%, transparent 70%),
        linear-gradient(to right, color-mix(in srgb, var(--gm-overlay) calc(var(--ih-overlay) * 0.7), transparent) 0%, transparent 65%);
    content: "";
    inset: 0;
    position: absolute;
}

.gm-impact-hero-section--center .gm-impact-hero-section__media::after {
    background: color-mix(in srgb, var(--gm-overlay) var(--ih-overlay), transparent);
}

.gm-impact-hero-section__poster,
.gm-impact-hero-section__img {
    grid-area: 1 / 1;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.gm-impact-hero-section__img {
    display: block;
    object-fit: cover;
}

.gm-impact-hero-section__media--top .gm-impact-hero-section__img { object-position: center top; }
.gm-impact-hero-section__media--bottom .gm-impact-hero-section__img { object-position: center bottom; }
.gm-impact-hero-section__media--left .gm-impact-hero-section__img { object-position: left center; }
.gm-impact-hero-section__media--right .gm-impact-hero-section__img { object-position: right center; }

.gm-impact-hero-section__video {
    opacity: 0;
    transition: opacity var(--gm-t-fade) var(--gm-ease-soft);
}

.gm-impact-hero-section__video.is-playing {
    opacity: 1;
}

/* No media yet: a quiet blueprint grid on the dark surface (lines = the palette's line colour). */
.gm-impact-hero-section--no-media .gm-impact-hero-section__media {
    background:
        linear-gradient(color-mix(in srgb, var(--gm-line) 22%, transparent) 1px, transparent 1px) 0 0 / calc(var(--gm-u) * 48) calc(var(--gm-u) * 48),
        linear-gradient(90deg, color-mix(in srgb, var(--gm-line) 22%, transparent) 1px, transparent 1px) 0 0 / calc(var(--gm-u) * 48) calc(var(--gm-u) * 48),
        var(--gm-surface);
}

/* ── Copy ──────────────────────────────────────────────────────────── */
.gm-impact-hero-section__inner {
    align-self: end;
    display: grid;
    justify-items: start;
    padding: 0 calc(var(--gm-u) * var(--ih-pad-x)) calc(var(--gm-u) * var(--ih-pad-b));
    width: min(100%, calc(var(--gm-u) * 980));
}

.gm-impact-hero-section--center .gm-impact-hero-section__inner {
    align-self: center;
    justify-items: center;
    justify-self: center;
    padding-bottom: 0;
    text-align: center;
}

.gm-impact-hero-section__mark {
    animation: gm-fade var(--gm-t-fade) var(--gm-ease-soft) var(--ih-d-mark) both;
    fill: var(--gm-primary);
    height: auto;
    margin-bottom: calc(var(--gm-u) * 26);
    overflow: visible;
    width: calc(var(--gm-u) * 92);
}

.gm-impact-hero-section__roof {
    animation: gm-ih-roof var(--gm-t-title) var(--gm-ease-expo) var(--ih-d-mark) both;
    transform-box: fill-box;
}

.gm-impact-hero-section__sweep {
    animation: gm-draw var(--gm-t-title) var(--gm-ease-quart) calc(var(--ih-d-mark) * 2) both;
    transform-box: fill-box;
    transform-origin: left center;
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-impact-hero-section .gm-impact-hero-section__kicker {
    animation: gm-fade-up var(--gm-t-fade) var(--gm-ease-expo) var(--ih-d-mark) both;
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 13);
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-impact-hero-section .gm-impact-hero-section__kicker::before {
    background: var(--gm-primary);
}

.gm-impact-hero-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 112);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.92;
    margin: 0;
    text-wrap: balance;
}

.gm-impact-hero-section--caps .gm-impact-hero-section__title {
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.gm-impact-hero-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-impact-hero-section__line {
    display: block;
    margin-bottom: -0.14em;
    overflow: hidden;
    padding-bottom: 0.14em;
}

.gm-impact-hero-section__line-in {
    animation: gm-mask-up var(--gm-t-title) var(--gm-ease-expo) both;
    display: block;
}

.gm-impact-hero-section__line:nth-child(1) .gm-impact-hero-section__line-in { animation-delay: var(--ih-d-title); }
.gm-impact-hero-section__line:nth-child(2) .gm-impact-hero-section__line-in { animation-delay: calc(var(--ih-d-title) + var(--ih-d-step)); }
.gm-impact-hero-section__line:nth-child(n+3) .gm-impact-hero-section__line-in { animation-delay: calc(var(--ih-d-title) + var(--ih-d-step) * 2); }

.gm-impact-hero-section__text {
    animation: gm-fade-up var(--gm-t-fade) var(--gm-ease-expo) var(--ih-d-copy) both;
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 19);
    letter-spacing: -0.01em;
    line-height: 1.5;
    margin: calc(var(--gm-u) * 26) 0 0;
    max-width: calc(var(--gm-u) * 520);
}

.gm-impact-hero-section__actions {
    align-items: center;
    animation: gm-fade-up var(--gm-t-fade) var(--gm-ease-expo) calc(var(--ih-d-copy) + var(--ih-d-step)) both;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * 16) calc(var(--gm-u) * 30);
    margin-top: calc(var(--gm-u) * 36);
}

.gm-impact-hero-section--center .gm-impact-hero-section__actions {
    justify-content: center;
}

.gm-impact-hero-section__link {
    border-bottom: calc(var(--gm-u) * 1.5) solid color-mix(in srgb, var(--gm-text) 40%, transparent);
    color: var(--gm-text);
    font-size: calc(var(--gm-u) * 15);
    font-weight: 600;
    padding-bottom: calc(var(--gm-u) * 3);
    text-decoration: none;
    transition: border-color var(--gm-t-quick) ease;
}

.gm-impact-hero-section__link:hover {
    border-color: var(--gm-primary);
}

/* Scroll line: a short rule that keeps travelling down, bottom right. */
.gm-impact-hero-section__cue {
    background: color-mix(in srgb, var(--gm-text) 22%, transparent);
    bottom: 0;
    height: calc(var(--gm-u) * 88);
    overflow: hidden;
    position: absolute;
    right: calc(var(--gm-u) * var(--ih-pad-x));
    width: calc(var(--gm-u) * 1.5);
}

.gm-impact-hero-section__cue::after {
    animation: gm-ih-cue calc(var(--gm-t-fade) * 2.5) var(--gm-ease-inout) infinite;
    background: var(--gm-primary);
    content: "";
    height: 40%;
    inset: 0 0 auto;
    position: absolute;
}

/* Off screen: the infinite cue stops (theme.js toggles data-gm-offscreen per band). */
.gm-impact-hero-section[data-gm-offscreen] .gm-impact-hero-section__cue::after {
    animation-play-state: paused;
}

@keyframes gm-ih-settle { from { transform: scale(1.06); } }
@keyframes gm-ih-roof { from { opacity: 0; transform: translateY(-45%); } }
@keyframes gm-ih-cue { from { translate: 0 -100%; } to { translate: 0 250%; } }

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-impact-hero-section {
        --ih-top: 110;
        --ih-max: 900;
        --ih-min: 620;
        --ih-pad-x: 32;
        --ih-pad-b: 64;
    }

    .gm-impact-hero-section__inner { width: 100%; }
    .gm-impact-hero-section__mark { margin-bottom: calc(var(--gm-u) * 22); width: calc(var(--gm-u) * 76); }
    .gm-impact-hero-section .gm-impact-hero-section__kicker { font-size: calc(var(--gm-u) * 12); margin-bottom: calc(var(--gm-u) * 16); }
    .gm-impact-hero-section__title { font-size: calc(var(--gm-u) * 84); }
    .gm-impact-hero-section__text { font-size: calc(var(--gm-u) * 18); margin-top: calc(var(--gm-u) * 22); max-width: calc(var(--gm-u) * 480); }
    .gm-impact-hero-section__actions { margin-top: calc(var(--gm-u) * 30); }
    .gm-impact-hero-section__cue { height: calc(var(--gm-u) * 64); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-impact-hero-section {
        --ih-top: 75;
        --ih-max: 760;
        --ih-min: 560;
        --ih-pad-x: 16;
        --ih-pad-b: 40;
    }

    .gm-impact-hero-section__mark { margin-bottom: calc(var(--gm-u) * 16); width: calc(var(--gm-u) * 56); }
    .gm-impact-hero-section .gm-impact-hero-section__kicker { font-size: calc(var(--gm-u) * 11); margin-bottom: calc(var(--gm-u) * 12); }
    .gm-impact-hero-section__title { font-size: calc(var(--gm-u) * 54); }
    .gm-impact-hero-section__text { font-size: calc(var(--gm-u) * 15); margin-top: calc(var(--gm-u) * 16); }
    .gm-impact-hero-section__actions { margin-top: calc(var(--gm-u) * 24); width: 100%; }
    /* Half the column instead of the theme's full-width phone pill (never
       narrower than its label + arrow). Three classes: theme.css loads after and its
       .gm-button:has(.gm-button__circle) rule already counts two. */
    .gm-impact-hero-section .gm-button.gm-impact-hero-section__cta { min-width: max-content; width: 50%; }
    .gm-impact-hero-section__cue { display: none; }
}

/* getme-css-bundle:end css/sections/impact-hero.css */


/* getme-css-bundle: css/sections/brand-band.css */
/* ════════════════════════════════════════════════════════════════════
   brand-band (sections/brand-band.html)
   Namespace: --bb-*   Scope: .gm-brand-band-section
   A flat brand ground + a very fine grain layer (::before): an inline SVG
   fractal noise, greyscale (black-to-white specks, no colour of its own),
   laid over the ground at low opacity — even on every channel, so a bright
   orange still gets visible grain (overlay flattens a near-255 red; measured).
   Strength = the section's Grain setting (--bb-grain, 0–0.3; default 0.12).
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-brand-band-section {
    --bb-ground: var(--gm-primary);
    --bb-ink: var(--gm-on-primary);
    --bb-h: 690;
    --bb-pad-x: 43;
    --bb-pad-b: 30;
    --bb-logo-f: 1;
    background: var(--bb-ground);
    color: var(--bb-ink);
    display: grid;
    isolation: isolate;
    min-height: calc(var(--gm-u) * var(--bb-h));
    overflow: clip;
    place-items: center;
    --gm-cv-h: calc(var(--gm-u) * var(--bb-h));
}

.gm-brand-band-section--accent {
    --bb-ground: var(--gm-accent);
    --bb-ink: var(--gm-on-accent);
}

.gm-brand-band-section--screen { --bb-h: 845; min-height: max(calc(var(--gm-u) * 480), 100svh); }
.gm-brand-band-section--medium { --bb-h: 520; }
.gm-brand-band-section--compact { --bb-h: 380; }

/* Grain: assets/brand/grain.svg — 160u tiles of fractal noise (greyscale, contrast stretched ×3 so the
   specks reach light and dark), blended over the ground. */
.gm-brand-band-section::before {
    background-image: url("/cdn/site/rev_5631644340ab4bec/assets/_getme/immutable/fe27c4cf6d3ef3bb4126573ef461027bbe5e93d0c165101741a8c429762a9dfd/brand/grain.svg");
    background-size: calc(var(--gm-u) * 160) calc(var(--gm-u) * 160);
    content: "";
    inset: 0;
    opacity: var(--bb-grain, 0.12);
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

/* ── Centre: logo + line ───────────────────────────────────────────── */
.gm-brand-band-section__center {
    display: grid;
    justify-items: center;
    padding: calc(var(--gm-u) * 64) calc(var(--gm-u) * var(--bb-pad-x));
    text-align: center;
}

.gm-brand-band-section__logo {
    display: block;
    height: auto;
    max-width: 100%;
    width: calc(var(--gm-u) * var(--bb-logo-n, 620) * var(--bb-logo-f));
}

.gm-brand-band-section__line {
    color: var(--bb-ink);
    font-family: var(--font-body, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 31);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.25;
    margin: calc(var(--gm-u) * 40) 0 0;
    text-wrap: balance;
}

/* ── Corner columns ────────────────────────────────────────────────── */
.gm-brand-band-section__meta {
    bottom: calc(var(--gm-u) * var(--bb-pad-b));
    display: flex;
    gap: calc(var(--gm-u) * 36);
    position: absolute;
    right: calc(var(--gm-u) * var(--bb-pad-x));
}

.gm-brand-band-section__col {
    color: color-mix(in srgb, var(--bb-ink) 88%, transparent);
    font-size: calc(var(--gm-u) * 14);
    letter-spacing: 0.01em;
    line-height: 1.75;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-brand-band-section {
        --bb-h: 620;
        --bb-pad-x: 32;
        --bb-pad-b: 28;
        --bb-logo-f: 0.85;
    }

    .gm-brand-band-section--medium { --bb-h: 500; }
    .gm-brand-band-section--compact { --bb-h: 380; }
    .gm-brand-band-section__line { font-size: calc(var(--gm-u) * 24); margin-top: calc(var(--gm-u) * 32); }
    .gm-brand-band-section__meta { gap: calc(var(--gm-u) * 28); }
    .gm-brand-band-section__col { font-size: calc(var(--gm-u) * 13); }
}

/* ── Phone: the corner columns move under the centre, still bottom-right ─ */
@media (max-width: 640px) {
    .gm-brand-band-section {
        --bb-h: 380;           /* top / bottom room half of the 560 it was (measured at 390px) */
        --bb-pad-x: 16;
        --bb-pad-b: 20;
        --bb-logo-f: 0.48;
        grid-template-rows: 1fr auto;
    }

    .gm-brand-band-section--medium { --bb-h: 330; }
    .gm-brand-band-section--compact { --bb-h: 280; }
    .gm-brand-band-section__center { align-self: center; padding-block: calc(var(--gm-u) * 48) calc(var(--gm-u) * 24); }
    .gm-brand-band-section__line { font-size: calc(var(--gm-u) * 16); margin-top: calc(var(--gm-u) * 20); }
    .gm-brand-band-section__meta {
        gap: calc(var(--gm-u) * 20);
        justify-self: end;
        padding: 0 calc(var(--gm-u) * var(--bb-pad-x)) calc(var(--gm-u) * var(--bb-pad-b));
        position: static;
    }
    .gm-brand-band-section__col { font-size: calc(var(--gm-u) * 11); }
}

/* getme-css-bundle:end css/sections/brand-band.css */


/* getme-css-bundle: css/sections/story-split.css */
/* ════════════════════════════════════════════════════════════════════
   story-split (sections/story-split.html)
   Namespace: --ss-*   Scope: .gm-story-split-section
   About / brand story: label left, heading + paragraphs right.
   Ground + grain are the theme's primitives (.gm-ground = Colors > Warm
   ground, .gm-grain); this file only sets the layout and type.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-story-split-section {
    --ss-ground: var(--gm-ground);
    --ss-ink: var(--gm-text);
    --ss-body-font: var(--font-body, var(--font-primary, sans-serif));
    --ss-head-font: var(--ss-body-font);
    font-feature-settings: var(--ss-features, normal);
    --ss-pad-y: 84;
    --ss-pad-x: 50; /* reference: the label starts 55px in on a 1642px screen (band gutter is 43) */
    --ss-split: 545; /* left column: the right one starts at 595u (≈650px on a 1642px screen) */
    background: var(--ss-ground);
    color: var(--ss-ink);
    overflow: clip;
    --gm-cv-h: calc(var(--gm-u) * 560);
}

.gm-story-split-section--head-heading { --ss-head-font: var(--font-heading, var(--font-primary, sans-serif)); }
/* Single-storey a: Inter's cv11 alternate (no effect where the served font file lacks it). */
.gm-story-split-section--alt-a { --ss-features: "cv11"; }
.gm-story-split-section--surface { --ss-ground: var(--gm-bg); }
.gm-story-split-section--page { --ss-ground: var(--color-bg-primary, var(--gm-surface)); }
.gm-story-split-section--roomy { --ss-pad-y: 140; }
.gm-story-split-section--compact { --ss-pad-y: 60; }


.gm-story-split-section__inner {
    display: grid;
    grid-template-columns: calc(var(--gm-u) * var(--ss-split)) minmax(0, 1fr);
    padding: calc(var(--gm-u) * var(--ss-pad-y)) calc(var(--gm-u) * var(--ss-pad-x));
}

.gm-story-split-section__label,
.gm-story-split-section__title {
    color: var(--ss-ink);
    font-family: var(--ss-head-font);
    font-size: calc(var(--gm-u) * 27);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.gm-story-split-section__label {
    padding-right: calc(var(--gm-u) * 24);
}

.gm-story-split-section__title {
    font-size: calc(var(--gm-u) * 24);
    margin-bottom: calc(var(--gm-u) * 15);
}

.gm-story-split-section__body {
    display: grid;
    gap: calc(var(--gm-u) * 13);
    max-width: calc(var(--gm-u) * 860);
}

.gm-story-split-section__body p {
    color: color-mix(in srgb, var(--ss-ink) 92%, transparent);
    font-family: var(--ss-body-font);
    font-size: calc(var(--gm-u) * 20);
    line-height: 1.35;
    margin: 0;
    text-wrap: pretty;
}


/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-story-split-section { --ss-pad-y: 72; --ss-pad-x: var(--gm-band-x); --gm-cv-h: calc(var(--gm-u) * 620); }
    .gm-story-split-section--roomy { --ss-pad-y: 100; }
    .gm-story-split-section--compact { --ss-pad-y: 48; }
    .gm-story-split-section__inner { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--gm-u) * 28); }
    .gm-story-split-section__label { font-size: calc(var(--gm-u) * 26); padding-right: 0; }
    .gm-story-split-section__title { font-size: calc(var(--gm-u) * 22); margin-bottom: calc(var(--gm-u) * 18); }
    .gm-story-split-section__body p { font-size: calc(var(--gm-u) * 17); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-story-split-section { --ss-pad-y: 56; --ss-pad-x: var(--gm-band-x); --gm-cv-h: calc(var(--gm-u) * 760); }
    .gm-story-split-section--roomy { --ss-pad-y: 72; }
    .gm-story-split-section--compact { --ss-pad-y: 40; }
    .gm-story-split-section__inner { row-gap: calc(var(--gm-u) * 20); }
    .gm-story-split-section__label { font-size: calc(var(--gm-u) * 22); }
    .gm-story-split-section__title { font-size: calc(var(--gm-u) * 18); margin-bottom: calc(var(--gm-u) * 14); }
    .gm-story-split-section__body { gap: calc(var(--gm-u) * 12); }
    .gm-story-split-section__body p { font-size: calc(var(--gm-u) * 15); line-height: 1.5; }
}

/* getme-css-bundle:end css/sections/story-split.css */


/* getme-css-bundle: css/sections/service-grid.css */
/* ════════════════════════════════════════════════════════════════════
   service-grid (sections/service-grid.html)
   Namespace: --sg-*   Scope: .gm-service-grid-section
   Ruled card grid: the grid draws the top/left rules, each card its
   right/bottom ones, so every cell shares one hairline (--gm-border of the
   band's palette). Hover: a brand-colour rule draws across the card top.
   Ground, padding, heading, icons = theme primitives.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-service-grid-section {
    --sg-line: var(--gm-border);
    --sg-pad: calc(var(--gm-u) * 40) calc(var(--gm-u) * 36) calc(var(--gm-u) * 44);
    --gm-cv-h: calc(var(--gm-u) * 1120);
}

.gm-service-grid-section__grid {
    border-left: 1px solid var(--sg-line);
    border-top: 1px solid var(--sg-line);
    display: grid;
    grid-template-columns: repeat(var(--sg-cols, 3), minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
    /* Every row as tall as the tallest: all cards share one size. */
    grid-auto-rows: 1fr;
}

.gm-service-grid-section__card {
    border-bottom: 1px solid var(--sg-line);
    border-right: 1px solid var(--sg-line);
    display: grid;
    align-content: start;
    padding: var(--sg-pad);
    position: relative;
    transition: background-color var(--gm-t-hover) var(--gm-ease-soft);
}

.gm-service-grid-section__card::after {
    background: var(--gm-primary);
    content: "";
    height: calc(var(--gm-u) * 2);
    left: -1px;
    position: absolute;
    top: -1px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--gm-t-hover) var(--gm-ease-expo);
    width: calc(100% + 2px);
}

.gm-service-grid-section__card:hover {
    background: var(--gm-hover);
}

.gm-service-grid-section__card:hover::after,
.gm-service-grid-section__card:focus-within::after {
    transform: scaleX(1);
}

.gm-service-grid-section__num {
    color: var(--gm-subtle);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 13);
    font-weight: 700;
    letter-spacing: 0.2em;
}

.gm-service-grid-section__icon {
    color: var(--gm-primary);
    display: block;
    height: calc(var(--gm-u) * 44);
    margin: calc(var(--gm-u) * 28) 0 calc(var(--gm-u) * 24);
    width: calc(var(--gm-u) * 44);
}

.gm-service-grid-section__name {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 22);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 calc(var(--gm-u) * 12);
}

.gm-service-grid-section__name em {
    color: var(--gm-primary);
    font-style: normal;
}

/* Fixed text lengths: long catalog names / descriptions end in "…" so a
   card never grows (title 2 lines, text 3, each listed service 1). */
.gm-service-grid-section__name,
.gm-service-grid-section__text {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.gm-service-grid-section__name { -webkit-line-clamp: 2; line-clamp: 2; }
.gm-service-grid-section__text { -webkit-line-clamp: 3; line-clamp: 3; }

/* The link covers the whole card (one tab stop, the card is the target). */
.gm-service-grid-section__link {
    color: inherit;
    text-decoration: none;
}

.gm-service-grid-section__link::before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.gm-service-grid-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 16);
    line-height: 1.65;
    margin: 0;
}

/* Catalog image in the icon's place: a framed photo, a slow zoom on hover. */
.gm-service-grid-section__media {
    aspect-ratio: 16 / 10;
    background: var(--gm-media-surface);
    border-radius: var(--theme-media-radius, var(--theme-radius-sm, 4px));
    margin: calc(var(--gm-u) * 24) 0 calc(var(--gm-u) * 24);
    overflow: hidden;
}

.gm-service-grid-section__img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gm-t-media) var(--gm-ease-expo);
    width: 100%;
}

.gm-service-grid-section__card:hover .gm-service-grid-section__img {
    transform: scale(1.04);
}

/* Catalog mode: the category's services, a quiet list under the text. */
.gm-service-grid-section__services {
    border-top: 1px solid var(--sg-line);
    display: grid;
    gap: calc(var(--gm-u) * 6);
    list-style: none;
    margin: calc(var(--gm-u) * 20) 0 0;
    padding: calc(var(--gm-u) * 16) 0 0;
}

.gm-service-grid-section__services li {
    color: var(--gm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(var(--gm-u) * 14.5);
    line-height: 1.45;
    padding-left: calc(var(--gm-u) * 16);
    position: relative;
}

.gm-service-grid-section__services li::before {
    background: var(--gm-primary);
    content: "";
    height: calc(var(--gm-u) * 1.5);
    left: 0;
    position: absolute;
    top: 0.72em;
    width: calc(var(--gm-u) * 8);
}

.gm-service-grid-section__services .gm-service-grid-section__more {
    color: var(--gm-subtle);
}

.gm-service-grid-section__services .gm-service-grid-section__more::before {
    content: none;
}

/* ── Split layout (desktop): heading column left, cards 2 × n right ──
   The heading column starts one card padding down, so the eyebrow sits
   level with the first cards' numbers; it stays in view while the cards
   scroll (sticky). Tablet / phone fall back to the stacked layout. */
@media (min-width: 981px) {
    .gm-service-grid-section--split {
        align-items: start;
        column-gap: calc(var(--gm-u) * var(--gm-band-gap));
        display: grid;
        grid-template-columns: minmax(0, 507fr) minmax(0, 910fr);
    }

    .gm-service-grid-section--split > .gm-band-head {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 0;
        padding-top: calc(var(--gm-u) * 40);
        position: sticky;
        row-gap: calc(var(--gm-u) * 28);
        top: calc(var(--gm-u) * 120);
    }

    .gm-service-grid-section--split > .gm-band-head .gm-band-head__copy { padding-right: 0; }
    .gm-service-grid-section--split > .gm-band-head .gm-band-head__side { grid-template-columns: minmax(0, 1fr); }
    .gm-service-grid-section--split .gm-service-grid-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tablet: two columns ───────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-service-grid-section {
        --sg-pad: calc(var(--gm-u) * 32) calc(var(--gm-u) * 26) calc(var(--gm-u) * 36);
        --gm-cv-h: calc(var(--gm-u) * 1500);
    }

    .gm-service-grid-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-service-grid-section__icon { height: calc(var(--gm-u) * 40); margin: calc(var(--gm-u) * 22) 0 calc(var(--gm-u) * 18); width: calc(var(--gm-u) * 40); }
    .gm-service-grid-section__name { font-size: calc(var(--gm-u) * 20); }
    .gm-service-grid-section__text { font-size: calc(var(--gm-u) * 15); }
}

/* ── Phone: one column, icon beside the number ─────────────────────── */
@media (max-width: 640px) {
    .gm-service-grid-section {
        --sg-pad: calc(var(--gm-u) * 24) calc(var(--gm-u) * 18) calc(var(--gm-u) * 26);
        --gm-cv-h: calc(var(--gm-u) * 1700);
    }

    .gm-service-grid-section__grid { grid-template-columns: minmax(0, 1fr); }
    .gm-service-grid-section__card { column-gap: calc(var(--gm-u) * 14); grid-template-columns: auto minmax(0, 1fr); }
    .gm-service-grid-section__num { align-self: center; grid-column: 2; grid-row: 1; }
    .gm-service-grid-section__icon { grid-column: 1; grid-row: 1 / span 2; height: calc(var(--gm-u) * 34); margin: 0; width: calc(var(--gm-u) * 34); }
    .gm-service-grid-section__name { font-size: calc(var(--gm-u) * 18); grid-column: 2; margin: calc(var(--gm-u) * 4) 0 calc(var(--gm-u) * 8); }
    .gm-service-grid-section__text { font-size: calc(var(--gm-u) * 14.5); grid-column: 2; }
    .gm-service-grid-section__media { grid-column: 1 / -1; grid-row: 2; margin: calc(var(--gm-u) * 14) 0 calc(var(--gm-u) * 16); }
    .gm-service-grid-section__card:has(.gm-service-grid-section__media) .gm-service-grid-section__num { grid-column: 1 / -1; }
    .gm-service-grid-section__card:has(.gm-service-grid-section__media) > :not(.gm-service-grid-section__num, .gm-service-grid-section__media) { grid-column: 1 / -1; }
    .gm-service-grid-section__services { grid-column: 2; margin-top: calc(var(--gm-u) * 14); padding-top: calc(var(--gm-u) * 12); }
    .gm-service-grid-section__services li { font-size: calc(var(--gm-u) * 14); }
}

/* getme-css-bundle:end css/sections/service-grid.css */


/* getme-css-bundle: css/sections/process-steps.css */
/* ════════════════════════════════════════════════════════════════════
   process-steps (sections/process-steps.html)
   Namespace: --ps-*   Scope: .gm-process-steps-section
   Steps sit on a hairline (--gm-border-strong) with a short brand-colour
   tick; a large numeral in the text colour at low strength fills the
   corner. Columns = number of steps (max 4) → 2 on tablet → 1 on phone.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-process-steps-section {
    --ps-numeral: color-mix(in srgb, var(--gm-text) 10%, transparent);
    --gm-cv-h: calc(var(--gm-u) * 760);
}

/* Flush bottom: the next band (e.g. sector panels on the same ground) continues it. */
.gm-process-steps-section--flush { padding-bottom: calc(var(--gm-u) * var(--gm-band-gap)); }

.gm-process-steps-section__list {
    counter-reset: none;
    display: grid;
    gap: calc(var(--gm-u) * 48) calc(var(--gm-u) * 40);
    grid-template-columns: repeat(var(--ps-cols, 4), minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-process-steps-section__step {
    border-top: calc(var(--gm-u) * 2) solid var(--gm-border-strong);
    padding-top: calc(var(--gm-u) * 36);
    position: relative;
}

.gm-process-steps-section__step::before {
    background: var(--gm-primary);
    content: "";
    height: calc(var(--gm-u) * 2);
    left: 0;
    position: absolute;
    top: calc(var(--gm-u) * -2);
    width: calc(var(--gm-u) * 56);
}

.gm-process-steps-section__num {
    color: var(--ps-numeral);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 56);
    font-weight: 800;
    line-height: 1;
    position: absolute;
    right: 0;
    top: calc(var(--gm-u) * 26);
}

.gm-process-steps-section__name {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 21);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 calc(var(--gm-u) * 12);
    padding-right: calc(var(--gm-u) * 72);
}

.gm-process-steps-section__name em,
.gm-process-steps-section__note em {
    color: var(--gm-primary-ink);
    font-style: normal;
    font-weight: 600;
}

.gm-process-steps-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 16);
    line-height: 1.65;
    margin: 0;
}

.gm-process-steps-section__note {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 15);
    line-height: 1.5;
    margin: calc(var(--gm-u) * 56) 0 0;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-process-steps-section { --gm-cv-h: calc(var(--gm-u) * 1000); }
    .gm-process-steps-section__list { gap: calc(var(--gm-u) * 40) calc(var(--gm-u) * 32); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-process-steps-section__step { padding-top: calc(var(--gm-u) * 28); }
    .gm-process-steps-section__num { font-size: calc(var(--gm-u) * 48); top: calc(var(--gm-u) * 22); }
    .gm-process-steps-section__name { font-size: calc(var(--gm-u) * 19); padding-right: calc(var(--gm-u) * 60); }
    .gm-process-steps-section__text { font-size: calc(var(--gm-u) * 15); }
    .gm-process-steps-section__note { margin-top: calc(var(--gm-u) * 44); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-process-steps-section { --gm-cv-h: calc(var(--gm-u) * 1100); }
    .gm-process-steps-section__list { gap: calc(var(--gm-u) * 32); grid-template-columns: minmax(0, 1fr); }
    .gm-process-steps-section__step { padding-top: calc(var(--gm-u) * 22); }
    .gm-process-steps-section__num { font-size: calc(var(--gm-u) * 40); top: calc(var(--gm-u) * 18); }
    .gm-process-steps-section__name { font-size: calc(var(--gm-u) * 18); padding-right: calc(var(--gm-u) * 56); }
    .gm-process-steps-section__text { font-size: calc(var(--gm-u) * 14.5); }
    .gm-process-steps-section__note { font-size: calc(var(--gm-u) * 14); margin-top: calc(var(--gm-u) * 32); }
}

/* getme-css-bundle:end css/sections/process-steps.css */


/* getme-css-bundle: css/sections/sector-panels.css */
/* ════════════════════════════════════════════════════════════════════
   sector-panels (sections/sector-panels.html)
   Namespace: --sp-*   Scope: .gm-sector-panels-section
   Two (or more) tall photo panels. Every panel is .gm-ink, so colours are
   the dark palette's; the scrim = Color schemes > Overlay at the section's
   Darkening setting (--sp-scrim). Tag = brand fill, chips = pill outlines.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-sector-panels-section {
    --sp-h: 480;
    --sp-pad: 44;
    --gm-cv-h: calc(var(--gm-u) * 640);
}

.gm-sector-panels-section--medium { --sp-h: 400; }
.gm-sector-panels-section--compact { --sp-h: 320; }

.gm-sector-panels-section__grid {
    display: grid;
    gap: calc(var(--gm-u) * 24);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--gm-u) * 460)), 1fr));
}

.gm-sector-panels-section__panel {
    border-radius: var(--theme-radius-sm, 4px);
    display: grid;
    isolation: isolate;
    min-height: calc(var(--gm-u) * var(--sp-h));
    overflow: hidden;
    position: relative;
}

.gm-sector-panels-section__media {
    inset: 0;
    margin: 0;
    position: absolute;
    z-index: -2;
}

.gm-sector-panels-section__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gm-t-media) var(--gm-ease-expo);
    width: 100%;
}

.gm-sector-panels-section__panel:hover .gm-sector-panels-section__media img {
    transform: scale(1.03);
}

.gm-sector-panels-section__panel::before {
    background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--gm-overlay) var(--sp-scrim, 90%), transparent) 100%);
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.gm-sector-panels-section__body {
    align-content: end;
    display: grid;
    justify-items: start;
    padding: calc(var(--gm-u) * var(--sp-pad));
}

.gm-sector-panels-section__tag {
    background: var(--gm-primary);
    border-radius: var(--theme-radius-sm, 4px);
    color: var(--gm-on-primary);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: calc(var(--gm-u) * 16);
    padding: calc(var(--gm-u) * 6) calc(var(--gm-u) * 12);
    text-transform: uppercase;
}

.gm-sector-panels-section__name {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 40);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 calc(var(--gm-u) * 12);
    text-transform: uppercase;
}

.gm-sector-panels-section__name em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-sector-panels-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 17);
    line-height: 1.6;
    margin: 0 0 calc(var(--gm-u) * 20);
    max-width: calc(var(--gm-u) * 440);
}

.gm-sector-panels-section__chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * 8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-sector-panels-section__chips li {
    border: 1px solid var(--gm-border-strong);
    border-radius: var(--gm-pill-radius);
    color: var(--gm-text);
    font-size: calc(var(--gm-u) * 14);
    padding: calc(var(--gm-u) * 7) calc(var(--gm-u) * 14);
}

.gm-sector-panels-section__link {
    margin-top: calc(var(--gm-u) * 20);
}

/* ── Tablet: panels stack ──────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-sector-panels-section { --sp-h: 420; --sp-pad: 32; --gm-cv-h: calc(var(--gm-u) * 960); }
    .gm-sector-panels-section--medium { --sp-h: 360; }
    .gm-sector-panels-section--compact { --sp-h: 300; }
    .gm-sector-panels-section__grid { gap: calc(var(--gm-u) * 20); grid-template-columns: minmax(0, 1fr); }
    .gm-sector-panels-section__name { font-size: calc(var(--gm-u) * 34); }
    .gm-sector-panels-section__text { font-size: calc(var(--gm-u) * 16); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-sector-panels-section { --sp-h: 400; --sp-pad: 20; --gm-cv-h: calc(var(--gm-u) * 860); }
    .gm-sector-panels-section--medium { --sp-h: 340; }
    .gm-sector-panels-section--compact { --sp-h: 280; }
    .gm-sector-panels-section__grid { gap: calc(var(--gm-u) * 14); }
    .gm-sector-panels-section__tag { font-size: calc(var(--gm-u) * 11); margin-bottom: calc(var(--gm-u) * 12); }
    .gm-sector-panels-section__name { font-size: calc(var(--gm-u) * 28); }
    .gm-sector-panels-section__text { font-size: calc(var(--gm-u) * 14.5); margin-bottom: calc(var(--gm-u) * 16); }
    .gm-sector-panels-section__chips li { font-size: calc(var(--gm-u) * 12.5); padding: calc(var(--gm-u) * 6) calc(var(--gm-u) * 12); }
}

/* getme-css-bundle:end css/sections/sector-panels.css */


/* getme-css-bundle: css/sections/promise-band.css */
/* ════════════════════════════════════════════════════════════════════
   promise-band (sections/promise-band.html)
   Namespace: --pb-*   Scope: .gm-promise-band-section
   Statement title + promise grid. Colours read --pb-ink / --pb-muted /
   --pb-line: on the brand ground they are the primary button's text colour
   (Buttons > Primary text), on the other grounds the band palette's own.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-promise-band-section {
    --pb-ink: var(--gm-text);
    --pb-muted: var(--gm-muted);
    --pb-line: var(--gm-border-strong);
    --pb-tick: var(--gm-primary);
    color: var(--pb-ink);
    --gm-cv-h: calc(var(--gm-u) * 520);
}

.gm-promise-band-section--brand {
    --pb-ink: var(--gm-on-primary);
    --pb-muted: color-mix(in srgb, var(--gm-on-primary) 90%, transparent);
    --pb-line: color-mix(in srgb, var(--gm-on-primary) 45%, transparent);
    --pb-tick: var(--gm-on-primary);
    background: var(--gm-primary);
}

.gm-promise-band-section__inner {
    align-items: start;
    display: grid;
    gap: calc(var(--gm-u) * 56);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-promise-band-section .gm-promise-band-section__kicker {
    color: var(--pb-ink);
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-promise-band-section .gm-promise-band-section__kicker::before {
    background: var(--pb-tick);
}

.gm-promise-band-section__title {
    color: var(--pb-ink);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 56);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0;
    text-transform: uppercase;
}

.gm-promise-band-section__title em {
    color: var(--pb-tick);
    font-style: normal;
}

.gm-promise-band-section--brand .gm-promise-band-section__title em {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: calc(var(--gm-u) * 3);
    text-underline-offset: 0.12em;
}

.gm-promise-band-section__list {
    display: grid;
    gap: calc(var(--gm-u) * 36) calc(var(--gm-u) * 40);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-promise-band-section__item {
    border-top: 1px solid var(--pb-line);
    padding-top: calc(var(--gm-u) * 20);
}

.gm-promise-band-section__name {
    color: var(--pb-ink);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 19);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 calc(var(--gm-u) * 8);
}

.gm-promise-band-section__name em {
    font-style: normal;
}

.gm-promise-band-section__text {
    color: var(--pb-muted);
    font-size: calc(var(--gm-u) * 16);
    line-height: 1.6;
    margin: 0;
}

/* ── Tablet: title above the grid ──────────────────────────────────── */
@media (max-width: 980px) {
    .gm-promise-band-section { --gm-cv-h: calc(var(--gm-u) * 760); }
    .gm-promise-band-section__inner { gap: calc(var(--gm-u) * 40); grid-template-columns: minmax(0, 1fr); }
    .gm-promise-band-section__title { font-size: calc(var(--gm-u) * 46); }
    .gm-promise-band-section__name { font-size: calc(var(--gm-u) * 18); }
    .gm-promise-band-section__text { font-size: calc(var(--gm-u) * 15); }
}

/* ── Phone: one column ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-promise-band-section { --gm-cv-h: calc(var(--gm-u) * 900); }
    .gm-promise-band-section__inner { gap: calc(var(--gm-u) * 32); }
    .gm-promise-band-section__title { font-size: calc(var(--gm-u) * 34); }
    .gm-promise-band-section__list { gap: calc(var(--gm-u) * 24); grid-template-columns: minmax(0, 1fr); }
    .gm-promise-band-section__item { padding-top: calc(var(--gm-u) * 16); }
    .gm-promise-band-section__name { font-size: calc(var(--gm-u) * 17); }
    .gm-promise-band-section__text { font-size: calc(var(--gm-u) * 14.5); }
}

/* getme-css-bundle:end css/sections/promise-band.css */


/* getme-css-bundle: css/sections/project-grid.css */
/* ════════════════════════════════════════════════════════════════════
   project-grid (sections/project-grid.html)
   Namespace: --pg-*   Scope: .gm-project-grid-section
   12-column photo grid: a project spans 4 (wide: 8); tablet 6 / 12;
   phone one column. A wide tile stretches to its row's height.
   Media radius = Theme settings > media radius; placeholder = blueprint.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-project-grid-section {
    --pg-ratio: 4 / 3;
    --gm-cv-h: calc(var(--gm-u) * 1200);
}

.gm-project-grid-section--r3-2 { --pg-ratio: 3 / 2; }
.gm-project-grid-section--r1-1 { --pg-ratio: 1 / 1; }

.gm-project-grid-section__grid {
    display: grid;
    gap: calc(var(--gm-u) * 20);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gm-project-grid-section__item {
    display: grid;
    grid-column: span 4;
    grid-template-rows: 1fr auto;
    margin: 0;
}

.gm-project-grid-section__item--wide {
    grid-column: span 8;
}

.gm-project-grid-section__media {
    aspect-ratio: var(--pg-ratio);
    background-color: var(--gm-media-surface);
    border-radius: var(--theme-media-radius, var(--theme-radius-sm, 4px));
    overflow: hidden;
}

.gm-project-grid-section__item--wide .gm-project-grid-section__media {
    aspect-ratio: auto;
    min-height: calc(var(--gm-u) * 300);
}

.gm-project-grid-section__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gm-t-media) var(--gm-ease-expo);
    width: 100%;
}

.gm-project-grid-section__item:hover .gm-project-grid-section__media img {
    transform: scale(1.03);
}

.gm-project-grid-section__cap {
    display: flex;
    font-size: calc(var(--gm-u) * 15);
    gap: calc(var(--gm-u) * 12);
    justify-content: space-between;
    margin-top: calc(var(--gm-u) * 14);
}

.gm-project-grid-section__cap strong {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 700;
}

.gm-project-grid-section__cap span {
    color: var(--gm-muted);
    text-align: right;
}

/* Gap logo: the narrow tile beside a wide one stretches to the wide tile's
   height; the logo sits in the free row between photo and caption. The
   fill's top padding equals the caption's top margin, so the space above
   and below the logo is the same. Colour = brand primary (mask). */
.gm-project-grid-section__item--fill {
    grid-template-rows: auto 1fr auto;
}

.gm-project-grid-section__fill {
    display: grid;
    min-height: 0;
    overflow: hidden;
    padding-top: calc(var(--gm-u) * 14);
    place-items: center;
}

.gm-project-grid-section__mark {
    aspect-ratio: 1180 / 640;
    background: var(--gm-primary);
    display: block;
    max-height: 100%;
    -webkit-mask: var(--pg-mark) center / contain no-repeat;
    mask: var(--pg-mark) center / contain no-repeat;
    width: var(--pg-mark-w, 60%);
}

/* ── Tablet: halves, a wide tile takes the full row ────────────────── */
@media (max-width: 980px) {
    .gm-project-grid-section { --gm-cv-h: calc(var(--gm-u) * 1500); }
    .gm-project-grid-section__grid { gap: calc(var(--gm-u) * 16); }
    .gm-project-grid-section__item { grid-column: span 6; }
    .gm-project-grid-section__item--wide { grid-column: span 12; }
    .gm-project-grid-section__item--wide .gm-project-grid-section__media { aspect-ratio: 16 / 9; min-height: 0; }
    .gm-project-grid-section__cap { font-size: calc(var(--gm-u) * 14); margin-top: calc(var(--gm-u) * 10); }
    .gm-project-grid-section__item--fill { grid-template-rows: 1fr auto; }
    .gm-project-grid-section__fill { display: none; }
}

/* ── Phone: one column ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-project-grid-section { --gm-cv-h: calc(var(--gm-u) * 1700); }
    .gm-project-grid-section__grid { gap: calc(var(--gm-u) * 20); }
    .gm-project-grid-section__item,
    .gm-project-grid-section__item--wide { grid-column: span 12; }
    .gm-project-grid-section__item--wide .gm-project-grid-section__media { aspect-ratio: var(--pg-ratio); }
    .gm-project-grid-section__cap { font-size: calc(var(--gm-u) * 13.5); margin-top: calc(var(--gm-u) * 8); }
}

/* getme-css-bundle:end css/sections/project-grid.css */


/* getme-css-bundle: css/sections/service-area.css */
/* ════════════════════════════════════════════════════════════════════
   service-area (sections/service-area.html)
   Namespace: --sa-*   Scope: .gm-service-area-section
   Copy + place list (two columns of ruled rows, brand dot) beside a radius
   diagram: core ring = brand colour wash, outer rings dashed in the band's
   strong line colour; labels sit on the band ground (--gm-bg).
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-service-area-section {
    --sa-line: var(--gm-border);
    --sa-ring: var(--gm-border-strong);
    --gm-cv-h: calc(var(--gm-u) * 860);
}

.gm-service-area-section__inner {
    align-items: center;
    display: grid;
    gap: calc(var(--gm-u) * var(--gm-band-gap));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.gm-service-area-section__inner--solo {
    grid-template-columns: minmax(0, 1fr);
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-service-area-section .gm-service-area-section__kicker {
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-service-area-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 60);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 calc(var(--gm-u) * 20);
    text-transform: uppercase;
}

.gm-service-area-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-service-area-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 18);
    line-height: 1.65;
    margin: 0 0 calc(var(--gm-u) * 32);
    max-width: calc(var(--gm-u) * 480);
}

.gm-service-area-section__places {
    border-top: 1px solid var(--sa-line);
    column-gap: calc(var(--gm-u) * 24);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-service-area-section__places li {
    align-items: center;
    border-bottom: 1px solid var(--sa-line);
    color: var(--gm-text);
    display: flex;
    font-size: calc(var(--gm-u) * 17);
    gap: calc(var(--gm-u) * 14);
    min-width: 0;
    padding: calc(var(--gm-u) * 18) 0;
}

.gm-service-area-section__places li::before {
    background: var(--gm-primary);
    border-radius: 50%;
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 8);
    width: calc(var(--gm-u) * 8);
}

.gm-service-area-section__places li.is-base {
    font-weight: 600;
}

/* ── Diagram ───────────────────────────────────────────────────────── */
.gm-service-area-section__map {
    aspect-ratio: 1;
    justify-self: center;
    max-width: calc(var(--gm-u) * 520);
    position: relative;
    width: 100%;
}

.gm-service-area-section__ring {
    border: 1px dashed var(--sa-ring);
    border-radius: 50%;
    inset: 0;
    margin: auto;
    position: absolute;
}

.gm-service-area-section__ring--outer { height: 100%; width: 100%; }
.gm-service-area-section__ring--mid { height: 68%; width: 68%; }

.gm-service-area-section__ring--core {
    background: var(--gm-primary-light);
    border: 1px solid var(--gm-primary-line);
    height: 34%;
    width: 34%;
}

.gm-service-area-section__pin {
    display: grid;
    gap: calc(var(--gm-u) * 10);
    justify-items: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gm-service-area-section__dot {
    background: var(--gm-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--gm-u) * 8) color-mix(in srgb, var(--gm-primary) 25%, transparent);
    height: calc(var(--gm-u) * 18);
    width: calc(var(--gm-u) * 18);
}

.gm-service-area-section__pin strong {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 15);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-service-area-section__label {
    background: var(--gm-bg);
    color: var(--gm-subtle);
    font-size: calc(var(--gm-u) * 12);
    left: 50%;
    letter-spacing: 0.18em;
    padding: 0 calc(var(--gm-u) * 8);
    position: absolute;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.gm-service-area-section__label--mid { top: 16%; }
.gm-service-area-section__label--outer { top: 0; }

/* Warm-ground / surface bands: the labels sit on that ground instead. */
.gm-service-area-section.gm-ground .gm-service-area-section__label { background: var(--gm-ground); }
.gm-service-area-section.gm-band--surface .gm-service-area-section__label { background: var(--gm-surface); }

/* Map behind the rings: the SVG is a mask (alpha only), filled with the
   band's text colour and faded out at its edge, so it reads as a shadow on
   any ground. 130% of the diagram = the map's 520 km edge vs the outer
   ring's ~400 km; the band clips it. */
.gm-service-area-section {
    overflow: clip;
}

/* The default map is written here (a relative url() inside a custom property
   is not resolved against this file everywhere); an uploaded map is an
   absolute URL, passed as --sa-geo (.gm-service-area-section__geo--custom).
   The second mask layer is alpha only (black = keep). */
.gm-service-area-section__geo {
    background: var(--gm-text);
    inset: -15%;
    -webkit-mask: url("/cdn/site/rev_5631644340ab4bec/assets/_getme/immutable/b023eca8c3a2c5e5a132c6d611ece7e916332dfd7b07b27aa3ba0040171a21fd/images/service-area-toronto-map.svg") center / contain no-repeat, radial-gradient(closest-side, black 55%, transparent);
    -webkit-mask-composite: source-in;
    mask: url("/cdn/site/rev_5631644340ab4bec/assets/_getme/immutable/b023eca8c3a2c5e5a132c6d611ece7e916332dfd7b07b27aa3ba0040171a21fd/images/service-area-toronto-map.svg") center / contain no-repeat, radial-gradient(closest-side, black 55%, transparent);
    mask-composite: intersect;
    opacity: var(--sa-geo-a, 0.3);
    pointer-events: none;
    position: absolute;
    /* The pin's dot sits above the diagram centre (its label hangs below):
       move the map up by half of that so the home base lies under the dot. */
    translate: 0 calc(var(--gm-u) * -14);
}

.gm-service-area-section__geo--custom {
    -webkit-mask-image: var(--sa-geo), radial-gradient(closest-side, black 55%, transparent);
    mask-image: var(--sa-geo), radial-gradient(closest-side, black 55%, transparent);
}

/* Inline places: one italic sentence under the text; the diagram is
   top-aligned with the heading instead of centred on a long column. */
.gm-service-area-section__inner--inline {
    align-items: start;
}

.gm-service-area-section__served {
    border-top: 1px solid var(--sa-line);
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 17);
    line-height: 1.75;
    margin: 0;
    max-width: calc(var(--gm-u) * 560);
    padding-top: calc(var(--gm-u) * 24);
}

.gm-service-area-section__served-label {
    color: var(--gm-primary);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-right: calc(var(--gm-u) * 6);
    text-transform: uppercase;
}

.gm-service-area-section__served em {
    color: var(--gm-text);
    font-style: italic;
}

.gm-service-area-section__served strong {
    font-weight: 700;
}

/* ── Tablet: diagram under the copy ────────────────────────────────── */
@media (max-width: 980px) {
    .gm-service-area-section { --gm-cv-h: calc(var(--gm-u) * 1300); }
    .gm-service-area-section__inner { grid-template-columns: minmax(0, 1fr); }
    .gm-service-area-section__title { font-size: calc(var(--gm-u) * 48); }
    .gm-service-area-section__text { font-size: calc(var(--gm-u) * 16); }
    .gm-service-area-section__places li { font-size: calc(var(--gm-u) * 16); padding: calc(var(--gm-u) * 15) 0; }
    .gm-service-area-section__map { max-width: calc(var(--gm-u) * 440); }

    /* Inline style, one column: heading and text, then the map, then the
       place names under it (the copy box opens up so its parts can be ordered). */
    .gm-service-area-section__inner--inline { row-gap: 0; }
    .gm-service-area-section__inner--inline .gm-service-area-section__copy { display: contents; }
    .gm-service-area-section__inner--inline .gm-service-area-section__map { margin: calc(var(--gm-u) * 8) 0 calc(var(--gm-u) * 36); order: 2; }
    .gm-service-area-section__inner--inline .gm-service-area-section__served { order: 3; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-service-area-section { --gm-cv-h: calc(var(--gm-u) * 1200); }
    .gm-service-area-section__title { font-size: calc(var(--gm-u) * 36); margin-bottom: calc(var(--gm-u) * 16); }
    .gm-service-area-section__text { font-size: calc(var(--gm-u) * 15); margin-bottom: calc(var(--gm-u) * 24); }
    .gm-service-area-section__served { font-size: calc(var(--gm-u) * 15); padding-top: calc(var(--gm-u) * 18); }
    .gm-service-area-section__places { column-gap: calc(var(--gm-u) * 14); }
    .gm-service-area-section__places li { font-size: calc(var(--gm-u) * 14); gap: calc(var(--gm-u) * 10); padding: calc(var(--gm-u) * 12) 0; }
    .gm-service-area-section__places li::before { height: calc(var(--gm-u) * 6); width: calc(var(--gm-u) * 6); }
    .gm-service-area-section__map { max-width: calc(var(--gm-u) * 320); }
    .gm-service-area-section__pin strong { font-size: calc(var(--gm-u) * 12); }
    .gm-service-area-section__label { font-size: calc(var(--gm-u) * 10); }
}

/* getme-css-bundle:end css/sections/service-area.css */


/* getme-css-bundle: css/sections/faq-split.css */
/* ════════════════════════════════════════════════════════════════════
   faq-split (sections/faq-split.html)
   Namespace: --fq-*   Scope: .gm-faq-split-section
   Heading column (1/3) + accordion (2/3). Rows ruled with the band's
   strong line; the round toggle fills with the brand colour when open
   and its "+" turns into "−". Links = the theme's .gm-text-link.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-faq-split-section {
    --fq-line: var(--gm-border-strong);
    --gm-cv-h: calc(var(--gm-u) * 760);
}

.gm-faq-split-section__inner {
    align-items: start;
    display: grid;
    gap: calc(var(--gm-u) * 56);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-faq-split-section .gm-faq-split-section__kicker {
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-faq-split-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 48);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin: 0 0 calc(var(--gm-u) * 16);
}

.gm-faq-split-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-faq-split-section__lead {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 17);
    line-height: 1.65;
    margin: 0;
}

.gm-faq-split-section__contact {
    display: grid;
    gap: calc(var(--gm-u) * 6);
    justify-items: start;
    margin-top: calc(var(--gm-u) * 28);
}

.gm-faq-split-section__contact .gm-text-link {
    font-size: calc(var(--gm-u) * 15);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gm-faq-split-section__ico {
    height: calc(var(--gm-u) * 18);
    width: calc(var(--gm-u) * 18);
}

.gm-faq-split-section__list {
    border-top: 1px solid var(--fq-line);
}

.gm-faq-split-section__item {
    border-bottom: 1px solid var(--fq-line);
}

.gm-faq-split-section__q {
    align-items: center;
    color: var(--gm-text);
    cursor: pointer;
    display: flex;
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 19);
    font-weight: 600;
    gap: calc(var(--gm-u) * 24);
    justify-content: space-between;
    line-height: 1.35;
    list-style: none;
    padding: calc(var(--gm-u) * 26) 0;
}

.gm-faq-split-section__q::-webkit-details-marker {
    display: none;
}

.gm-faq-split-section__icon {
    border: calc(var(--gm-u) * 1.5) solid var(--gm-text);
    border-radius: 50%;
    flex: none;
    height: calc(var(--gm-u) * 36);
    position: relative;
    transition: background-color var(--gm-t-quick) var(--gm-ease-soft), border-color var(--gm-t-quick) var(--gm-ease-soft);
    width: calc(var(--gm-u) * 36);
}

.gm-faq-split-section__icon::before,
.gm-faq-split-section__icon::after {
    background: var(--gm-text);
    content: "";
    height: calc(var(--gm-u) * 1.5);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--gm-u) * 12);
}

.gm-faq-split-section__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform var(--gm-t-hover) var(--gm-ease-expo);
}

.gm-faq-split-section__q:hover .gm-faq-split-section__icon {
    border-color: var(--gm-primary);
}

.gm-faq-split-section__item[open] .gm-faq-split-section__icon {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
}

.gm-faq-split-section__item[open] .gm-faq-split-section__icon::before,
.gm-faq-split-section__item[open] .gm-faq-split-section__icon::after {
    background: var(--gm-on-primary);
}

.gm-faq-split-section__item[open] .gm-faq-split-section__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.gm-faq-split-section__a {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 17);
    line-height: 1.7;
    margin: 0;
    padding: 0 calc(var(--gm-u) * 64) calc(var(--gm-u) * 28) 0;
}

/* ── Tablet: heading above the questions ───────────────────────────── */
@media (max-width: 980px) {
    .gm-faq-split-section { --gm-cv-h: calc(var(--gm-u) * 1100); }
    .gm-faq-split-section__inner { gap: calc(var(--gm-u) * 40); grid-template-columns: minmax(0, 1fr); }
    .gm-faq-split-section__title { font-size: calc(var(--gm-u) * 40); }
    .gm-faq-split-section__lead { font-size: calc(var(--gm-u) * 16); }
    .gm-faq-split-section__q { font-size: calc(var(--gm-u) * 18); padding: calc(var(--gm-u) * 22) 0; }
    .gm-faq-split-section__a { font-size: calc(var(--gm-u) * 16); padding-right: calc(var(--gm-u) * 48); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-faq-split-section { --gm-cv-h: calc(var(--gm-u) * 1100); }
    .gm-faq-split-section__inner { gap: calc(var(--gm-u) * 28); }
    .gm-faq-split-section__title { font-size: calc(var(--gm-u) * 30); }
    .gm-faq-split-section__lead { font-size: calc(var(--gm-u) * 15); }
    .gm-faq-split-section__contact { margin-top: calc(var(--gm-u) * 20); }
    .gm-faq-split-section__contact .gm-text-link { font-size: calc(var(--gm-u) * 14); }
    .gm-faq-split-section__q { font-size: calc(var(--gm-u) * 16); gap: calc(var(--gm-u) * 16); padding: calc(var(--gm-u) * 18) 0; }
    .gm-faq-split-section__icon { height: calc(var(--gm-u) * 30); width: calc(var(--gm-u) * 30); }
    .gm-faq-split-section__icon::before,
    .gm-faq-split-section__icon::after { width: calc(var(--gm-u) * 10); }
    .gm-faq-split-section__a { font-size: calc(var(--gm-u) * 14.5); padding: 0 0 calc(var(--gm-u) * 20); }
}

/* getme-css-bundle:end css/sections/faq-split.css */


/* getme-css-bundle: css/sections/closing-cta.css */
/* ════════════════════════════════════════════════════════════════════
   closing-cta (sections/closing-cta.html)
   Namespace: --cc-*   Scope: .gm-closing-cta-section
   Statement left (roof mark + two uppercase lines, highlighted words in the
   brand colour), copy + actions right, bottom-aligned. Optional brand rule
   on top. Buttons = .gm-button / .gm-button--ghost (theme.css).
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-closing-cta-section {
    --gm-cv-h: calc(var(--gm-u) * 760);
}

.gm-closing-cta-section--rule {
    border-top: calc(var(--gm-u) * 4) solid var(--gm-primary);
}

.gm-closing-cta-section__inner {
    align-items: end;
    display: grid;
    gap: calc(var(--gm-u) * 56);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.gm-closing-cta-section__mark {
    display: block;
    fill: var(--gm-primary);
    height: auto;
    margin-bottom: calc(var(--gm-u) * 28);
    width: calc(var(--gm-u) * 156);
}

.gm-closing-cta-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 104);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.95;
    margin: 0;
    text-transform: uppercase;
}

.gm-closing-cta-section__line {
    display: block;
}

.gm-closing-cta-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-closing-cta-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 19);
    line-height: 1.6;
    margin: 0 0 calc(var(--gm-u) * 32);
    max-width: calc(var(--gm-u) * 460);
}

.gm-closing-cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * 16);
}

.gm-closing-cta-section__contact {
    border-top: 1px solid var(--gm-border);
    color: var(--gm-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: calc(var(--gm-u) * 15);
    gap: calc(var(--gm-u) * 12) calc(var(--gm-u) * 32);
    margin: calc(var(--gm-u) * 40) 0 0;
    padding-top: calc(var(--gm-u) * 28);
}

.gm-closing-cta-section__contact a {
    color: var(--gm-text);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color var(--gm-t-quick) var(--gm-ease-soft);
}

.gm-closing-cta-section__contact a:hover {
    color: var(--gm-primary);
}

/* ── Tablet: copy under the statement ──────────────────────────────── */
@media (max-width: 980px) {
    .gm-closing-cta-section { --gm-cv-h: calc(var(--gm-u) * 900); }
    .gm-closing-cta-section__inner { gap: calc(var(--gm-u) * 40); grid-template-columns: minmax(0, 1fr); }
    .gm-closing-cta-section__mark { margin-bottom: calc(var(--gm-u) * 22); width: calc(var(--gm-u) * 120); }
    .gm-closing-cta-section__title { font-size: calc(var(--gm-u) * 76); }
    .gm-closing-cta-section__text { font-size: calc(var(--gm-u) * 17); margin-bottom: calc(var(--gm-u) * 28); }
    .gm-closing-cta-section__contact { font-size: calc(var(--gm-u) * 14); margin-top: calc(var(--gm-u) * 32); }
}

/* ── Phone: actions stack full width ───────────────────────────────── */
@media (max-width: 640px) {
    .gm-closing-cta-section { --gm-cv-h: calc(var(--gm-u) * 860); }
    .gm-closing-cta-section__inner { gap: calc(var(--gm-u) * 28); }
    .gm-closing-cta-section__mark { margin-bottom: calc(var(--gm-u) * 18); width: calc(var(--gm-u) * 88); }
    .gm-closing-cta-section__title { font-size: calc(var(--gm-u) * 44); }
    .gm-closing-cta-section__text { font-size: calc(var(--gm-u) * 15.5); margin-bottom: calc(var(--gm-u) * 24); }
    .gm-closing-cta-section__actions { display: grid; gap: calc(var(--gm-u) * 12); }
    .gm-closing-cta-section__actions .gm-button { justify-content: center; width: 100%; }
    .gm-closing-cta-section__actions .gm-button:has(.gm-button__circle) { justify-content: space-between; }
    .gm-closing-cta-section__contact { display: grid; font-size: calc(var(--gm-u) * 13.5); gap: calc(var(--gm-u) * 8); margin-top: calc(var(--gm-u) * 28); padding-top: calc(var(--gm-u) * 20); }
}

/* getme-css-bundle:end css/sections/closing-cta.css */


/* getme-css-bundle: css/sections/quote-form.css */
/* ════════════════════════════════════════════════════════════════════
   quote-form (sections/quote-form.html)
   Namespace: --qf-*   Scope: .gm-quote-form-section
   Copy column (heading, lead, numbered points, direct contact) + the form
   card. The card = the page background with the theme's card radius and
   shadow; the form inside is dressed by the theme's forms skin
   ([data-getme-form] in theme.css), so it follows the palette and buttons.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-quote-form-section {
    --qf-card-pad: 40;
    --gm-cv-h: calc(var(--gm-u) * 1100);
}

.gm-quote-form-section__inner {
    align-items: start;
    display: grid;
    gap: calc(var(--gm-u) * var(--gm-band-gap));
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.gm-quote-form-section__inner--solo {
    grid-template-columns: minmax(0, 1fr);
}

/* The copy stays in view while the (taller) form scrolls past it. */
.gm-quote-form-section__copy {
    position: sticky;
    top: calc(var(--gm-u) * 120);
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-quote-form-section .gm-quote-form-section__kicker {
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-quote-form-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 60);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 0 calc(var(--gm-u) * 20);
    text-transform: uppercase;
}

.gm-quote-form-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-quote-form-section__lead {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 18);
    line-height: 1.6;
    margin: 0;
    max-width: calc(var(--gm-u) * 480);
}

.gm-quote-form-section__points {
    border-top: 1px solid var(--gm-border-strong);
    display: grid;
    list-style: none;
    margin: calc(var(--gm-u) * 32) 0 0;
    padding: 0;
}

.gm-quote-form-section__points li {
    align-items: baseline;
    border-bottom: 1px solid var(--gm-border);
    color: var(--gm-text);
    display: grid;
    font-size: calc(var(--gm-u) * 16);
    gap: calc(var(--gm-u) * 16);
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.45;
    padding: calc(var(--gm-u) * 16) 0;
}

.gm-quote-form-section__points em {
    color: var(--gm-primary-ink);
    font-style: normal;
    font-weight: 600;
}

.gm-quote-form-section__num {
    color: var(--gm-primary-ink);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 13);
    font-weight: 700;
    letter-spacing: 0.12em;
}

.gm-quote-form-section__contact {
    display: grid;
    gap: calc(var(--gm-u) * 6);
    justify-items: start;
    margin-top: calc(var(--gm-u) * 32);
}

.gm-quote-form-section__contact-title {
    color: var(--gm-subtle);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 500;
    letter-spacing: 0.18em;
    margin: 0 0 calc(var(--gm-u) * 6);
    text-transform: uppercase;
}

.gm-quote-form-section__contact .gm-text-link {
    font-size: calc(var(--gm-u) * 15);
    min-width: 0;
    overflow-wrap: anywhere;
}

.gm-quote-form-section__address {
    font-style: normal;
}

.gm-quote-form-section__ico {
    height: calc(var(--gm-u) * 18);
    width: calc(var(--gm-u) * 18);
}

/* ── Form card ─────────────────────────────────────────────────────── */
.gm-quote-form-section__card {
    background: var(--gm-bg);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-card-radius);
    box-shadow: 0 calc(var(--gm-u) * 24) calc(var(--gm-u) * 60) calc(var(--gm-u) * -24) var(--gm-shadow-color);
    color: var(--gm-text);
    min-width: 0;
    padding: calc(var(--gm-u) * var(--qf-card-pad));
}

.gm-quote-form-section__card-title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 22);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 calc(var(--gm-u) * 20);
}

/* Reserve room while the widget loads, so the page does not jump. */
.gm-quote-form-section__widget:empty {
    min-height: calc(var(--gm-u) * 640);
}

.gm-quote-form-section__note {
    margin-top: calc(var(--gm-u) * 20);
}

/* ── Tablet: form under the copy ───────────────────────────────────── */
@media (max-width: 980px) {
    .gm-quote-form-section { --qf-card-pad: 32; --gm-cv-h: calc(var(--gm-u) * 1700); }
    .gm-quote-form-section__inner { grid-template-columns: minmax(0, 1fr); }
    .gm-quote-form-section__copy { position: static; }
    .gm-quote-form-section__title { font-size: calc(var(--gm-u) * 48); }
    .gm-quote-form-section__lead { font-size: calc(var(--gm-u) * 16); max-width: none; }
    .gm-quote-form-section__points li { font-size: calc(var(--gm-u) * 15); }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gm-quote-form-section { --qf-card-pad: 20; --gm-cv-h: calc(var(--gm-u) * 1900); }
    .gm-quote-form-section__title { font-size: calc(var(--gm-u) * 36); margin-bottom: calc(var(--gm-u) * 16); }
    .gm-quote-form-section__lead { font-size: calc(var(--gm-u) * 15); }
    .gm-quote-form-section__points { margin-top: calc(var(--gm-u) * 24); }
    .gm-quote-form-section__points li { font-size: calc(var(--gm-u) * 14.5); gap: calc(var(--gm-u) * 12); padding: calc(var(--gm-u) * 12) 0; }
    .gm-quote-form-section__contact { margin-top: calc(var(--gm-u) * 24); }
    .gm-quote-form-section__contact .gm-text-link { font-size: calc(var(--gm-u) * 14); }
    .gm-quote-form-section__card-title { font-size: calc(var(--gm-u) * 19); margin-bottom: calc(var(--gm-u) * 16); }
}

/* getme-css-bundle:end css/sections/quote-form.css */


/* getme-css-bundle: css/components/form-steps.css */
/* ════════════════════════════════════════════════════════════════════
   form-steps (components/form-steps.html)
   Namespace: --fs-*   Scope: .gm-form-steps
   Two-step wrapper around ONE forms widget: a step bar (count, title, a
   brand progress line, Back on step 2), the theme's Continue button on step 1
   and the theme's confirmation after a submission. Which field sits on which
   step is CSS the component's script writes (:has([name=…])); this file only
   holds the states. Colours / type = theme tokens; size = --gm-u.
   ════════════════════════════════════════════════════════════════════ */

.gm-form-steps {
    --fs-line: var(--gm-border);
    --fs-gap: calc(var(--gm-u) * 20);
    display: grid;
    gap: var(--fs-gap);
    scroll-margin-top: calc(var(--gm-u) * 110);
}

/* No split (no step-2 fields, or the script stopped): a plain form. */
.gm-form-steps[data-step="off"] .gm-form-steps__bar,
.gm-form-steps[data-step="off"] .gm-form-steps__nav,
.gm-form-steps:not([data-step2]) .gm-form-steps__bar,
.gm-form-steps:not([data-step2]) .gm-form-steps__nav {
    display: none;
}

/* ── Step bar ──────────────────────────────────────────────────────── */
.gm-form-steps__bar {
    align-items: end;
    display: grid;
    gap: calc(var(--gm-u) * 10) calc(var(--gm-u) * 16);
    grid-template-columns: minmax(0, 1fr) auto;
}

.gm-form-steps__label {
    display: grid;
    gap: calc(var(--gm-u) * 4);
    grid-column: 1;
    margin: 0;
}

.gm-form-steps__count {
    color: var(--gm-primary-ink);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.gm-form-steps__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 20);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.gm-form-steps__back {
    align-items: center;
    background: none;
    border: 0;
    color: var(--gm-muted);
    cursor: pointer;
    display: none;
    font: inherit;
    font-size: calc(var(--gm-u) * 14);
    font-weight: 600;
    gap: calc(var(--gm-u) * 6);
    grid-column: 2;
    grid-row: 1;
    padding: calc(var(--gm-u) * 6) 0;
    transition: color var(--gm-t-quick) ease;
}

.gm-form-steps__back:hover {
    color: var(--gm-text);
}

.gm-form-steps__progress {
    background: var(--fs-line);
    border-radius: 999px;
    grid-column: 1 / -1;
    height: calc(var(--gm-u) * 3);
    overflow: hidden;
}

.gm-form-steps__progress span {
    background: var(--gm-primary);
    display: block;
    height: 100%;
    transition: width var(--gm-t-fade) var(--gm-ease-expo);
    width: 50%;
}

/* ── States ────────────────────────────────────────────────────────── */
/* Step 1: the widget's Submit and its form-level summary (it can name step-2
   fields) stay hidden; the theme's Continue shows. */
.gm-form-steps[data-step="1"] [data-getme-form] .gm-form-actions,
.gm-form-steps[data-step="1"] [data-getme-form] .gm-form-feedback {
    display: none;
}

/* Step 2 before its first Submit: messages left by the step-1 check stay hidden. */
.gm-form-steps[data-step="2"]:not([data-tried]) [data-getme-form] .gm-form-error {
    display: none;
}

/* …and their fields keep the normal edge (theme.css colours a field that holds
   a message; this selector is one class stronger). */
.gm-form-steps[data-step="2"]:not([data-tried]) [data-getme-form] .gm-form-field .gm-form-control:not(:focus),
.gm-form-steps[data-step="2"]:not([data-tried]) [data-getme-form] .gm-form-field .gm-form-choice:not(:focus-within) {
    border-color: var(--gm-border-strong);
}

.gm-form-steps[data-step="2"] .gm-form-steps__back { display: inline-flex; }
.gm-form-steps[data-step="2"] .gm-form-steps__progress span { width: 100%; }
.gm-form-steps[data-step="2"] .gm-form-steps__nav { display: none; }

/* Sent: the bar and Continue go; with a theme confirmation the widget's own
   success block is replaced by it. */
.gm-form-steps[data-step="done"] .gm-form-steps__bar,
.gm-form-steps[data-step="done"] .gm-form-steps__nav,
.gm-form-steps[data-step="sent"] .gm-form-steps__bar,
.gm-form-steps[data-step="sent"] .gm-form-steps__nav,
.gm-form-steps[data-step="done"] [data-getme-form] {
    display: none;
}

/* Continue: the theme button, right-aligned under the fields. */
.gm-form-steps__nav {
    display: flex;
    justify-content: flex-end;
}

/* ── Confirmation ──────────────────────────────────────────────────── */
.gm-form-steps__done {
    animation: gm-fade-up var(--gm-t-fade) var(--gm-ease-expo) both;
    display: grid;
    gap: calc(var(--gm-u) * 12);
    justify-items: start;
    outline: none;
    padding: calc(var(--gm-u) * 12) 0;
}

.gm-form-steps__done[hidden] {
    display: none;
}

.gm-form-steps__check {
    background: var(--gm-primary-light);
    border: 1px solid var(--gm-primary-line);
    border-radius: 50%;
    color: var(--gm-primary);
    display: grid;
    height: calc(var(--gm-u) * 56);
    margin-bottom: calc(var(--gm-u) * 6);
    place-items: center;
    width: calc(var(--gm-u) * 56);
}

.gm-form-steps__check svg {
    height: 50%;
    width: 50%;
}

.gm-form-steps__done-title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 28);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.gm-form-steps__done-text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 16);
    line-height: 1.65;
    margin: 0;
    max-width: calc(var(--gm-u) * 460);
}

@media (max-width: 640px) {
    .gm-form-steps__title { font-size: calc(var(--gm-u) * 18); }
    .gm-form-steps__nav .gm-form-steps__next { width: 100%; }
    .gm-form-steps__done-title { font-size: calc(var(--gm-u) * 24); }
    .gm-form-steps__done-text { font-size: calc(var(--gm-u) * 15); }
}

/* getme-css-bundle:end css/components/form-steps.css */


/* getme-css-bundle: css/sections/page-hero.css */
/* ════════════════════════════════════════════════════════════════════
   page-hero (sections/page-hero.html)
   Namespace: --ph-*   Scope: .gm-page-hero-section
   Inner-page hero: breadcrumb, statement left (uppercase, highlighted words
   in the brand colour), lead + actions right (bottom-aligned), a ruled row of
   facts underneath. Ground / rhythm / buttons = theme primitives.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-page-hero-section {
    --gm-cv-h: calc(var(--gm-u) * 720);
}

/* ── Breadcrumb ────────────────────────────────────────────────────── */
.gm-page-hero-section__crumbs ol {
    color: var(--gm-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: calc(var(--gm-u) * 14);
    gap: calc(var(--gm-u) * 10);
    list-style: none;
    margin: 0 0 calc(var(--gm-u) * 56);
    padding: 0;
}

.gm-page-hero-section__crumbs li {
    align-items: center;
    display: flex;
    gap: calc(var(--gm-u) * 10);
}

.gm-page-hero-section__crumbs li + li::before {
    color: var(--gm-subtle);
    content: "/";
}

.gm-page-hero-section__crumbs a {
    color: var(--gm-muted);
    text-decoration: none;
    transition: color var(--gm-t-quick) var(--gm-ease-soft);
}

.gm-page-hero-section__crumbs a:hover {
    color: var(--gm-primary);
}

.gm-page-hero-section__crumbs [aria-current] {
    color: var(--gm-text);
}

/* ── Statement + lead ──────────────────────────────────────────────── */
.gm-page-hero-section__inner {
    align-items: end;
    display: grid;
    gap: calc(var(--gm-u) * 56);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-page-hero-section .gm-page-hero-section__kicker {
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-page-hero-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 96);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.95;
    margin: 0;
    text-transform: uppercase;
    text-wrap: balance;
}

.gm-page-hero-section__line {
    display: block;
}

.gm-page-hero-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-page-hero-section__text {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 19);
    line-height: 1.6;
    margin: 0 0 calc(var(--gm-u) * 32);
    max-width: calc(var(--gm-u) * 480);
}

.gm-page-hero-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * 16);
}

/* ── Facts ─────────────────────────────────────────────────────────── */
.gm-page-hero-section__facts {
    border-top: 1px solid var(--gm-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--gm-u) * 220), 1fr));
    list-style: none;
    margin: calc(var(--gm-u) * 72) 0 0;
    padding: 0;
}

.gm-page-hero-section__facts li {
    border-right: 1px solid var(--gm-border);
    display: grid;
    gap: calc(var(--gm-u) * 6);
    padding: calc(var(--gm-u) * 26) calc(var(--gm-u) * 28) 0 0;
}

.gm-page-hero-section__facts li + li {
    padding-left: calc(var(--gm-u) * 28);
}

.gm-page-hero-section__facts li:last-child {
    border-right: 0;
}

.gm-page-hero-section__facts strong {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 17);
    font-weight: 700;
}

.gm-page-hero-section__facts strong em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-page-hero-section__facts span {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 15);
    line-height: 1.5;
}

/* ── Tablet: lead under the statement ──────────────────────────────── */
@media (max-width: 980px) {
    .gm-page-hero-section { --gm-cv-h: calc(var(--gm-u) * 900); }
    .gm-page-hero-section__crumbs ol { margin-bottom: calc(var(--gm-u) * 44); }
    .gm-page-hero-section__inner { gap: calc(var(--gm-u) * 32); grid-template-columns: minmax(0, 1fr); }
    .gm-page-hero-section__title { font-size: calc(var(--gm-u) * 72); }
    .gm-page-hero-section__text { font-size: calc(var(--gm-u) * 17); margin-bottom: calc(var(--gm-u) * 28); }
    .gm-page-hero-section__facts { margin-top: calc(var(--gm-u) * 56); }
}

/* ── Phone: facts stack, actions full width ────────────────────────── */
@media (max-width: 640px) {
    .gm-page-hero-section { --gm-cv-h: calc(var(--gm-u) * 980); }
    .gm-page-hero-section__crumbs ol { font-size: calc(var(--gm-u) * 13); margin-bottom: calc(var(--gm-u) * 32); }
    .gm-page-hero-section__title { font-size: calc(var(--gm-u) * 44); }
    .gm-page-hero-section__text { font-size: calc(var(--gm-u) * 15.5); margin-bottom: calc(var(--gm-u) * 24); }
    .gm-page-hero-section__actions { display: grid; gap: calc(var(--gm-u) * 12); }
    .gm-page-hero-section__actions .gm-button { justify-content: center; width: 100%; }
    .gm-page-hero-section__actions .gm-button:has(.gm-button__circle) { justify-content: space-between; }
    .gm-page-hero-section__facts { grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--gm-u) * 40); }
    .gm-page-hero-section__facts li,
    .gm-page-hero-section__facts li + li { border-bottom: 1px solid var(--gm-border); border-right: 0; padding: calc(var(--gm-u) * 18) 0; }
    .gm-page-hero-section__facts span { font-size: calc(var(--gm-u) * 14); }
}

/* getme-css-bundle:end css/sections/page-hero.css */


/* getme-css-bundle: css/sections/item-overview.css */
/* ════════════════════════════════════════════════════════════════════
   item-overview (sections/item-overview.html)
   Namespace: --io-*   Scope: .gm-item-overview-section
   Copy left (eyebrow, heading, long text — the catalog's description_html or
   the Body setting), a portrait image right (or left, "Image on the left").
   Ground / rhythm / type = theme primitives.
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-item-overview-section {
    --gm-cv-h: calc(var(--gm-u) * 860);
}

.gm-item-overview-section__inner {
    align-items: start;
    display: grid;
    gap: calc(var(--gm-u) * 88);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.gm-item-overview-section--solo .gm-item-overview-section__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(var(--gm-u) * 820);
}

.gm-item-overview-section--media-first .gm-item-overview-section__media {
    order: -1;
}

/* Doubled class: the base .gm-kicker rule in theme.css loads after this file. */
.gm-item-overview-section .gm-item-overview-section__kicker {
    margin-bottom: calc(var(--gm-u) * 20);
}

.gm-item-overview-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 46);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 calc(var(--gm-u) * 28);
    text-wrap: balance;
}

.gm-item-overview-section__title em {
    color: var(--gm-primary);
    font-style: normal;
}

/* The body is either the theme's paragraphs or the catalog's sanitised HTML:
   style the elements an editor can produce, nothing else. */
.gm-item-overview-section__body {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 18);
    line-height: 1.7;
}

.gm-item-overview-section__body > :first-child {
    color: var(--gm-text);
    margin-top: 0;
}

.gm-item-overview-section__body p,
.gm-item-overview-section__body ul,
.gm-item-overview-section__body ol {
    margin: 0 0 calc(var(--gm-u) * 20);
}

.gm-item-overview-section__body ul,
.gm-item-overview-section__body ol {
    padding-left: calc(var(--gm-u) * 22);
}

.gm-item-overview-section__body li {
    margin-bottom: calc(var(--gm-u) * 8);
}

.gm-item-overview-section__body h2,
.gm-item-overview-section__body h3 {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 22);
    line-height: 1.25;
    margin: calc(var(--gm-u) * 32) 0 calc(var(--gm-u) * 12);
}

.gm-item-overview-section__body a {
    color: var(--gm-primary-ink);
    font-weight: 600;
}

.gm-item-overview-section__body strong {
    color: var(--gm-text);
}

.gm-item-overview-section__media {
    margin: 0;
}

.gm-item-overview-section__frame {
    aspect-ratio: 4 / 5;
    background: var(--gm-media-surface);
    border-radius: var(--theme-media-radius, var(--theme-radius-sm, 4px));
    display: block;
    overflow: hidden;
}

.gm-item-overview-section__frame img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gm-item-overview-section__media figcaption {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 14);
    margin-top: calc(var(--gm-u) * 14);
}

/* ── Tablet / phone: one column, image under the text ──────────────── */
@media (max-width: 980px) {
    .gm-item-overview-section { --gm-cv-h: calc(var(--gm-u) * 1500); }
    .gm-item-overview-section__inner { gap: calc(var(--gm-u) * 44); grid-template-columns: minmax(0, 1fr); }
    .gm-item-overview-section--media-first .gm-item-overview-section__media { order: 0; }
    .gm-item-overview-section__title { font-size: calc(var(--gm-u) * 38); }
    .gm-item-overview-section__body { font-size: calc(var(--gm-u) * 17); }
    .gm-item-overview-section__frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
    .gm-item-overview-section__title { font-size: calc(var(--gm-u) * 30); margin-bottom: calc(var(--gm-u) * 20); }
    .gm-item-overview-section__body { font-size: calc(var(--gm-u) * 15.5); }
}

/* getme-css-bundle:end css/sections/item-overview.css */


/* getme-css-bundle: css/sections/team-roster.css */
/* ════════════════════════════════════════════════════════════════════
   team-roster (sections/team-roster.html)
   Namespace: --tr-*   Scope: .gm-team-roster-section
   Round portraits in a wrapping row: the photo sits in a circle with a
   hairline ring in the band's line colour that turns brand on hover;
   name in the heading face, role as a small uppercase line. A person
   without a photo gets initials on the brand wash.
   Ground, padding, heading = theme primitives (band-ground, band-head).
   Geometry = reference px × --gm-u (1502 / 680 / 390).
   ════════════════════════════════════════════════════════════════════ */

.gm-team-roster-section {
    --tr-photo: 188;
    --tr-gap-x: 48;
    --tr-gap-y: 48;
    --tr-ring: var(--gm-border-strong);
    --gm-cv-h: calc(var(--gm-u) * 620);
}

.gm-team-roster-section__list--small { --tr-photo: 148; }
.gm-team-roster-section__list--large { --tr-photo: 228; }

.gm-team-roster-section__list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gm-u) * var(--tr-gap-y)) calc(var(--gm-u) * var(--tr-gap-x));
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-team-roster-section__list--center { justify-content: center; }
.gm-team-roster-section__list--start { justify-content: flex-start; }

.gm-team-roster-section__member {
    display: grid;
    justify-items: center;
    text-align: center;
    width: calc(var(--gm-u) * (var(--tr-photo) + 24));
}

/* The ring is an outline a few units off the photo, so it reads as a frame. */
.gm-team-roster-section__photo {
    aspect-ratio: 1;
    background: var(--gm-media-surface);
    border-radius: 50%;
    display: grid;
    margin-bottom: calc(var(--gm-u) * 20);
    outline: 1px solid var(--tr-ring);
    outline-offset: calc(var(--gm-u) * 6);
    overflow: hidden;
    place-items: center;
    transition: outline-color var(--gm-t-hover) var(--gm-ease-soft);
    width: calc(var(--gm-u) * var(--tr-photo));
}

.gm-team-roster-section__member:hover .gm-team-roster-section__photo {
    outline-color: var(--gm-primary);
}

.gm-team-roster-section__photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gm-t-media) var(--gm-ease-expo);
    width: 100%;
}

.gm-team-roster-section__member:hover .gm-team-roster-section__photo img {
    transform: scale(1.04);
}

.gm-team-roster-section__initials {
    align-items: center;
    background: var(--gm-primary-light);
    color: var(--gm-primary-ink);
    display: flex;
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * var(--tr-photo) * 0.3);
    font-weight: 700;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.02em;
    width: 100%;
}

/* Placeholder until a real photo is added: a neutral head-and-shoulders
   silhouette in the brand wash, cut off by the circle at the shoulders. */
.gm-team-roster-section__avatar {
    align-items: flex-end;
    background: var(--gm-primary-light);
    color: var(--gm-primary);
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.gm-team-roster-section__avatar svg {
    display: block;
    fill: currentColor;
    height: 82%;
    opacity: 0.55;
    width: 82%;
}

.gm-team-roster-section__name {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 20);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.gm-team-roster-section__role {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 12);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin-top: calc(var(--gm-u) * 8);
    text-transform: uppercase;
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .gm-team-roster-section { --tr-gap-x: 36; --tr-gap-y: 40; --gm-cv-h: calc(var(--gm-u) * 900); }
    .gm-team-roster-section__name { font-size: calc(var(--gm-u) * 18); }
}

/* ── Phone: two per row, the circle fills its column ───────────────── */
@media (max-width: 640px) {
    .gm-team-roster-section { --tr-gap-x: 20; --tr-gap-y: 32; --gm-cv-h: calc(var(--gm-u) * 1100); }
    .gm-team-roster-section__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gm-team-roster-section__member { width: auto; }
    .gm-team-roster-section__photo { margin-bottom: calc(var(--gm-u) * 14); outline-offset: calc(var(--gm-u) * 4); width: calc(100% - var(--gm-u) * 12); }
    .gm-team-roster-section__initials { font-size: calc(var(--gm-u) * 40); }
    .gm-team-roster-section__name { font-size: calc(var(--gm-u) * 16); }
    .gm-team-roster-section__role { font-size: calc(var(--gm-u) * 10.5); letter-spacing: 0.12em; margin-top: calc(var(--gm-u) * 6); }
}

/* getme-css-bundle:end css/sections/team-roster.css */


/* ── Legacy stylesheets — service listing surfaces not yet migrated ── */

/* getme-css-bundle: css/commerce/listings.css */
/* ════════════════════════════════════════════════════════════════════
   commerce/listings.css — shared listing chrome

   The service listing was migrated to a section-scoped stylesheet
   (commerce/sections/service-listing.css, --sl-*). The .gm-service-*
   classes below are now consumed by the booking-listing section
   (sections/booking-listing.html reuses .gm-service-section / -grid /
   -card / -category), so this file must stay until booking-listing
   gets its own namespace.
   ════════════════════════════════════════════════════════════════════ */

.gm-service-section {
    --gm-commerce-action-bg: var(--gm-primary);
    --gm-commerce-action-hover: var(--gm-primary-dark);
    --gm-commerce-action-text: #ffffff;
    --gm-commerce-secondary-text: var(--gm-primary-dark);
    --gm-commerce-grid-columns: 3;
    --gm-commerce-action-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    padding: 26px;
}

.gm-service-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(var(--gm-commerce-grid-columns), minmax(0, 1fr));
}

.gm-service-card {
    background: #ffffff;
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-card-service-radius, var(--theme-radius-lg));
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gm-service-card:hover {
    border-color: color-mix(in srgb, var(--gm-commerce-action-bg) 35%, var(--gm-border));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}

.gm-service-card a {
    color: var(--gm-text);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100%;
    text-decoration: none;
}

.gm-service-card img,
.gm-service-image-placeholder {
    aspect-ratio: 1 / 1;
}

.gm-service-card img {
    background: var(--gm-media-surface);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.gm-service-image-placeholder {
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    display: block;
    width: 100%;
}

.gm-service-category {
    color: var(--gm-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    min-height: 16px;
    overflow: hidden;
    padding: 14px 14px 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-service-card h3 {
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 14px 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-service-card p {
    color: var(--gm-muted);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 18px 0;
    min-height: 42px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gm-service-card strong {
    display: block;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.gm-service-price-stack {
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: 16px 14px;
    min-height: 46px;
}

.gm-service-compare-price {
    color: var(--gm-muted);
    font-size: 13px;
    text-decoration: line-through;
}

.gm-service-actions {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.gm-service-actions a,
.gm-service-actions button {
    align-items: center;
    background: var(--gm-commerce-action-bg);
    border: 1px solid var(--gm-commerce-action-bg);
    border-radius: var(--gm-commerce-action-radius);
    color: var(--gm-commerce-action-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.gm-service-actions a:hover,
.gm-service-actions button:hover {
    background: var(--gm-commerce-action-hover);
    border-color: var(--gm-commerce-action-hover);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gm-commerce-action-bg) 26%, transparent);
}

.gm-service-actions a:active,
.gm-service-actions button:active {
    filter: brightness(0.92);
}

.gm-service-actions button:disabled,
.gm-service-actions [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.68;
}

.gm-product-section__pagination,
.gm-service-listing-section__pagination,
.gm-category-listing-section__pagination,
.gm-brand-listing-section__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 28px;
}

.gm-product-section__pagination a,
.gm-product-section__pagination span,
.gm-service-listing-section__pagination a,
.gm-service-listing-section__pagination span,
.gm-category-listing-section__pagination a,
.gm-category-listing-section__pagination span,
.gm-brand-listing-section__pagination a,
.gm-brand-listing-section__pagination span {
    align-items: center;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    color: var(--gm-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 38px;
    min-width: 38px;
    padding: 0 12px;
    text-decoration: none;
}

.gm-product-section__pagination span,
.gm-service-listing-section__pagination span,
.gm-category-listing-section__pagination span,
.gm-brand-listing-section__pagination span {
    border-color: transparent;
    color: var(--gm-muted);
}

.gm-product-section__pagination a[aria-current="page"],
.gm-service-listing-section__pagination a[aria-current="page"],
.gm-category-listing-section__pagination a[aria-current="page"],
.gm-brand-listing-section__pagination a[aria-current="page"] {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary, #ffffff);
}

@media (max-width: 980px) {
    .gm-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .gm-service-grid { grid-template-columns: 1fr; }
    .gm-service-section { padding: 20px; }
}

/* getme-css-bundle:end css/commerce/listings.css */


:root {
    color-scheme: light;

    /* Token bridge
       The renderer injects merchant/theme settings as canonical tokens such as
       --color-primary, --color-bg-primary, --font-primary and --theme-radius-lg.
       Atlas maps only those canonical tokens into its own --gm-*
       internal surface. */
    --gm-primary: var(--color-primary);
    /* Dark/light primary shades derive from the BRAND primary (or the renderer's
       derived --color-primary-hover), NOT --color-primary-dark/light: Atlas
       ships those canonical tokens with a non-brand default that does not track
       --color-primary, so they leaked a stale colour onto hovers + outline
       buttons (e.g. blue on an orange theme). One source of truth = the primary. */
    --gm-primary-dark: var(--color-primary-hover, color-mix(in srgb, var(--gm-primary) 80%, #000));
    --gm-primary-light: color-mix(in srgb, var(--gm-primary) 12%, transparent);
    --gm-on-primary: var(--color-text-on-primary, #ffffff);
    --gm-bg: var(--color-bg-secondary, var(--color-bg-primary));
    --gm-surface: var(--color-surface, var(--color-card-bg, var(--color-bg-primary)));
    /* Single source for card media/image backgrounds — keeps every product &
       service card (featured / listing / booking) on the same light surface. */
    --gm-media-surface: var(--color-bg-tertiary, #eef2f7);
    --gm-text: var(--color-text-primary);
    --gm-muted: var(--color-text-muted, var(--color-text-secondary));
    --gm-border: var(--color-border, var(--color-border-light, var(--color-border-medium)));
    --gm-button-radius: var(--theme-button-radius, var(--theme-radius-md));
    --gm-button-shadow: var(--theme-button-shadow, none);
    --gm-control-bg: var(--theme-input-background, var(--gm-surface));
    --gm-control-border: var(--theme-input-border, var(--gm-border));
    --gm-control-focus: var(--theme-input-focus, var(--gm-primary));
    --gm-control-radius: var(--theme-input-radius, var(--theme-radius-md));
    --gm-dropdown-bg: var(--theme-dropdown-popup-background, var(--gm-bg));
    --gm-dropdown-radius: var(--theme-dropdown-popup-radius, var(--gm-control-radius));
    /* Interaction + semantic tokens — a single source for radius, shadow, motion
       and focus, so components reference tokens instead of literal values. */
    --gm-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 12px));
    --gm-card-shadow: var(--theme-card-shadow, none);
    --gm-pill-radius: var(--theme-variant-pill-radius, var(--theme-radius-pill, 9999px));
    --gm-badge-radius: var(--theme-badge-radius, var(--theme-radius-pill, 9999px));
    --gm-shadow-sm: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --gm-shadow-md: var(--theme-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    --gm-shadow-lg: var(--theme-shadow-lg, 0 12px 28px rgba(15, 23, 42, 0.1));
    --gm-transition-fast: var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
    --gm-transition: var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease);
    --gm-focus-ring-width: 3px;
    --gm-focus-ring-mix: 16%;
    --gm-focus-ring-color: var(--gm-control-focus, var(--gm-primary));
    --gm-focus-ring: 0 0 0 var(--gm-focus-ring-width) color-mix(in srgb, var(--gm-focus-ring-color) var(--gm-focus-ring-mix), transparent);
    --gm-hover-bg: color-mix(in srgb, var(--gm-primary) 82%, #000);
    --gm-disabled-opacity: 0.56;
    /* Color palette — named colors derived from the theme's --color-* tokens.
       The color schemes below are built from these. */
    --palette-brand: var(--color-primary);
    --palette-brand-contrast: var(--color-text-on-primary, #ffffff);
    --palette-accent: var(--color-accent, var(--color-primary));
    --palette-accent-contrast: var(--color-text-on-accent, #ffffff);
    --palette-surface: var(--gm-surface);
    --palette-surface-text: var(--gm-text);
    --palette-surface-border: var(--gm-border);
    --palette-muted: var(--color-bg-secondary, var(--gm-surface));
    --palette-muted-text: var(--gm-muted);
    --palette-inverse: var(--color-bg-dark, var(--color-secondary));
    --palette-inverse-text: var(--color-text-light, #ffffff);
    /* Color schemes — named role sets (background, text, border, button) built
       from the palette. A section applies one via its Color scheme setting. */
    --scheme-background-1-bg: var(--palette-surface);
    --scheme-background-1-text: var(--palette-surface-text);
    --scheme-background-1-border: var(--palette-surface-border);
    --scheme-background-1-button: var(--palette-brand);
    --scheme-background-1-button-text: var(--palette-brand-contrast);
    --scheme-background-2-bg: var(--palette-muted);
    --scheme-background-2-text: var(--palette-muted-text);
    --scheme-background-2-border: var(--palette-surface-border);
    --scheme-background-2-button: var(--palette-brand);
    --scheme-background-2-button-text: var(--palette-brand-contrast);
    --scheme-inverse-bg: var(--palette-inverse);
    --scheme-inverse-text: var(--palette-inverse-text);
    --scheme-inverse-border: color-mix(in srgb, var(--palette-inverse-text) 20%, transparent);
    --scheme-inverse-button: var(--palette-brand);
    --scheme-inverse-button-text: var(--palette-brand-contrast);
    /* Header chrome — single source for the hairline separator + pinned elevation.
       Token-only (no editor field): follows the theme border + a soft shadow. */
    --gm-header-border: var(--gm-border);
    --gm-header-shadow: 0 6px 20px -12px color-mix(in srgb, var(--gm-text) 40%, transparent);

    --gm-page-max-width: var(--theme-container-content-max-width, 1440px);
    --gm-page-gutter: var(--theme-container-content-inline-padding, clamp(14px, 2vw, 40px));
    --gm-section-inline-padding: clamp(14px, 1.5vw, 24px);
    /* Page sections own their block-start spacing. Keeping the base main flush
       with header chrome avoids stacking a second, theme-wide top gap. */
    --gm-main-padding-block-start: 0px;
    --gm-main-padding-block-end: 72px;
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-primary, sans-serif);
    background: var(--gm-bg);
    color: var(--gm-text);
    /* Crisp grayscale antialiasing site-wide (inherited → storefront + widgets, incl. the
       checkout shadow DOM). Themeable from the Typography settings via --gm-font-smoothing
       (e.g. "auto" to restore the OS default subpixel rendering). */
    -webkit-font-smoothing: var(--gm-font-smoothing, antialiased);
    -moz-osx-font-smoothing: var(--gm-font-smoothing-moz, grayscale);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    background: var(--gm-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, var(--font-primary, sans-serif));
}

a {
    color: inherit;
}

.gm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gm-header,
.gm-footer {
    width: min(var(--gm-page-max-width), calc(100% - (var(--gm-page-gutter) * 2)));
    margin: 0 auto;
}

.gm-footer {
    flex-shrink: 0;
}

.gm-header {
    background: var(--gm-header-bg, transparent);
    color: var(--gm-header-text, var(--gm-text));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: var(--gm-header-padding-block, 22px) 0;
    border-bottom: 1px solid var(--gm-header-border);
}

/* Sticky header — opt-in via the "Stick header to top on scroll" editor toggle
   (component setting `sticky`). Pins to top with a readable surface + soft
   elevation. A merchant-set header background still wins via the var fallback. */
.gm-header--sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--gm-header-bg, var(--gm-surface));
    box-shadow: var(--gm-header-shadow);
}

.gm-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gm-text);
    font-weight: 700;
    text-decoration: none;
}

.gm-header .gm-brand {
    color: var(--gm-header-text, var(--gm-text));
    font-family: var(--gm-header-brand-font, inherit);
}

.gm-brand-logo,
.gm-footer-logo {
    display: block;
    height: auto;
    max-width: 160px;
}

.gm-brand-logo {
    max-height: 42px;
}

.gm-footer-logo {
    margin-bottom: 12px;
    max-height: 48px;
}

.gm-brand-tagline {
    color: var(--gm-muted);
    font-size: 13px;
    font-weight: 500;
}

.gm-header .gm-brand-tagline {
    color: color-mix(in srgb, var(--gm-header-text, var(--gm-muted)) 72%, transparent);
}

.gm-brand-mark {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--gm-button-radius);
    background: var(--gm-primary);
    color: var(--gm-on-primary);
}

.gm-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.gm-header-mobile-actions {
    display: none;
    align-items: center;
    gap: 4px;
}

.gm-header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-button-radius);
    background: var(--gm-surface);
    color: var(--gm-text);
    cursor: pointer;
}

.gm-header-menu-toggle {
    transition:
        background var(--gm-transition-fast),
        border-color var(--gm-transition-fast);
}

.gm-header-menu-toggle:hover {
    border-color: var(--gm-primary);
}

.gm-header-menu-toggle[aria-expanded="true"] {
    background: var(--gm-primary-light);
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
}

.gm-header-menu-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.gm-nav,
.gm-header-utility {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.gm-nav__item {
    display: inline-flex;
    position: relative;
}

.gm-nav__item--has-children {
    --gm-submenu-offset: 8px;
}

.gm-nav__item--has-children > .gm-nav__link::after {
    color: currentColor;
    content: "⌄";
    font-size: 12px;
    line-height: 1;
    opacity: 0.72;
    transition: transform var(--gm-transition-fast);
}

.gm-nav__item--has-children:hover > .gm-nav__link::after,
.gm-nav__item--has-children[data-open="true"] > .gm-nav__link::after {
    transform: rotate(180deg);
    opacity: 1;
}

.gm-nav__link {
    align-items: center;
    border-radius: var(--gm-button-radius);
    border: 1px solid transparent;
    color: var(--gm-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    gap: 7px;
    line-height: 1.2;
    min-height: 38px;
    padding: 9px 12px;
    text-decoration: none;
    box-shadow: var(--gm-button-shadow);
    transition:
        background var(--gm-transition-fast),
        color var(--gm-transition-fast);
}

.gm-header .gm-nav__link,
.gm-header .gm-header-utility__link {
    color: var(--gm-header-nav-link, var(--gm-muted));
    font-family: var(--gm-header-nav-font, inherit);
}

.gm-nav button.gm-nav__link {
    cursor: pointer;
    font: inherit;
}

.gm-nav__link:hover {
    background: var(--gm-primary-light);
    color: var(--gm-primary-dark);
}

.gm-header .gm-nav__link[aria-current="page"],
.gm-header .gm-nav__link.is-active {
    color: var(--gm-header-text, var(--gm-text));
    font-weight: 600;
}

.gm-nav__submenu {
    background: var(--gm-dropdown-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-dropdown-radius);
    box-shadow: var(--theme-shadow-lg);
    display: grid;
    gap: 2px;
    left: 0;
    min-width: 220px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + var(--gm-submenu-offset));
    transform: translateY(-4px);
    transition:
        opacity var(--gm-transition-fast),
        transform var(--gm-transition-fast);
    z-index: 35;
}

.gm-nav__submenu::before {
    content: "";
    height: var(--gm-submenu-offset);
    left: 0;
    position: absolute;
    right: 0;
    top: calc(var(--gm-submenu-offset) * -1);
}

.gm-nav__submenu--mega-columns,
.gm-nav__submenu--logo-grid,
.gm-nav__submenu--card-grid,
.gm-nav__submenu--featured-panel {
    gap: 16px;
    left: 50%;
    padding: 16px;
    transform: translate(-50%, -4px);
    width: min(760px, calc(100vw - (var(--gm-page-gutter) * 2)));
}

.gm-nav__submenu--mega-columns {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gm-nav__submenu--logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.gm-nav__submenu--card-grid,
.gm-nav__submenu--featured-panel {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.gm-nav__submenu-column {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.gm-nav__submenu-list {
    display: grid;
    gap: 2px;
}

.gm-nav__submenu-heading.gm-nav__link {
    border-bottom: 1px solid var(--gm-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--gm-text);
    font-size: 13px;
    font-weight: 700;
    justify-content: flex-start;
    min-height: 34px;
    padding: 0 0 8px;
    text-transform: uppercase;
    white-space: normal;
}

.gm-nav__tile {
    align-items: center;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    color: var(--gm-text);
    display: grid;
    gap: 9px;
    justify-items: center;
    min-height: 96px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
}

.gm-nav__tile:hover {
    border-color: var(--gm-primary);
    box-shadow: var(--theme-shadow-sm, none);
    color: var(--gm-primary-dark);
}

.gm-nav__tile-media {
    align-items: center;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 100%;
}

.gm-nav__tile-media img {
    display: block;
    max-height: 38px;
    max-width: 92px;
    object-fit: contain;
}

.gm-nav__tile-label {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.gm-nav__item:hover > .gm-nav__submenu,
.gm-nav__item:focus-within > .gm-nav__submenu,
.gm-nav__item[data-open="true"] > .gm-nav__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gm-nav__item:hover > .gm-nav__submenu--mega-columns,
.gm-nav__item:focus-within > .gm-nav__submenu--mega-columns,
.gm-nav__item:hover > .gm-nav__submenu--logo-grid,
.gm-nav__item:focus-within > .gm-nav__submenu--logo-grid,
.gm-nav__item:hover > .gm-nav__submenu--card-grid,
.gm-nav__item:focus-within > .gm-nav__submenu--card-grid,
.gm-nav__item:hover > .gm-nav__submenu--featured-panel,
.gm-nav__item:focus-within > .gm-nav__submenu--featured-panel,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--mega-columns,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--logo-grid,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--card-grid,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--featured-panel {
    transform: translate(-50%, 0);
}

.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--featured-panel {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--featured-panel,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--featured-panel,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--featured-panel {
    transform: translateY(0);
}

.gm-nav__submenu-link.gm-nav__link {
    border-radius: calc(var(--gm-dropdown-radius) - 4px);
    box-shadow: none;
    color: var(--gm-text);
    justify-content: flex-start;
    min-height: 38px;
    padding: 9px 10px;
    white-space: nowrap;
}

.gm-nav__link--ghost {
    background: transparent;
    color: var(--gm-muted);
}

.gm-nav__icon {
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1;
}

.gm-nav__label {
    min-width: 0;
}

.gm-header-utility {
    gap: 8px;
}

.gm-header-utility__link {
    min-width: 42px;
}

.gm-nav__badge {
    align-items: center;
    background: var(--theme-badge-background, var(--gm-primary));
    border-radius: var(--theme-badge-radius, 9999px);
    color: var(--theme-badge-text, var(--gm-on-primary));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 19px;
    padding: 4px 6px;
}

.gm-nav__badge[hidden],
[data-getme-cart-count][hidden] {
    display: none;
}

.gm-nav__link--primary,
.gm-nav__link--button-primary,
.gm-header-cta--primary,
.gm-header-cta--button-primary {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary);
    font-weight: 700;
}

.gm-nav__link--primary:hover,
.gm-nav__link--button-primary:hover,
.gm-header-cta--primary:hover,
.gm-header-cta--button-primary:hover {
    background: var(--gm-primary-dark);
    border-color: var(--gm-primary-dark);
    color: var(--gm-on-primary);
}

.gm-nav__link--secondary,
.gm-nav__link--button-secondary,
.gm-header-cta--secondary,
.gm-header-cta--button-secondary {
    background: var(--color-bg-tertiary);
    border-color: var(--gm-border);
    color: var(--gm-text);
    font-weight: 700;
}

.gm-nav__link--secondary:hover,
.gm-nav__link--button-secondary:hover,
.gm-header-cta--secondary:hover,
.gm-header-cta--button-secondary:hover {
    background: var(--gm-surface);
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
}

.gm-nav__link--outline,
.gm-nav__link--outline-primary,
.gm-header-cta--outline,
.gm-header-cta--outline-primary {
    background: transparent;
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
    font-weight: 700;
}

.gm-nav__link--outline:hover,
.gm-nav__link--outline-primary:hover,
.gm-header-cta--outline:hover,
.gm-header-cta--outline-primary:hover {
    background: var(--gm-primary-light);
    color: var(--gm-primary-dark);
}

.gm-nav__link--outline-light,
.gm-header-cta--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
    font-weight: 700;
}

.gm-nav__link--outline-light:hover,
.gm-header-cta--outline-light:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.gm-header .gm-header-cta {
    background: var(--gm-header-cta-bg, var(--gm-primary));
    border-color: var(--gm-header-cta-bg, var(--gm-primary));
    color: var(--gm-header-cta-text, var(--gm-on-primary));
}

.gm-language-switcher {
    position: relative;
    color: var(--gm-text);
    font-size: 13px;
    font-weight: 700;
}

.gm-language-switcher--dropdown {
    display: inline-block;
}

.gm-language-switcher__summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    /* Outline treatment to match the Cart/Account header buttons. */
    border: 1px solid var(--gm-primary);
    border-radius: var(--gm-button-radius);
    background: transparent;
    color: var(--gm-primary-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast),
        color var(--gm-transition-fast);
}

.gm-language-switcher__summary::-webkit-details-marker {
    display: none;
}

.gm-language-switcher__summary:hover,
.gm-language-switcher[open] .gm-language-switcher__summary {
    border-color: var(--gm-control-focus);
    color: var(--gm-primary-dark);
    box-shadow: var(--gm-focus-ring);
}

.gm-language-switcher__flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    object-fit: cover;
}

.gm-language-switcher__current,
.gm-language-switcher__label {
    min-width: 0;
    white-space: nowrap;
}

.gm-language-switcher__chevron {
    color: var(--gm-muted);
    font-size: 14px;
    line-height: 1;
    transition: transform var(--gm-transition-fast);
}

.gm-language-switcher[open] .gm-language-switcher__chevron {
    color: var(--gm-primary-dark);
    transform: rotate(180deg);
}

.gm-language-switcher__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 184px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-dropdown-radius);
    background: var(--gm-dropdown-bg);
    box-shadow: var(--theme-shadow-lg);
    transform-origin: top right;
    animation: gm-lang-menu-in 140ms var(--theme-animation-easing-standard, ease);
}

@keyframes gm-lang-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gm-language-switcher__menu { animation: none; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] { animation: none; }
    .gm-nav__item--has-children > .gm-nav__link::after { transition: none; }
}

.gm-language-switcher__item,
.gm-language-switcher--pills a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gm-text);
    line-height: 1.1;
    text-decoration: none;
}

.gm-language-switcher__item {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--gm-control-radius, 8px);
    font-weight: 600;
    transition:
        background var(--gm-transition-fast),
        color var(--gm-transition-fast);
}

.gm-language-switcher__item:hover,
.gm-language-switcher--pills a:hover {
    background: var(--gm-primary-light);
    color: var(--gm-primary-dark);
}

.gm-language-switcher__item[aria-current="page"] {
    background: var(--gm-primary);
    color: var(--gm-on-primary);
    font-weight: 700;
}

.gm-language-switcher--pills {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-button-radius);
    background: var(--theme-variant-pill-background, var(--gm-control-bg));
}

.gm-language-switcher--pills a {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
}

.gm-language-switcher--pills a + a {
    border-left: 1px solid var(--gm-border);
}

.gm-language-switcher--pills a[aria-current="page"] {
    background: var(--gm-primary);
    color: var(--gm-on-primary);
}

.gm-search-overlay[hidden] {
    display: none;
}

.gm-search-overlay {
    inset: 0;
    position: fixed;
    z-index: 80;
}

.gm-search-overlay__backdrop {
    background: rgba(15, 23, 42, 0.46);
    inset: 0;
    position: absolute;
}

.gm-search-overlay__dialog {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 14px));
    box-shadow: var(--theme-shadow-lg);
    display: grid;
    gap: 12px;
    left: 50%;
    max-height: min(680px, calc(100vh - 48px));
    max-width: min(680px, calc(100vw - 32px));
    overflow: hidden;
    padding: 14px;
    position: absolute;
    top: 48px;
    transform: translateX(-50%);
    width: 100%;
}

.gm-search-overlay__form {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.gm-search-overlay__input {
    background: var(--gm-control-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    box-sizing: border-box;
    color: var(--gm-text);
    font: inherit;
    font-size: 16px;
    min-height: 40px;
    padding: 9px 12px;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast);
    width: 100%;
}

.gm-search-overlay__input::placeholder {
    color: var(--gm-muted);
}

.gm-search-overlay__input:focus {
    border-color: var(--gm-control-focus);
    box-shadow: var(--gm-focus-ring);
    outline: none;
}

.gm-search-overlay__close {
    align-items: center;
    background: var(--gm-control-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-button-radius);
    box-shadow: var(--gm-button-shadow);
    color: var(--gm-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast),
        color var(--gm-transition-fast);
    width: 40px;
}

.gm-search-overlay__close:hover,
.gm-search-overlay__close:focus-visible {
    border-color: var(--gm-control-focus);
    box-shadow:
        var(--gm-button-shadow),
        var(--gm-focus-ring);
    outline: none;
}

.gm-search-overlay__results {
    display: grid;
    gap: 12px;
    max-height: min(520px, calc(100vh - 160px));
    overflow: auto;
    padding: 2px;
}

.gm-search-overlay__empty {
    color: var(--gm-muted);
    margin: 10px 4px;
}

.gm-search-group {
    display: grid;
    gap: 6px;
}

.gm-search-group h3 {
    color: var(--gm-muted);
    font-size: 12px;
    letter-spacing: 0;
    margin: 6px 4px 0;
    text-transform: uppercase;
}

.gm-search-result {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--gm-control-radius);
    color: var(--gm-text);
    display: grid;
    gap: 10px;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 58px;
    padding: 8px;
    text-decoration: none;
}

.gm-search-result:hover {
    background: var(--gm-primary-light);
    border-color: var(--gm-border);
}

.gm-search-result img,
.gm-search-result__mark {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-media-radius, var(--theme-radius-sm, 6px));
    height: 46px;
    object-fit: cover;
    width: 46px;
}

.gm-search-result span {
    min-width: 0;
}

.gm-search-result strong,
.gm-search-result small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-search-result small {
    color: var(--gm-muted);
    font-size: 13px;
    margin-top: 3px;
}

:where(.gm-main, .gm-header, .gm-footer) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    min-height: 38px;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    background: var(--gm-control-bg);
    color: var(--gm-text);
    font: inherit;
    padding: 8px 11px;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast);
}

:where(.gm-main, .gm-header, .gm-footer) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
):focus {
    border-color: var(--gm-control-focus);
    box-shadow: var(--gm-focus-ring);
    outline: none;
}

:where(.gm-main, .gm-header, .gm-footer) :where(button) {
    border-radius: var(--gm-button-radius);
    font: inherit;
}

.gm-main {
    flex: 1 0 auto;
    width: min(var(--gm-page-max-width), calc(100% - (var(--gm-page-gutter) * 2)));
    margin: 0 auto;
    padding: var(--gm-main-padding-block-start) 0 var(--gm-main-padding-block-end);
}

.gm-hero,
.gm-page-heading,
.gm-widget-card,
.gm-grid article {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
}

.gm-hero {
    padding: 56px;
}

/* Eyebrow — short rule + tracked caps in the highlight colour (one style for every section). */
.gm-kicker {
    align-items: center;
    color: var(--gm-primary-ink);
    display: flex;
    font-size: calc(var(--gm-u) * 12);
    font-weight: 500;
    gap: calc(var(--gm-u) * 12);
    letter-spacing: 0.18em;
    margin: 0;
    text-transform: uppercase;
}

.gm-kicker::before {
    background: currentColor;
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 1);
    width: calc(var(--gm-u) * 26);
}

.gm-hero h1,
.gm-page-heading h1 {
    font-size: 42px;
    line-height: 1.1;
    margin: 0;
}

.gm-hero p,
.gm-page-heading p,
.gm-grid p,
.gm-widget-card p,
.gm-footer p {
    color: var(--gm-muted);
    line-height: 1.65;
}

.gm-hero p {
    max-width: 680px;
    font-size: 18px;
}

.gm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Button — ONE system. Colour: Theme settings > Buttons (primary) through
   --gm-button-* (dark scheme / inverted sections swap it, see "PureClean design
   system" below). Shape: pill + optional round arrow (.gm-button__circle).
   Size follows the scale unit, so it keeps its proportion on every screen.
   .gm-button--contrast = text-coloured fill (the reference "accent" button). */
.gm-button {
    /* Solid colour (arrow circle) vs fill: Buttons > Primary opacity lets the
       background through the fill, frosted by the backdrop blur. */
    --gm-btn-solid: var(--gm-button-bg);
    --gm-btn-fill: color-mix(in srgb, var(--gm-btn-solid) var(--gm-button-alpha, 100%), transparent);
    --gm-btn-ink: var(--gm-button-text);
    -webkit-backdrop-filter: blur(calc(var(--gm-u) * 10)) saturate(1.4);
    backdrop-filter: blur(calc(var(--gm-u) * 10)) saturate(1.4);
    align-items: center;
    background: var(--gm-btn-fill);
    border: 0;
    border-radius: var(--gm-button-radius);
    box-shadow: var(--gm-button-shadow);
    color: var(--gm-btn-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: calc(var(--gm-u) * 15);
    font-weight: 600;
    gap: calc(var(--gm-u) * 14);
    justify-content: space-between;
    letter-spacing: -0.01em;
    min-height: calc(var(--gm-u) * 56);
    padding: 0 calc(var(--gm-u) * 26);
    text-decoration: none;
    transition: filter var(--gm-t-quick) ease;
}

.gm-button:has(.gm-button__circle) {
    padding-right: calc(var(--gm-u) * 10);
}

.gm-button--contrast {
    --gm-btn-solid: var(--gm-accent);
    --gm-btn-fill: var(--gm-accent);
    --gm-btn-ink: var(--gm-on-accent);
}

.gm-button:hover {
    filter: brightness(1.06);
}

.gm-button--contrast:hover {
    filter: brightness(0.92);
}

/* Ghost = outlined in the band's own text colour (second action next to a filled one). */
.gm-button--ghost {
    --gm-btn-fill: transparent;
    --gm-btn-ink: var(--gm-text);
    box-shadow: inset 0 0 0 calc(var(--gm-u) * 1.5) var(--gm-border-strong);
}

.gm-button--ghost:hover {
    background: var(--gm-hover);
    filter: none;
}

/* Glass = the primary colour as a pane of tinted glass: partly see-through
   over a blurred backdrop, a sheen on the upper half, a bright top edge, inner
   depth at the bottom and a soft brand glow. Every colour is derived from
   Buttons > Primary (background + text) and the band's shadow colour. */
.gm-button--glass {
    --gm-glass-tint: color-mix(in srgb, var(--gm-button-bg) 74%, transparent);
    --gm-glass-light: var(--gm-button-text);
    --gm-btn-fill:
        linear-gradient(180deg,
            color-mix(in srgb, var(--gm-glass-light) 34%, transparent) 0%,
            color-mix(in srgb, var(--gm-glass-light) 10%, transparent) 46%,
            transparent 54%,
            color-mix(in srgb, var(--gm-shadow-color) 60%, transparent) 100%),
        var(--gm-glass-tint);
    -webkit-backdrop-filter: blur(calc(var(--gm-u) * 12)) saturate(1.6);
    backdrop-filter: blur(calc(var(--gm-u) * 12)) saturate(1.6);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--gm-glass-light) 55%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--gm-glass-light) 20%, transparent),
        inset 0 calc(var(--gm-u) * -6) calc(var(--gm-u) * 12) color-mix(in srgb, var(--gm-button-bg) 45%, transparent),
        0 calc(var(--gm-u) * 4) calc(var(--gm-u) * 18) color-mix(in srgb, var(--gm-button-bg) 38%, transparent);
    text-shadow: 0 1px 1px color-mix(in srgb, var(--gm-shadow-color) 70%, transparent);
}

.gm-button--glass:hover {
    --gm-glass-tint: color-mix(in srgb, var(--gm-button-bg) 88%, transparent);
    filter: none;
}

/* The round arrow keeps the solid brand colour (the fill is a gradient here). */
.gm-button--glass .gm-button__circle {
    color: var(--gm-button-bg);
}

.gm-button__circle {
    background: var(--gm-btn-ink);
    border-radius: 50%;
    color: var(--gm-btn-solid);
    display: grid;
    flex: none;
    height: calc(var(--gm-u) * 38);
    place-items: center;
    width: calc(var(--gm-u) * 38);
}

.gm-button:hover .gm-arrow {
    animation: gm-nudge var(--gm-t-nudge) var(--gm-ease-inout) infinite;
}

/* Phones: a pill with the round arrow spans its column (label left, arrow right). */
@media (max-width: 640px) {
    .gm-button:has(.gm-button__circle) {
        width: 100%;
    }
}

.gm-button-secondary {
    background: var(--gm-surface);
    border-color: var(--gm-border);
    color: var(--gm-text);
}

.gm-button-secondary:hover {
    background: var(--color-bg-tertiary);
}

.gm-grid,
.gm-lab-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.gm-grid article,
.gm-widget-card,
.gm-page-heading {
    padding: 26px;
}

.gm-grid h2,
.gm-widget-card h2 {
    font-size: 18px;
    margin: 0 0 8px;
}

.gm-page-heading {
    margin-bottom: 18px;
}

.gm-page-heading p {
    max-width: 760px;
}

.gm-error-page-heading {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    min-height: 220px;
    text-align: center;
}

.gm-error-page-heading p {
    margin: 0;
    max-width: 620px;
}

.gm-error-page-heading .gm-button {
    margin-top: 6px;
}

.gm-widget-card-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--gm-border);
    display: flex;
    justify-content: space-between;
    margin: -26px -26px 24px;
    padding: 20px 26px;
}

.gm-widget-card code {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-sm);
    color: var(--gm-muted);
    padding: 2px 6px;
}

.gm-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-runtime-lab-sections,
.gm-runtime-section {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.gm-runtime-section {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
    grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
    padding: 26px;
}

.gm-runtime-copy {
    align-content: start;
    display: grid;
    gap: 14px;
}

.gm-runtime-copy h1 {
    font-size: 34px;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
}

.gm-runtime-copy p {
    color: var(--gm-muted);
    line-height: 1.65;
    margin: 0;
}

.gm-runtime-widget-frame {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    min-height: 220px;
    min-width: 0;
    padding: 18px;
}

.gm-cart-page-section {
    /* Full-width cart (Shopify-style): the cart is NOT a boxed card. Strip the shared
       .gm-runtime-section container chrome (surface/border/shadow/padding) so it reads
       edge-to-edge within the page gutter. Cart-specific only — .gm-runtime-section
       (product/service runtime pages) keeps its card. */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.gm-cart-page-section__copy {
    max-width: 720px;
}

.gm-cart-page-section__copy p {
    max-width: 560px;
}

.gm-cart-page-section__frame {
    background: transparent;
    border: 0;
    min-height: 0;
    min-width: 0;
    padding: 0;
}

/* Empty cart: the widget body already shows "Your cart is empty", so hide this
   section's page heading/intro to avoid a redundant double title. The widget flags an
   empty cart on its mount host (data-getme-checkout-empty="true"), which lives in light
   DOM, so :has() can react from here. */
.gm-cart-page-section:has([data-getme-checkout-empty="true"]) .gm-cart-page-section__copy {
    display: none;
}

.gm-footer:not(.gm-footer--columns):not(.gm-footer--minimal) {
    --gm-footer-bg-resolved: var(--gm-footer-bg, var(--color-footer-bg, var(--color-bg-dark, #0f172a)));
    --gm-footer-text-resolved: var(--gm-footer-text, var(--color-text-on-footer, var(--color-text-light, #ffffff)));
    --gm-footer-muted-resolved: var(--gm-footer-muted, color-mix(in srgb, var(--gm-footer-text-resolved) 72%, transparent));
    --gm-footer-link-resolved: var(--gm-footer-link, color-mix(in srgb, var(--gm-footer-text-resolved) 86%, transparent));
    --gm-footer-accent-resolved: var(--gm-footer-accent, var(--gm-primary));
    --gm-footer-border-resolved: var(--gm-footer-border, color-mix(in srgb, var(--gm-footer-text-resolved) 18%, transparent));
    background: var(--gm-footer-bg-resolved);
    border-top: 1px solid var(--gm-footer-border-resolved);
    color: var(--gm-footer-text-resolved);
    font-family: var(--gm-footer-font, inherit);
    margin: 0;
    max-width: none;
    padding: clamp(44px, var(--gm-footer-padding-block, 64px), 96px) var(--gm-page-gutter) clamp(28px, 4vw, 40px);
    width: 100%;
}

.gm-footer__inner {
    margin: 0 auto;
    max-width: var(--gm-page-max-width);
    width: 100%;
}

.gm-footer__grid {
    align-items: start;
    display: grid;
    gap: clamp(28px, 4vw, 64px);
    grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 0.72fr));
}

.gm-footer__brand {
    display: grid;
    gap: 12px;
    max-width: 480px;
}

.gm-footer__brand-head {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.gm-footer-logo {
    height: auto;
    max-height: 58px;
    max-width: min(200px, 100%);
    object-fit: contain;
    object-position: left center;
}

.gm-footer__brand-mark {
    align-items: center;
    background: color-mix(in srgb, var(--gm-footer-accent-resolved) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--gm-footer-accent-resolved) 42%, transparent);
    border-radius: var(--theme-radius-md, 8px);
    color: var(--gm-footer-text-resolved);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    line-height: 1;
    width: 40px;
}

.gm-footer__brand-name {
    color: var(--gm-footer-text-resolved);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.gm-footer .gm-footer__tagline,
.gm-footer .gm-footer__description,
.gm-footer .gm-footer-copyright {
    margin: 0;
}

.gm-footer .gm-footer__tagline {
    color: var(--gm-footer-accent-resolved);
    font-weight: 800;
    line-height: 1.45;
    margin-top: 6px;
}

.gm-footer .gm-footer__description {
    color: var(--gm-footer-muted-resolved);
    line-height: 1.65;
    max-width: 42rem;
}

.gm-footer__column {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.gm-footer__heading {
    color: var(--gm-footer-text-resolved);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.gm-footer__heading::after {
    background: var(--gm-footer-accent-resolved);
    content: "";
    display: block;
    height: 2px;
    margin-top: 10px;
    width: 36px;
}

.gm-footer-link-list,
.gm-footer-contact-list {
    display: grid;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-footer-link,
.gm-footer-contact-list a,
.gm-footer-contact-list span {
    color: var(--gm-footer-link-resolved);
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
}

.gm-footer-link {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    min-width: 0;
}

.gm-footer-link:hover,
.gm-footer-contact-list a:hover,
.gm-footer-powered:hover {
    color: var(--gm-footer-text-resolved);
}

.gm-footer-link:hover span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.gm-footer-contact-list li {
    align-items: flex-start;
    display: flex;
    gap: 10px;
}

.gm-footer-contact-list i {
    color: var(--gm-footer-accent-resolved);
    flex: 0 0 auto;
    margin-top: 4px;
    width: 16px;
}

.gm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.gm-footer-social__link {
    align-items: center;
    background: color-mix(in srgb, var(--gm-footer-text-resolved) 10%, transparent);
    border: 1px solid var(--gm-footer-border-resolved);
    border-radius: var(--theme-radius-pill, 9999px);
    color: var(--gm-footer-text-resolved);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    text-decoration: none;
    transition: transform var(--gm-transition-fast), border-color var(--gm-transition-fast), background var(--gm-transition-fast);
    width: 38px;
}

.gm-footer-social__link:hover {
    background: color-mix(in srgb, var(--gm-footer-accent-resolved) 28%, transparent);
    border-color: color-mix(in srgb, var(--gm-footer-accent-resolved) 58%, transparent);
    transform: translateY(-1px);
}

.gm-footer__bottom {
    align-items: center;
    border-top: 1px solid var(--gm-footer-border-resolved);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    justify-content: space-between;
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: 22px;
}

.gm-footer__language { display: inline-flex; }

/* Footer switcher opens upward (it sits at the page bottom). */
.gm-language-switcher--footer .gm-language-switcher__menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 0;
    transform-origin: bottom left;
}

.gm-footer .gm-footer-copyright {
    color: var(--gm-footer-muted-resolved);
    font-size: 13px;
}

.gm-footer-powered {
    align-items: baseline;
    color: var(--gm-footer-muted-resolved);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    text-decoration: none;
}

.gm-footer-powered strong {
    color: var(--gm-footer-accent-resolved);
    font-weight: 800;
}

@media (max-width: 980px) {
    .gm-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .gm-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gm-header--mobile-menu {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 10px;
    }

    .gm-header--mobile-menu .gm-brand {
        grid-column: 3;
        justify-self: center;
        min-width: 0;
    }

    .gm-header--mobile-menu .gm-header-menu-toggle {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;
        margin-left: 0;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions {
        display: inline-flex;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions:empty {
        display: none;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions--leading {
        grid-column: 2;
        justify-self: start;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions--trailing {
        grid-column: 4;
        justify-self: end;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions .gm-nav__link {
        order: var(--gm-mobile-action-order, 0);
        width: auto;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
    }

    .gm-header--mobile-menu .gm-header-actions {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gm-header-border);
    }

    .gm-header--mobile-menu .gm-header-actions[data-open="true"] {
        display: flex;
        animation: gm-header-menu-in var(--theme-animation-duration, 200ms) var(--theme-animation-easing-standard, ease);
    }

    @keyframes gm-header-menu-in {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .gm-nav,
    .gm-header-utility {
        width: 100%;
        justify-content: flex-start;
    }

    .gm-nav__item {
        display: grid;
        width: 100%;
    }

    .gm-nav__item--has-children > .gm-nav__link::after {
        margin-left: auto;
    }

    .gm-nav__link,
    .gm-header-utility__link {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
    }

    .gm-nav__submenu {
        position: static;
        min-width: 0;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        margin: 2px 0 6px;
    }

    .gm-nav__submenu::before {
        display: none;
    }

    .gm-nav__submenu--mega-columns,
    .gm-nav__submenu--logo-grid,
    .gm-nav__submenu--card-grid,
    .gm-nav__submenu--featured-panel {
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
    }

    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--featured-panel {
        left: auto;
        right: auto;
        transform: none;
    }

    .gm-nav__item:hover > .gm-nav__submenu--mega-columns,
    .gm-nav__item:focus-within > .gm-nav__submenu--mega-columns,
    .gm-nav__item:hover > .gm-nav__submenu--logo-grid,
    .gm-nav__item:focus-within > .gm-nav__submenu--logo-grid,
    .gm-nav__item:hover > .gm-nav__submenu--card-grid,
    .gm-nav__item:focus-within > .gm-nav__submenu--card-grid,
    .gm-nav__item:hover > .gm-nav__submenu--featured-panel,
    .gm-nav__item:focus-within > .gm-nav__submenu--featured-panel,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--featured-panel,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--featured-panel {
        transform: none;
    }

    .gm-nav__submenu-link.gm-nav__link {
        white-space: normal;
    }

    .gm-language-switcher,
    .gm-language-switcher__summary,
    .gm-language-switcher--pills {
        width: 100%;
    }

    .gm-language-switcher__summary {
        justify-content: space-between;
    }

    .gm-language-switcher__menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .gm-language-switcher--pills {
        flex-wrap: wrap;
    }

    .gm-hero {
        padding: 32px 24px;
    }

    .gm-hero h1,
    .gm-page-heading h1 {
        font-size: 32px;
    }

    .gm-grid,
    .gm-lab-grid,
    .gm-runtime-section {
        grid-template-columns: 1fr;
    }

    .gm-footer__grid {
        grid-template-columns: 1fr;
    }

    .gm-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ════════════════════════════════════════════════════════════════════
   TEKDAL DESIGN SYSTEM (PureClean skeleton)
   One block, read top to bottom:
     1  Scale       --gm-u = one reference pixel (page width / reference width)
     2  Motion      easing curves + durations (durations from Theme settings > Animations)
     3  Palettes    light (Colors) + dark (Color schemes) → semantic --gm-* tokens
     4  Inversion   .gm-inv takes the OPPOSITE palette; .gm-tint the highlight wash
     5  Dark page   canonical --color-* / --theme-* follow the dark palette
     6  Primitives  .gm-scale band, .gm-round-btn, .gm-arrow, .gm-line-icon, reveal
   ════════════════════════════════════════════════════════════════════ */

/* 1  SCALE ───────────────────────────────────────────────────────────
   Every size in the PureClean sections is calc(var(--gm-u) * N), N = pixels in
   the reference frame of the active range: 1502 (desktop), 680 (tablet),
   390 (phone). Nothing is a fixed px, so a layout keeps exactly the same
   proportions and spacing ratios on every screen — it scales like an image.
   --gm-vw is the page width WITHOUT the scrollbar, written before first
   paint (components/color-scheme-script) and on resize (theme.js).
   CONSTITUTION EXCEPTION (§6/§19, reported): PureClean sections size from
   --gm-u instead of the --theme-spacing-* steps — fixed-px tokens cannot keep
   the ratios constant across widths, which is the theme's core requirement.
   Breakpoints stay canonical (980 / 640). */
:root {
    --gm-vw: 100vw;
    --gm-ref: 1502;
    --gm-u: calc(var(--gm-vw) / var(--gm-ref));
}

@media (max-width: 980px) {
    :root { --gm-ref: 680; }
}

@media (max-width: 640px) {
    :root { --gm-ref: 390; }
}

/* Band rhythm — the side gutter and vertical padding every Tekdal band uses
   (numbers in scale units; a section multiplies them by --gm-u). Sections may
   step the vertical value (compact / roomy) but never invent their own. */
:root {
    --gm-band-x: 43;
    --gm-band-y: 128;
    --gm-band-gap: 64;
}

@media (max-width: 980px) {
    :root { --gm-band-x: 32; --gm-band-y: 96; --gm-band-gap: 48; }
}

@media (max-width: 640px) {
    :root { --gm-band-x: 16; --gm-band-y: 72; --gm-band-gap: 36; }
}

html {
    scrollbar-gutter: stable;
}

/* A full-bleed band reaches the viewport edges from inside the content-width
   .gm-main. --gm-vw excludes the scrollbar, so it never overflows; the clip
   only guards the instant before the first measurement (GR-10, reported). */
body {
    overflow-x: clip;
}

/* 2  MOTION ──────────────────────────────────────────────────────────
   Curves are the theme's motion language; durations scale from the three
   Animations settings (fast / normal / slow). */
:root {
    --gm-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --gm-ease-quart: cubic-bezier(0.77, 0, 0.18, 1);
    --gm-ease-soft: var(--theme-animation-easing-standard, cubic-bezier(0.22, 1, 0.36, 1));
    --gm-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gm-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --gm-t-quick: var(--theme-animation-duration-fast, 200ms);
    --gm-t-hover: var(--theme-animation-duration-normal, 400ms);
    --gm-t-fade: var(--theme-animation-duration-slow, 800ms);
    --gm-t-title: calc(var(--gm-t-fade) * 1.25);
    --gm-t-media: calc(var(--gm-t-fade) * 1.5);
    --gm-t-header: calc(var(--gm-t-fade) * 1.125);
    --gm-t-count: calc(var(--gm-t-fade) * 2);
    --gm-t-nudge: calc(var(--gm-t-fade) * 1.125);
    --gm-t-menu-open: calc(var(--gm-t-fade) * 0.875);
    --gm-t-menu-close: calc(var(--gm-t-fade) * 0.5625);
    --gm-t-theme: calc(var(--gm-t-fade) * 0.875);
    /* derived pacing — all follow the editor's animation speed */
    --gm-t-float: calc(var(--gm-t-fade) * 8.75);        /* idle bubble float (7s at 800ms) */
    --gm-d-media: calc(var(--gm-t-fade) * 0.375);       /* media/line reveal delay */
    --gm-d-menu-link: calc(var(--gm-t-fade) * 0.3125);  /* first menu link */
    --gm-d-menu-step: calc(var(--gm-t-fade) * 0.075);   /* stagger per link */
    --gm-d-menu-foot: calc(var(--gm-t-fade) * 0.625);   /* menu footer */
}

/* Size-matched fallback faces (CLS): shown while the web font loads, sized to
   the real font's width (measured vs Arial: Montserrat 600 ×1.066, Inter 400
   ×1.068) and its ascent/descent, so lines don't rewrap when it swaps in.
   Used by the font stacks in settings (fonts.heading / fonts.body). */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106.6%; ascent-override: 90.8%; descent-override: 23.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 106.8%; ascent-override: 90.7%; descent-override: 22.6%; line-gap-override: 0%; }

/* 3  PALETTES ────────────────────────────────────────────────────────
   Raw palettes come from components/color-scheme-attrs (on <html>):
   --gm-lt-* (Colors + Buttons) and --gm-dk-* (Color schemes). The fallbacks
   only apply when a value is cleared in the editor. */
:root {
    --gm-dk-background: #1E1F22;
    --gm-dk-surface: #27292D;
    --gm-dk-text: #FFFFFF;
    --gm-dk-muted: #D2D3D5;
    --gm-dk-subtle: #A3A5A9;
    --gm-dk-line: #5A5C60;
    --gm-dk-accent: #FFFFFF;
    --gm-dk-on-accent: #27292D;
    --gm-dk-overlay: #000000;
    --gm-dk-primary: #EB5B25;
    --gm-dk-on-primary: #FFFFFF;
    --gm-dk-success: #9FD6A8;
    --gm-dk-danger: #FF9C8A;
}

/* Light semantic set: the page in light mode, an inverted band in dark mode. */
:root,
:root[data-gm-scheme="dark"] .gm-inv {
    --gm-bg: var(--gm-lt-background, var(--color-bg-primary, #FFFFFF));
    --gm-surface: var(--gm-lt-surface, var(--color-surface, #F6F6F6));
    --gm-text: var(--gm-lt-text, var(--color-text-primary, #161616));
    --gm-muted: var(--gm-lt-muted, var(--color-text-secondary, #3A3A3A));
    --gm-subtle: var(--gm-lt-subtle, var(--color-text-muted, #6B6B6B));
    --gm-line: var(--gm-lt-line, var(--color-border-dark, #555555));
    --gm-accent: var(--gm-lt-accent, var(--color-secondary, #161616));
    --gm-on-accent: var(--gm-lt-on-accent, var(--color-text-light, #FFFFFF));
    --gm-overlay: var(--gm-lt-overlay, var(--color-dark, #1A1A1A));
    --gm-primary: var(--gm-lt-primary, var(--theme-button-primary-background, var(--color-primary)));
    --gm-on-primary: var(--gm-lt-on-primary, var(--theme-button-primary-text, #FFFFFF));
    --gm-success: var(--gm-lt-success, var(--color-success));
    /* Phone icons, one place: follows Colors > Success & phone icons (dark scheme too). */
    --gm-phone-icon: var(--gm-success);
    --gm-danger: var(--gm-lt-danger, var(--color-danger));
    /* Warm sand-grey band ground (Colors > Warm ground). */
    --gm-ground: var(--gm-lt-ground, var(--color-bg-secondary, #D6CFBE));
    --gm-shadow-color: color-mix(in srgb, var(--gm-overlay) 14%, transparent);
    color-scheme: light;
}

/* Dark semantic set: the page in dark mode, an inverted band in light mode. */
:root[data-gm-scheme="dark"],
:root:not([data-gm-scheme="dark"]) .gm-inv,
.gm-ink {
    --gm-bg: var(--gm-dk-background);
    --gm-surface: var(--gm-dk-surface);
    --gm-text: var(--gm-dk-text);
    --gm-muted: var(--gm-dk-muted);
    --gm-subtle: var(--gm-dk-subtle);
    --gm-line: var(--gm-dk-line);
    --gm-accent: var(--gm-dk-accent);
    --gm-on-accent: var(--gm-dk-on-accent);
    --gm-overlay: var(--gm-dk-overlay);
    --gm-primary: var(--gm-dk-primary);
    --gm-on-primary: var(--gm-dk-on-primary);
    --gm-success: var(--gm-dk-success);
    --gm-danger: var(--gm-dk-danger);
    --gm-ground: var(--gm-dk-surface);
    --gm-shadow-color: color-mix(in srgb, var(--gm-overlay) 45%, transparent);
    color-scheme: dark;
}

/* Derived tokens — declared wherever a palette is applied, so each band
   derives them from its OWN colours (page or inverted). */
:root,
.gm-inv,
.gm-ink {
    --gm-bg-alt: var(--gm-surface);
    --gm-media-surface: color-mix(in srgb, var(--gm-text) 6%, var(--gm-surface));
    --gm-border: color-mix(in srgb, var(--gm-text) 12%, transparent);
    --gm-border-strong: color-mix(in srgb, var(--gm-text) 28%, transparent);
    --gm-line-faint: color-mix(in srgb, var(--gm-text) 8%, transparent);
    --gm-hover: color-mix(in srgb, var(--gm-text) 8%, transparent);
    --gm-backdrop: color-mix(in srgb, var(--gm-overlay) 55%, transparent);
    --gm-primary-soft: color-mix(in srgb, var(--gm-primary) 14%, var(--gm-surface));
    --gm-primary-line: color-mix(in srgb, var(--gm-primary) 45%, transparent);
    --gm-primary-light: color-mix(in srgb, var(--gm-primary) 12%, transparent);
    --gm-primary-dark: color-mix(in srgb, var(--gm-primary) 84%, var(--gm-text));
    /* Small accent text (kickers, numerals) — the brand colour pulled towards the
       text colour so light brand colours (e.g. gold) still read at 12–14px. */
    --gm-primary-ink: color-mix(in srgb, var(--gm-primary) 74%, var(--gm-text));
    --gm-button-bg: var(--gm-primary);
    --gm-button-text: var(--gm-on-primary);
    --gm-button-bg-hover: color-mix(in srgb, var(--gm-button-bg) 88%, var(--gm-text));
    --gm-control-bg: transparent;
    --gm-control-border: var(--gm-border-strong);
    --gm-control-focus: var(--gm-text);
    /* Footer follows the band's palette (Footer colour settings still win
       when set — the component prints its own --gm-footer-* on the footer). */
    --gm-footer-bg: var(--gm-bg);
    --gm-footer-text: var(--gm-text);
    --gm-footer-muted: var(--gm-muted);
    --gm-footer-link: var(--gm-muted);
    --gm-footer-accent: var(--gm-primary);
    --gm-footer-border: var(--gm-border);
    /* GetMe widgets (forms, booking, portal…) read --getme-*; mapped here so
       a widget inside an inverted band follows that band too. */
    --getme-primary: var(--gm-primary);
    --getme-primary-hover: color-mix(in srgb, var(--gm-primary) 88%, var(--gm-text));
    --getme-on-primary: var(--gm-on-primary);
    --getme-bg: var(--gm-surface);
    --getme-bg-secondary: var(--gm-media-surface);
    --getme-surface: var(--gm-surface);
    --getme-text: var(--gm-text);
    --getme-text-secondary: var(--gm-muted);
    --getme-muted: var(--gm-subtle);
    --getme-border: var(--gm-border-strong);
    --getme-danger: var(--gm-danger);
    --getme-error: var(--gm-danger);
    --getme-success: var(--gm-success);
    --getme-radius-sm: calc(var(--gm-u) * 10);
    --getme-radius-lg: calc(var(--gm-u) * 18);
    --getme-font: var(--font-primary, inherit);
}

/* 4  INVERSION & TINT ────────────────────────────────────────────────
   Bands alternate: .gm-inv = opposite scheme of the page (switching the page
   scheme flips them too), rounded so the colour change reads as a soft step.
   .gm-ink = always the dark palette, on a light page too (final CTA panel).
   .gm-tint = the highlight wash (same colour as card media panels). */
:root {
    --gm-band-radius: calc(var(--gm-u) * 40);
}

@media (max-width: 980px) {
    :root { --gm-band-radius: calc(var(--gm-u) * 32); }
}

@media (max-width: 640px) {
    :root { --gm-band-radius: calc(var(--gm-u) * 24); }
}

.gm-inv,
.gm-ink {
    background: var(--gm-bg);
    color: var(--gm-text);
}

.gm-tint {
    background: var(--gm-primary-soft);
    color: var(--gm-text);
}

.gm-inv.gm-band-round,
.gm-tint.gm-band-round {
    border-radius: var(--gm-band-radius);
}

/* 5  DARK PAGE ───────────────────────────────────────────────────────
   Atlas surfaces, the platform runtime CSS and the widgets read the
   canonical tokens; in dark mode they follow the dark palette. (0,2,0)
   outranks the platform's :root css_variables block — no !important. */
:root[data-gm-scheme="dark"] {
    --color-primary: var(--gm-dk-primary);
    --color-primary-hover: color-mix(in srgb, var(--gm-dk-primary) 88%, var(--gm-dk-text));
    --color-primary-dark: color-mix(in srgb, var(--gm-dk-primary) 88%, var(--gm-dk-text));
    --color-primary-light: color-mix(in srgb, var(--gm-dk-primary) 16%, transparent);
    --color-accent: var(--gm-dk-primary);
    --color-secondary: var(--gm-dk-accent);
    --color-dark: var(--gm-dk-text);
    --color-surface: var(--gm-dk-surface);
    --color-card-bg: var(--gm-dk-surface);
    --color-form-bg: var(--gm-dk-surface);
    --color-header-bg: var(--gm-dk-background);
    --color-footer-bg: var(--gm-dk-background);
    --color-bg-primary: var(--gm-dk-background);
    --color-bg-secondary: var(--gm-dk-surface);
    --color-bg-tertiary: color-mix(in srgb, var(--gm-dk-text) 6%, var(--gm-dk-surface));
    --color-text-primary: var(--gm-dk-text);
    --color-text-secondary: var(--gm-dk-muted);
    --color-text-muted: var(--gm-dk-subtle);
    --color-text-dark: var(--gm-dk-text);
    --color-text-light: var(--gm-dk-background);
    --color-border: color-mix(in srgb, var(--gm-dk-text) 12%, transparent);
    --color-border-light: color-mix(in srgb, var(--gm-dk-text) 12%, transparent);
    --color-border-medium: color-mix(in srgb, var(--gm-dk-text) 20%, transparent);
    --color-border-dark: var(--gm-dk-line);
    --color-success: var(--gm-dk-success);
    --color-danger: var(--gm-dk-danger);
    --color-text-on-primary: var(--gm-dk-on-primary);
    --theme-button-primary-background: var(--gm-dk-primary);
    --theme-button-primary-text: var(--gm-dk-on-primary);
    --theme-input-background: transparent;
    --theme-input-border: var(--gm-dk-line);
    --theme-dropdown-popup-background: var(--gm-dk-surface);
    --theme-drawer-background: var(--gm-dk-surface);
}

/* 6  PRIMITIVES ──────────────────────────────────────────────────────── */
.gm-scale {
    margin-inline: calc((100% - var(--gm-vw)) / 2);
    position: relative;
    width: var(--gm-vw);
}

/* Render on demand: bands below the first one (and the footer) are not laid
   out or painted until they come near the viewport (content-visibility).
   Each section declares its own height estimate --gm-cv-h per range in
   scale units (measured), so the scrollbar and #anchor jumps stay accurate;
   `auto` then remembers the real height once a band has been rendered. */
.gm-main > .gm-scale:not(:first-child),
.gm-foot {
    contain-intrinsic-block-size: auto var(--gm-cv-h, calc(var(--gm-u) * 900));
    content-visibility: auto;
}

.gm-round-btn {
    background: transparent;
    border: calc(var(--gm-u) * 1.6) solid var(--gm-line);
    border-radius: 50%;
    color: var(--gm-muted);
    cursor: pointer;
    display: grid;
    padding: 0;
    place-items: center;
    transition: background-color var(--gm-t-quick) ease;
}

.gm-round-btn:hover {
    background: var(--gm-hover);
    border-color: var(--gm-primary);
    color: var(--gm-primary);
}

.gm-round-btn svg {
    display: block;
    overflow: visible;
}

.gm-arrow {
    fill: none;
    height: calc(var(--gm-u) * 8);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    width: calc(var(--gm-u) * 18);
}

.gm-line-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.gm-text-link {
    align-items: center;
    color: var(--gm-text);
    display: inline-flex;
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 16);
    font-weight: 600;
    gap: calc(var(--gm-u) * 14);
    min-height: calc(var(--gm-u) * 44);
    text-decoration: none;
}

.gm-text-link__circle {
    border: calc(var(--gm-u) * 1.5) solid var(--gm-line);
    border-radius: 50%;
    color: var(--gm-muted);
    display: grid;
    height: calc(var(--gm-u) * 44);
    place-items: center;
    transition: background-color var(--gm-t-hover) ease, border-color var(--gm-t-hover) ease, color var(--gm-t-hover) ease;
    width: calc(var(--gm-u) * 44);
}

.gm-text-link:hover .gm-text-link__circle {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary);
}

/* Phone icons (call links, contact rows): green from --gm-phone-icon. */
.gm-text-link__circle.gm-phone-icon,
.gm-contact-panel-section__ico.gm-phone-icon {
    border-color: color-mix(in srgb, var(--gm-phone-icon) 45%, transparent);
    color: var(--gm-phone-icon);
}

.gm-text-link:hover .gm-text-link__circle.gm-phone-icon {
    background: var(--gm-phone-icon);
    border-color: var(--gm-phone-icon);
    color: var(--gm-on-primary);
}

i.fa-phone.gm-phone-icon {
    color: var(--gm-phone-icon);
}

.gm-text-link:hover .gm-arrow {
    animation: gm-nudge var(--gm-t-nudge) var(--gm-ease-inout) infinite;
}

/* Band — the shared rhythm of a full-width section: side gutter + vertical
   padding from the band tokens (§1). --gm-band-k steps the vertical value
   (compact / roomy); a section never invents its own padding. */
.gm-band {
    --gm-band-k: 1;
    padding: calc(var(--gm-u) * var(--gm-band-y) * var(--gm-band-k)) calc(var(--gm-u) * var(--gm-band-x));
}

.gm-band--compact { --gm-band-k: 0.66; }
.gm-band--roomy { --gm-band-k: 1.3; }
.gm-band--flush-top { padding-top: 0; }

.gm-band--page {
    background: var(--gm-bg);
    color: var(--gm-text);
}

.gm-band--surface {
    background: var(--gm-surface);
    color: var(--gm-text);
}

/* Ground — the warm sand band (Colors > Warm ground; dark surface in dark mode). */
.gm-ground {
    background: var(--gm-ground);
    color: var(--gm-text);
}

/* Grain — a very fine paper texture over a band's ground (assets/brand/grain.svg,
   greyscale noise, no colour of its own). Strength = --gm-grain (0–0.3), which a
   section sets from its own Grain setting. */
.gm-grain {
    isolation: isolate;
}

.gm-grain::before {
    background-image: url("/cdn/site/rev_5631644340ab4bec/assets/_getme/immutable/fe27c4cf6d3ef3bb4126573ef461027bbe5e93d0c165101741a8c429762a9dfd/brand/grain.svg");
    background-size: calc(var(--gm-u) * 160) calc(var(--gm-u) * 160);
    content: "";
    inset: 0;
    opacity: var(--gm-grain, 0.1);
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

/* Blueprint — the construction grid on a band's surface (hero without media,
   services, closing CTA). Lines = the band's own line colour, cell = 48u. */
.gm-blueprint {
    --gm-blueprint-line: color-mix(in srgb, var(--gm-line) 22%, transparent);
    background:
        linear-gradient(var(--gm-blueprint-line) 1px, transparent 1px) 0 0 / calc(var(--gm-u) * 48) calc(var(--gm-u) * 48),
        linear-gradient(90deg, var(--gm-blueprint-line) 1px, transparent 1px) 0 0 / calc(var(--gm-u) * 48) calc(var(--gm-u) * 48),
        linear-gradient(180deg, var(--gm-surface), var(--gm-bg));
}

/* Band head — the shared heading row of a band: eyebrow + title on the left,
   lead + link/button on the right (desktop); stacked below 981. Sections
   that are built from it: service-details, compare-table, faq-band, areas-band. */
.gm-band-head {
    align-items: end;
    display: grid;
}

.gm-band-head__copy {
    align-content: start;
    display: grid;
    gap: calc(var(--gm-u) * 22);
}

.gm-band-head__title {
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 600;
    letter-spacing: -0.024em;
    margin: 0;
}

.gm-band-head__title em {
    color: var(--gm-primary);
    font-style: normal;
}

.gm-band-head__side {
    display: grid;
    gap: calc(var(--gm-u) * 20);
    justify-items: start;
}

.gm-band-head__lead {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 16);
    letter-spacing: -0.012em;
    line-height: calc(var(--gm-u) * 25);
    margin: 0;
    max-width: calc(var(--gm-u) * 440);
}

/* Note — small remark with a highlight dot (placeholder hints, footnotes). */
.gm-note {
    align-items: center;
    color: var(--gm-subtle);
    display: flex;
    font-size: calc(var(--gm-u) * 13);
    gap: calc(var(--gm-u) * 10);
    margin: 0;
}

.gm-note::before {
    background: var(--gm-primary);
    border-radius: 50%;
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 8);
    width: calc(var(--gm-u) * 8);
}

/* Inline links inside editor text (components/link-text). */
.gm-inline-link {
    color: var(--gm-text);
    text-decoration: underline;
    text-decoration-color: var(--gm-primary-line);
    text-underline-offset: 0.2em;
    transition: color var(--gm-t-quick) ease;
}

.gm-inline-link:hover {
    color: var(--gm-primary);
}

@media (min-width: 981px) {
    .gm-band-head { grid-template-columns: minmax(0, 507fr) minmax(0, 910fr); margin-bottom: calc(var(--gm-u) * 64); }
    .gm-band-head__copy { padding-right: calc(var(--gm-u) * 56); }
    .gm-band-head__side { align-items: end; gap: calc(var(--gm-u) * 40); grid-template-columns: minmax(0, 1fr) auto; }
    .gm-band-head__title { font-size: calc(var(--gm-u) * 50); line-height: calc(var(--gm-u) * 54); }
}

@media (min-width: 641px) and (max-width: 980px) {
    .gm-band-head { gap: calc(var(--gm-u) * 24); grid-template-columns: minmax(0, 1fr); margin-bottom: calc(var(--gm-u) * 48); }
    .gm-band-head__title { font-size: calc(var(--gm-u) * 44); line-height: calc(var(--gm-u) * 48); }
}

@media (max-width: 640px) {
    .gm-band-head { gap: calc(var(--gm-u) * 20); grid-template-columns: minmax(0, 1fr); margin-bottom: calc(var(--gm-u) * 36); }
    .gm-band-head__title { font-size: calc(var(--gm-u) * 34); line-height: calc(var(--gm-u) * 38); }
}

/* Display variant — the heavy uppercase heading (hero voice) for statement bands. */
.gm-band-head--display .gm-band-head__title {
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

@media (min-width: 981px) {
    .gm-band-head--display .gm-band-head__title { font-size: calc(var(--gm-u) * 68); line-height: calc(var(--gm-u) * 68); }
}

@media (min-width: 641px) and (max-width: 980px) {
    .gm-band-head--display .gm-band-head__title { font-size: calc(var(--gm-u) * 52); line-height: calc(var(--gm-u) * 52); }
}

@media (max-width: 640px) {
    .gm-band-head--display .gm-band-head__title { font-size: calc(var(--gm-u) * 36); line-height: calc(var(--gm-u) * 37); }
}

/* Brand lockup (components/brand-lockup) — logo or drop mark + name. */
.gm-brand-lockup {
    align-items: center;
    color: var(--gm-text);
    display: inline-flex;
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-weight: 400;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.gm-brand-lockup__mark {
    display: block;
    flex: none;
}

.gm-brand-lockup__drop {
    fill: var(--gm-text);
}

.gm-brand-lockup__spark {
    fill: var(--gm-text);
}

/* The sparkle is square: its width follows the height each bar sets for the mark. */
.gm-brand-lockup .gm-brand-lockup__mark.gm-brand-lockup__mark--sparkle {
    aspect-ratio: 1;
    width: auto;
}

.gm-brand-lockup__shine {
    fill: none;
    stroke: var(--gm-bg);
    stroke-linecap: round;
    stroke-width: 2;
}

.gm-brand-lockup__img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: auto;
}

/* Dark-scheme logo (Branding > Alternative logo) swaps in with the scheme. */
.gm-brand-lockup__img--dark,
:root[data-gm-scheme="dark"] .gm-brand-lockup__img--light {
    display: none;
}

:root[data-gm-scheme="dark"] .gm-brand-lockup__img--dark {
    display: block;
}

/* Line breaks an editor writes into a text (Enter) — kept on tablet/desktop,
   text flows freely on phones. */
@media (max-width: 640px) {
    .gm-lb { display: none; }
}

:where(.gm-scale, .gm-menu) :focus-visible {
    outline: calc(var(--gm-u) * 2) solid var(--gm-primary);
    outline-offset: calc(var(--gm-u) * 3);
}

::selection {
    background: var(--gm-primary);
    color: var(--gm-on-primary);
}

/* Scroll reveal removed for performance (2026-10-10): animating every
   card/step/heading as it scrolled in was ~70% of the page's render work.
   Content is visible immediately; [data-gm-reveal] attributes are inert.
   theme.js still marks bands .is-in (the dashed step line draws once). */
@keyframes gm-fade-up { from { opacity: 0; translate: 0 calc(var(--gm-u) * 16); } }
@keyframes gm-rise { from { opacity: 0; translate: 0 calc(var(--gm-u) * 40); } }
@keyframes gm-fade { from { opacity: 0; } }
/* Starts VISIBLE (a short rise, not from fully below the mask): a line that is
   hidden on the first paint is never counted as Largest Contentful Paint — the
   hero then reported no LCP at all (measured 2026-10-10). */
@keyframes gm-mask-up { from { transform: translateY(30%); } }
@keyframes gm-reveal-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gm-slide-down { from { opacity: 0; translate: 0 -100%; } }
@keyframes gm-nudge { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--gm-u) * 5) 0; } }
@keyframes gm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--gm-u) * -10); } }
@keyframes gm-draw { from { transform: scaleX(0); } }
@keyframes gm-draw-v { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
    .gm-scale *,
    .gm-scale *::before,
    .gm-scale *::after,
    .gm-menu,
    .gm-menu * {
        animation-delay: 0ms;
        animation-duration: 1ms;
        animation-iteration-count: 1;
        transition-delay: 0ms;
        transition-duration: 1ms;
    }
}

/* GetMe forms widget: its stylesheet hardcodes the submit text colour
   (.gm-form-button { color: #fff }), so on a light fill (the contrast fill of
   an inverted band) the label disappears. Bound to the widget's own token;
   (0,2,0) outranks the widget's (0,1,0) — no !important. Platform note:
   the widget should read var(--getme-on-primary) itself. */
[data-getme-form] .gm-form-button,
[data-getme-widget="form-list"] .gm-form-button {
    color: var(--getme-on-primary);
}

/* ── Forms widget skin ─────────────────────────────────────────────────
   The GetMe forms widget renders its own light-DOM markup (fields, order and
   types come from the Forms panel — never from the theme). The theme only
   dresses it, for EVERY form on the site, with the band's own colours:
     radio / checkbox groups  → pill chips (checked = highlight fill)
     selects                  → rounded controls with a chevron, side by side
     submit                   → the theme's pill button with a round arrow
   (0,2,0)+ selectors outrank the widget's own (0,1,0) rules (its stylesheet
   loads before theme.css) — no !important. Sizes follow the scale unit. */
[data-getme-form] {
    /* Form density — every size of the skin reads these (one place to tune). */
    --gm-form-gap: calc(var(--gm-u) * 16);
    --gm-form-label-gap: calc(var(--gm-u) * 8);
    --gm-form-chip-h: calc(var(--gm-u) * 36);
    --gm-form-chip-pad: calc(var(--gm-u) * 14);
    --gm-form-chip-gap: calc(var(--gm-u) * 8);
    --gm-form-control-h: calc(var(--gm-u) * 42);
    --gm-form-text: calc(var(--gm-u) * 13.5);
    --gm-form-label: calc(var(--gm-u) * 12);
    --gm-form-title: calc(var(--gm-u) * 20);
    --gm-form-button-h: calc(var(--gm-u) * 46);
    --gm-form-arrow: calc(var(--gm-u) * 32);
}

[data-getme-form] .gm-form {
    color: var(--gm-text);
    display: grid;
    font-family: var(--font-primary, inherit);
    gap: var(--gm-form-gap);
}

[data-getme-form] .gm-form-title {
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: var(--gm-form-title);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

[data-getme-form] .gm-form-body {
    display: grid;
    gap: var(--gm-form-gap) calc(var(--gm-u) * 12);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-getme-form] .gm-form-field {
    display: grid;
    gap: var(--gm-form-label-gap);
    grid-column: 1 / -1;
    margin: 0;
    min-width: 0;
}

[data-getme-form] .gm-form-field--select {
    grid-column: auto;
}

[data-getme-form] .gm-form-label {
    color: var(--gm-subtle);
    font-size: var(--gm-form-label);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
}

[data-getme-form] .gm-form-required {
    color: var(--gm-primary);
}

[data-getme-form] .gm-form-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gm-form-chip-gap);
}

[data-getme-form] .gm-form-choice {
    align-items: center;
    border: calc(var(--gm-u) * 1) solid var(--gm-border-strong);
    border-radius: var(--gm-button-radius);
    color: var(--gm-text);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--gm-form-text);
    font-weight: 500;
    gap: calc(var(--gm-u) * 8);
    letter-spacing: -0.01em;
    margin: 0;
    min-height: var(--gm-form-chip-h);
    padding: 0 var(--gm-form-chip-pad);
    position: relative;
    transition: background-color var(--gm-t-quick) ease, border-color var(--gm-t-quick) ease, color var(--gm-t-quick) ease;
}

/* The native control stays in the DOM (keyboard + screen readers) but is
   drawn by the chip itself. */
[data-getme-form] .gm-form-choice input {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
}

[data-getme-form] .gm-form-choice:hover {
    border-color: var(--gm-primary);
}

[data-getme-form] .gm-form-choice:has(input:checked) {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary);
}

[data-getme-form] .gm-form-choice:has(input:focus-visible) {
    outline: calc(var(--gm-u) * 2) solid var(--gm-primary);
    outline-offset: calc(var(--gm-u) * 3);
}

/* Single checkbox (consent, one-off checkbox): a real-looking tick box + its
   text, not a chip. The whole row is still the label, so a tap anywhere on it
   toggles the box; the native input stays in the DOM (keyboard, screen
   readers, the widget's validation). */
[data-getme-form] .gm-form-choice.gm-form-choice--single {
    align-items: flex-start;
    border: 0;
    border-radius: 0;
    display: flex;
    gap: calc(var(--gm-u) * 12);
    line-height: 1.45;
    min-height: 0;
    padding: calc(var(--gm-u) * 4) 0;
}

[data-getme-form] .gm-form-choice.gm-form-choice--single::before {
    background: transparent;
    border: calc(var(--gm-u) * 1.5) solid var(--gm-border-strong);
    border-radius: calc(var(--gm-u) * 5);
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 22);
    transition: background-color var(--gm-t-quick) ease, border-color var(--gm-t-quick) ease;
    width: calc(var(--gm-u) * 22);
}

/* The tick: two borders of a rotated box, in the button's text colour. */
[data-getme-form] .gm-form-choice.gm-form-choice--single::after {
    border: solid var(--gm-on-primary);
    border-width: 0 calc(var(--gm-u) * 2) calc(var(--gm-u) * 2) 0;
    content: "";
    height: calc(var(--gm-u) * 11);
    left: calc(var(--gm-u) * 8);
    opacity: 0;
    position: absolute;
    top: calc(var(--gm-u) * 7);
    transform: rotate(45deg);
    transition: opacity var(--gm-t-quick) ease;
    width: calc(var(--gm-u) * 6);
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:hover {
    background: none;
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:hover::before {
    border-color: var(--gm-primary);
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:has(input:checked) {
    background: none;
    color: var(--gm-text);
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:has(input:checked)::before {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:has(input:checked)::after {
    opacity: 1;
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:has(input:focus-visible) {
    outline: none;
}

[data-getme-form] .gm-form-choice.gm-form-choice--single:has(input:focus-visible)::before {
    outline: calc(var(--gm-u) * 2) solid var(--gm-primary);
    outline-offset: calc(var(--gm-u) * 2);
}

/* Consent: the widget prints the same sentence as the field label and as the
   box's own text — keep only the box's. */
[data-getme-form] .gm-form-field--consent > .gm-form-label {
    display: none;
}

[data-getme-form] .gm-form-field:has(.gm-form-error:not(:empty)) .gm-form-choice.gm-form-choice--single::before {
    border-color: color-mix(in srgb, var(--gm-danger) 70%, transparent);
}

[data-getme-form] .gm-form-control {
    appearance: none;
    background-color: transparent;
    border: calc(var(--gm-u) * 1) solid var(--gm-border-strong);
    border-radius: calc(var(--gm-u) * 10);
    box-shadow: none;
    color: var(--gm-text);
    font: 400 var(--gm-form-text) / 1.2 var(--font-primary, inherit);
    min-height: var(--gm-form-control-h);
    padding: 0 calc(var(--gm-u) * 14);
    width: 100%;
}

[data-getme-form] textarea.gm-form-control {
    min-height: calc(var(--gm-u) * 96);
    padding-block: calc(var(--gm-u) * 12);
}

[data-getme-form] select.gm-form-control {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gm-subtle) 50%),
        linear-gradient(135deg, var(--gm-subtle) 50%, transparent 50%);
    background-position: calc(100% - calc(var(--gm-u) * 22)) 50%, calc(100% - calc(var(--gm-u) * 16)) 50%;
    background-repeat: no-repeat;
    background-size: calc(var(--gm-u) * 6) calc(var(--gm-u) * 6);
    padding-right: calc(var(--gm-u) * 40);
}

[data-getme-form] select.gm-form-control option {
    background: var(--gm-surface);
    color: var(--gm-text);
}

[data-getme-form] .gm-form-control::placeholder {
    color: var(--gm-subtle);
}

[data-getme-form] .gm-form-control:focus-visible,
[data-getme-form] .gm-form-control:focus {
    border-color: var(--gm-primary);
    box-shadow: 0 0 0 calc(var(--gm-u) * 1) var(--gm-primary);
    outline: none;
}

[data-getme-form] .gm-form-actions {
    border-top: calc(var(--gm-u) * 1) solid var(--gm-border);
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: var(--gm-form-gap);
}

/* Submit = the theme's pill button; the round arrow is drawn with a mask so
   it takes the button's own colours. */
[data-getme-form] .gm-form-button {
    align-items: center;
    background: color-mix(in srgb, var(--gm-button-bg) var(--gm-button-alpha, 100%), transparent);
    border: 0;
    border-radius: var(--gm-button-radius);
    color: var(--gm-button-text);
    cursor: pointer;
    display: inline-flex;
    font: 600 var(--gm-form-text) / 1 var(--font-primary, inherit);
    gap: calc(var(--gm-u) * 12);
    letter-spacing: -0.01em;
    min-height: var(--gm-form-button-h);
    padding: 0 calc(var(--gm-u) * 7) 0 calc(var(--gm-u) * 22);
    transition: filter var(--gm-t-quick) ease;
}

/* Circle in the button's text colour with the arrow cut out of it, so the
   arrow shows the button fill underneath (mask alpha only — no colour in the SVG matters). */
[data-getme-form] .gm-form-button::after {
    background: var(--gm-button-text);
    border-radius: 50%;
    content: "";
    flex: none;
    height: var(--gm-form-arrow);
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 4h15M13 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 50% no-repeat,
        linear-gradient(var(--gm-text), var(--gm-text));
    mask-composite: exclude;
    width: var(--gm-form-arrow);
}

[data-getme-form] .gm-form-button:hover {
    filter: brightness(1.06);
}

/* Phone country list: exactly four countries visible, the rest scroll.
   Option height follows the scale unit so four always fit. */
[data-getme-form] .gm-form-phone-option {
    height: calc(var(--gm-u) * 38);
    min-height: 0;   /* the widget's 36px floor would break "exactly four" on small phones */
}

[data-getme-form] .gm-form-phone-options {
    gap: calc(var(--gm-u) * 2);
    max-height: calc(var(--gm-u) * (38 * 4 + 2 * 3));   /* 4 options + 3 gaps */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Phone: the country code stays a small box beside the number on phones too
   (the runtime stacks them under 640px, which only makes the form longer). */
@media (max-width: 640px) {
    [data-getme-form] .gm-form-phone {
        grid-template-columns: minmax(calc(var(--gm-u) * 86), auto) minmax(0, 1fr);
    }
}

/* First + last name share a row (forms with both fields). */
[data-getme-form] .gm-form-body > .gm-form-field:has(input[name="first_name"]),
[data-getme-form] .gm-form-body > .gm-form-field:has(input[name="last_name"]) {
    grid-column: auto / span 1;
}

/* Multi-step forms (Forms panel: type "wizard" + steps) — the widget adds a
   step title, a progress bar (span width = %) and a Back button. Back sits on
   the left as an outlined button without the arrow; Next / Submit keep the
   pill button on the right. */
[data-getme-form] .gm-form-header {
    display: grid;
    gap: calc(var(--gm-u) * 10);
}

[data-getme-form] .gm-form-step-title {
    color: var(--gm-primary);
    font-size: var(--gm-form-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

[data-getme-form] .gm-form-progress {
    background: var(--gm-border);
    border-radius: var(--gm-button-radius);
    height: calc(var(--gm-u) * 4);
    overflow: hidden;
}

[data-getme-form] .gm-form-progress > span {
    background: var(--gm-primary);
    border-radius: inherit;
    display: block;
    height: 100%;
    transition: width var(--gm-t-quick) ease;
}

[data-getme-form] .gm-form-actions {
    align-items: center;
    gap: calc(var(--gm-u) * 12);
}

[data-getme-form] .gm-form-button.gm-form-button--secondary {
    background: transparent;
    border: calc(var(--gm-u) * 1) solid var(--gm-border);
    color: var(--gm-text);
    margin-right: auto;
    padding: 0 calc(var(--gm-u) * 22);
}

[data-getme-form] .gm-form-button.gm-form-button--secondary::after {
    content: none;
}

[data-getme-form] .gm-form-button.gm-form-button--secondary:hover {
    border-color: var(--gm-primary);
    filter: none;
}

/* Validation — compact and in place. The message sits on the label's row
   (right side), so showing errors never changes the form's height; the
   field's own outline turns to the danger colour. The form-level summary is
   a thin strip. Message texts come from the widget. */
[data-getme-form] .gm-form-field {
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
}

[data-getme-form] .gm-form-field > :not(.gm-form-label):not(.gm-form-error) {
    grid-column: 1 / -1;
}

[data-getme-form] .gm-form-label {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
}

[data-getme-form] .gm-form-error {
    align-items: center;
    color: var(--gm-danger);
    display: inline-flex;
    font-size: calc(var(--gm-u) * 11.5);
    font-weight: 500;
    gap: calc(var(--gm-u) * 5);
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    text-align: right;
}

[data-getme-form] .gm-form-error::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 5);
    width: calc(var(--gm-u) * 5);
}

[data-getme-form] .gm-form-error:empty {
    display: none;
}

[data-getme-form] .gm-form-field:has(.gm-form-error:not(:empty)) .gm-form-choice,
[data-getme-form] .gm-form-field:has(.gm-form-error:not(:empty)) .gm-form-control {
    border-color: color-mix(in srgb, var(--gm-danger) 70%, transparent);
}

/* Form-level message (the widget's gm-ui-feedback): drawn like the inline
   field messages — danger colour with the small dot, no box. The widget's own
   "!" disc (.gm-ui-feedback::before, runtime stylesheet) is replaced. When
   fields already show their own messages, the summary ("Please fix N fields…")
   only repeats them — it stays for screen readers (role=alert) but is not
   drawn. A message with no field errors (e.g. the submission failed) shows. */
[data-getme-form] .gm-form-feedback {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--gm-danger);
    display: flex;
    font-size: calc(var(--gm-u) * 12.5);
    font-weight: 500;
    gap: calc(var(--gm-u) * 6);
    line-height: 1.35;
    margin: 0;
    padding: 0;
}

[data-getme-form] .gm-form-feedback::before {
    /* not currentColor: the runtime sets a white colour on this pseudo-element for its "!" */
    background: var(--gm-danger);
    border-radius: 50%;
    content: "";
    flex: none;
    height: calc(var(--gm-u) * 5);
    width: calc(var(--gm-u) * 5);
}

[data-getme-form] .gm-form:has(.gm-form-error:not(:empty)) .gm-form-feedback {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Success state — centred in its container, drawn in the site's own
   language: a highlight disc with the check cut out (shows the surface
   below), the soft ring of the step icons, the dotted wash of the card
   media behind it, a heading-font title and the reference as a pill.
   Texts come from the widget / Forms panel. */
[data-getme-form]:has(.gm-form-success) {
    align-content: center;
    display: grid;
    height: 100%;
}

[data-getme-form] .gm-form-success {
    align-content: center;
    animation: gm-rise var(--gm-t-title) var(--gm-ease-expo) both;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--gm-text);
    display: grid;
    gap: calc(var(--gm-u) * 12);
    isolation: isolate;
    justify-items: center;
    margin: 0 auto;
    max-width: calc(var(--gm-u) * 420);
    padding: calc(var(--gm-u) * 24) 0;
    position: relative;
    text-align: center;
}

[data-getme-form] .gm-form-success::before {
    background: var(--gm-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 calc(var(--gm-u) * 10) color-mix(in srgb, var(--gm-primary) 14%, transparent),
                0 0 0 calc(var(--gm-u) * 22) color-mix(in srgb, var(--gm-primary) 6%, transparent);
    content: "";
    height: calc(var(--gm-u) * 64);
    margin-bottom: calc(var(--gm-u) * 18);
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 46% no-repeat,
        linear-gradient(var(--gm-text), var(--gm-text));
    mask-composite: exclude;
    width: calc(var(--gm-u) * 64);
}

/* the disc's halo is masked away above, so it is drawn here on the card */
[data-getme-form] .gm-form-success::after {
    background:
        radial-gradient(circle at 50% calc(var(--gm-u) * 96), transparent calc(var(--gm-u) * 31), color-mix(in srgb, var(--gm-primary) 14%, transparent) calc(var(--gm-u) * 32) calc(var(--gm-u) * 42), color-mix(in srgb, var(--gm-primary) 6%, transparent) calc(var(--gm-u) * 43) calc(var(--gm-u) * 54), transparent calc(var(--gm-u) * 55)),
        radial-gradient(color-mix(in srgb, var(--gm-primary) 26%, transparent) calc(var(--gm-u) * 1), transparent calc(var(--gm-u) * 1.5)) 0 0 / calc(var(--gm-u) * 18) calc(var(--gm-u) * 18);
    content: "";
    inset: calc(var(--gm-u) * -40) calc(var(--gm-u) * -80);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, var(--gm-text) 25%, transparent 75%);
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

[data-getme-form] .gm-form-success h3 {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: calc(var(--gm-u) * 26);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

[data-getme-form] .gm-form-success p {
    color: var(--gm-muted);
    font-size: calc(var(--gm-u) * 15);
    line-height: 1.5;
    margin: 0;
}

[data-getme-form] .gm-form-success .gm-form-reference {
    border: calc(var(--gm-u) * 1) solid var(--gm-border);
    border-radius: var(--gm-button-radius);
    color: var(--gm-subtle);
    font-size: calc(var(--gm-u) * 12);
    letter-spacing: 0.02em;
    margin-top: calc(var(--gm-u) * 6);
    padding: calc(var(--gm-u) * 5) calc(var(--gm-u) * 12);
}

@media (max-width: 640px) {
    [data-getme-form] .gm-form-body {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-getme-form] .gm-form-button {
        justify-content: space-between;
        width: 100%;
    }
}

/* Focused pages (booking flow): content lines up with the header bar's
   gutters (same --gm-u values as .gm-topbar) instead of the generic 16px. */
.gm-main.gm-main--focused { margin-inline: 0; max-width: none; width: auto; padding-block: calc(var(--gm-u) * 24) calc(var(--gm-u) * 96); padding-inline: calc(var(--gm-u) * 43); }
@media (min-width: 641px) and (max-width: 980px) { .gm-main.gm-main--focused { padding-inline: calc(var(--gm-u) * 32); } }
@media (max-width: 640px) { .gm-main.gm-main--focused { padding-block: calc(var(--gm-u) * 16) calc(var(--gm-u) * 64); padding-inline: calc(var(--gm-u) * 16); } }
/* estimate-panel: phone row fix (see sections/estimate-panel.css) */