/* ── 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-nav--centered a {
    padding: 9px 14px;
}

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

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

@media (max-width: 760px) {
    .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-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);
}

.gm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important;
}

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

.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-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(--theme-dropdown-popup-background, #ffffff);
    --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 */


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

/* 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-3xl);
    --pl-grid-gap: var(--theme-spacing-lg);
    --pl-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;
    white-space: normal;
    width: 100%;
}

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

.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;
    white-space: normal;
    width: 100%;
}

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

.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(--theme-dropdown-popup-background, #ffffff);
    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 {
    margin: 14px 0;
}

.gm-product-detail-section .gm-product-option-name {
    color: var(--pd-text-color);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

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

.gm-product-detail-section .gm-product-option-chip {
    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: 6px 18px;
}

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

/* ── 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-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: var(--gm-surface);
    --sl-card-border: var(--gm-border);
    --sl-price-color: var(--gm-text);
    --sl-button-bg: var(--gm-primary);
    --sl-button-text: var(--gm-on-primary, #0d0d0d);
    --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-3xl, 64px);
    --sl-grid-gap: var(--theme-spacing-lg, 24px);
    --sl-card-radius: var(--theme-radius-lg, 12px);
    --sl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(0, 0, 0, 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(0, 0, 0, 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: var(--gm-media-surface); }

.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: var(--gm-media-surface);
    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;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Brand polish — VISUAL ONLY. No data/markup changes; just re-skins the
   existing elements to match the site's editorial dark + gold look.
   ════════════════════════════════════════════════════════════════════ */
.gm-service-detail-section {
    --sd-kicker-color: var(--gm-primary, #0d0d0d);
    --sd-price-color: var(--gm-primary, #0d0d0d);
    --sd-title-font: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sd-media-radius: 16px;
    --sd-content-gap: clamp(28px, 3vw, 56px);
}

/* Breadcrumb — aligned with the card container */
.gm-service-detail-section .gm-service-detail__breadcrumb {
    max-width: 1240px;
    margin: 0 auto 24px;
    font-size: 13px;
}

/* ── Two bordered cards: [image] | [info] — image centered in the left card,
   info in a bordered box on the right. Visual only. ── */
.gm-service-detail-section .gm-service-detail__layout {
    grid-template-columns: minmax(0, 0.59fr) minmax(0, 1.12fr);
    align-items: start;            /* cards size to content (landscape image is short) */
    gap: clamp(20px, 2vw, 30px);
    max-width: 1240px;
    margin-inline: auto;
}
.gm-service-detail-section .gm-service-detail__gallery {
    position: static;              /* remove sticky */
    display: block;
    align-self: start;             /* hug the image — no empty fill below it */
    max-width: none;
    padding: 0;                    /* no outer frame — the frame is on the image */
    border: none;
    background: transparent;
}
.gm-service-detail-section .gm-service-detail__media {
    width: 100%;
    max-width: none;
    border: 1px solid rgba(181, 135, 42, 0.5);
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
/* Landscape image (like the listing thumbnails) shown large — 16:9 matches the
   source photos so nothing is zoomed/cropped. */
.gm-service-detail-section .gm-service-detail__media img {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
    object-fit: cover;
    display: block;
}
.gm-service-detail-section .gm-service-detail__info {
    align-self: stretch;
    border: 1px solid rgba(181, 135, 42, 0.30);
    border-radius: 22px;
    padding: clamp(28px, 3vw, 50px);
    background: #FFFFFF;
}

/* Eyebrow with trailing gold line */
.gm-service-detail-section .gm-service-detail__kicker-row { gap: 16px; margin-bottom: 14px; }
.gm-service-detail-section .gm-service-detail__kicker-row::after {
    content: "";
    flex: 1 1 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(181, 135, 42, 0.55), rgba(181, 135, 42, 0));
}

/* Title — 30% smaller */
.gm-service-detail-section .gm-service-detail__title { font-size: clamp(25px, 3vw, 41px); }

/* Body — serif to match the mockup's editorial feel */
.gm-service-detail-section .gm-service-detail__summary,
.gm-service-detail-section .gm-service-detail__description-text {
    font-family: var(--sd-title-font);
    font-size: 17px;
    line-height: 1.55;
    color: #5C5248;
    opacity: 1;
}

/* Price — "Starting at" label (CSS only) + gold serif amount */
.gm-service-detail-section .gm-service-detail__price {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 24px 0 12px;
}
.gm-service-detail-section .gm-service-detail__price::before {
    content: "Starting at";
    font-family: var(--sd-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gm-primary, #0d0d0d);
}
.gm-service-detail-section .gm-service-detail__amount {
    font-family: var(--sd-title-font);
    font-weight: 500;
    font-size: clamp(27px, 3.2vw, 40px);
}

/* Book now — gold gradient with a soft ring */
.gm-service-detail-section .gm-service-detail__actions { margin: 24px 0; }
.gm-service-detail-section .gm-service-detail__cta {
    box-shadow: 0 0 0 4px rgba(181, 135, 42, 0.08), 0 12px 28px rgba(181, 135, 42, 0.22);
}

/* DESCRIPTION heading — gold uppercase label */
.gm-service-detail-section .gm-service-detail__section {
    border-top-color: rgba(181, 135, 42, 0.2);
    margin-top: 26px;
    padding-top: 24px;
}
.gm-service-detail-section .gm-service-detail__section h2 {
    font-family: var(--sd-body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gm-primary, #0d0d0d);
    margin-bottom: 12px;
}

/* Mobile / tablet: stack the two cards full-width (the desktop 2-col rule above
   has no media query, so it must be reset here) and tighten padding. */
@media (max-width: 980px) {
    .gm-service-detail-section .gm-service-detail__layout {
        grid-template-columns: 1fr;
        max-width: 620px;
    }
    .gm-service-detail-section .gm-service-detail__breadcrumb { max-width: 620px; }
    .gm-service-detail-section .gm-service-detail__gallery { padding: clamp(12px, 3vw, 16px); align-self: auto; }
    .gm-service-detail-section .gm-service-detail__gallery::after { display: none; }   /* hide decorative artwork on mobile */
    .gm-service-detail-section .gm-service-detail__media { max-width: none; }
    .gm-service-detail-section .gm-service-detail__info { padding: clamp(22px, 6vw, 36px); }
}
@media (max-width: 520px) {
    .gm-service-detail-section .gm-service-detail__gallery,
    .gm-service-detail-section .gm-service-detail__info { border-radius: 18px; }
    .gm-service-detail-section .gm-service-detail__info { padding: 22px 20px; }
}

/* Eyebrow / kicker — uppercase gold */
.gm-service-detail-section .gm-service-detail__kicker-row .gm-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* Title — editorial serif */
.gm-service-detail-section .gm-service-detail__title {
    font-weight: 500;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 8px 0 14px;
}

/* Intro summary */
.gm-service-detail-section .gm-service-detail__summary { font-size: 16px; line-height: 1.7; opacity: 0.9; }

/* Price — gold */
.gm-service-detail-section .gm-service-detail__amount { font-size: clamp(28px, 3vw, 38px); }

/* Book now — gold gradient pill, dark text, hover lift */
.gm-service-detail-section .gm-service-detail__actions { margin: 26px 0; }
.gm-service-detail-section .gm-service-detail__cta {
    min-height: 56px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #17120a;
    background: linear-gradient(180deg, var(--gm-primary, #0d0d0d), var(--gm-primary, #0d0d0d));
    border-color: var(--gm-primary, #0d0d0d);
    box-shadow: 0 10px 26px rgba(181, 135, 42, 0.22);
    transition: filter 180ms ease, transform 180ms ease;
}
.gm-service-detail-section .gm-service-detail__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.gm-service-detail-section .gm-service-detail__cta--secondary {
    background: transparent;
    color: var(--gm-primary, #0d0d0d);
    box-shadow: none;
    border-color: rgba(181, 135, 42, 0.5);
}

/* Content sections (Description / Features) */
.gm-service-detail-section .gm-service-detail__section {
    border-top-color: rgba(0, 0, 0, 0.10);
    margin-top: 30px;
    padding-top: 26px;
}
.gm-service-detail-section .gm-service-detail__section h2 {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
}

/* 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(0, 0, 0, 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: var(--gm-surface);
    --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: var(--gm-on-primary, #0d0d0d);
    --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-3xl, 64px);
    --cl-grid-gap: var(--theme-spacing-lg, 24px);
    --cl-card-radius: var(--theme-radius-lg, 12px);
    --cl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: var(--gm-media-surface);
}

.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: var(--gm-surface);
    --cd-card-border: var(--gm-border);
    --cd-card-meta: var(--gm-muted);
    --cd-button-bg: var(--gm-primary);
    --cd-button-text: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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: var(--gm-media-surface);
    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(0, 0, 0, 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(0, 0, 0, 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: var(--gm-surface);
    --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: var(--gm-on-primary, #0d0d0d);
    --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-3xl, 64px);
    --bl-grid-gap: var(--theme-spacing-lg, 24px);
    --bl-card-radius: var(--theme-radius-lg, 12px);
    --bl-card-shadow: var(--theme-shadow-sm, 0 1px 2px rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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: var(--gm-media-surface);
}

.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;
    padding: 14px 14px 0;
    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: var(--gm-surface);
    --bd-card-border: var(--gm-border);
    --bd-card-meta: var(--gm-muted);
    --bd-button-bg: var(--gm-primary);
    --bd-button-text: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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: var(--gm-media-surface);
    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(0, 0, 0, 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: var(--gm-media-surface);
}

.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-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 {
    margin-inline: auto;
    width: min(1040px, calc(100% - (var(--gm-page-gutter) * 2)));
}

.gm-page-customer-login .gm-customer-login-section {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: clamp(22px, 4vw, 42px);
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    margin-block: clamp(28px, 6vw, 72px);
    min-height: min(680px, calc(100dvh - 160px));
    padding: 0;
}

.gm-page-customer-login .gm-customer-login-section__copy {
    align-content: center;
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
    box-sizing: border-box;
    min-height: 320px;
    padding: clamp(24px, 4vw, 42px);
}

.gm-page-customer-login .gm-customer-login-section__copy h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
}

.gm-page-customer-login .gm-customer-login-section__copy p {
    font-size: 16px;
    max-width: 42ch;
}

.gm-page-customer-login .gm-customer-login-section__copy .gm-button {
    justify-self: start;
    margin-top: 6px;
    min-height: 46px;
}

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

@media (max-width: 760px) {
    .gm-customer-login-section {
        width: calc(100% - 24px);
    }

    .gm-page-customer-login .gm-customer-login-section {
        grid-template-columns: minmax(0, 1fr);
        margin-block: 18px;
        min-height: auto;
    }
}

/* 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(0, 0, 0, 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;
    /* Motion curves from the theme tokens (§9.4). */
    --fp-ease: var(--theme-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));
    --fp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    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-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    margin-bottom: 8px;
}
.gm-featured-products-section__title {
    color: var(--fp-title-color);
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    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(0, 0, 0, 0.08);
}

/* Image ratio is carried by a variable, not by competing selectors. The base
   img/placeholder rule below sits LATER in the file at equal specificity, so
   an aspect-ratio declared here would lose the cascade and the setting would
   silently do nothing. */
.gm-featured-products-section--image-landscape { --fp-image-ratio: 4 / 3; }
.gm-featured-products-section--image-portrait { --fp-image-ratio: 3 / 4; }

/* The grid is capped rather than filling the container: at full width these
   cards read as posters, not as a curated strip. The cap scales with the
   column count — three cards stay tight, four need room to breathe. */
.gm-featured-products-section__grid {
    display: grid;
    gap: var(--fp-grid-gap);
    grid-template-columns: repeat(var(--fp-grid-columns), minmax(0, 1fr));
    margin-inline: auto;
    max-width: var(--fp-grid-max, max(560px, 50%));
    width: 100%;
}
.gm-featured-products-section--columns-4 { --fp-grid-max: max(760px, 68%); }

.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;
    /* Slower, token-driven curve so this band moves like the gallery above it
       rather than snapping. */
    transition: border-color var(--theme-animation-duration-normal, 240ms) var(--fp-ease),
                box-shadow var(--theme-animation-duration-slow, 360ms) var(--fp-ease),
                transform var(--theme-animation-duration-slow, 360ms) var(--fp-ease);
}
.gm-featured-products-section__card:hover {
    border-color: color-mix(in srgb, var(--fp-button-bg) 35%, var(--fp-card-border));
    /* Warm shadow, tinted toward the brand rather than neutral black (§9.5). */
    box-shadow: 0 20px 44px rgba(42, 28, 8, 0.14);
    transform: translateY(-3px);
}

/* The photograph is the moving part — a slow scale inside a fixed frame,
   matching the gallery's treatment. */
.gm-featured-products-section__card img {
    transition: transform 800ms var(--fp-ease-out);
    will-change: transform;
}
.gm-featured-products-section__card:hover img { transform: scale(1.05); }

.gm-featured-products-section__card:focus-within {
    border-color: color-mix(in srgb, var(--fp-button-bg) 45%, var(--fp-card-border));
}

.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: var(--fp-image-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));
}

/* ── Card body: left-aligned editorial stack on a golden-ratio rhythm ──
   Inline padding 22px; vertical steps derived by dividing by φ (1.618):
   22 → 14 → 8 → 5. Same ladder governs brand→name→rule→price. */
.gm-featured-products-section {
    --fp-card-inset: 14px;
    --fp-step-1: 9px;
    --fp-step-2: 5px;
    --fp-step-3: 3px;
}

.gm-featured-products-section__brand {
    color: var(--fp-text-color);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    min-height: 14px;
    opacity: 0.6;
    overflow: hidden;
    padding: var(--fp-card-inset) var(--fp-card-inset) 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: 14px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.01em;
    max-height: calc(1.32em * 2);
    margin: var(--fp-step-2) var(--fp-card-inset) 0;
    min-height: calc(1.32em * 2);
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: left;
}

/* Hairline rule separating name from price — the reference's quiet divider. */
.gm-featured-products-section__price-stack {
    align-content: center;
    display: grid;
    gap: var(--fp-step-3);
    justify-items: start;
    margin: auto var(--fp-card-inset) var(--fp-card-inset);
    min-height: 0;
    padding-top: var(--fp-step-1);
    position: relative;
    text-align: left;
}
.gm-featured-products-section__price-stack::before {
    background: color-mix(in srgb, var(--fp-button-bg) 30%, transparent);
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 22px;
}
.gm-featured-products-section__price {
    color: var(--fp-price-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.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: var(--fp-step-2);
    grid-auto-rows: minmax(40px, auto);
    margin-top: 0;
    padding: 0 var(--fp-card-inset) var(--fp-card-inset);
}
.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%;
}
.gm-featured-products-section__cta--secondary {
    background: transparent;
    color: var(--fp-button-bg);
}
.gm-featured-products-section__cta:hover { filter: brightness(0.92); }
.gm-featured-products-section__cta[disabled],
.gm-featured-products-section__cta[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
}

/* "View product" is navigation, not commerce — render it as the reference's
   quiet underlined link with a trailing arrow instead of a filled button.
   Cart/checkout actions keep the solid button treatment above, since those
   carry real weight. Label text stays visible: it is the accessible name. */
.gm-featured-products-section__cta--quiet {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--fp-button-bg);
    font-size: 12px;
    font-weight: 600;
    gap: var(--fp-step-2);
    height: auto;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    width: auto;
}
.gm-featured-products-section__cta--quiet::after {
    content: "→";
    font-size: 14px;
    line-height: 1;
    transition: transform var(--theme-animation-duration-normal, 240ms) var(--fp-ease);
}
.gm-featured-products-section__cta--quiet:hover {
    filter: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.gm-featured-products-section__cta--quiet:hover::after {
    transform: translateX(4px);
}
/* A quiet action needs no button-sized row. */
.gm-featured-products-section__actions--quiet {
    grid-auto-rows: auto;
    padding-top: var(--fp-step-3);
}

.gm-featured-products-section__viewall {
    margin-top: 28px;
    text-align: center;
}
/* Shape and colour come from the site button system (.gm-cta + .gm-cta--ink),
   so this reads as the same control as the hero and the gallery CTA. */

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

@media (max-width: 1180px) {
    /* Below this the container is already narrow enough — capping it again
       would squeeze the cards instead of calming them. */
    .gm-featured-products-section__grid { max-width: none; }
}
@media (max-width: 980px) {
    .gm-featured-products-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    /* ── Phones: horizontal shelf, not a stack ──
       Stacked full-width cards turned four products into a long scroll where
       only one was ever visible. A swipeable row keeps several in view, makes
       the collection legible at a glance, and matches how shops read on mobile.

       The row bleeds to both screen edges so the scroll feels like part of the
       page rather than a boxed widget: negative margins cancel the section
       gutter, and matching padding puts the first card back on the text spine. */
    .gm-featured-products-section__grid {
        display: flex;
        grid-template-columns: none;
        max-width: none;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        margin-inline: calc(-1 * var(--gm-section-inline-padding));
        padding-inline: var(--gm-section-inline-padding);
        padding-bottom: 4px;
        /* Each card settles into place instead of stopping mid-gap. */
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gm-section-inline-padding);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gm-featured-products-section__grid::-webkit-scrollbar { display: none; }

    /* ~2.2 cards in view: the cut-off third card is what signals "swipe me"
       without needing an arrow or a hint label. */
    .gm-featured-products-section__card {
        flex: 0 0 clamp(150px, 42vw, 190px);
        scroll-snap-align: start;
    }

    /* Smaller type inside the smaller card so the ratio still reads. */
    .gm-featured-products-section__name { font-size: 13px; }
    .gm-featured-products-section__brand { font-size: 9px; }

    .gm-featured-products-section { padding: var(--fp-section-padding-block) var(--gm-section-inline-padding); }
}

/* Motion here is decoration — respect the system preference. */
@media (prefers-reduced-motion: reduce) {
    .gm-featured-products-section__card,
    .gm-featured-products-section__card img {
        transition: none;
    }
    .gm-featured-products-section__card:hover { transform: none; }
    .gm-featured-products-section__card:hover img { transform: none; }
}

/* 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: var(--gm-surface);
    --fc-card-border: var(--gm-border);
    --fc-button-bg: var(--gm-primary);
    --fc-button-text: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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(0, 0, 0, 0.08);
}

.gm-featured-categories-section__card:hover {
    border-color: color-mix(in srgb, var(--fc-button-bg) 35%, var(--fc-card-border));
    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: var(--gm-surface);
    --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(0, 0, 0, 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: var(--gm-media-surface);
    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: var(--gm-surface);
    --fs-card-border: var(--gm-border);
    --fs-price-color: var(--gm-text);
    --fs-button-bg: var(--gm-primary);
    --fs-button-text: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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 8px 30px rgba(0, 0, 0, 0.4);
}
.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: var(--gm-primary, var(--fs-button-bg));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-8px);
}
.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: var(--gm-media-surface); }

.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%;
}
.gm-featured-services-section__cta--secondary {
    background: transparent;
    color: var(--fs-button-bg);
}
.gm-featured-services-section__cta:hover { filter: brightness(0.92); }
.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(0, 0, 0, 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 {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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 — Fade hero slider (auto / arrows modes).
   Namespace: --hc-*   Scope: .gm-hero-carousel-section
   JS-enhanced (initHeroSlider) with a graceful no-JS fallback: the first
   slide carries .is-active in markup, so without JS the hero is static.
   ════════════════════════════════════════════════════════════════════ */

.gm-hero-carousel-section {
    --hc-section-bg: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    --hc-title-color: #ffffff;
    --hc-kicker-color: var(--gm-primary, #0d0d0d);
    --hc-intro-color: rgba(255, 255, 255, 0.86);
    --hc-cta-bg: var(--gm-primary, #0d0d0d);
    --hc-cta-text: var(--gm-on-primary, #0d0d0d);
    --hc-dot-color: rgba(255, 255, 255, 0.7);
    --hc-min-height: 600px;
    --hc-overlay-color: #000000;
    --hc-overlay-alpha: 0.5;
    --hc-section-padding-block: 0px;
    --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;
}

/* Height is driven purely by --hc-min-height. Do NOT use aspect-ratio here:
   a full-width hero with a min-height makes the browser derive WIDTH from
   height*ratio (e.g. 600px*16/6 = 1600px), overflowing the page and shoving
   the centered content to the right. width:100% keeps the viewport page-wide. */
.gm-hero-carousel-section__viewport {
    min-height: var(--hc-min-height);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gm-hero-carousel-section__slide {
    inset: 0;
    min-height: var(--hc-min-height);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    z-index: 0;
}

.gm-hero-carousel-section__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.gm-hero-carousel-section__bg {
    height: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    transform: scale(1.04);
    transition: transform 7s ease-out;
    width: 100%;
    z-index: 0;
}
.gm-hero-carousel-section__slide.is-active .gm-hero-carousel-section__bg { transform: scale(1); }

/* Colour + opacity tint over each slide image. Editor sets overlay_color
   (any theme token or custom hex) and overlay_opacity (0–100). */
.gm-hero-carousel-section__overlay {
    background: var(--hc-overlay-color, #000000);
    opacity: var(--hc-overlay-alpha, 0.5);
    inset: 0;
    position: absolute;
    z-index: 1;
}

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

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

.gm-hero-carousel-section__title {
    color: var(--hc-title-color);
    font-family: var(--hc-title-font);
    font-size: clamp(34px, 5.2vw, 64px);
    font-weight: 700;
    line-height: 1.06;
    margin: 0;
    max-width: 760px;
    overflow-wrap: anywhere;
}

.gm-hero-carousel-section__intro {
    color: var(--hc-intro-color);
    font-size: 18px;
    line-height: 1.6;
    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-size: 16px;
    font-weight: 700;
    justify-content: center;
    margin-top: 6px;
    min-height: 52px;
    padding: 0 30px;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.gm-hero-carousel-section__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 13, 13, 0.4);
}

/* ── Arrows ── */
.gm-hero-carousel-section__arrow {
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-size: 26px;
    height: 52px;
    justify-content: center;
    line-height: 1;
    margin-top: -26px;
    position: absolute;
    top: 50%;
    transition: background 200ms ease, transform 200ms ease, color 200ms ease;
    width: 52px;
    z-index: 3;
}
.gm-hero-carousel-section__arrow:hover {
    background: var(--gm-primary, #0d0d0d);
    border-color: var(--gm-primary, #0d0d0d);
    color: var(--gm-on-primary, #0d0d0d);
    transform: scale(1.06);
}
.gm-hero-carousel-section__arrow--prev { left: 24px; }
.gm-hero-carousel-section__arrow--next { right: 24px; }

/* ── Dots (overlaid bottom-center) ── */
.gm-hero-carousel-section__dots {
    bottom: 24px;
    display: flex;
    gap: 10px;
    justify-content: center;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 3;
}

.gm-hero-carousel-section__dot {
    background: rgba(255, 255, 255, 0.45);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    height: 8px;
    padding: 0;
    transition: background 200ms ease, width 200ms ease;
    width: 8px;
}
.gm-hero-carousel-section__dot:hover { background: rgba(255, 255, 255, 0.75); }
.gm-hero-carousel-section__dot.is-active {
    background: var(--gm-primary, #0d0d0d);
    width: 26px;
}

@media (max-width: 760px) {
    .gm-hero-carousel-section--aspect-wide .gm-hero-carousel-section__viewport,
    .gm-hero-carousel-section--aspect-landscape .gm-hero-carousel-section__viewport,
    .gm-hero-carousel-section--aspect-panoramic .gm-hero-carousel-section__viewport { aspect-ratio: auto; }
    .gm-hero-carousel-section { --hc-min-height: 480px; }
    .gm-hero-carousel-section__copy { padding: 28px 20px; }
    .gm-hero-carousel-section__title { font-size: clamp(28px, 8vw, 40px); }
    .gm-hero-carousel-section__arrow { height: 42px; width: 42px; font-size: 22px; margin-top: -21px; }
    .gm-hero-carousel-section__arrow--prev { left: 12px; }
    .gm-hero-carousel-section__arrow--next { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-hero-carousel-section__slide { transition: none; }
    .gm-hero-carousel-section__bg { transition: none; transform: none; }
}

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


/* getme-css-bundle: css/commerce/sections/hero-services.css */
/* ════════════════════════════════════════════════════════════════════
   hero-services — Editorial hero + service cards + trust bar.
   Namespace: --hsv-*   Scope: .gm-hero-services
   Cinematic image right → fades to darkness left, left-aligned copy,
   glass service cards, trust bar. Black / charcoal / muted-gold palette.
   ════════════════════════════════════════════════════════════════════ */
.gm-hero-services {
    /* Palette (editable via section settings) — light cream editorial look.
       --hsv-black keeps its name (section_bg maps to it) but now holds the
       cream section background; text vars flipped to dark-on-light. */
    /* Ground behind the media — white now that the site's cream is gone. Named
       "black" from the library's dark-hero origins; the video covers it anyway. */
    --hsv-black: #FFFFFF;
    --hsv-section-black: #FFFFFF;
    --hsv-card-black: #FFFFFF;
    /* Ground here is CREAM, so the accent is the brand ink. */
    --hsv-gold: var(--gm-primary, #0d0d0d);
    /* Accent TEXT only (eyebrow + title accent). Separate from --hsv-gold so the
       copy can run warmer/yellower without repainting the button or the icons. */
    --hsv-gold-text: var(--hsv-gold);
    --hsv-gold-light: #2a2a2a;
    --hsv-gold-dark: #000000;
    --hsv-text-white: #2A231E;
    --hsv-text-primary: #2A231E;
    --hsv-text-secondary: #5C5248;
    --hsv-text-muted: #857A6D;
    --hsv-border-light: rgba(0, 0, 0, 0.12);
    --hsv-border-gold: rgba(0, 0, 0, 0.28);
    --hsv-border-gold-soft: rgba(0, 0, 0, 0.14);
    --hsv-overlay-card: rgba(255, 255, 255, 0.85);

    /* Unitless 0–1 ratio, never a percentage — it is multiplied into `opacity`. */
    --hsv-overlay-alpha: 0.72;
    --hsv-min-height: 640px;
    --hsv-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --hsv-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    position: relative;
    isolation: isolate;
    /* Content inherits .gm-main's global inset; only the image below breaks out
       to the viewport edges. */
    overflow: visible;
    background: var(--hsv-black);
    color: var(--hsv-text-secondary);
    /* The hero opens the page directly under the header, so it cancels
       .gm-main's top padding instead of sitting below it. Reading the same
       variable keeps the two in step if that padding is ever retuned. */
    margin-top: calc(-1 * var(--gm-main-padding-top, 42px));
}

/* ── Cinematic media: image on the right, fading to black on the left ── */
.gm-hero-services__media {
    position: absolute;
    /* The section itself now sits flush under the header (negative margin-top
       above), so the media no longer has to climb out of the page padding. */
    top: 0;
    bottom: 0;
    /* Cancel the global container inset so the image reaches the viewport edges. */
    left: calc(-1 * var(--gm-page-inset-start, 0px));
    right: calc(-1 * var(--gm-page-inset-end, 0px));
    z-index: 0;
    overflow: hidden;
}

/* ── Slides: pure-CSS crossfade that drifts left → right (no JS needed) ── */
.gm-hero-services__slides { position: absolute; inset: 0; z-index: 0; }
.gm-hero-services__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation-duration: calc(var(--hsv-dwell, 6s) * var(--hsv-count, 2));
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity;
}
/* keep the first frame painted before the animation kicks in */
.gm-hero-services__slide.is-active { opacity: 1; }

/* single image (or autoplay off): just show the first, no motion */
.gm-hero-services__slides[data-count="1"] .gm-hero-services__slide,
.gm-hero-services__slides[data-hsv-autoplay="0"] .gm-hero-services__slide { animation: none; opacity: 0; }
.gm-hero-services__slides[data-count="1"] .gm-hero-services__slide:first-child,
.gm-hero-services__slides[data-hsv-autoplay="0"] .gm-hero-services__slide:first-child { opacity: 1; }

/* 2 slides */
.gm-hero-services__slides[data-count="2"] { --hsv-count: 2; }
.gm-hero-services__slides[data-count="2"] .gm-hero-services__slide:nth-child(1) { animation-name: gm-hsv-2-1; }
.gm-hero-services__slides[data-count="2"] .gm-hero-services__slide:nth-child(2) { animation-name: gm-hsv-2-2; }

/* 3 slides */
.gm-hero-services__slides[data-count="3"] { --hsv-count: 3; }
.gm-hero-services__slides[data-count="3"] .gm-hero-services__slide:nth-child(1) { animation-name: gm-hsv-3-1; }
.gm-hero-services__slides[data-count="3"] .gm-hero-services__slide:nth-child(2) { animation-name: gm-hsv-3-2; }
.gm-hero-services__slides[data-count="3"] .gm-hero-services__slide:nth-child(3) { animation-name: gm-hsv-3-3; }

/* Each image fades in from the left, drifts right while visible, and fades out
   still moving right — reading as a continuous left → right flow. */
@keyframes gm-hsv-2-1 {
    0%   { opacity: 1; }
    42%  { opacity: 1; }
    50%  { opacity: 0; }
    92%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes gm-hsv-2-2 {
    0%   { opacity: 0; }
    42%  { opacity: 0; }
    50%  { opacity: 1; }
    92%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes gm-hsv-3-1 {
    0%   { opacity: 1; }
    28%  { opacity: 1; }
    34%  { opacity: 0; }
    94%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes gm-hsv-3-2 {
    0%   { opacity: 0; }
    28%  { opacity: 0; }
    34%  { opacity: 1; }
    61%  { opacity: 1; }
    67%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes gm-hsv-3-3 {
    0%   { opacity: 0; }
    61%  { opacity: 0; }
    67%  { opacity: 1; }
    94%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gm-hero-services__slide { animation: none !important; opacity: 0; }
    .gm-hero-services__slide:first-child { opacity: 1; }
}

.gm-hero-services__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Slide 1 (woman): pulled up 20% so her head aligns with the male customer's
   head in slide 2. */
.gm-hero-services__slide:first-child .gm-hero-services__media-img {
    object-position: right 30%;
}
.gm-hero-services--grayscale .gm-hero-services__media-img {
    filter: grayscale(100%) contrast(1.04);
}

/* Per-slide left shade (slide setting): only the slides that ask for it get a
   darkening under the copy — bright photos where the white headline would
   otherwise disappear. It sits inside the slide, so it fades with it.
   Warm dark rather than neutral black: the palette is cream and gold, and a
   grey veil would read cold over it. */
.gm-hero-services__slide-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(20, 15, 10, 0.62) 0%,
        rgba(20, 15, 10, 0.52) 26%,
        rgba(20, 15, 10, 0.34) 40%,
        rgba(20, 15, 10, 0.16) 52%,
        rgba(20, 15, 10, 0) 64%);
}

/* The photo runs full width, uncovered: no cream wash on the left. Only a very
   soft fade at the very top so the media melts into the header.
   The fade colour tracks the overlay: cream over a light photo hero, but it has
   to go dark alongside a dark scrim — otherwise a pale band sits across the top
   of the video and the tint below it stops short of the header. */
.gm-hero-services__scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg,
        var(--hsv-scrim-top, rgba(245, 237, 227, 0.25)) 0%,
        transparent 14%);
}

/* Background video: same box as the slide images, so it crops identically.
   object-position matches the slide default — the tools sit low in frame, and
   right-of-centre keeps them clear of the headline column. */
/* Stage for the A/B clip pair. Both sit in the same box; only the one carrying
   .is-active is opaque, so advancing the playlist is an opacity crossfade. */
.gm-hero-services__videos { position: absolute; inset: 0; z-index: 0; }

.gm-hero-services__media-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Hidden until theme.js marks the running clip; the first element ships
       with .is-active in the markup so the opening frame paints even if the
       script never runs. Long enough to read as a dissolve, not a cut. */
    opacity: 0;
    transition: opacity var(--theme-animation-duration-slow, 1200ms)
                var(--theme-animation-easing-standard, ease-in-out);
}
.gm-hero-services__media-video.is-active { opacity: 1; }

.gm-hero-services--grayscale .gm-hero-services__media-video {
    filter: grayscale(100%) contrast(1.04);
}

/* Motion is decorative here, so honour the OS setting: the first clip's poster
   frame stays and nothing plays or crossfades. The active element is kept (the
   poster is painted by it) — only the idle second one is dropped. */
@media (prefers-reduced-motion: reduce) {
    .gm-hero-services__media-video { transition: none; }
    .gm-hero-services__media-video:not(.is-active) { display: none; }
}

/* Editable flat wash over the whole image. `--hsv-overlay-tint` picks the
   colour: the cream default keeps a photo hero light, while a dark value turns
   the same control into a scrim for white copy over video. */
.gm-hero-services__tint {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--hsv-overlay-tint, #F5EDE3);
    /* --hsv-overlay-alpha is a unitless 0–1 ratio (see the section template):
       a percentage here makes the calc invalid and drops the scrim entirely. */
    opacity: calc(var(--hsv-overlay-alpha, 0.72) * var(--hsv-overlay-strength, 0.55));
}

/* Copy-band shade. The flat tint above was carrying two jobs at once: keeping
   the footage moody AND keeping white type legible. Tuning it for the type
   meant over-darkening the whole frame. This gradient does the second job on
   its own — the lower half where the copy sits — so the flat tint can stay
   light and the picture reads open. Measured against the brightest frame in
   the montage: white copy holds 4.7:1 here, against 2.8:1 without it. */
.gm-hero-services__copyshade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 38%,
        rgba(0, 0, 0, 0.12) 58%,
        rgba(0, 0, 0, 0.25) 78%,
        rgba(0, 0, 0, 0.28) 100%);
}

/* ── Layout shell ── */
.gm-hero-services__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    /* Copy sits at the foot of the frame: the top of the video stays open and
       the type reads against the darker lower half. */
    padding-block: clamp(48px, 6vw, 88px) clamp(40px, 4.6vw, 64px);
    /* No own horizontal padding: content aligns to .gm-main's global inset —
       the exact same left line as the header logo, scaling together on resize. */
    padding-inline: 0;
    min-height: var(--hsv-min-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ── Editorial copy, clustered hard to the left ── */
.gm-hero-services__content {
    max-width: 560px;
    text-align: left;
    margin-right: auto;
}

/* Small caps line above the display type. Light and widely tracked so it reads
   as a label, not a second headline. */
.gm-hero-services__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-family: var(--hsv-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--hsv-gold-text);
}
.gm-hero-services__eyebrow-line {
    width: 46px;
    height: 1px;
    background: var(--hsv-gold-text);
}

/* Editorial display line: uppercase, light weight, letters opened up. The
   reference reads as one wide band of type rather than a heavy stacked
   headline, so the weight comes down as the size goes up. */
.gm-hero-services__title {
    margin: 0 0 26px;
    font-family: var(--hsv-serif);
    /* 300 is the lightest face actually loaded — going lower makes the browser
       synthesise a thinner one, which renders blurry. The airier feel comes
       from opened-up tracking instead. */
    font-weight: 300;
    /* Halved from clamp(34px, 4.4vw, 62px) — every stop, so the line shrinks
       by the same amount at any viewport rather than only at one breakpoint. */
    font-size: clamp(17px, 2.2vw, 31px);
    line-height: 1.18;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--hsv-text-white);
}
/* Inherits the title colour, like every other section accent: the heading is
   one unbroken line rather than a two-tone highlight. */
.gm-hero-services__accent { color: inherit; }

.gm-hero-services__intro {
    margin: 0 0 34px;
    max-width: 430px;
    font-family: var(--hsv-sans);
    font-size: 16px;
    line-height: 1.72;
    color: var(--hsv-text-secondary);
}

.gm-hero-services__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
/* Shape and colour both come from the site button system (.gm-cta +
   .gm-cta--on-dark in theme.css). The hero is the reference every other call
   to action matches, so it must not keep a private copy of those values —
   that duplication is what let four different buttons drift apart. Only the
   typeface is restated, to hold the pair on the hero's own sans. */
.gm-hero-services__btn {
    font-family: var(--hsv-sans);
}

/* ── Glass service cards ── */
.gm-hero-services__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(44px, 5vw, 68px);
}
/* 2-card layout: two equal columns, centered */
.gm-hero-services__cards:has(> .gm-hero-services__card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
}
.gm-hero-services__card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 14px;
    background: var(--hsv-overlay-card);
    border: 1px solid var(--hsv-border-light);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
}
.gm-hero-services__card:hover { border-color: var(--hsv-border-gold); transform: translateY(-3px); }
.gm-hero-services__card-icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--hsv-gold-dark);
    background: rgba(13, 13, 13, 0.12);
    border: 1px solid var(--hsv-border-gold-soft);
}
.gm-hero-services__card-body { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.gm-hero-services__card-title {
    font-family: var(--hsv-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--hsv-text-white);
}
.gm-hero-services__card-desc {
    font-family: var(--hsv-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--hsv-text-muted);
}
.gm-hero-services__card-arrow {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--hsv-gold);
    border: 1px solid var(--hsv-border-gold);
    transition: background 220ms ease, color 220ms ease;
}
.gm-hero-services__card:hover .gm-hero-services__card-arrow { background: var(--hsv-gold); color: #17120a; }

/* ── Trust bar ── */
.gm-hero-services__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 64px);
    margin-top: clamp(30px, 3.5vw, 46px);
    padding-top: 26px;
    border-top: 1px solid var(--hsv-border-light);
}
.gm-hero-services__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--hsv-sans);
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--hsv-text-secondary);
}
.gm-hero-services__trust-item i { color: var(--hsv-gold); font-size: 16px; }

/* ── Responsive ── */
@media (max-width: 1600px) {
    /* Drop the gold "Your Experience." onto its own line as the screen narrows. */
    .gm-hero-services__accent { display: block; }
}
@media (max-width: 900px) {
    /* Mobile: focus the crop on the subject band (~80% across) so the people's
       faces and hair stay in frame while the dark left side is hidden.
       Second rule overrides slide 1's higher-specificity desktop position. */
    .gm-hero-services__media-img { object-position: 80% center; }
    .gm-hero-services__slide:first-child .gm-hero-services__media-img { object-position: 80% center; }
    /* Phone-specific artwork carries its subject on the right, so anchor the
       crop to that edge — the right-hand side stays fully in frame. */
    .gm-hero-services__slide--has-mobile .gm-hero-services__media-img,
    .gm-hero-services__slide--has-mobile:first-child .gm-hero-services__media-img { object-position: right center; }
    /* The gallery section is pulled up 50px on phones — end the image 20px
       higher so it doesn't bleed into it. */
    .gm-hero-services__media { bottom: 70px; }
    /* Portrait: the copy is white and sits on the photo, so the band behind it
       carries a very light dark veil — just enough separation, fading out before
       mid-height so the picture itself stays open. */
    .gm-hero-services__scrim {
        background: linear-gradient(180deg,
            rgba(20, 15, 10, 0.34) 0%,
            rgba(20, 15, 10, 0.26) 24%,
            rgba(20, 15, 10, 0.14) 38%,
            rgba(20, 15, 10, 0.05) 48%,
            rgba(20, 15, 10, 0) 58%);
    }
    /* The desktop-only per-slide fade is off here for the same reason. */
    .gm-hero-services__slide-scrim { display: none; }

    /* Phones centre the copy — eyebrow, headline, intro and buttons all run
       down the middle of the frame. Desktop keeps its left-aligned editorial
       column, so every rule here stays inside this query. */
    .gm-hero-services__content {
        max-width: none;
        text-align: center;
    }
    /* The eyebrow is a flex row, so text-align does not reach it; the row has
       to be centred itself. The 46px rule that leads it goes — a dash hanging
       off the left of a centred label reads as a stray mark, not a flourish. */
    .gm-hero-services__eyebrow { justify-content: center; }
    .gm-hero-services__eyebrow-line { display: none; }
    /* The intro keeps its 430px cap from the base rule; without auto margins
       that box stays pinned left inside the now-centred column. */
    .gm-hero-services__intro {
        margin-inline: auto;
        /* Its own bottom margin is dropped: the gap above the buttons is owned
           by .gm-hero-services__actions below. The intro is wrapped in an
           {% if %}, so hanging the spacing off it would collapse the gap the
           moment someone clears the intro text in the editor. */
        margin-bottom: 0;
    }
    /* The gap ABOVE the buttons, matched to the 50px the inner's bottom padding
       leaves below them, so the pair sits in an even band. On the actions row
       rather than the copy above it — this element always renders, so the
       spacing holds whichever of the eyebrow / title / intro are filled in. */
    .gm-hero-services__actions {
        justify-content: center;
        margin-top: 50px;
    }

    /* Copy sits low in the frame, 50px clear of the bottom of the footage. The
       media stops 70px short of the section foot (rule above), so the padding
       carries that 70px plus the gap — otherwise a bare 50px would measure
       against the section box and leave the buttons hanging past the video.
       This 50px is matched by the intro's bottom margin below, so the buttons
       sit in an even band between the copy and the foot of the frame. */
    .gm-hero-services__inner {
        padding-block: clamp(32px, 8vw, 56px) calc(70px + 50px);
        justify-content: flex-end;
    }

    /* A shorter frame on phones: 640px left the copy stranded below the fold.
       This also zooms the clip out — it is 2.86:1 against a near-square mobile
       box, so `cover` crops the width hard; a lower frame widens the box and
       keeps more of the shot. Measured: ~35% of the clip visible at 460px,
       ~44% here.
       `contain` was tried and rejected: at 390px it shrinks the video to 136px
       and leaves a 214px empty band that the copy would sit on, which stops the
       hero reading as a filmed frame at all. */
    .gm-hero-services { --hsv-min-height: 380px; }
    .gm-hero-services__cards { grid-template-columns: 1fr; }
    .gm-hero-services__trust { justify-content: flex-start; gap: 20px 28px; }
}
@media (max-width: 560px) {
    /* Halved from the previous clamp(34px, 11vw, 48px): at 11vw the display
       line filled most of a phone screen and pushed the buttons out of frame. */
    .gm-hero-services__title { font-size: clamp(17px, 5.5vw, 24px); }
    .gm-hero-services__eyebrow { font-size: 10px; letter-spacing: 0.18em; }
    .gm-hero-services__intro { font-size: 14px; line-height: 1.6; }

    /* The pair shares one centred row, as in the reference. An earlier version
       stacked them because the buttons were full-size and overflowed; at this
       type size they fit side by side on a 320px screen with room to spare
       (~232px against ~280px of usable width), so they size to their own
       labels and the row centres the pair. */
    .gm-hero-services__actions {
        flex-direction: row;
        /* nowrap keeps the two on one line: with wrap, the second button drops
           below the first the moment the pair is a pixel too wide, which is
           the stacked layout coming back by accident. They shrink instead. */
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        gap: 7px;
        /* The pair no longer spans the full width — the buttons size to their
           own compact box and the row centres them. */
        width: auto;
    }

    .gm-hero-services__btn {
        /* Shrink-to-fit rather than equal halves: with the smaller type below,
           each button now wraps its own label instead of being handed half the
           screen. `0 1 auto` still lets them give way if the pair runs long. */
        flex: 0 1 auto;
        min-width: 0;
        justify-content: center;
        /* Retune the shared .gm-cta shape through its own variables rather than
           re-declaring padding/radius/font-size here — those properties belong
           to the site button system (theme.css), and setting them directly is
           the duplication that let the site's buttons drift apart before. A
           phone-sized step below .gm-cta--compact. */
        --gm-cta-padding: 8px 12px;
        --gm-cta-radius: 5px;
        --gm-cta-gap: 7px;
        --gm-cta-font-size: 10px;
        --gm-cta-tracking: 0.03em;
        /* Keep each label on one line now that it fits: wrapping was only there
           to stop a long label widening a half-screen button, and a two-line
           label inside this shorter box would break the pair's alignment. */
        white-space: nowrap;
        text-align: center;
    }
    /* The leading icons scale with the label so they do not dominate the
       smaller button. */
    .gm-hero-services__btn i { font-size: 10px; }
}
/* Smallest phones (320px): at this type size the nowrap pair measures ~286px
   against ~280px of usable width, so it would spill. Tightening the padding and
   tracking buys back the difference and keeps the two on one line rather than
   letting one drop below the other. */
@media (max-width: 350px) {
    .gm-hero-services__actions { gap: 6px; }
    .gm-hero-services__btn {
        --gm-cta-padding: 8px 8px;
        --gm-cta-gap: 5px;
        --gm-cta-tracking: 0.01em;
    }
}

/* ── Scroll cue ────────────────────────────────────────────────────────
   White disc straddling the foot of the hero, half over the media and half
   over the section below — the section sets `overflow: visible`, so it can
   hang past the edge rather than being clipped.

   Shown at every width; only the vertical anchor changes, because the media
   ends flush with the section on desktop but 70px short of it on phones. */
.gm-hero-services__scrollcue {
    display: grid;
    place-items: center;
    position: absolute;
    /* Desktop: the media runs to the section foot, so centre the disc on that
       edge — half laps onto the video, half onto the section below. */
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;

    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0d0d0d;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 220ms var(--theme-animation-easing-standard, ease),
                box-shadow 220ms ease;
}

.gm-hero-services__scrollcue:hover {
    transform: translateX(-50%) translateY(2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.gm-hero-services__scrollcue:active {
    transform: translateX(-50%) scale(0.94);
}

.gm-hero-services__scrollcue:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

/* A slow bob marks it as an invitation rather than a static badge. It moves
   the icon, not the button, so the -50% centring shift is left alone. */
.gm-hero-services__scrollcue i {
    animation: gm-hsv-cue 2.2s ease-in-out infinite;
}

@media (max-width: 900px) {
    .gm-hero-services__scrollcue {
        /* The media stops 70px short of the section foot on phones; centring
           the disc on that line puts it exactly where the picture ends. */
        bottom: calc(70px - 27px);
        width: 54px;
        height: 54px;
        font-size: 15px;
    }
}

@keyframes gm-hsv-cue {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .gm-hero-services__scrollcue i { animation: none; }
}

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


/* getme-css-bundle: css/commerce/sections/gallery-bento.css */
/* ════════════════════════════════════════════════════════════════════
   gallery-bento — Bento-box gallery grid.
   Namespace: --gb-*   Scope: .gm-bento
   One tall feature card + a 2×2 grid of image cards, each with a gold
   icon, title/desc and an arrow; gold hover accent. Instagram bar below.
   ════════════════════════════════════════════════════════════════════ */
.gm-bento {
    --gb-black: #080808;
    --gb-card: #101010;
    --gb-gold: #F7F5F0;   /* used on dark photo cards */
    --gb-gold-light: #FFFFFF;
    --gb-text-white: #F7F5F0;
    --gb-text-muted: #B7B2A8;
    --gb-text-dim: #8F8A80;
    --gb-border: rgba(255, 255, 255, 0.10);
    --gb-border-gold: rgba(13, 13, 13, 0.55);
    --gb-radius: 16px;
    --gb-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --gb-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    /* Motion curves come from the theme tokens (§9.4); the decelerating curve
       is the local companion for entrances — nothing hardcoded per-property. */
    --gb-ease: var(--theme-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));
    --gb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    color: var(--gb-text-muted);
}

/* ── Section header ── */
.gm-bento__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 54px);
}
/* Serif to match the display line under it, and set at a normal weight: the
   600-weight sans read as a UI label sitting above an editorial heading. The
   flanking rules are gone with it — the reference is a plain line of small
   caps, and the two dashes were the loudest thing in the header. */
.gm-bento__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--gb-gold);
}
/* Recipe from the site display tokens (theme.css); only the size is local,
   because the step in the scale is this section's own hierarchy decision. */
.gm-bento__title {
    margin: 0 0 16px;
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--gb-text-white);
}
/* The accent half no longer shifts style or colour — the heading reads as one
   plain line. The italic that used to live here fought the simple editorial
   look the section is after; emphasis now comes from the size and tracking of
   the display line itself. The light-theme block near the foot of this file
   also stops repainting it, so `inherit` really does follow the title. */
.gm-bento__accent {
    color: inherit;
    font-style: normal;
}
.gm-bento__intro {
    margin: 0;
    font-family: var(--gb-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gb-text-muted);
}

/* ── Bento grid ──
   Asymmetric editorial rhythm: a tall feature at left, a wide card top-right,
   then two squares. Varying the cell sizes is what makes a bento read as
   designed rather than as a uniform tile wall. */
/* Six across, equal cells — a contact sheet rather than a bento. Every cell is
   the same size and carries the same 3:4 portrait crop, so the wall reads as
   one set of work instead of a composed layout. Rows come from the content:
   twelve photos make two rows, six make one. */
.gm-bento__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(10px, 0.9vw, 16px);
}

/* The plain variant differs only in that it carries no labels; the geometry is
   the same sheet, so it inherits the grid above and only resets the height
   floor the labelled card needs. */
.gm-bento__grid--plain .gm-bento__card { min-height: 0; }

/* ── Card ── */
.gm-bento__card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-border);
    background: var(--gb-card);
    text-decoration: none;
    /* Square cells, matching the source photographs (685×685). Keeping the
       cell on the same ratio as the artwork means `cover` has nothing to crop
       — every shot is shown whole. The ratio drives the height, so all cells
       match whatever the column width works out to and the rows stay even. */
    aspect-ratio: 1 / 1;
    isolation: isolate;
    transition: transform var(--theme-animation-duration-slow, 360ms) var(--gb-ease),
                box-shadow var(--theme-animation-duration-slow, 360ms) var(--gb-ease),
                border-color var(--theme-animation-duration-normal, 240ms) var(--gb-ease);
}
.gm-bento__card--feature { min-height: 364px; }

/* The image is the moving part, not the card: a slow scale under a fixed
   frame reads as craft; moving the whole card reads as a button. */
.gm-bento__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.01);
    transition: transform 900ms var(--gb-ease-out);
    will-change: transform;
}
.gm-bento__card:hover .gm-bento__img { transform: scale(1.06); }

/* Cycling layers exist in the markup at every width but only ever participate
   on phones (see the mobile block). Off there they are removed from the box
   entirely, so a wide screen paints exactly one photo per cell. */
.gm-bento__img--cycle { display: none; }

.gm-bento__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Two-stop warm scrim: deep enough at the very bottom for white text,
       clearing by mid-card so the photograph stays bright. */
    background:
        linear-gradient(0deg,
            rgba(24, 16, 6, 0.86) 0%,
            rgba(24, 16, 6, 0.42) 30%,
            rgba(24, 16, 6, 0.06) 58%,
            rgba(24, 16, 6, 0) 74%);
    transition: opacity var(--theme-animation-duration-slow, 360ms) var(--gb-ease);
}
/* A whisper of warmth on hover rather than a darkening film. */
.gm-bento__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(13, 13, 13, 0.16), rgba(13, 13, 13, 0) 55%);
    opacity: 0;
    transition: opacity var(--theme-animation-duration-slow, 360ms) var(--gb-ease);
    pointer-events: none;
}
.gm-bento__card:hover::after { opacity: 1; }

/* Bottom bar: icon · text · arrow */
.gm-bento__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(16px, 1.6vw, 26px);
    transform: translateY(0);
    transition: transform var(--theme-animation-duration-slow, 360ms) var(--gb-ease-out);
}
/* The label lifts a little to meet the cursor. */
.gm-bento__card:hover .gm-bento__bar { transform: translateY(-4px); }

.gm-bento__icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--gb-gold);
    /* Frosted disc so the icon holds up over any photo. */
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background var(--theme-animation-duration-normal, 240ms) var(--gb-ease),
                color var(--theme-animation-duration-normal, 240ms) var(--gb-ease),
                border-color var(--theme-animation-duration-normal, 240ms) var(--gb-ease);
}
.gm-bento__text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.gm-bento__card-title {
    font-family: var(--gb-sans);
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gb-text-white);
}
/* The description is the quiet layer: present, but it fades up on hover so the
   resting state stays clean. */
.gm-bento__card-desc {
    font-family: var(--gb-sans);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    opacity: 0.85;
    transition: opacity var(--theme-animation-duration-normal, 240ms) var(--gb-ease);
}
.gm-bento__card:hover .gm-bento__card-desc { opacity: 1; }

.gm-bento__arrow {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--theme-animation-duration-normal, 240ms) var(--gb-ease),
                transform var(--theme-animation-duration-normal, 240ms) var(--gb-ease-out),
                background var(--theme-animation-duration-normal, 240ms) var(--gb-ease),
                color var(--theme-animation-duration-normal, 240ms) var(--gb-ease);
}
/* The arrow only appears when the card is actionable and hovered — it is a
   response to intent, not permanent furniture. */
.gm-bento__card:hover .gm-bento__arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--gb-gold);
    border-color: var(--gb-gold);
    color: #17120A;
}

/* Hover — the frame stays put; depth and warmth do the work. */
.gm-bento__card:hover {
    border-color: var(--gb-border-gold);
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(42, 28, 8, 0.30);
}
.gm-bento__card:hover .gm-bento__icon {
    background: var(--gb-gold);
    border-color: var(--gb-gold);
    color: #17120A;
}

/* Keyboard parity: focus gets the same treatment as hover. */
.gm-bento__card:focus-visible {
    outline: 2px solid var(--gb-gold);
    outline-offset: 3px;
}
.gm-bento__card:focus-visible .gm-bento__arrow { opacity: 1; transform: translateX(0); }
.gm-bento__card:focus-visible .gm-bento__img { transform: scale(1.06); }

/* ── Gallery button ──
   Colour, radius and shadow all resolve from the GLOBAL button tokens
   (theme.buttons.*), so this button matches every other primary button on the
   site and follows any future palette change automatically. Nothing here is a
   literal colour. */
.gm-bento__cta-row {
    display: flex;
    justify-content: center;
    margin-top: clamp(26px, 3vw, 44px);
}
/* Shape and colour come from the site button system (.gm-cta + .gm-cta--ink).
   Only the section's own voice is kept: its sans, and the uppercase tracking
   that matches the eyebrow above it. */
.gm-bento__cta {
    font-family: var(--gb-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.gm-bento__cta i {
    font-size: 11px;
    transition: transform var(--theme-animation-duration-normal, 240ms) var(--gb-ease-out);
}
.gm-bento__cta:hover i { transform: translateX(3px); }

/* ── Instagram / CTA bar ── */
.gm-bento__promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: clamp(14px, 1.4vw, 22px);
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
    border-radius: var(--gb-radius);
    border: 1px solid var(--gb-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.gm-bento__promo-left { display: flex; align-items: center; gap: 18px; min-width: 0; text-decoration: none; }
a.gm-bento__promo-left { transition: transform 240ms ease; }
a.gm-bento__promo-left:hover { transform: translateX(2px); }
a.gm-bento__promo-left:hover .gm-bento__promo-title { color: var(--gb-gold); }
a.gm-bento__promo-left:hover .gm-bento__promo-icon { background: var(--gb-gold); color: #17120a; }
.gm-bento__promo-title { transition: color 240ms ease; }
.gm-bento__promo-icon { transition: background 240ms ease, color 240ms ease; }
.gm-bento__promo-icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--gb-gold);
    background: rgba(13, 13, 13, 0.10);
    border: 1px solid var(--gb-border-gold);
}
.gm-bento__promo-text { display: flex; flex-direction: column; gap: 4px; }
.gm-bento__promo-title { font-family: var(--gb-sans); font-size: 17px; font-weight: 600; color: var(--gb-text-white); }
.gm-bento__promo-sub { font-family: var(--gb-sans); font-size: 14px; color: var(--gb-text-muted); }
.gm-bento__promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 8px;
    font-family: var(--gb-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--gb-text-white);
    border: 1px solid var(--gb-border-gold);
    background: transparent;
    transition: background 240ms ease, color 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.gm-bento__promo-btn i { color: var(--gb-gold); transition: color 240ms ease; }
.gm-bento__promo-btn:hover { background: var(--gb-gold); color: #17120a; border-color: var(--gb-gold); transform: translateY(-1px); }
.gm-bento__promo-btn:hover i { color: #17120a; }

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Phones: the hero leaves too much cream below its content — pull the
       gallery 50px up, layered above the hero image. Desktop keeps the
       normal flow. */
    .gm-bento { margin-top: -50px; position: relative; z-index: 2; }

    /* Tablets: four across. Three would push twelve photos into four rows and
       turn a glimpse into a scroll. */
    .gm-bento__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Phones: a 2×2 set of four. Six across at this width would shrink each photo
   past the point of being readable, and one column would run the whole page —
   so the sheet becomes a square of four and the rest is dropped. */
@media (max-width: 760px) {
    .gm-bento__grid { grid-template-columns: 1fr 1fr; }
    .gm-bento__card--desk-only { display: none; }

    /* ── Cycling cells ──
       The four surviving cells rotate through the photos the hidden ones would
       have shown. Every layer is stacked in the same box and only the one
       carrying .is-active is opaque, so a change is a plain crossfade with no
       reflow — the grid never moves while it plays. */
    .gm-bento__img--cycle { display: block; }

    .gm-bento__card--cycles .gm-bento__img {
        opacity: 0;
        transition:
            opacity var(--theme-animation-duration-slow, 900ms) var(--gb-ease, ease-in-out),
            transform 900ms var(--gb-ease-out);
    }
    .gm-bento__card--cycles .gm-bento__img.is-active { opacity: 1; }
}

@media (max-width: 560px) {
    .gm-bento__promo { justify-content: center; text-align: left; }
    .gm-bento__promo-btn { flex: 1 1 auto; justify-content: center; }
    /* Full-width tap target on phones. */
    .gm-bento__cta { width: 100%; }
}

/* Touch devices have no hover: reveal the arrow and description permanently
   so the affordance is never hidden behind an interaction that cannot happen. */
@media (hover: none) {
    .gm-bento__arrow { opacity: 1; transform: translateX(0); }
    .gm-bento__card-desc { opacity: 1; }
}

/* Motion is decoration here — honour the user's system preference. */
@media (prefers-reduced-motion: reduce) {
    .gm-bento__img,
    .gm-bento__bar,
    .gm-bento__card,
    .gm-bento__arrow,
    .gm-bento__card::after {
        transition: none;
    }
    .gm-bento__card:hover { transform: none; }
    .gm-bento__card:hover .gm-bento__img { transform: scale(1.01); }
    .gm-bento__card:hover .gm-bento__bar { transform: none; }
    .gm-bento__cta, .gm-bento__cta i { transition: none; }
    .gm-bento__cta:hover { transform: none; }
    .gm-bento__cta:hover i { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Light theme — section chrome sits on the cream page (dark text); the image
   CARDS keep their dark photo overlays + white text.
   ════════════════════════════════════════════════════════════════════ */
/* Bottom padding closes the section deliberately — the CTA previously ended
   flush against the next band, which left the button looking unanchored. */
.gm-bento { color: #6E645A; padding-top: 25px; padding-bottom: clamp(72px, 8vw, 112px); }
/* Desktop only: the scroll-cue disc hangs 30px past the foot of the hero, so
   the eyebrow was landing right underneath it. 20px more clears the disc.
   Scoped above the mobile breakpoint — phones deliberately pull this section
   50px up, and the same offset there would work against that.
   It has to sit after the rule above: both are single-class selectors, so at
   equal specificity the later one wins. Placed before it, this did nothing. */
@media (min-width: 901px) {
    .gm-bento { padding-top: 45px; }
}
/* Black rather than the warm #2A231E the rest of the light chrome uses: this
   is the section's display line and the extra contrast is the point. The
   accent span inherits it, so the heading stays one solid colour. */
.gm-bento__title { color: #000000; }
.gm-bento__intro { color: #6E645A; }
.gm-bento__eyebrow { color: var(--gm-primary, #0d0d0d); }
/* No .gm-bento__accent rule here on purpose: the accent inherits the title's
   ink so the headline stays one unbroken line. Repainting it — even to the
   same ink — would resurrect the two-tone heading this section moved away
   from the moment the title colour is ever retuned. The eyebrow's ::before /
   ::after rules went with the rules themselves. */
.gm-bento__promo { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.12); }
.gm-bento__promo-title { color: #2A231E; }
.gm-bento__promo-sub { color: #6E645A; }
a.gm-bento__promo-left:hover .gm-bento__promo-title { color: var(--gm-primary, #0d0d0d); }

/* Cards sit on cream, so their resting border and shadow are warm and light
   rather than the dark-theme values above. The card interiors stay dark —
   they are photographs with white labels. */
.gm-bento__card {
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 2px rgba(42, 28, 8, 0.05);
}
.gm-bento__card:hover {
    border-color: rgba(13, 13, 13, 0.45);
    box-shadow: 0 22px 50px rgba(42, 28, 8, 0.18);
}
.gm-bento__card:hover .gm-bento__icon,
.gm-bento__card:hover .gm-bento__arrow {
    background: var(--gm-primary, #0d0d0d);
    border-color: var(--gm-primary, #0d0d0d);
    color: #FFFFFF;
}
.gm-bento__card:focus-visible { outline-color: var(--gm-primary, #0d0d0d); }

/* getme-css-bundle:end css/commerce/sections/gallery-bento.css */


/* getme-css-bundle: css/commerce/sections/team-group.css */
/* ════════════════════════════════════════════════════════════════════
   team-group — A titled team group (heading + centered member cards).
   Namespace: --tg-*   Scope: .gm-team
   Up to 8 members, max 4 per row on desktop, centered, wrapping. Each card:
   photo, name, role, Instagram link. Gold hover accent. Mobile responsive.
   ════════════════════════════════════════════════════════════════════ */
.gm-team {
    --tg-black: #FFFFFF;
    --tg-card: #FFFFFF;
    --tg-gold: var(--gm-primary, #0d0d0d);
    --tg-gold-light: var(--gm-primary, #0d0d0d);
    --tg-text-white: #2A231E;
    --tg-text-muted: #6E645A;
    --tg-border: rgba(0, 0, 0, 0.10);
    --tg-border-gold: rgba(181, 135, 42, 0.55);
    --tg-radius: 14px;
    --tg-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --tg-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    color: var(--tg-text-muted);
    margin-top: 90px;
}

/* ── Heading ── */
.gm-team__head {
    text-align: center;
    margin: 0 auto clamp(26px, 3vw, 40px);
}
.gm-team__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--tg-gold);
}
/* Flanking rule removed with the shared heading recipe: the label is a
   plain line of small caps now, and the dashes were the loudest thing in
   the header. */
.gm-team__title {
    margin: 0;
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--tg-text-white);
}
/* Inherits the title colour: the heading reads as one unbroken line,
   matching the shared display recipe. */
.gm-team__accent { color: inherit; }

/* ── Grid: max 4 per row, centered, wraps ── */
.gm-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 250px));
    justify-content: center;
    gap: clamp(16px, 1.6vw, 24px);
    max-width: 1120px;
    margin: 0 auto;
}

/* ── Member card ── */
.gm-team__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--tg-radius);
    border: 1px solid var(--tg-border);
    background: var(--tg-card);
    overflow: hidden;
    transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}
.gm-team__card:hover {
    border-color: var(--tg-border-gold);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.gm-team__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #F5F5F4;
}
.gm-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Original colours — no black-and-white filter, no hover reveal. */
    filter: none;
}
.gm-team__photo-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: rgba(181, 135, 42, 0.35);
}

/* ── Bottom bar: name/role + IG ── */
.gm-team__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 18px;
}
.gm-team__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-team__name {
    font-family: var(--tg-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--tg-text-white);
}
.gm-team__role {
    font-family: var(--tg-sans);
    font-size: 13px;
    color: var(--tg-gold);
}
.gm-team__ig {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--tg-gold);
    border: 1px solid var(--tg-border-gold);
    text-decoration: none;
    transition: background 240ms ease, color 240ms ease, transform 240ms ease;
}
a.gm-team__ig:hover { background: var(--tg-gold); color: #17120a; transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 560px) {
    .gm-team__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* getme-css-bundle:end css/commerce/sections/team-group.css */


/* getme-css-bundle: css/commerce/sections/find-us.css */
/* ════════════════════════════════════════════════════════════════════
   find-us — "Find us" band (hours + photo) + Google map & location details.
   Namespace: --fu-*   Scope: .gm-findus
   Editor-driven: opening hours rows and location detail rows are editable.
   ════════════════════════════════════════════════════════════════════ */
.gm-findus {
    --fu-black: #FFFFFF;
    --fu-card: #FFFFFF;
    --fu-gold: var(--gm-primary, #0d0d0d);
    --fu-gold-light: var(--gm-primary, #0d0d0d);
    --fu-text-white: #2A231E;
    --fu-text-muted: #6E645A;
    --fu-text-dim: #9A8F82;
    --fu-border: rgba(0, 0, 0, 0.10);
    --fu-border-gold: rgba(181, 135, 42, 0.55);
    --fu-radius: 16px;
    --fu-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --fu-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    color: var(--fu-text-muted);
    margin-top: 50px;
}
@media (max-width: 768px) {
    .gm-findus { margin-top: 50px; }
}

.gm-findus__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--fu-gold);
}
/* Flanking rule removed with the shared heading recipe: the label is a
   plain line of small caps now, and the dashes were the loudest thing in
   the header. */
/* Inherits the title colour: the heading reads as one unbroken line,
   matching the shared display recipe. */
.gm-findus__accent { color: inherit; }

/* ── Band 1: content + photo ── */
.gm-findus__band {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: stretch;
    border-radius: var(--fu-radius);
    overflow: hidden;
    border: 1px solid var(--fu-border);
    background: var(--fu-card);
}
/* No photo yet: single column, content fills the band (no empty side). */
.gm-findus__band--no-media { grid-template-columns: 1fr; }
.gm-findus__band-content {
    align-self: center;
    padding: clamp(28px, 3.4vw, 54px);
}
.gm-findus__band-title {
    margin: 0 0 18px;
    font-family: var(--fu-serif);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--fu-text-white);
}
.gm-findus__band-intro {
    margin: 0 0 28px;
    max-width: 420px;
    font-family: var(--fu-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--fu-text-muted);
}
.gm-findus__band-media { position: relative; min-height: 300px; }
.gm-findus__band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hours list */
.gm-findus__hours { display: flex; flex-direction: column; gap: 16px; }
.gm-findus__hour { display: flex; align-items: center; gap: 16px; }
.gm-findus__hour-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--fu-gold);
    border: 1px solid var(--fu-border-gold);
}
.gm-findus__hour-body { display: flex; flex-direction: column; gap: 2px; }
.gm-findus__hour-label { font-family: var(--fu-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fu-gold); }
.gm-findus__hour-time { font-family: var(--fu-sans); font-size: 16px; color: var(--fu-text-white); }

/* ── Band 2: map + location details ── */
.gm-findus__location {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(22px, 2.6vw, 44px);
    align-items: stretch;
    margin-top: clamp(22px, 2.6vw, 40px);
    padding: 0;
    overflow: hidden;
    border-radius: var(--fu-radius);
    border: 1px solid var(--fu-border);
    background: var(--fu-card);
}

.gm-findus__map {
    position: relative;
    align-self: stretch;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    background: #F5F5F4;
}
.gm-findus__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.15) contrast(1.02);
}
.gm-findus__mapcard {
    position: absolute;
    top: 22px; left: 22px;
    max-width: 250px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--fu-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.gm-findus__mapcard-title { font-family: var(--fu-sans); font-size: 15px; font-weight: 700; color: var(--fu-text-white); }
.gm-findus__mapcard-addr { margin: 6px 0 10px; font-family: var(--fu-sans); font-size: 13px; line-height: 1.5; color: var(--fu-text-muted); white-space: pre-line; }
.gm-findus__mapcard-link { font-family: var(--fu-sans); font-size: 13px; font-weight: 600; color: var(--fu-gold); text-decoration: none; }
.gm-findus__mapcard-link:hover { color: var(--fu-gold-light); text-decoration: underline; }
.gm-findus__map-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fu-text-dim); font-size: 14px; text-align: center; padding: 24px; }

.gm-findus__details { align-self: center; padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 32px) clamp(24px, 2.6vw, 36px) 0; }
.gm-findus__details-title {
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    font-family: var(--fu-serif);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--fu-text-white);
}
/* 2×2 grid of equal detail cells */
.gm-findus__detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2vw, 30px);
}
.gm-findus__detail { display: flex; align-items: flex-start; gap: 16px; }
@media (max-width: 480px) {
    .gm-findus__detail-grid { grid-template-columns: 1fr; }
}
.gm-findus__detail-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 15px;
    color: var(--fu-gold);
    border: 1px solid var(--fu-border-gold);
}
.gm-findus__detail-body { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.gm-findus__detail-label { font-family: var(--fu-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fu-gold); }
.gm-findus__detail-text { font-family: var(--fu-sans); font-size: 14px; line-height: 1.5; color: var(--fu-text-white); white-space: pre-line; }
.gm-findus__detail-text a { color: inherit; text-decoration: none; }
.gm-findus__detail-text a:hover { color: var(--fu-gold); }

/* ── Responsive ── */
@media (max-width: 860px) {
    .gm-findus__band { grid-template-columns: 1fr; }
    .gm-findus__band-media { min-height: 260px; order: -1; }
    .gm-findus__location { grid-template-columns: 1fr; }
    .gm-findus__map { min-height: 240px; }
    .gm-findus__details { padding: clamp(20px, 5vw, 26px); }
}
@media (max-width: 480px) {
    .gm-findus__mapcard { left: 14px; top: 14px; max-width: calc(100% - 28px); }
}

/* getme-css-bundle:end css/commerce/sections/find-us.css */


/* getme-css-bundle: css/commerce/sections/contact-form.css */
/* ════════════════════════════════════════════════════════════════════
   contact-form — heading band + GetMe forms widget mount.
   Namespace: --cf-*   Scope: .gm-contactform
   The form internals are rendered by GetmeForms; only the frame and a
   few inherited typographic tokens are styled here.
   ════════════════════════════════════════════════════════════════════ */
.gm-contactform {
    --cf-max: 760px;
    --cf-align: center;
    --cf-card: #FFFFFF;
    --cf-gold: var(--gm-primary, #0d0d0d);
    --cf-text: #2A231E;
    --cf-text-muted: #6E645A;
    --cf-border: rgba(0, 0, 0, 0.10);
    --cf-radius: 16px;
    --cf-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --cf-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    color: var(--cf-text-muted);
    margin-top: 50px;
}
/* On a phone the section's lead and .gm-main's top padding stack to ~92px
   under the header — about a fifth of the screen before the first word. Both
   halves are halved: 25px here, and the page padding is cancelled by the same
   amount, which lands the eyebrow at ~46px. */
@media (max-width: 760px) {
    .gm-contactform {
        /* 25px of its own lead, minus half the page padding above it — the
           two together are what made 92px. Read from the same variable the
           padding uses, so they stay in step if it is ever retuned. */
        margin-top: calc(25px - (var(--gm-main-padding-top, 42px) / 2));
    }
}

.gm-contactform__inner {
    max-width: var(--cf-max);
    margin-inline: auto;
}

/* ── Heading ── */
.gm-contactform__head {
    text-align: var(--cf-align);
    margin-bottom: clamp(24px, 3vw, 40px);
}
.gm-contactform__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--cf-gold);
}
/* Flanking rule removed with the shared heading recipe: the label is a
   plain line of small caps now, and the dashes were the loudest thing in
   the header. */
.gm-contactform__title {
    margin: 0 0 18px;
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(32px, 4vw, 56px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--cf-text);
}
/* Inherits the title colour: the heading reads as one unbroken line,
   matching the shared display recipe. */
.gm-contactform__accent { color: inherit; }
/* Centred by the head's text-align; the auto margins keep the measure
   centred when --cf-align is `center` and flush-left otherwise. */
.gm-contactform__intro {
    margin: 0 auto;
    max-width: 520px;
    font-family: var(--cf-sans);
    font-size: 15px;
    line-height: 1.65;
    color: var(--cf-text-muted);
}

/* ── Widget frame ── */
.gm-contactform__body {
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    background: var(--cf-card);
}

/* The widget renders its own controls; inherit the theme's type so the
   embedded form does not fall back to the browser default face. */
.gm-contactform__body input,
.gm-contactform__body textarea,
.gm-contactform__body select,
.gm-contactform__body button {
    font-family: var(--cf-sans);
}

.gm-contactform__empty {
    padding: 28px;
    text-align: center;
    font-family: var(--cf-sans);
    font-size: 14px;
    color: var(--cf-text-muted);
}

/* getme-css-bundle:end css/commerce/sections/contact-form.css */


/* getme-css-bundle: css/commerce/sections/cta-book.css */
/* ════════════════════════════════════════════════════════════════════
   cta-book — Closing "Ready to book" call-to-action band.
   Namespace: --cb-*   Scope: .gm-ctabook
   Background photo + dark overlay, editorial copy with gold accent, three
   trust features, and two stacked buttons. Token / setting driven.
   ════════════════════════════════════════════════════════════════════ */
.gm-ctabook {
    --cb-black: #080808;
    /* Section sits on near-black; the ink brand colour would be invisible,
     so the accent inverts to the light end of the same monochrome scale. */
    --cb-gold: #F7F5F0;
    --cb-gold-light: #FFFFFF;
    --cb-text-white: #F7F5F0;
    --cb-text-muted: #C7C2B8;
    --cb-border: rgba(255, 255, 255, 0.12);
    --cb-border-gold: rgba(255, 255, 255, 0.45);
    --cb-radius: 16px;
    --cb-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --cb-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    color: var(--cb-text-muted);
    /* Same gap the find-us section uses between its own bands. */
    margin-top: clamp(22px, 2.6vw, 40px);
}

.gm-ctabook__inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--cb-radius);
    border: 1px solid var(--cb-border);
    background: var(--cb-black);
}
.gm-ctabook__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* The video sits directly over the still and fades in once it is actually
   playing, so the band never shows an empty black box while the file loads.
   Both share the same box, so nothing shifts when it appears. */
.gm-ctabook__bg--video {
    z-index: 0;
    opacity: 0;
    transition: opacity var(--theme-animation-duration-slow, 700ms) var(--cb-ease, ease-in-out);
}
.gm-ctabook__bg--video.is-playing { opacity: 1; }
/* Motion is decoration here: reduced-motion visitors keep the still. */
@media (prefers-reduced-motion: reduce) {
    .gm-ctabook__bg--video { display: none; }
}
.gm-ctabook__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Two stacked veils used to compound to ~98% on the left and ~78% on the
       right, which erased the photograph — measured, the visible half came back
       at brightness 17/255. Eased so the room reads through on the right while
       the copy side stays deep enough for white type (19.8:1 measured). */
    background:
        linear-gradient(90deg, rgba(8, 8, 8, 0.90) 0%, rgba(8, 8, 8, 0.84) 42%, rgba(8, 8, 8, 0.50) 72%, rgba(8, 8, 8, 0.30) 100%),
        linear-gradient(0deg, rgba(8, 8, 8, 0.25), rgba(8, 8, 8, 0.25));
}

.gm-ctabook__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(28px, 3vw, 60px);
    align-items: center;
    padding: clamp(34px, 4vw, 64px);
}

/* ── Copy ── */
.gm-ctabook__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--cb-gold);
}
/* Flanking rule removed with the shared heading recipe: the label is a
   plain line of small caps now, and the dashes were the loudest thing in
   the header. */
.gm-ctabook__title {
    margin: 0 0 18px;
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(34px, 4.4vw, 64px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--cb-text-white);
}
/* Inherits the title colour: the heading reads as one unbroken line,
   matching the shared display recipe. */
.gm-ctabook__accent { color: inherit; }
.gm-ctabook__intro {
    margin: 0 0 30px;
    max-width: 460px;
    font-family: var(--cb-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--cb-text-muted);
}

/* ── Trust features ── */
.gm-ctabook__features { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.gm-ctabook__feature {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px clamp(16px, 1.6vw, 26px);
}
.gm-ctabook__feature:first-child { padding-left: 0; }
.gm-ctabook__feature + .gm-ctabook__feature { border-left: 1px solid var(--cb-border); }
.gm-ctabook__feature-icon {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--cb-gold);
    border: 1px solid var(--cb-border-gold);
}
.gm-ctabook__feature-label {
    font-family: var(--cb-sans);
    font-size: 14px;
    line-height: 1.3;
    color: var(--cb-text-white);
    white-space: pre-line;
}

/* ── Actions ── */
.gm-ctabook__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    min-width: 380px;
}
/* Shape and colour come from the site button system (.gm-cta +
   .gm-cta--on-dark). Only this section's voice stays: its sans and the wide
   uppercase tracking that matches the eyebrow above the band. */
.gm-ctabook__btn {
    font-family: var(--cb-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gm-ctabook__btn i:last-child { margin-left: auto; }
/* The primary reads solid rather than ghosted: it closes the page, so it
   carries more weight than the outline beside it. Everything else — size,
   radius, motion — still comes from the shared shape. */
.gm-ctabook__btn--primary {
    background: #FFFFFF;
    color: var(--gm-button-bg, #0d0d0d);
    border-color: #FFFFFF;
}
.gm-ctabook__btn--primary:hover { background: #F0EDE7; border-color: #F0EDE7; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .gm-ctabook__content { grid-template-columns: 1fr; }
    .gm-ctabook__overlay { background: linear-gradient(0deg, rgba(8,8,8,0.9) 30%, rgba(8,8,8,0.6) 100%); }
    .gm-ctabook__actions { min-width: 0; }
}
@media (max-width: 560px) {
    .gm-ctabook__content { padding: clamp(22px, 6vw, 32px); }
    /* Keep both features side by side on phones. */
    .gm-ctabook__features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .gm-ctabook__feature { padding: 0; }
    .gm-ctabook__feature:first-child { padding-left: 0; }
    .gm-ctabook__feature + .gm-ctabook__feature { border-left: 1px solid var(--cb-border); padding-left: 12px; }
    .gm-ctabook__feature-icon { width: 38px; height: 38px; font-size: 14px; }
    .gm-ctabook__feature-label { font-size: 13px; }
    .gm-ctabook__btn { padding: 16px 22px; font-size: 14px; }
}

/* getme-css-bundle:end css/commerce/sections/cta-book.css */


/* getme-css-bundle: css/commerce/sections/services-list.css */
/* ════════════════════════════════════════════════════════════════════
   services-list — Editorial services list for the Services page.
   Namespace: --sv-*   Scope: .gm-services
   Header with a decorative right-side photo + amber glow behind the title,
   numbered service rows (thumb, title, price, CTA), and a closing booking bar.
   ════════════════════════════════════════════════════════════════════ */
.gm-services {
    --sv-black: #080808;
    --sv-card: #0E0E0E;
    --sv-gold: #F7F5F0;
    --sv-gold-light: var(--gm-primary, #0d0d0d);
    --sv-text-white: #F7F5F0;
    --sv-text-muted: #B7B2A8;
    --sv-text-dim: #8F8A80;
    --sv-border: rgba(255, 255, 255, 0.10);
    --sv-border-gold: rgba(255, 255, 255, 0.42);
    --sv-radius: 14px;
    --sv-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sv-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

    color: var(--sv-text-muted);
}

/* ── Header ── */
.gm-services__head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--sv-radius);
    min-height: 220px;
    display: flex;
    align-items: center;
    margin-bottom: clamp(22px, 2.6vw, 36px);
}
.gm-services__head-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Focus on the tools (top of the frame). Mirrored so the tools sit on the
       right while the empty marble falls under the text scrim on the left. */
    object-position: center 30%;
    transform: scaleX(-1);
    z-index: 0;
}
.gm-services__head-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* amber glow behind the title */
        radial-gradient(60% 120% at 8% 45%, rgba(13, 13, 13, 0.22), rgba(13, 13, 13, 0) 55%),
        /* dark-to-clear so copy stays readable on the left */
        linear-gradient(90deg, var(--sv-black) 26%, rgba(8, 8, 8, 0.78) 48%, rgba(8, 8, 8, 0.25) 74%, rgba(8, 8, 8, 0) 100%);
}
.gm-services__head-content {
    position: relative;
    z-index: 2;
    padding: clamp(26px, 3vw, 46px);
    max-width: 560px;
}
.gm-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--sv-gold);
}
/* Flanking rule removed with the shared heading recipe: the label is a
   plain line of small caps now, and the dashes were the loudest thing in
   the header. */
.gm-services__title {
    margin: 0 0 14px;
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--sv-text-white);
}
.gm-services__intro {
    margin: 0;
    max-width: 360px;
    font-family: var(--sv-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sv-text-muted);
}

.gm-services__empty { font-family: var(--sv-sans); color: var(--sv-text-dim); padding: 40px 0; text-align: center; }

/* ── Service rows ── */
.gm-services__list { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 16px); }
.gm-services__row {
    display: grid;
    grid-template-columns: 56px 128px minmax(0, 1fr) 56px auto auto;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
    padding: 16px clamp(16px, 1.8vw, 24px);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    background: var(--sv-card);
    transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.gm-services__row:hover { border-color: var(--sv-border-gold); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4); }

/* Whole-row link (row_link_whole): a stretched anchor covers the row so the
   entire card is one click target, pointing at the same href as the button. */
.gm-services__row--linked { position: relative; cursor: pointer; }
.gm-services__rowlink {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    text-decoration: none;
}
.gm-services__rowlink:focus-visible { outline: 2px solid var(--sv-gold); outline-offset: 3px; }
/* Content sits above the anchor visually but passes clicks through to it. */
.gm-services__row--linked > *:not(.gm-services__rowlink) { position: relative; z-index: 2; pointer-events: none; }

.gm-services__num { font-family: var(--sv-serif); font-size: clamp(24px, 2.4vw, 34px); color: var(--sv-gold); line-height: 1; text-align: center; }
.gm-services__thumb {
    width: 128px; height: 84px;
    border-radius: 10px;
    object-fit: cover;
    background: #141414;
    border: 1px solid var(--sv-border);
}
.gm-services__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gm-services__name { font-family: var(--sv-serif); font-size: clamp(17px, 1.4vw, 21px); color: var(--sv-text-white); }
.gm-services__desc { font-family: var(--sv-sans); font-size: 13px; line-height: 1.5; color: var(--sv-text-muted); }
.gm-services__line { display: flex; align-items: center; color: var(--sv-text-dim); }
.gm-services__line::before { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--sv-border-gold)); }
.gm-services__line i { margin-left: 2px; font-size: 12px; color: var(--sv-gold); }
.gm-services__price { font-family: var(--sv-sans); font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; color: var(--sv-gold); white-space: nowrap; }
/* Shape and colour come from the site button system (.gm-cta + .gm-cta--ink).
   This one sits inside a table row rather than under a heading, so it runs at
   the compact size — the same control, one step down. */
.gm-services__btn {
    font-family: var(--sv-sans);
    white-space: nowrap;
}

/* ── Pagination ── */
.gm-services__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: clamp(22px, 2.6vw, 34px);
    border-top: 1px solid var(--sv-border);
}
.gm-services__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 13px;
    border-radius: 10px;
    font-family: var(--sv-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--sv-text-muted);
    border: 1px solid var(--sv-border);
    background: rgba(255, 255, 255, 0.02);
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.gm-services__page:hover { border-color: var(--sv-border-gold); color: var(--sv-gold); transform: translateY(-1px); }
.gm-services__page.is-active {
    background: linear-gradient(180deg, var(--sv-gold-light), var(--sv-gold));
    color: #17120a;
    border-color: var(--sv-gold);
    box-shadow: 0 6px 18px rgba(13, 13, 13, 0.28);
    cursor: default;
}
.gm-services__page.is-active:hover { transform: none; }
.gm-services__page--nav { color: var(--sv-gold); font-size: 13px; }
.gm-services__page--nav:hover { background: var(--sv-gold); color: #17120a; border-color: var(--sv-gold); }
.gm-services__page.is-disabled { opacity: 0.35; pointer-events: none; color: var(--sv-text-dim); }

/* ── Closing booking bar ── */
.gm-services__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    /* Moved down; top gap balanced with the container's bottom padding (~72px). */
    margin-top: clamp(44px, 5vw, 72px);
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.gm-services__cta-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.gm-services__cta-icon {
    flex: none;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 19px;
    color: var(--sv-gold);
    border: 1px solid var(--sv-border-gold);
}
.gm-services__cta-text { display: flex; flex-direction: column; gap: 3px; }
.gm-services__cta-title { font-family: var(--sv-sans); font-size: 17px; font-weight: 700; color: var(--sv-text-white); }
.gm-services__cta-sub { font-family: var(--sv-sans); font-size: 14px; color: var(--sv-text-muted); }
.gm-services__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border-radius: 8px;
    font-family: var(--sv-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #17120a;
    background: linear-gradient(180deg, var(--sv-gold-light), var(--sv-gold));
    border: 1px solid var(--sv-gold);
    transition: filter 200ms ease, transform 200ms ease;
}
.gm-services__cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Responsive ── */
@media (max-width: 860px) {
    .gm-services__row {
        grid-template-columns: 44px 96px minmax(0, 1fr);
        grid-template-areas:
            "num thumb body"
            "cta cta cta";
        row-gap: 14px;
    }
    .gm-services__num { grid-area: num; }
    .gm-services__thumb { grid-area: thumb; width: 96px; height: 72px; }
    .gm-services__body { grid-area: body; }
    .gm-services__line { display: none; }
    .gm-services__price, .gm-services__btn { grid-area: cta; }
    .gm-services__row > .gm-services__price { justify-self: start; align-self: center; }
    .gm-services__row > .gm-services__btn { justify-self: end; }
    /* place price + button on one shared row */
    .gm-services__row {
        grid-template-areas:
            "num thumb body"
            "price price btn";
    }
    .gm-services__price { grid-area: price; }
    .gm-services__btn { grid-area: btn; }
}
@media (max-width: 480px) {
    .gm-services__row { grid-template-columns: 36px 76px minmax(0, 1fr); }
    .gm-services__thumb { width: 76px; height: 64px; }
    .gm-services__cta { justify-content: center; }
    .gm-services__cta-btn { flex: 1 1 auto; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   Services page — restyle the CONTRACT-DRIVEN service-listing section into
   the editorial numbered list (header with amber glow + tools photo, rows).
   Data stays live (commerce.services / full catalog); this is visual only.
   ════════════════════════════════════════════════════════════════════ */
.gm-service-listing-section {
    --sv-gold: #F7F5F0;
    --sv-gold-light: var(--gm-primary, #0d0d0d);
    --sv-text-white: #F7F5F0;
    --sv-text-muted: #B7B2A8;
    --sv-border: rgba(255, 255, 255, 0.10);
    --sv-border-gold: rgba(255, 255, 255, 0.42);
    --sv-card: #0E0E0E;
    --sv-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sv-sans: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* Header — amber glow + flipped tools photo behind the title */
.gm-service-listing-section__head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 14px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: clamp(26px, 3vw, 46px);
    margin-bottom: clamp(22px, 2.6vw, 36px);
    background: #080808;
}
.gm-service-listing-section__head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #080808 url("") center 30% / cover no-repeat;
    transform: scaleX(-1);
}
.gm-service-listing-section__head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(60% 120% at 8% 45%, rgba(13, 13, 13, 0.22), rgba(13, 13, 13, 0) 55%),
        linear-gradient(90deg, #080808 26%, rgba(8, 8, 8, 0.78) 48%, rgba(8, 8, 8, 0.25) 74%, rgba(8, 8, 8, 0) 100%);
}
.gm-service-listing-section__head > * { position: relative; z-index: 2; }
.gm-service-listing-section__head .gm-kicker {
    font-family: var(--gm-eyebrow-font);
    font-size: var(--gm-eyebrow-size);
    font-weight: var(--gm-eyebrow-weight);
    letter-spacing: var(--gm-eyebrow-tracking);
    text-transform: var(--gm-eyebrow-transform);
    color: var(--sv-gold); margin-bottom: 12px;
}
.gm-service-listing-section__title {
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--sv-text-white); margin: 0 0 12px;
}
.gm-service-listing-section__intro {
    font-family: var(--sv-sans); font-size: 15px; line-height: 1.6;
    color: var(--sv-text-muted); max-width: 360px; margin: 0;
}

/* Grid -> vertical numbered list */
.gm-service-listing-section__grid {
    display: flex !important;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 16px);
    counter-reset: gmsvc;
    grid-template-columns: none !important;
}
.gm-service-listing-section__card {
    counter-increment: gmsvc;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
    padding: 16px clamp(16px, 1.8vw, 24px);
    border: 1px solid var(--sv-border);
    border-radius: 14px;
    background: var(--sv-card);
    transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.gm-service-listing-section__card:hover {
    border-color: var(--sv-border-gold);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}
.gm-service-listing-section__card::before {
    content: counter(gmsvc, decimal-leading-zero);
    flex: none;
    width: 48px;
    text-align: center;
    font-family: var(--sv-serif);
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--sv-gold);
    line-height: 1;
}
.gm-service-listing-section__card-link {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 22px);
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    padding: 0;
}
.gm-service-listing-section__card-link > img,
.gm-service-listing-section__placeholder {
    flex: none;
    width: 128px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    background: #141414;
    border: 1px solid var(--sv-border);
}
.gm-service-listing-section__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
    align-items: flex-start;
}
.gm-service-listing-section__body h3 {
    margin: 0;
    font-family: var(--sv-serif);
    font-size: clamp(17px, 1.4vw, 21px);
    color: var(--sv-text-white);
}
.gm-service-listing-section__body p {
    margin: 0;
    font-family: var(--sv-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--sv-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gm-service-listing-section__price-stack { flex-direction: row; align-items: baseline; gap: 8px; margin-top: 2px; }
.gm-service-listing-section__price { color: var(--sv-gold) !important; font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); }
.gm-service-listing-section__compare-price { color: var(--sv-text-muted); text-decoration: line-through; font-size: 13px; }
.gm-service-listing-section__actions { flex: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.gm-service-listing-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 8px;
    font-family: var(--sv-sans);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--sv-text-white);
    border: 1px solid var(--sv-border-gold);
    background: transparent;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.gm-service-listing-section__cta:hover { background: var(--sv-gold); color: #17120a; border-color: var(--sv-gold); }
.gm-service-listing-section__badge {
    background: var(--sv-gold); color: #17120a; font-weight: 700; font-size: 11px;
    padding: 3px 9px; border-radius: 999px; align-self: center;
}

@media (max-width: 860px) {
    .gm-service-listing-section__card { flex-wrap: wrap; }
    .gm-service-listing-section__card-link { flex: 1 1 100%; order: 1; }
    .gm-service-listing-section__card::before { order: 0; width: auto; }
    .gm-service-listing-section__actions { order: 2; margin-left: auto; }
    .gm-service-listing-section__card-link > img,
    .gm-service-listing-section__placeholder { width: 96px; height: 72px; }
}


/* Services page: the service-listing is present only to trigger full-catalog
   data provisioning; the visible design is rendered by .gm-services. Hide it. */
.gm-service-listing-section { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   Light theme — the header stays a dark photo banner; the service ROWS,
   pagination and booking bar sit on the cream page (light cards, dark text).
   ════════════════════════════════════════════════════════════════════ */
.gm-services__row { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.12); }
.gm-services__row:hover { border-color: rgba(181, 135, 42, 0.5); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10); }
.gm-services__num { color: var(--gm-primary, #0d0d0d); }
.gm-services__thumb { background: #F5F5F4; border-color: rgba(0, 0, 0, 0.10); }
.gm-services__name { color: #2A231E; }
.gm-services__desc { color: #6E645A; }
.gm-services__price { color: var(--gm-primary, #0d0d0d); }
.gm-services__line { color: #9A8F82; }
.gm-services__line i { color: var(--gm-primary, #0d0d0d); }
.gm-services__btn { color: #2A231E; border-color: rgba(181, 135, 42, 0.5); }
.gm-services__btn i { color: var(--gm-primary, #0d0d0d); }
.gm-services__btn:hover { background: #F7F5F0; color: #FFFFFF; border-color: #F7F5F0; }
.gm-services__btn:hover i { color: #FFFFFF; }
.gm-services__cta { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.12); }
.gm-services__cta-title { color: #2A231E; }
.gm-services__cta-sub { color: #6E645A; }
.gm-services__pagination { border-top-color: rgba(0, 0, 0, 0.12); }
.gm-services__page { background: #FFFFFF; border-color: rgba(0, 0, 0, 0.12); color: #6E645A; }
.gm-services__page:hover { border-color: rgba(181, 135, 42, 0.5); color: var(--gm-primary, #0d0d0d); }
.gm-services__empty { color: #9A8F82; }

/* getme-css-bundle:end css/commerce/sections/services-list.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: var(--gm-on-primary, #0d0d0d);
    --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);
    --tw-media-radius: 22px;
    --tw-ease: var(--theme-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));
    --tw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    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);
    position: relative;
}

/* A very soft warm wash behind the media side — enough to separate the section
   from the flat cream page without becoming a visible band. */
.gm-text-with-image-section--has-wash::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 8%;
    bottom: 8%;
    width: min(46%, 620px);
    border-radius: 40px;
    background: color-mix(in srgb, var(--gm-primary) 9%, transparent);
    pointer-events: none;
}
.gm-text-with-image-section--has-wash.gm-text-with-image-section--image-left::before { left: 0; }
.gm-text-with-image-section--has-wash.gm-text-with-image-section--image-right::before { right: 0; }
/* Content sits above the wash. */
.gm-text-with-image-section__inner { position: relative; z-index: 1; }

/* ── Swap deck ──
   Two fixed slots — the front frame and the back panel inside the tinted
   shape — and a deck of photographs that rotates between them, the way
   Cmd+Tab cycles windows. Both slots render the same deck; each image is
   visible in the back exactly one interval after it leaves the front, so a
   picture appears to travel backwards while the next one steps forward.

   Nothing about the layout moves: the frames stay put, only the occupants
   change. That is what keeps the section from jumping every few seconds. */
.gm-text-with-image-section__wash {
    position: absolute;
    z-index: 0;
    top: 8%;
    bottom: 8%;
    width: min(46%, 620px);
    border-radius: 40px;
    overflow: hidden;
    pointer-events: none;
}
.gm-text-with-image-section--image-left .gm-text-with-image-section__wash { left: 0; }
.gm-text-with-image-section--image-right .gm-text-with-image-section__wash { right: 0; }

/* Deck defaults live on the section so both slots inherit the same numbers. */
.gm-text-with-image-section {
    --tw-deck-count: 1;
    --tw-deck-cycle: 5s;
    --tw-deck-back-opacity: 0.55;
    /* Decelerating curve: a swap should arrive softly, not stop dead. A
       standard ease reads mechanical at this size. */
    --tw-deck-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* How far a picture travels between the two slots, and which way. The
       back panel sits outboard of the frame, so the sign flips with the
       layout — otherwise the photo would slide toward the copy instead of
       toward the panel it is heading for. */
    --tw-deck-shift: 14%;
    --tw-deck-dir: 1;
}
.gm-text-with-image-section--image-left { --tw-deck-dir: -1; }

/* Shared timing for every deck member, front and back alike. */
.gm-text-with-image-section__wash-slide,
.gm-text-with-image-section__deck-img {
    animation-duration: var(--tw-deck-cycle);
    animation-iteration-count: infinite;
    animation-timing-function: var(--tw-deck-ease);
}

/* ── Back slot ── */
.gm-text-with-image-section__wash-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
}

/* ── Front slot ──
   The first image is in normal flow and gives the frame its height; the rest
   are absolutely positioned over it. Sizing is inherited from the base
   img rule further down, so ratio settings keep working. */
.gm-text-with-image-section__deck-img--stacked {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
}
.gm-text-with-image-section__frame { position: relative; }

/* Each deck member takes its turn one interval after the previous one. The
   back slot runs the same schedule shifted a whole interval later, which is
   what produces the hand-off between the two slots. */
.gm-text-with-image-section__deck-img:nth-child(2),
.gm-text-with-image-section__wash-slide:nth-child(1) {
    animation-delay: calc(var(--tw-deck-cycle) / var(--tw-deck-count) * -1);
}
.gm-text-with-image-section__deck-img:nth-child(3),
.gm-text-with-image-section__wash-slide:nth-child(2) {
    animation-delay: calc(var(--tw-deck-cycle) / var(--tw-deck-count) * -2);
}
.gm-text-with-image-section__deck-img:nth-child(4),
.gm-text-with-image-section__wash-slide:nth-child(3) {
    animation-delay: calc(var(--tw-deck-cycle) / var(--tw-deck-count) * -3);
}
.gm-text-with-image-section__wash-slide:nth-child(4) {
    animation-delay: calc(var(--tw-deck-cycle) / var(--tw-deck-count) * -4);
}

/* Slot boundaries are a fraction of the cycle, so the keyframes differ per
   deck size. One shared keyframe would leave a gap at every other count. */
.gm-text-with-image-section__frame[data-deck-count="2"] .gm-text-with-image-section__deck-img { animation-name: gm-tw-front-2; }
.gm-text-with-image-section__frame[data-deck-count="3"] .gm-text-with-image-section__deck-img { animation-name: gm-tw-front-3; }
.gm-text-with-image-section__frame[data-deck-count="4"] .gm-text-with-image-section__deck-img { animation-name: gm-tw-front-4; }
.gm-text-with-image-section__wash[data-deck-count="2"] .gm-text-with-image-section__wash-slide { animation-name: gm-tw-back-2; }
.gm-text-with-image-section__wash[data-deck-count="3"] .gm-text-with-image-section__wash-slide { animation-name: gm-tw-back-3; }
.gm-text-with-image-section__wash[data-deck-count="4"] .gm-text-with-image-section__wash-slide { animation-name: gm-tw-back-4; }

/* The travel itself. A picture leaving the front shrinks and slides toward
   the back panel while dimming — it is going somewhere, not dissolving. The
   picture arriving at the front does the reverse. Because the two slots run
   the same schedule one interval apart, the outgoing and incoming halves
   line up and read as a single object changing places.

   Each keyframe is written once per deck size because the slot boundary is a
   fraction of the cycle; the shape of the motion is identical. */
@keyframes gm-tw-front-2 {
    0%, 40% { opacity: 1; transform: translateX(0) scale(1); }
    50%, 90% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir))) scale(0.88); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gm-tw-front-3 {
    0%, 26% { opacity: 1; transform: translateX(0) scale(1); }
    33.33%, 93% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir))) scale(0.88); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gm-tw-front-4 {
    0%, 19% { opacity: 1; transform: translateX(0) scale(1); }
    25%, 94% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir))) scale(0.88); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Back: holds at reduced strength in its own slot, then pulls inward and
   grows as it steps forward — the mirror of the front's retreat, so the
   handover looks like one picture passing another. */
@keyframes gm-tw-back-2 {
    0%, 40% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
    50%, 90% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir) * -1)) scale(1.1); }
    100% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
}
@keyframes gm-tw-back-3 {
    0%, 26% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
    33.33%, 93% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir) * -1)) scale(1.1); }
    100% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
}
@keyframes gm-tw-back-4 {
    0%, 19% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
    25%, 94% { opacity: 0; transform: translateX(calc(var(--tw-deck-shift) * var(--tw-deck-dir) * -1)) scale(1.1); }
    100% { opacity: var(--tw-deck-back-opacity); transform: translateX(0) scale(1); }
}

/* Motion here is decoration — park the deck on its opening arrangement. */
@media (prefers-reduced-motion: reduce) {
    .gm-text-with-image-section__wash-slide,
    .gm-text-with-image-section__deck-img {
        animation: none;
        opacity: 0;
        transform: none;
    }
    .gm-text-with-image-section__deck-img:first-child { opacity: 1; }
    .gm-text-with-image-section__wash-slide:nth-child(2) {
        opacity: var(--tw-deck-back-opacity);
    }
}

/* When a badge overhangs the photo, the section needs matching clearance so it
   never collides with whatever follows. */
.gm-text-with-image-section--has-badge {
    padding-bottom: calc(var(--tw-section-padding-block) + 30px);
}

/* Media column runs slightly wider than the copy: the photo carries the
   section, and an even 1fr/1fr split made both halves feel undersized. */
.gm-text-with-image-section__inner {
    align-items: center;
    display: grid;
    gap: clamp(36px, 4vw, 52px);
    grid-template-columns: 1.12fr 1fr;
    margin: 0 auto;
    max-width: 1200px;
}

/* Image-left flips the visual order with `direction: rtl`. The columns are
   asymmetric, so the track list must flip too — otherwise the WIDER track
   stays under the copy and the photo ends up in the narrow one. */
.gm-text-with-image-section--image-left .gm-text-with-image-section__inner {
    direction: rtl;
    grid-template-columns: 1fr 1.12fr;
}
.gm-text-with-image-section--image-left .gm-text-with-image-section__inner > * { direction: ltr; }

.gm-text-with-image-section__copy { min-width: 0; }
/* Kicker sits further from the title (more air above the headline) while the
   title→body gap tightens, so the heading and its paragraph read as one unit. */
.gm-text-with-image-section__copy .gm-kicker {
    color: var(--tw-kicker-color);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    margin-bottom: 22px;
    text-transform: uppercase;
}
.gm-text-with-image-section__title {
    font-family: var(--gm-display-font);
    font-weight: var(--gm-display-weight);
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: var(--gm-display-leading);
    letter-spacing: var(--gm-display-tracking);
    text-transform: var(--gm-display-transform);
    color: var(--tw-title-color);
    margin: 0 0 14px;
    /* Encourages a 2-line headline without hard-wrapping longer titles used by
       other instances of this section. */
    max-width: 20ch;
    text-wrap: balance;
}
.gm-text-with-image-section__body {
    color: var(--tw-text-color);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 30px;
    /* Shorter measure reads as editorial; a full-column paragraph reads as a
       template. */
    max-width: 520px;
    opacity: 0.82;
}
/* Shape and colour come from the site button system (.gm-cta + .gm-cta--ink).
   Only the trailing arrow — this section's own flourish — stays here. */
.gm-text-with-image-section__cta::after {
    content: "→";
    font-size: 15px;
    line-height: 1;
    transition: transform var(--theme-animation-duration-normal, 240ms) var(--tw-ease-out);
}
.gm-text-with-image-section__cta:hover::after { transform: translateX(4px); }

/* The media column is a positioning context only — the badge overhangs its
   edge, so clipping lives on the inner frame instead. */
.gm-text-with-image-section__media {
    position: relative;
}
.gm-text-with-image-section__frame {
    border-radius: var(--tw-media-radius, 22px);
    /* Softer and warm-tinted rather than the heavy neutral default (§9.5). */
    box-shadow: 0 16px 40px rgba(35, 25, 15, 0.12);
    overflow: hidden;
}
.gm-text-with-image-section__media img,
.gm-text-with-image-section__placeholder {
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* ── Stat badge ──
   Overlaps the lower edge of the photo so the two read as one composition. */
/* Wears the hero button's look — the translucent white frame of
   .gm-cta--on-dark — because it sits on a photo, where a solid ink block reads
   as a heavier element than the buttons it shares the page with.
   Deliberately NOT a .gm-cta: this is a caption, not a control. It carries no
   href, no hover lift, no pointer cursor, so it must not announce itself as a
   button to a reader or to assistive tech. Only the surface is borrowed; the
   values are restated here rather than pulled from --gm-cta-* so that retuning
   the site's real buttons never silently resizes this label. */
.gm-text-with-image-section__badge {
    /* Darker than the hero's 10% white fill, on purpose. The hero buttons sit
       over a dedicated copyshade gradient that guarantees their contrast; this
       badge has no scrim under it and overhangs the photo edge onto the page
       background, so a 10% wash would leave white type floating over whatever
       the picture happens to be. A dark translucent ground holds the text on
       any frame while keeping the same glass-and-hairline read. */
    /* .55 rather than .42: measured against the brightest frame a photo can
       present, .42 leaves the 11px uppercase label at 3.6:1. This holds 4.7:1
       there and climbs on darker pictures, so legibility never depends on
       which image the editor picks. */
    --tw-badge-bg: rgba(20, 15, 10, 0.55);
    --tw-badge-text: #FFFFFF;
    position: absolute;
    bottom: -26px;
    left: 38px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 22px;
    border-radius: 7px;
    background: var(--tw-badge-bg);
    border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: var(--tw-badge-text);
    /* No drop shadow: it belonged to the solid ink block and under a
       translucent frame it reads as a card floating off the photo. The hero
       buttons this now matches carry none either. */
}
.gm-text-with-image-section__badge-value {
    font-family: var(--tw-title-font);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
}
.gm-text-with-image-section__badge-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    opacity: 0.82;
    text-transform: uppercase;
}
.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) {
    /* Single column: both track lists collapse, and the rtl flip is undone so
       the image leads. */
    .gm-text-with-image-section__inner,
    .gm-text-with-image-section--image-left .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; }
    /* The wash is a desktop-only flourish; stacked it would sit behind text.
       The backdrop slides go with it — photos under body copy read as noise. */
    .gm-text-with-image-section--has-wash::before,
    .gm-text-with-image-section__wash { display: none; }
    .gm-text-with-image-section__title { max-width: none; }
    .gm-text-with-image-section__body { max-width: none; }
}
@media (max-width: 640px) {
    /* Inline padding drops to zero on phones so the media reaches the same left
       and right line as the sections around it. .gm-main already applies the
       page inset; the extra --gm-section-inline-padding (14–24px) layered on top
       of it was insetting this section alone, which read as a narrow image
       sitting inside a wider column next to the full-width gallery below.
       Vertical padding is unchanged. */
    .gm-text-with-image-section { padding: var(--tw-section-padding-block) 0; }
    /* Badge tucks inside the frame on phones — an overhang this size crowds a
       narrow viewport. */
    .gm-text-with-image-section__badge {
        bottom: 16px;
        left: 16px;
        padding: 12px 18px;
    }
    .gm-text-with-image-section__badge-value { font-size: 22px; }
    .gm-text-with-image-section--has-badge { padding-bottom: var(--tw-section-padding-block); }
}

@media (prefers-reduced-motion: reduce) {
    .gm-text-with-image-section__cta,
    .gm-text-with-image-section__cta::after { transition: none; }
    .gm-text-with-image-section__cta:hover { transform: none; }
    .gm-text-with-image-section__cta:hover::after { transform: none; }
}

/* 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: var(--gm-surface);
    --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(0, 0, 0, 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(0, 0, 0, 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/map.css */
/* ════════════════════════════════════════════════════════════════════
   map — Location section (embedded Google Map + contact info card).
   Namespace: --mp-*   Scope: .gm-map-section
   ════════════════════════════════════════════════════════════════════ */

.gm-map-section {
    --mp-section-bg: transparent;
    --mp-title-color: var(--gm-text);
    --mp-kicker-color: var(--gm-primary);
    --mp-card-bg: var(--gm-surface);
    --mp-border: var(--gm-border);
    --mp-map-height: 440px;
    --mp-section-padding-block: var(--theme-spacing-3xl, 64px);

    background: var(--mp-section-bg);
    color: var(--gm-text);
    font-family: var(--font-primary, sans-serif);
    padding-block: var(--mp-section-padding-block);
}

.gm-map-section__header {
    margin: 0 auto var(--theme-spacing-xl, 32px);
    max-width: 720px;
    text-align: center;
}

.gm-map-section__kicker {
    color: var(--mp-kicker-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.gm-map-section__title {
    color: var(--mp-title-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
}

.gm-map-section__intro {
    color: var(--gm-muted);
    font-size: 1rem;
    line-height: 1.65;
    margin: 12px auto 0;
    max-width: 600px;
}

.gm-map-section__body {
    display: grid;
    gap: var(--theme-spacing-lg, 24px);
    margin: 0 auto;
    max-width: var(--gm-page-max-width, 1180px);
}

.gm-map-section--layout-split .gm-map-section__body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ── Info card ── */
.gm-map-section__info {
    background: var(--mp-card-bg);
    border: 1px solid var(--mp-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 16px));
    box-shadow: var(--gm-card-shadow, none);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 28px;
}

.gm-map-section__info-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--mp-border);
    display: flex;
    gap: 16px;
    padding: 18px 0;
}
.gm-map-section__info-item:first-child { padding-top: 0; }
.gm-map-section__info-item:last-child { border-bottom: none; padding-bottom: 0; }

.gm-map-section__info-icon {
    align-items: center;
    background: var(--gm-primary-light, rgba(13, 13, 13, 0.12));
    border-radius: 12px;
    color: var(--gm-primary);
    display: flex;
    flex-shrink: 0;
    font-size: 1.15rem;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.gm-map-section__info-text h3 {
    color: var(--gm-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.gm-map-section__info-text p {
    color: var(--gm-text);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.gm-map-section__info-pre { white-space: pre-line; }

.gm-map-section__info-text a {
    color: var(--gm-text);
    text-decoration: none;
    transition: color 200ms ease;
}
.gm-map-section__info-text a:hover { color: var(--gm-primary); }

/* ── Map ── */
.gm-map-section__map {
    border-radius: var(--theme-media-radius, var(--theme-radius-lg, 16px));
    background: var(--gm-media-surface, var(--gm-surface));
    min-height: var(--mp-map-height);
    overflow: hidden;
}

.gm-map-section__map iframe {
    border: 0;
    display: block;
    height: 100%;
    min-height: var(--mp-map-height);
    width: 100%;
}

.gm-map-section--grayscale .gm-map-section__map iframe {
    filter: grayscale(70%) contrast(1.05) brightness(0.92);
    transition: filter 400ms ease;
}
.gm-map-section--grayscale .gm-map-section__map:hover iframe {
    filter: grayscale(0%) contrast(1) brightness(1);
}

.gm-map-section__placeholder {
    align-items: center;
    color: var(--gm-muted);
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: var(--mp-map-height);
    padding: 32px;
    text-align: center;
}
.gm-map-section__placeholder i { color: var(--gm-primary); font-size: 2rem; }
.gm-map-section__placeholder p { margin: 0; max-width: 320px; }

@media (max-width: 860px) {
    .gm-map-section--layout-split .gm-map-section__body {
        grid-template-columns: 1fr;
    }
}

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


/* getme-css-bundle: css/commerce/sections/team.css */
/* ════════════════════════════════════════════════════════════════════
   team — Staff / team grid (barber-card style).
   Namespace: --tm-*   Scope: .gm-team-section
   ════════════════════════════════════════════════════════════════════ */

.gm-team-section {
    --tm-section-bg: transparent;
    --tm-title-color: var(--gm-text);
    --tm-kicker-color: var(--gm-primary);
    --tm-card-bg: var(--gm-surface);
    --tm-border: var(--gm-border);
    --tm-section-padding-block: var(--theme-spacing-3xl, 64px);
    --tm-grid-gap: var(--theme-spacing-lg, 24px);

    background: var(--tm-section-bg);
    color: var(--gm-text);
    font-family: var(--font-primary, sans-serif);
    padding-block: var(--tm-section-padding-block);
}

.gm-team-section__header {
    margin: 0 auto var(--theme-spacing-xl, 32px);
    max-width: 720px;
    text-align: center;
}

.gm-team-section__kicker {
    color: var(--tm-kicker-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.gm-team-section__title {
    color: var(--tm-title-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
}

.gm-team-section__intro {
    color: var(--gm-muted);
    font-size: 1rem;
    line-height: 1.65;
    margin: 12px auto 0;
    max-width: 600px;
}

.gm-team-section__grid {
    display: grid;
    gap: var(--tm-grid-gap);
    margin: 0 auto;
    max-width: var(--gm-page-max-width, 1180px);
}

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

.gm-team-section__card {
    background: var(--tm-card-bg);
    border: 1px solid var(--tm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 16px));
    box-shadow: var(--gm-card-shadow, none);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.gm-team-section__card:hover {
    border-color: var(--gm-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-8px);
}

.gm-team-section__media {
    background: var(--gm-media-surface, var(--gm-surface));
    height: 300px;
    overflow: hidden;
    position: relative;
}
.gm-team-section__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gm-team-section__placeholder {
    align-items: center;
    color: var(--gm-muted);
    display: flex;
    font-size: 4rem;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.gm-team-section__overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity 300ms ease;
}
.gm-team-section__card:hover .gm-team-section__overlay { opacity: 1; }

.gm-team-section__overlay-cta {
    align-items: center;
    background: var(--gm-primary);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, 8px));
    color: var(--gm-on-primary, #0d0d0d);
    display: inline-flex;
    font-weight: 700;
    min-height: 44px;
    padding: 0 24px;
    text-decoration: none;
    transition: transform 200ms ease;
}
.gm-team-section__overlay-cta:hover { transform: translateY(-2px); }

.gm-team-section__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
}

.gm-team-section__name {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.gm-team-section__role {
    color: var(--gm-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.gm-team-section__bio {
    color: var(--gm-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 6px 0 0;
}

.gm-team-section__social {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}

.gm-team-section__social-link {
    align-items: center;
    background: transparent;
    border: 1px solid var(--gm-primary);
    border-radius: 50%;
    color: var(--gm-primary);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
    width: 38px;
}
.gm-team-section__social-link:hover {
    background: var(--gm-primary);
    color: var(--gm-on-primary, #0d0d0d);
    transform: translateY(-2px);
}

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

/* getme-css-bundle:end css/commerce/sections/team.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: var(--gm-surface);
    --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(0, 0, 0, 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: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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: var(--gm-control-bg, var(--gm-surface));
    --nw-field-text: var(--gm-text);
    --nw-field-border: var(--gm-border);
    --nw-button-bg: var(--gm-primary);
    --nw-button-text: var(--gm-on-primary, #0d0d0d);
    --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; }
}

/* ── CSS-only fade rotator (slide mode replacement) ── */
.gm-announcement-bar__rotator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height matches the tallest item so bar doesn't jump */
    min-height: 1.4em;
}

.gm-announcement-bar__rot-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation-name: gm-ab-rot-fade;
    animation-duration: calc(var(--ab-dwell, 5s) * var(--ab-count, 1));
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* stagger each item by its index × dwell time */
    animation-delay: calc(var(--ab-i, 0) * var(--ab-dwell, 5s) * -1);
}

/* single message: just show it */
.gm-announcement-bar__rotator[data-count="1"] .gm-announcement-bar__rot-item {
    animation: none;
    opacity: 1;
    position: relative;
}

@keyframes gm-ab-rot-fade {
    /* visible window = 1/count of the total cycle */
    0%   { opacity: 1; }
    /* fade out just before the next one takes over */
    calc(100% / var(--ab-count) - 8%)  { opacity: 1; }
    calc(100% / var(--ab-count) - 2%)  { opacity: 0; }
    /* stay hidden for the rest of the cycle */
    95%  { opacity: 0; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-announcement-bar__rot-item { animation: none; opacity: 0; }
    .gm-announcement-bar__rot-item.is-first { opacity: 1; }
}

/* ── Phones ──
   The strip runs a third smaller here: at full size the messages crowd a narrow
   viewport and the bar starts competing with the header under it.
   Written against --ab-font-size rather than the item's `font-size` so the
   --font-sm / -md / -lg picker above still chooses the base size — this scales
   whatever the editor selected instead of pinning one value and silently
   disabling the control on phones. The step is applied to the token once, so
   the item, the separator and the slide all follow from the single rule. */
@media (max-width: 560px) {
    .gm-announcement-bar--font-sm { --ab-font-size: 9px; }
    .gm-announcement-bar--font-md { --ab-font-size: 10px; }
    .gm-announcement-bar--font-lg { --ab-font-size: 11px; }
    /* The nav chevrons are set in absolute px, so they do not follow the token
       and would tower over the smaller text if left alone. */
    .gm-announcement-bar__nav { font-size: 16px; }
}

/* getme-css-bundle:end css/commerce/sections/announcement-bar.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: var(--gm-on-primary, #0d0d0d);
    --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(0, 0, 0, 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: var(--gm-surface);
    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(0, 0, 0, 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: var(--gm-media-surface);
    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;
}

.gm-service-actions a:hover,
.gm-service-actions button:hover {
    background: var(--gm-commerce-action-hover);
    border-color: var(--gm-commerce-action-hover);
}

.gm-service-actions button:disabled,
.gm-service-actions [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.68;
}

@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.
       The core library 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: the library
       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);
    /* Secondary brand colour: the gold sampled from the logo, used for section
       eyebrows and title accents. The platform emits only the canonical
       --color-* surface (primary, bg, text, border) and there is no
       --color-accent to map from, so the literal is the source here.
       This is the darker end of the logo's gold because these eyebrows sit on
       white — the hero runs a lighter one (#C99A45) over its dark video. Same
       family, each legible on its own ground. */
    --gm-accent: #8F6A1F;
    --gm-accent-hover: #7A5A1A;
    --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)));
    /* WhatsApp brand green. The platform only emits the canonical --color-*
       surface (primary, bg, text, border), so there is no --color-whatsapp to
       map from; the header sets these inline from colors.whatsapp when present
       and these literals are the fallback. Off-palette on purpose — the green
       is the affordance. */
    --gm-whatsapp: #25D366;
    --gm-whatsapp-hover: #1DA851;
    --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-surface));
    --gm-dropdown-radius: var(--theme-dropdown-popup-radius, var(--gm-control-radius));

    --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);
    /* Global content inset — EQUAL left & right site-wide (right mirrors left).
       Hero copy sits at inset-start (3× gutter); everything else now matches on
       both sides for symmetric margins. */
    --gm-page-inset-start: calc(var(--gm-page-gutter) * 3);
    --gm-page-inset-end: var(--gm-page-inset-start);
}

/* Desktop container: 1440px max, 48px gutters (48px min between 1200–1600px). */
@media (min-width: 1200px) {
    :root {
        --gm-page-gutter: 48px;
    }
}

/* Large desktop: widen container to 1520px with 64px gutters. */
@media (min-width: 1600px) {
    :root {
        --gm-page-max-width: 1520px;
        --gm-page-gutter: 64px;
    }
}

/* Phones/tablets: symmetric gutters — the 3× left inset would crowd content. */
@media (max-width: 900px) {
    :root {
        --gm-page-inset-start: var(--gm-page-gutter);
    }
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-primary, sans-serif);
    background: var(--gm-bg);
    color: var(--gm-text);
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    background: var(--gm-bg);
    overflow-x: hidden;
}

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: 100%;
    box-sizing: border-box;
    margin: 0;
}

.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: clamp(10px, 1.6vw, 24px);
    /* Top gets +4px over the block base so the logo isn't glued to the viewport edge. */
    padding: calc(var(--gm-header-padding-block, 22px) * 0.2 + 4px) var(--gm-page-inset-end) calc(var(--gm-header-padding-block, 22px) * 0.2) var(--gm-page-inset-start);
    transition: background 320ms ease, backdrop-filter 320ms ease, -webkit-backdrop-filter 320ms ease, box-shadow 320ms ease;
}

/* Frosted glass: hovering the header blurs whatever sits behind it. */
.gm-header:hover {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* ── Sticky header ─────────────────────────────────────────────────────
   The announcement strip is a sibling that stays in normal flow, so it
   scrolls away while the header alone pins to the top — which is the
   behaviour asked for. `position: sticky` does this without JS and without
   removing the header from flow, so nothing below it jumps up by the
   header's height the way `fixed` would.

   z-index clears the hero's own layers: its tint and scrim sit at 3 inside
   the section, and the section creates its own stacking context, but the
   media block breaks out of the container edges — so the header needs to
   win against the section as a whole. */
.gm-header--sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Opaque only once it has left its resting place. At the top of the page the
   header keeps the transparent treatment it has today; the solid background
   and the hairline fade in together as it detaches, which is what reads as
   "smooth" rather than a hard swap.
   theme.js sets .is-stuck from an IntersectionObserver on a sentinel — a
   scroll listener would run on every frame for the same result. */
.gm-header--sticky.is-stuck {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.06);
}

/* The stacked desktop header is tall; tightening it once stuck keeps more of
   the page visible without the jump a height change would cause — padding and
   logo scale, both cheap to animate. */
@media (min-width: 761px) {
    .gm-header--sticky.gm-header--stacked {
        transition:
            padding 260ms var(--theme-animation-easing-standard, ease),
            background 260ms ease,
            box-shadow 260ms ease;
    }

    .gm-header--sticky.gm-header--stacked.is-stuck {
        padding-top: 10px;
        padding-bottom: 8px;
        gap: 8px;
    }

    .gm-header--sticky.gm-header--stacked .gm-brand-logo {
        transition: width 260ms var(--theme-animation-easing-standard, ease),
                    max-height 260ms var(--theme-animation-easing-standard, ease);
    }

    .gm-header--sticky.gm-header--stacked.is-stuck .gm-brand-logo {
        width: 150px;
        max-width: 150px;
        max-height: 60px;
    }
}

/* Motion here is decorative: the header still pins and still turns opaque,
   it just does not animate between the two states. */
@media (prefers-reduced-motion: reduce) {
    .gm-header--sticky,
    .gm-header--sticky .gm-brand-logo {
        transition: none;
    }
}

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

/* Wordmark is a wide lockup (~2.35:1) with a fine "HAIRDRESSER" line, so it
   needs more width than a compact mark to stay legible. The height cap keeps
   the bar from growing past the nav row on the widest breakpoints. */
.gm-brand-logo {
    width: 176px;
    max-width: 176px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 640px) {
    .gm-brand-logo {
        width: 148px;
        max-width: 148px;
    }
}

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

/* The wrapper exists only so the mobile drawer has one child to measure when
   it animates open. Everywhere else it dissolves, leaving the nav and the
   language switcher as direct flex children exactly as before. */
.gm-header-actions__inner {
    display: contents;
}

/* Phone-only contact shortcuts. Hidden by default and revealed in the mobile
   header block — on desktop the same actions already live in the nav, so a
   second phone/mail pair would just be noise. */
.gm-header-quick {
    display: none;
}

.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__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;
}

.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: clamp(12px, 1.08vw, 16px);
    gap: 7px;
    line-height: 1.2;
    min-height: 38px;
    padding: 9px clamp(7px, 0.9vw, 12px);
    text-decoration: none;
    box-shadow: var(--gm-button-shadow);
}

.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-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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        transform var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
    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);
}

/* Weight only. The outline colours are set once further down, in the block that
   also carries the .gm-header-scoped selectors — defining them here as well
   would leave two sources for the same properties. */
.gm-nav__link--outline,
.gm-nav__link--outline-primary,
.gm-header-cta--outline,
.gm-header-cta--outline-primary {
    font-weight: 700;
}

/* Book-now CTA: same button as the hero's "Book appointment"
   (.gm-hero-services__btn--primary) so the header and the hero read as one
   action. Colours come from the theme tokens the hero gold maps to:
   --gm-primary-dark == colors.primary_hover == the hero's --hsv-gold. */
.gm-nav__link--book,
.gm-header .gm-nav__link--book,
.gm-header-cta--book {
    background: var(--gm-primary-dark);
    border: 1px solid var(--gm-primary-dark);
    border-radius: 7px;
    color: var(--color-text-light, #ffffff);
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    letter-spacing: 0.01em;
    padding: 15px 26px;
    transition: background var(--theme-animation-duration-normal, 220ms) ease,
                border-color var(--theme-animation-duration-normal, 220ms) ease,
                color var(--theme-animation-duration-normal, 220ms) ease,
                transform var(--theme-animation-duration-normal, 220ms) ease;
}

.gm-nav__link--book:hover,
.gm-header .gm-nav__link--book:hover,
.gm-header-cta--book:hover {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--color-text-light, #ffffff);
    transform: translateY(-1px);
}

.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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        box-shadow var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        color var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.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: 0 0 0 3px color-mix(in srgb, var(--gm-control-focus) 14%, transparent);
}

.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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.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-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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        color var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        box-shadow var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
    width: 100%;
}

.gm-search-overlay__input::placeholder {
    color: var(--gm-muted);
}

.gm-search-overlay__input:focus {
    border-color: var(--gm-control-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-control-focus) 16%, transparent);
    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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        box-shadow var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        color var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
    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),
        0 0 0 3px color-mix(in srgb, var(--gm-control-focus) 16%, transparent);
    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(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        box-shadow var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

: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: 0 0 0 3px color-mix(in srgb, var(--gm-control-focus) 16%, transparent);
    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: 100%;
    box-sizing: border-box;
    margin: 0;
    /* Exposed as a variable so a full-bleed first section (the hero) can cancel
       exactly this much rather than guessing at a negative margin. */
    --gm-main-padding-top: 42px;
    padding: var(--gm-main-padding-top) var(--gm-page-inset-end) 72px var(--gm-page-inset-start);
}

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

.gm-kicker {
    color: var(--gm-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
}

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

.gm-button {
    align-items: center;
    background: var(--gm-primary);
    border: 1px solid var(--gm-primary);
    border-radius: var(--theme-radius-md);
    color: var(--gm-on-primary);
    display: inline-flex;
    font-weight: 700;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.gm-button:hover {
    background: var(--gm-primary-dark);
}

.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 {
    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;
}

.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-inset-end) clamp(28px, 4vw, 40px) var(--gm-page-inset-start);
    width: 100%;
}

.gm-footer__inner {
    margin: 0;
    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: 87px;
    max-width: min(300px, 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 {
    /* Hidden: the logo already carries the brand; no text name in the footer. */
    display: none;
}

.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(--transition-fast, 160ms ease), border-color var(--transition-fast, 160ms ease), background var(--transition-fast, 160ms ease);
    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: center;
    color: var(--gm-footer-muted-resolved);
    display: inline-flex;
    font-size: 13px;
    gap: 8px;
    text-decoration: none;
}

.gm-footer-powered strong {
    color: var(--gm-footer-accent-resolved);
    font-weight: 800;
}

/* GetMe wordmark next to "Powered by" — forced white for the dark footer. */
.gm-footer-powered__logo {
    height: 16px;
    width: auto;
    display: block;
    filter: none;               /* black wordmark shows as-is on the light footer */
    opacity: 0.55;
    transition: opacity 200ms ease;
}
.gm-footer-powered:hover .gm-footer-powered__logo { opacity: 0.85; }

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

@media (max-width: 760px) {
    /* Three-part row: hamburger, centred logo, contact icons. Grid rather than
       flex so the logo is centred on the VIEWPORT, not on the space left over
       between the two side groups — with flex it would drift whenever one side
       is wider than the other (one icon vs two). The side columns share a width
       (1fr) for the same reason. */
    .gm-header--mobile-menu {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
    }

    .gm-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Columns are assigned explicitly, not left to auto-placement: in the DOM
       the brand comes BEFORE the toggle, so auto-flow would push the hamburger
       past the logo into column 3. Placement is visual here, source order is
       not touched. */
    .gm-header--mobile-menu .gm-header-menu-toggle {
        display: inline-flex;
        grid-row: 1;
        grid-column: 1;
        /* Hard left. The border/box is dropped so it reads as the reference's
           bare glyph rather than a bordered button. */
        justify-self: start;
        border: 0;
        background: transparent;
        width: 34px;
        height: 34px;
    }

    /* Column 2 — the logo, centred by the grid itself. Height is left to the
       global rule so the bar keeps the height it always had. */
    .gm-header--mobile-menu .gm-brand {
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
        margin: 0;
    }

    /* The desktop lockup is anchored left inside its box; centred here, that
       anchor would push the artwork off-axis. */
    .gm-header--mobile-menu .gm-brand-logo {
        object-position: center;
    }


    /* Column 3 — contact icons, hard right. */
    .gm-header--mobile-menu .gm-header-quick {
        display: inline-flex;
        grid-row: 1;
        grid-column: 3;
        align-items: center;
        justify-self: end;
        gap: 14px;
    }

    .gm-header-quick__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        color: var(--gm-header-text, var(--gm-text));
        font-size: 17px;
        text-decoration: none;
    }
    .gm-header-quick__link:hover,
    .gm-header-quick__link:focus-visible {
        opacity: 0.65;
    }

    /* The drawer animates open instead of snapping. `display` cannot be
       transitioned, so the panel stays in the layout and its height is driven
       by a 0fr → 1fr grid row: the content measures itself, nothing has to be
       hard-coded, and it works for any number of menu items. */
    .gm-header--mobile-menu .gm-header-actions {
        display: grid;
        grid-row: 2;
        grid-column: 1 / -1;
        grid-template-rows: 0fr;
        /* The base rule sets `justify-content: flex-end` for the desktop flex
           row. As a grid that packs the (single, content-sized) column against
           the right edge, which is what pinned the menu there. Both axes are
           restated so the column fills the row and starts at the left. */
        grid-template-columns: 1fr;
        justify-content: stretch;
        justify-items: stretch;
        width: 100%;
        /* Hidden state also fades and lifts slightly — height alone reads as a
           mechanical wipe rather than a panel arriving. */
        opacity: 0;
        transform: translateY(-6px);
        visibility: hidden;
        overflow: hidden;
        transition:
            grid-template-rows var(--theme-animation-duration-slow, 420ms) var(--theme-animation-easing-decelerate, cubic-bezier(0.16, 1, 0.3, 1)),
            opacity var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
            transform var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
            visibility 0s linear var(--theme-animation-duration-slow, 420ms);
    }

    .gm-header--mobile-menu .gm-header-actions[data-open="true"] {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: none;
        visibility: visible;
        /* Becoming visible must not wait for the close delay above. */
        transition-delay: 0s, 0s, 0s, 0s;
    }

    /* The wrapper is the single grid child being measured; min-height:0 lets
       the 0fr row actually collapse instead of stopping at content height. */
    .gm-header--mobile-menu .gm-header-actions__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: 0;
        /* Padding lives on the inner box, which is clipped by the 0fr row when
           the drawer is shut — so a closed menu adds no height to the bar. */
        padding-block: 12px 4px;
    }

    /* Closed: the row is 0fr and clipped, but the header's own row gap still
       reserves space for it. Removing the gap contribution keeps the shut bar
       exactly as tall as its logo row. */
    .gm-header--mobile-menu:not(:has(.gm-header-actions[data-open="true"])) {
        row-gap: 0;
    }

    /* Centred menu, not flush left. `display: flex` is stated explicitly: the
       nav has no base display rule, so without it the items stack as plain
       blocks and align-items has nothing to act on — which is what left them
       hugging the left edge. */
    /* The base rule sets `justify-content: flex-end` and `flex-wrap: wrap` for
       the desktop row. Both are reset here: as a column, wrap would let items
       spill into a second column against the right edge, which is what kept
       the list looking right-aligned however it was centred. */
    .gm-nav,
    .gm-header-utility {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        padding-block: 8px;
    }

    .gm-nav__item {
        display: grid;
        justify-items: center;
        width: 100%;
    }

    /* Each item drifts up into place, staggered, so the list assembles rather
       than appearing all at once. Transition (not animation) so closing plays
       the same motion in reverse instead of snapping. */
    .gm-header--mobile-menu .gm-nav__item,
    .gm-header--mobile-menu .gm-header-actions__inner > .gm-language-switcher {
        opacity: 0;
        transform: translateY(10px);
        transition:
            opacity var(--theme-animation-duration-normal, 260ms) var(--theme-animation-easing-standard, ease),
            transform var(--theme-animation-duration-normal, 260ms) var(--theme-animation-easing-decelerate, cubic-bezier(0.16, 1, 0.3, 1));
    }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item,
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-header-actions__inner > .gm-language-switcher {
        opacity: 1;
        transform: none;
    }
    /* Stagger. Only the first several are enumerated — beyond that the delay
       would outlast the panel and the last items would look broken. */
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(1) { transition-delay: 70ms; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(2) { transition-delay: 120ms; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(3) { transition-delay: 170ms; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(4) { transition-delay: 220ms; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(5) { transition-delay: 270ms; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item:nth-child(n+6) { transition-delay: 320ms; }

    /* The drawer still opens and closes for reduced-motion users — it just
       does so instantly, with no slide, fade or stagger. */
    @media (prefers-reduced-motion: reduce) {
        .gm-header--mobile-menu .gm-header-actions,
        .gm-header--mobile-menu .gm-nav__item,
        .gm-header--mobile-menu .gm-header-actions__inner > .gm-language-switcher {
            transition: none;
            transform: none;
        }
        .gm-header--mobile-menu .gm-header-actions[data-open="true"] .gm-nav__item {
            transition-delay: 0s;
        }
    }

    .gm-nav__item--has-children > .gm-nav__link::after {
        margin-left: 6px;
    }

    .gm-nav__link,
    .gm-header-utility__link {
        width: auto;
        justify-content: center;
        text-align: center;
    }

    /* The CTA is a button, not a full-width bar: it sits centred at its own
       width so it reads as an action rather than another row of the list. */
    .gm-header--mobile-menu .gm-nav__link--outline {
        width: auto;
        min-width: 168px;
        margin-block: 6px;
        padding-inline: 22px;
    }

    .gm-nav__submenu {
        position: static;
        min-width: 0;
        width: 100%;
        /* Children follow the parent list: centred, not flush left. */
        display: flex;
        flex-direction: column;
        align-items: center;
        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;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Black buttons, black accent text
   The brand primary (gold) drove BOTH the button fills and the accent copy.
   Buttons now read black with white labels, and accent text — the hero eyebrow,
   the italic title accent, section eyebrows — goes black too. Gold survives
   where it is decoration rather than type: rules, icon strokes, card borders.

   Done here rather than by repointing colors.primary, because that token also
   feeds borders, focus rings and badges; overriding the button/text surfaces
   directly keeps those untouched.
   ════════════════════════════════════════════════════════════════════ */
:root {
    --gm-button-bg: #0d0d0d;
    --gm-button-bg-hover: #2A231E;
    --gm-button-text: #FFFFFF;

    /* ── Central heading type ──
       Same principle as the button shape below: one recipe for the display
       line and the small-caps label above it, so every section header reads as
       the same voice. Before this, eight sections each kept a private copy and
       had drifted to three weights (300/400/500) and tracking anywhere from
       -0.015em to +0.04em.
       Colour is NOT here — it belongs to the ground the heading sits on, the
       same split the button skins use. */
    --gm-display-font: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --gm-display-weight: 400;
    /* Positive tracking because the line is set in capitals. The negative
       values the sections used to carry belonged to mixed-case settings; on
       capitals they pinch the letters rather than tightening the line. */
    --gm-display-tracking: 0.04em;
    --gm-display-transform: uppercase;
    --gm-display-leading: 1.12;

    /* The label above the display line. Serif, to match it: at 600-weight sans
       it read as a UI chip sitting on an editorial heading. */
    --gm-eyebrow-font: var(--gm-display-font);
    --gm-eyebrow-size: 15px;
    --gm-eyebrow-weight: 400;
    --gm-eyebrow-tracking: 0.12em;
    --gm-eyebrow-transform: uppercase;

    /* ── Central button shape ──
       One set of measurements for every call to action on the site, so the
       hero, the gallery, the closing CTA and the service rows all read as the
       same control. Sections consume these instead of restating their own
       padding/radius/type — that is what had drifted into four different
       buttons. Colour is NOT here: it belongs to the ground the button sits
       on (see the two skins below). */
    --gm-cta-padding: 15px 26px;
    --gm-cta-radius: 7px;
    --gm-cta-font-size: 14px;
    --gm-cta-font-weight: 600;
    --gm-cta-tracking: 0.01em;
    --gm-cta-gap: 10px;
    --gm-cta-transition: background var(--theme-animation-duration-normal, 220ms) var(--theme-animation-easing-standard, ease),
                         border-color var(--theme-animation-duration-normal, 220ms) var(--theme-animation-easing-standard, ease),
                         color var(--theme-animation-duration-normal, 220ms) var(--theme-animation-easing-standard, ease),
                         transform var(--theme-animation-duration-normal, 220ms) var(--theme-animation-easing-standard, ease);
}

/* The shape. Any element carrying .gm-cta is a site button. */
.gm-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gm-cta-gap);
    padding: var(--gm-cta-padding);
    border-radius: var(--gm-cta-radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--gm-cta-font-size);
    font-weight: var(--gm-cta-font-weight);
    letter-spacing: var(--gm-cta-tracking);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: var(--gm-cta-transition);
}

/* Skin 1 — on light ground (gallery, closing CTA, service rows).
   Brand ink outline that fills on hover. */
.gm-cta--ink {
    background: transparent;
    border-color: var(--gm-button-bg);
    color: var(--gm-button-bg);
}
.gm-cta--ink:hover,
.gm-cta--ink:focus-visible {
    background: var(--gm-button-bg);
    color: var(--gm-button-text);
    transform: translateY(-1px);
}

/* Skin 2 — on dark ground (the hero, over video).
   Same shape, inverted: a translucent white frame that fills white on hover.
   Ink would disappear against the footage, which is why the colour is a skin
   rather than part of the shape. */
.gm-cta--on-dark {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.gm-cta--on-dark:hover,
.gm-cta--on-dark:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
    color: var(--gm-button-bg);
    transform: translateY(-1px);
}

/* One step down, for buttons that sit inside a row rather than under a
   heading (the service list). Same proportions, smaller. */
.gm-cta--compact {
    --gm-cta-padding: 11px 20px;
    --gm-cta-font-size: 13px;
    --gm-cta-gap: 8px;
}

.gm-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gm-cta { transition: none; }
    .gm-cta:hover { transform: none; }
}

/* ── Filled buttons: header CTA, primary nav buttons, generic .gm-btn ── */
.gm-nav__link--book,
.gm-header .gm-nav__link--book,
.gm-header-cta--book,
.gm-nav__link--primary,
.gm-nav__link--button-primary,
.gm-header-cta--primary,
.gm-header-cta--button-primary {
    background: var(--gm-button-bg);
    border-color: var(--gm-button-bg);
    color: var(--gm-button-text);
}
.gm-nav__link--book:hover,
.gm-header .gm-nav__link--book:hover,
.gm-header-cta--book:hover,
.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-button-bg-hover);
    border-color: var(--gm-button-bg-hover);
    color: var(--gm-button-text);
}

/* ── Outline buttons (header "Account" and "Book now"): black frame, no fill ──
   The .gm-header-scoped selectors are repeated because `.gm-header .gm-nav__link`
   sets the nav link colour at (0,2,0); without them the label falls back to the
   muted nav grey and only the border picks up the ink. Same pattern as --book.
   Border width comes from the base .gm-nav__link rule (1px). */
.gm-nav__link--outline,
.gm-header .gm-nav__link--outline,
.gm-nav__link--outline-primary,
.gm-header .gm-nav__link--outline-primary,
.gm-header-cta--outline,
.gm-header-cta--outline-primary {
    background: transparent;
    border-color: var(--gm-button-bg);
    color: var(--gm-button-bg);
    box-shadow: none;
}
.gm-nav__link--outline:hover,
.gm-header .gm-nav__link--outline:hover,
.gm-nav__link--outline-primary:hover,
.gm-header .gm-nav__link--outline-primary:hover,
.gm-header-cta--outline:hover,
.gm-header-cta--outline-primary:hover {
    background: var(--gm-button-bg);
    border-color: var(--gm-button-bg);
    color: var(--gm-button-text);
}

.gm-nav__link--outline:focus-visible,
.gm-header-cta--outline:focus-visible {
    outline: 2px solid var(--gm-button-bg);
    outline-offset: 2px;
}

/* ── Section eyebrows / title accents: the secondary brand gold ────────
   Every section labels itself the same way ("OUR STORY", "Find us", "Ready to
   book"), so they all read from --gm-accent and match the hero's eyebrow.
   Sections whose colour is an editor setting (hero, featured-products) carry
   the same value through the page template instead.
   The ::before/::after hairlines already paint from each section's own gold
   variable, so they are left alone. */
.gm-bento__eyebrow,
.gm-bento__accent,
.gm-findus__eyebrow,
.gm-findus__accent,
.gm-ctabook__eyebrow,
.gm-ctabook__accent {
    color: var(--gm-accent);
}

/* text-with-image ("OUR STORY") keeps its kicker colour in a section variable
   rather than a bare rule, so it is redirected at the source. */
.gm-text-with-image-section {
    --tw-kicker-color: var(--gm-accent);
}

/* ── Section buttons: black fill, white label ──────────────────────────
   Sections paint their calls to action from their own gold variables, out of
   reach of the --gm-button-* tokens above. Overriding the button rules
   themselves keeps each section's gold intact everywhere else (icon strokes,
   borders, hairlines) while every action goes black. Listed per section rather
   than by a blanket selector so a genuinely gold element is never caught. */
/* The per-section list that used to paint each action black lived here. It
   predates .gm-cta and did the same job one selector at a time — and because
   it came later in the file it overrode the skins, which is what left the
   gallery and story buttons filled while the hero's were outlined. Sections
   that carry .gm-cta now get their colour from the skin; the ones below are
   the surfaces not yet on the system. */
.gm-hero-section__button--primary,
.gm-hero-split-media-section__button--primary,
.gm-cta-banner-section__button--primary,
.gm-featured-services-section__cta,
.gm-services__cta-btn,
.gm-related-card__cta {
    background: var(--gm-button-bg, #0d0d0d);
    border-color: var(--gm-button-bg, #0d0d0d);
    color: var(--gm-button-text, #FFFFFF);
}
.gm-hero-section__button--primary:hover,
.gm-hero-split-media-section__button--primary:hover,
.gm-cta-banner-section__button--primary:hover,
.gm-featured-services-section__cta:hover,
.gm-services__cta-btn:hover,
.gm-related-card__cta:hover {
    background: var(--gm-button-bg-hover, #2A231E);
    border-color: var(--gm-button-bg-hover, #2A231E);
    color: var(--gm-button-text, #FFFFFF);
}

/* Inline text links that act as actions (the find-us map card link). */
.gm-findus__mapcard-link {
    color: var(--gm-button-bg, #0d0d0d);
}

/* ── Stacked desktop header ────────────────────────────────────────────
   Black strip, logo centred on its own row, nav centred beneath it.

   The announcement strip runs at every width (rules below, outside any
   breakpoint). Everything else here is wrapped in `min-width: 761px`: the
   mobile header — logo left, hamburger right, drawer menu — is defined at
   max-width 760px and is deliberately left alone. */
.gm-header-strip {
    display: block;
    background: var(--gm-strip-bg, #080808);
    color: var(--gm-strip-text, #FFFFFF);
    /* Anchor for the paging arrows, which sit at the edges without taking
       part in the message layout — otherwise they would shift the centred
       text off-axis. */
    position: relative;
}

/* ── Paging arrows ──
   Placed on the page inset so they line up with the header's own left and
   right edges. Quiet by default: the strip is chrome, not a carousel, so
   the arrows only firm up on hover/focus. */
.gm-header-strip__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 12px;
    cursor: pointer;
    transition:
        opacity var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease),
        background-color var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}
.gm-header-strip__nav:hover,
.gm-header-strip__nav:focus-visible {
    opacity: 1;
    /* Tinted with the strip's own ink rather than a flat grey, so it works
       whatever background colour the strip is set to. */
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.gm-header-strip__nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* Hard against the viewport edges, at every width — the strip is full-bleed,
   so the arrows sit in its outer corners rather than on the page inset. */
.gm-header-strip__nav--prev { left: 4px; }
.gm-header-strip__nav--next { right: 4px; }

.gm-header-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* At least 40px of side padding whatever the page inset resolves to: the
       arrows occupy 4–32px, so a smaller inset (phones) would let the centred
       message slide underneath them. */
    padding-block: 10px;
    padding-left: max(40px, var(--gm-page-inset-start));
    padding-right: max(40px, var(--gm-page-inset-end));
    color: inherit;
    text-align: center;
    text-decoration: none;
}

/* Rotating messages share one grid cell, so the strip never changes height
   as they swap — a shifting strip would push the whole page down mid-read.
   Grid rather than absolute positioning keeps the tallest message defining
   the height, so a two-line entry is not clipped. */
.gm-header-strip--rotating .gm-header-strip__inner {
    display: grid;
    grid-template-areas: "msg";
    align-items: center;
    justify-items: center;
}

.gm-header-strip--rotating .gm-header-strip__msg {
    grid-area: msg;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Out-going text leaves to the left; the next arrives from the right. */
    opacity: 0;
    transform: translateX(28px);
    transition:
        opacity var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
        transform var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease);
    pointer-events: none;
}

.gm-header-strip--rotating .gm-header-strip__msg.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.gm-header-strip--rotating .gm-header-strip__msg.is-leaving {
    opacity: 0;
    transform: translateX(-28px);
}

/* Paging backwards mirrors the travel: the incoming message enters from the
   left and the outgoing one leaves to the right, so "previous" reads as
   going back rather than as another forward step. */
.gm-header-strip.is-reversing .gm-header-strip__msg {
    transform: translateX(-28px);
}
.gm-header-strip.is-reversing .gm-header-strip__msg.is-active {
    transform: none;
}
.gm-header-strip.is-reversing .gm-header-strip__msg.is-leaving {
    transform: translateX(28px);
}

/* The strip cycles on its own, so honour reduced motion: messages still
   change, they just cut instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    .gm-header-strip--rotating .gm-header-strip__msg {
        transition: none;
        transform: none;
    }
    .gm-header-strip--rotating .gm-header-strip__msg.is-leaving {
        transform: none;
    }
    /* The arrows keep their vertical centring — only the fade is dropped. */
    .gm-header-strip__nav { transition: none; }
}

/* Strip typography — outside the desktop block, since the strip itself now
   runs at every width. Sizes and tracking ease off on phones so a three-word
   headline still fits one line between the arrows. */
/* Didone serif headline over a sans sub-line — the same pairing the hero uses,
   so the two bands of chrome read in one voice.
   Playfair Display stands in for Bodoni Moda: the platform ships a fixed font
   set (inter, roboto, open_sans, lato, poppins, montserrat, playfair_display)
   and anything outside it silently falls back to Inter. Playfair is the didone
   in that set — high stroke contrast and fine hairlines, the same class of
   letterform as Bodoni. */
.gm-header-strip__text {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    /* Nudged up from 13px: at the same size a didone reads smaller than a
       grotesque, and 700 closes its hairlines, so weight comes down as size
       goes up. */
    font-size: clamp(11px, 2.8vw, 15px);
    font-weight: 500;
    letter-spacing: clamp(0.02em, 0.4vw, 0.05em);
    text-transform: uppercase;
}

.gm-header-strip__sub {
    font-family: var(--font-primary, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: clamp(9px, 2.2vw, 11px);
    letter-spacing: clamp(0.06em, 0.8vw, 0.14em);
    text-transform: uppercase;
    opacity: 0.82;
}

a.gm-header-strip__inner:hover .gm-header-strip__sub {
    opacity: 1;
}

@media (min-width: 761px) {

    /* Rows instead of one justified line. The brand and the actions block are
       the two children; centring them turns the bar into the stacked lockup. */
    .gm-header--stacked {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding-top: calc(var(--gm-header-padding-block, 22px) * 0.3 + 8px);
        padding-bottom: calc(var(--gm-header-padding-block, 22px) * 0.3);
    }

    .gm-header--stacked .gm-brand {
        justify-content: center;
    }

    /* The logo carries the brand on its own row, so it gets more room here
       than in the compact left-aligned bar. */
    .gm-header--stacked .gm-brand-logo {
        width: 208px;
        max-width: 208px;
        max-height: 88px;
    }

    .gm-header--stacked .gm-header-actions {
        width: 100%;
        justify-content: center;
    }

    .gm-header--stacked .gm-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(18px, 2.4vw, 38px);
    }

    /* Menu labels read as the brand's own wordmark row: solid ink, bold, and
       uppercase rather than the muted grey the inline bar uses. Scoped to the
       stacked header so the inline variant and the mobile drawer keep theirs. */
    .gm-header--stacked .gm-nav__link {
        color: var(--gm-header-nav-link, var(--gm-text));
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .gm-header--stacked .gm-nav__link:hover {
        color: var(--gm-header-nav-link, var(--gm-text));
        opacity: 0.62;
    }

    /* The bordered CTA keeps its own ink — the nav rule above (and its hover
       fade) must not repaint or dim it. On hover it fills, so the label flips
       to the on-primary colour rather than staying dark on dark. */
    .gm-header--stacked .gm-nav__link--outline {
        color: var(--gm-button-bg);
        opacity: 1;
    }
    .gm-header--stacked .gm-nav__link--outline:hover {
        color: var(--gm-button-text);
        opacity: 1;
    }

    /* A hairline under the nav row anchors the stack against the page below,
       the way the reference layout separates chrome from content. */
    .gm-header--stacked {
        border-bottom: 1px solid var(--gm-border, rgba(0, 0, 0, 0.10));
    }

}

/* ── Scroll reveal ─────────────────────────────────────────────────────
   Sections fade up as they scroll into view. theme.js adds
   [data-gm-reveal] to each section and flips .is-revealed via
   IntersectionObserver; the values come from animations.reveal.* in
   settings_data.json, pushed inline by layout/base.html.

   Deliberately opacity + transform only: both are compositor-driven, so a
   long page of revealing sections does not force layout on every frame.

   The hidden state lives behind .gm-reveal-ready, which the script sets on
   <html> as soon as it runs. Without that gate a visitor with JS blocked —
   or one who scrolls before the script parses — would be left staring at
   permanently invisible content. Default is visible; motion is the
   enhancement. */
.gm-reveal-ready [data-gm-reveal] {
    opacity: 0;
    transform: translateY(var(--gm-reveal-distance, 18px));
    transition:
        opacity var(--gm-reveal-duration, 600ms) var(--gm-reveal-easing, cubic-bezier(0.16, 1, 0.3, 1)),
        transform var(--gm-reveal-duration, 600ms) var(--gm-reveal-easing, cubic-bezier(0.16, 1, 0.3, 1));
    transition-delay: var(--gm-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.gm-reveal-ready [data-gm-reveal].is-revealed {
    opacity: 1;
    transform: none;
    /* Dropped once the move finishes so long pages do not hold dozens of
       promoted layers alive. */
    will-change: auto;
}

/* Motion here is decoration, so honour the OS setting: content appears
   immediately, with no transition to interrupt. */
@media (prefers-reduced-motion: reduce) {
    .gm-reveal-ready [data-gm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Phone rhythm — half the vertical air between sections.

   The desktop spacing (64px bands, 50px leads) reads as generous on a wide
   page but as dead scroll on a phone, where the same gap is a third of the
   viewport. Every section is halved from whatever it resolves to, so the
   proportions between them survive — a section that led with more air still
   leads with more air, just less of it.

   Placed at the end of the file on purpose: section stylesheets are @imported
   at the top, so an equal-specificity rule only wins from down here.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    /* Sections that carry their air as padding. */
    .gm-featured-products-section,
    .gm-text-with-image-section {
        padding-block: 32px;
    }
    /* text-with-image adds room under itself for the overhanging badge; that
       allowance is halved with everything else rather than left at full. */
    .gm-text-with-image-section--has-badge { padding-bottom: 47px; }

    /* Sections that carry it as a leading margin. */
    .gm-findus { margin-top: 25px; }
    .gm-ctabook { margin-top: 11px; }

    /* The gallery keeps its negative lead (it deliberately overlaps the hero)
       — only the trailing band is halved. */
    .gm-bento { padding-bottom: 36px; }
}