/* ── 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 .gm-nav__link {
    padding: 9px 14px;
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

button[data-product-card-action][data-loading="true"],
button[data-commerce-purchase-action][data-loading="true"],
button[data-product-card-action][data-success="true"],
button[data-commerce-purchase-action][data-success="true"] {
    color: transparent !important;
    pointer-events: none;
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* getme-css-bundle: css/commerce/sections/menu-listing.css */
/* ════════════════════════════════════════════════════════════════════
   menu-listing — the printed food menu, grouped by category.
   Namespace: --ml-*   Scope: .gm-menu-listing-section

   Ported from the original site's css/menu-styles.css so the page reads the
   same: gold uppercase category heading with a short rule under it, an italic
   note, then white cards in an auto-fitting grid. Each card puts the name and
   price on one row over a dotted gold divider, with the description and any
   dietary badges beneath.

   Sizes that were fixed pixels/rems there are mapped onto theme tokens here so
   the merchant's spacing, radius and motion settings still drive the section;
   the literal values remain as fallbacks.
   ════════════════════════════════════════════════════════════════════ */

.gm-menu-listing-section {
    --ml-columns: 3;
    --ml-section-bg: transparent;
    --ml-card-bg: var(--gm-surface, #ffffff);
    --ml-heading-color: var(--gm-primary);
    --ml-price-color: var(--gm-primary);
    --ml-rule-color: var(--gm-primary);
    --ml-text-color: var(--gm-text, #333333);
    --ml-muted-color: var(--gm-text-muted, #666666);
    --ml-card-border: var(--gm-border, #eeeeee);
    --ml-section-padding-block: var(--theme-spacing-3xl, 64px);
    --ml-grid-gap: var(--theme-spacing-lg, 32px);
    /* The source grid never let a card go under 300px before wrapping. */
    --ml-card-min: 300px;

    background: var(--ml-section-bg);
    color: var(--ml-text-color);
    padding: var(--ml-section-padding-block) var(--gm-section-inline-padding);
}

/* The page's single H1. Set a step above the gold section headings so the
   hierarchy reads H1 → H2 (section) → H3 (dish). */
.gm-menu-listing-section__page-title {
    color: var(--ml-heading-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 auto var(--theme-spacing-3xl, 48px);
    max-width: var(--theme-container-content-max-width, 1200px);
    text-align: center;
    text-transform: uppercase;
}

/* Kept in the accessibility tree and readable by crawlers, off the screen.
   `clip-path` rather than `display:none`, which would remove it from both. */
.gm-menu-listing-section__page-title--visually-hidden {
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.gm-menu-listing-section__group {
    margin: 0 auto var(--theme-spacing-3xl, 48px);
    max-width: var(--theme-container-content-max-width, 1200px);
}

.gm-menu-listing-section__group:last-of-type {
    margin-bottom: 0;
}

/* Category heading + the short centred rule beneath it. */
.gm-menu-listing-section__heading {
    color: var(--ml-heading-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0 auto var(--theme-spacing-lg, 28px);
    padding-bottom: 14px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

/* A linked heading stays visually a heading — the section page is a quiet
   affordance, not a call to action. Colour comes from the h2/h3 it sits in. */
.gm-menu-listing-section__heading-link {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
}

.gm-menu-listing-section__heading-link:hover,
.gm-menu-listing-section__heading-link:focus-visible {
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.gm-menu-listing-section__heading::after {
    background-color: var(--ml-rule-color);
    bottom: 0;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 80px;
}

/* Sub-heading inside a grouped section ("Specialty Reds" under "New York Style
   Pizza"). Dark and italic rather than gold and ruled, so it reads as a level
   below the section heading — the source's .sub-section-title. */
.gm-menu-listing-section__subheading {
    color: var(--ml-text-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(21px, 2.2vw, 29px);
    font-style: italic;
    font-weight: 700;
    margin: var(--theme-spacing-xl, 32px) 0 var(--theme-spacing-md, 16px);
    text-align: center;
}

/* The first sub-heading follows the section note, which already carries the
   gap — no need to stack a second one on top of it. */
.gm-menu-listing-section__note + .gm-menu-listing-section__subheading,
.gm-menu-listing-section__heading + .gm-menu-listing-section__subheading {
    margin-top: 0;
}

.gm-menu-listing-section__note {
    color: var(--ml-muted-color);
    font-size: clamp(15px, 1.4vw, 19px);
    font-style: italic;
    line-height: 1.6;
    margin: 0 auto var(--theme-spacing-xl, 32px);
    max-width: 70ch;
    text-align: center;
}

/* auto-fit keeps a short category (3 salads) from stretching into a full row
   of oversized cards, while --ml-columns caps how wide the menu ever gets. */
.gm-menu-listing-section__grid {
    display: grid;
    gap: var(--ml-grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--ml-card-min), 100%), 1fr));
}

@media (min-width: 1100px) {
    .gm-menu-listing-section__grid {
        grid-template-columns: repeat(var(--ml-columns), minmax(0, 1fr));
    }
}

.gm-menu-listing-section__card {
    background: var(--ml-card-bg);
    border: 1px solid var(--ml-card-border);
    border-radius: var(--theme-radius-lg, 16px);
    box-shadow: var(--theme-shadow-sm, 0 4px 6px rgba(0, 0, 0, 0.1));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--theme-spacing-lg, 24px);
    transition: transform var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
                box-shadow var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease);
}

.gm-menu-listing-section__card:hover {
    /* Brand-tinted lift, as on the source site. */
    box-shadow: 0 6px 12px color-mix(in srgb, var(--gm-primary) 20%, transparent);
    transform: translateY(-5px);
}

.gm-menu-listing-section__card-head {
    align-items: center;
    border-bottom: 2px dotted var(--ml-rule-color);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 14px;
}

/* The name gets whatever the price does not need. Without min-width:0 a flex
   item refuses to shrink below its longest word, which pushed names like
   "The Goodfella" onto a second line inside a three-column card. */
.gm-menu-listing-section__card-head > .gm-menu-listing-section__item-title {
    flex: 1 1 auto;
    min-width: 0;
}

.gm-menu-listing-section__card-head > .gm-menu-listing-section__price {
    flex: 0 0 auto;
}

/* Cards whose price is a phrase rather than an amount stack instead, so the
   name keeps the full card width. */
.gm-menu-listing-section__card-head--stacked {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

.gm-menu-listing-section__item-title {
    color: var(--ml-text-color);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    /* break-word, not anywhere: a nowrap price beside a long name ("Protein
       Toppings", "Veggie / Other Toppings") squeezed the title column until it
       broke mid-word, one letter per line. break-word only splits a word that
       cannot fit on a line of its own. */
    overflow-wrap: break-word;
}

.gm-menu-listing-section__price {
    color: var(--ml-price-color);
    display: flex;
    flex-direction: column;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

/* A range price ("Small $2.00 / Large $3.25") is far wider than "$15.99" and
   would otherwise starve the title. Let those wrap and keep the title readable. */
.gm-menu-listing-section__price--wide {
    white-space: normal;
}

.gm-menu-listing-section__item-description {
    color: var(--ml-muted-color);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.gm-menu-listing-section__item-description p {
    margin: 0 0 6px;
}

.gm-menu-listing-section__item-description p:last-child {
    margin-bottom: 0;
}

/* Supplier logo above the dish. 80px tall and centred, matching the source
   site's inline style; width follows the aspect ratio. */
.gm-menu-listing-section__brand-logo {
    display: block;
    height: 80px;
    margin: 0 auto 20px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

/* Per-dish footnote ("Hot pepper relish on request") — italic and quiet, the
   way the printed menu sets these apart from the ingredient line. */
.gm-menu-listing-section__item-note {
    color: var(--ml-muted-color);
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    margin: -4px 0 0;
}

/* Add-ons and dressing lists — secondary to the dish itself, separated by a
   hairline the way the printed menu sets them off. */
.gm-menu-listing-section__extras {
    border-top: 1px dashed var(--ml-card-border);
    margin-top: 4px;
    padding-top: 12px;
}

.gm-menu-listing-section__extras-title {
    color: var(--ml-text-color);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
}

.gm-menu-listing-section__extras-list {
    color: var(--ml-muted-color);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.gm-menu-listing-section__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.gm-menu-listing-section__tag {
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 14px;
}

/* Dietary colours are semantic rather than brand tokens — green reads as
   "suitable for you" on a menu regardless of the site's palette. */
.gm-menu-listing-section__tag--vegetarian {
    background-color: #4caf50;
    color: #ffffff;
}

.gm-menu-listing-section__tag--vegan {
    background-color: #2e7d32;
    color: #ffffff;
}

.gm-menu-listing-section__tag--gluten-free,
.gm-menu-listing-section__tag--option {
    background-color: color-mix(in srgb, var(--ml-muted-color) 12%, transparent);
    color: var(--ml-muted-color);
}

.gm-menu-listing-section__tag--spicy {
    background-color: #ff4444;
    color: #ffffff;
}

.gm-menu-listing-section__footnote {
    color: var(--ml-muted-color);
    font-size: 15px;
    line-height: 1.6;
    margin: var(--theme-spacing-3xl, 48px) auto 0;
    max-width: var(--theme-container-content-max-width, 1200px);
    padding: var(--theme-spacing-xl, 32px);
    text-align: center;
}

.gm-menu-listing-section__footnote p {
    margin: 0 0 16px;
}

.gm-menu-listing-section__footnote p:last-child {
    margin-bottom: 0;
}

.gm-menu-listing-section__empty {
    color: var(--ml-muted-color);
    margin: 0 auto;
    max-width: 60ch;
    padding: var(--theme-spacing-3xl, 48px) 0;
    text-align: center;
}

.gm-menu-listing-section__empty h2 {
    color: var(--ml-heading-color);
    margin: 0 0 12px;
}

/* Narrow screens: the price drops under the name so neither is squeezed. */
@media (max-width: 520px) {
    .gm-menu-listing-section__card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .gm-menu-listing-section__price {
        flex-direction: row;
        gap: 12px;
        text-align: left;
    }
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Editorial data sections */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Customer account application surfaces */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

/* Content / cross-page sections */

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

.gm-hero-section {
    /* Sits on the page background by default: the hero opens the page and a
       tinted band here would read as a separate block from the sections below.
       A merchant-set section background still overrides this. */
    --hr-section-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;
    /* Top padding is its own variable so a hero that opens the page can sit
       closer to the header than its bottom spacing, which has to carry the
       gap to the next section. Defaults to the section padding. */
    padding: var(--hr-section-padding-block-start, var(--hr-section-padding-block))
        var(--gm-section-inline-padding)
        var(--hr-section-padding-block);
    position: relative;
}

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

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

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

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

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

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

/* Emblem / logo sitting directly above the heading. It follows the copy block's
   alignment, so a centred hero centres it too. */
/* The emblem is sized by width, not capped by it: a max-width alone leaves the
   logo at its intrinsic size when that is smaller, so it never reaches the
   width the setting asks for. It still shrinks on narrow screens. */
.gm-hero-section__emblem {
    display: block;
    height: auto;
    margin: 0 0 3rem;
    width: var(--hr-image-max-width, 300px);
    max-width: 100%;
    object-fit: contain;
}

.gm-hero-section--text-center .gm-hero-section__emblem {
    margin-inline: auto;
}

.gm-hero-section--text-right .gm-hero-section__emblem {
    margin-inline: auto 0;
}

.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: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
    overflow-wrap: anywhere;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.gm-hero-section__intro {
    color: var(--hr-intro-color);
    font-size: 1.2rem;
    line-height: 1.55;
    margin: 0 0 2rem;
}

/* No trailing space when the intro is the last thing in the hero — the
   section's own padding already closes it. */
.gm-hero-section__intro:last-child {
    margin-bottom: 0;
}

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

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

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

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

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

@media (max-width: 768px) {
    .gm-hero-section__title { font-size: 2rem; }
    .gm-hero-section__intro { font-size: 1rem; }
    /* The emblem steps down with the type so it never dominates a narrow screen. */
    .gm-hero-section__emblem { width: 280px; }
    /* A hero pinned flush to the header gains a small breath on narrow screens,
       where the header itself is shorter. Only applies to the flush case — the
       modifier is set by the template when the top padding is zero. */
    .gm-hero-section--flush-top {
        padding-top: 20px;
    }
}

@media (max-width: 480px) {
    .gm-hero-section__emblem { width: 220px; }
}

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

.gm-text-with-image-section__copy { min-width: 0; }
.gm-text-with-image-section__copy .gm-kicker {
    color: var(--tw-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.gm-text-with-image-section__title {
    color: var(--tw-title-color);
    font-family: var(--tw-title-font);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}
/* The body colour is already the muted grey the design calls for — an extra
   opacity on top of it washes the copy out. */
.gm-text-with-image-section__body {
    color: var(--tw-text-color);
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0 0 2rem;
}
.gm-text-with-image-section__body:last-child {
    margin-bottom: 0;
}
/* Subtitle — sits under the title, between it and the body copy. */
.gm-text-with-image-section__subtitle {
    color: var(--tw-subtitle-color, var(--tw-text-color));
    font-family: var(--tw-title-font);
    font-size: 1.8rem;
    line-height: 1.25;
    margin: 0 0 2rem;
}

.gm-text-with-image-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

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

/* Second and third buttons carry their own colours so a block can mirror the
   source site's menu / order / call trio. */
.gm-text-with-image-section__cta--2 {
    background: var(--tw-cta2-bg, var(--tw-cta-bg));
    color: var(--tw-cta2-text, var(--tw-cta-text));
}
.gm-text-with-image-section__cta--3 {
    background: var(--tw-cta3-bg, var(--tw-cta-bg));
    color: var(--tw-cta3-text, var(--tw-cta-text));
}

/* min-width:0 is required on a grid item whose content has an intrinsic width:
   the default min-width:auto lets the image push the track wider than its
   column, which clipped the right edge of the photo once the block stacked. */
.gm-text-with-image-section__media {
    border-radius: var(--theme-radius-xl, 16px);
    box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    min-width: 0;
    overflow: hidden;
}
.gm-text-with-image-section__media img,
.gm-text-with-image-section__placeholder {
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}
.gm-text-with-image-section__placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tw-cta-bg) 18%, #eef2f7), #dbe3ef);
}

.gm-text-with-image-section--ratio-square .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-square .gm-text-with-image-section__placeholder { aspect-ratio: 1 / 1; }
.gm-text-with-image-section--ratio-landscape .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-landscape .gm-text-with-image-section__placeholder { aspect-ratio: 4 / 3; }
.gm-text-with-image-section--ratio-portrait .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-portrait .gm-text-with-image-section__placeholder { aspect-ratio: 3 / 4; }
.gm-text-with-image-section--ratio-wide .gm-text-with-image-section__media img,
.gm-text-with-image-section--ratio-wide .gm-text-with-image-section__placeholder { aspect-ratio: 16 / 9; }

/* Optional fixed image column ("Image column width"). The image track stops
   flexing and the copy takes the remaining width, instead of the even split.
   With image-left the inner is reversed via direction:rtl, so the image stays
   the second track and the column order needs no change. */
.gm-text-with-image-section--fixed-width .gm-text-with-image-section__inner {
    grid-template-columns: minmax(0, 1fr) var(--tw-image-width);
}

/* Declared after the ratio rules above so an explicit height wins over the
   aspect-ratio box at equal specificity. */
.gm-text-with-image-section--fixed-height .gm-text-with-image-section__media img,
.gm-text-with-image-section--fixed-height .gm-text-with-image-section__placeholder {
    aspect-ratio: auto;
    height: var(--tw-image-height);
}

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

    /* Stacked, the image keeps its authored column width rather than spanning
       the full row: stretching it wider only increases how much object-fit:cover
       crops off the top and bottom. It still shrinks on narrow screens. */
    .gm-text-with-image-section--fixed-width .gm-text-with-image-section__inner {
        grid-template-columns: 1fr;
    }

    .gm-text-with-image-section--fixed-width .gm-text-with-image-section__media {
        justify-self: center;
        max-width: var(--tw-image-width);
        width: 100%;
    }

    /* The source caps the stacked image at 300px in its stylesheet, but the
       welcome photo carries an inline height:500px that outranks the media
       query — so it keeps its full height on mobile. Honour the authored
       height here instead of shrinking it, which was leaving the photo small
       and heavily cropped. */
    .gm-text-with-image-section--fixed-height .gm-text-with-image-section__media img,
    .gm-text-with-image-section--fixed-height .gm-text-with-image-section__placeholder {
        height: var(--tw-image-height);
    }

    /* Source: stacked, the photo leads and the copy follows (order: -1). Only
       for image-right blocks — an image-left block already reads image-first. */
    .gm-text-with-image-section:not(.gm-text-with-image-section--image-left)
    .gm-text-with-image-section__media {
        order: -1;
    }
}
/* Source stacks the three buttons full-width at this breakpoint instead of
   letting them wrap into an uneven two-then-one row. */
@media (max-width: 768px) {
    .gm-text-with-image-section__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gm-text-with-image-section__cta {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .gm-text-with-image-section { padding: var(--tw-section-padding-block) var(--gm-section-inline-padding); }
}

/* getme-css-bundle:end css/commerce/sections/text-with-image.css */


/* getme-css-bundle: css/commerce/sections/prose-card.css */
/* ════════════════════════════════════════════════════════════════════
   prose-card — Long-form copy inside a single contained card.
   Namespace: --pc-*   Scope: .gm-prose-card-section
   Metrics follow the source site's .about-content: 3rem padding, 20px
   radius, 800px cap, 1.1rem/1.8 body copy.
   ════════════════════════════════════════════════════════════════════ */

.gm-prose-card-section {
    --pc-section-bg: transparent;
    --pc-card-bg: var(--gm-surface);
    --pc-card-text: var(--gm-text);
    --pc-block-title: var(--gm-primary);
    --pc-emphasis: var(--gm-primary);
    --pc-card-max-width: 800px;
    --pc-section-padding-block: var(--theme-spacing-3xl, 64px);
    --pc-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --pc-body-font: var(--font-primary, sans-serif);

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

.gm-prose-card-section__card {
    background: var(--pc-card-bg);
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: var(--pc-card-text);
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0 auto;
    max-width: var(--pc-card-max-width);
    padding: 3rem;
    width: 100%;
}

.gm-prose-card-section--text-left .gm-prose-card-section__card { text-align: left; }
.gm-prose-card-section--text-center .gm-prose-card-section__card { text-align: center; }
.gm-prose-card-section--text-right .gm-prose-card-section__card { text-align: right; }

.gm-prose-card-section__card p {
    margin: 0 0 1.5rem;
}

/* The last paragraph of the card carries no trailing gap, so the card's own
   padding is the only space below it. */
.gm-prose-card-section__card > p:last-child,
.gm-prose-card-section__block > p:last-child {
    margin-bottom: 0;
}

.gm-prose-card-section__block {
    margin-bottom: 2.5rem;
}

.gm-prose-card-section__block-title {
    color: var(--pc-block-title);
    font-family: var(--pc-title-font);
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 1rem;
}

.gm-prose-card-section__emphasis {
    color: var(--pc-emphasis);
    font-weight: 700;
}

@media (max-width: 768px) {
    .gm-prose-card-section__card {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .gm-prose-card-section__card {
        padding: 1.5rem;
    }
}

/* getme-css-bundle:end css/commerce/sections/prose-card.css */


/* getme-css-bundle: css/commerce/sections/map.css */
/* ════════════════════════════════════════════════════════════════════
   map — Embedded location map.
   Namespace: --mp-*   Scope: .gm-map-section
   ════════════════════════════════════════════════════════════════════ */

.gm-map-section {
    --mp-section-bg: transparent;
    --mp-text-color: var(--gm-text);
    --mp-title-color: var(--gm-text);
    --mp-kicker-color: var(--gm-primary);
    --mp-link-color: var(--gm-primary);
    --mp-map-height: 420px;
    --mp-card-radius: var(--theme-radius-xl, 16px);
    --mp-section-padding-block: var(--theme-spacing-3xl, 64px);
    --mp-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --mp-body-font: var(--font-primary, sans-serif);

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

.gm-map-section__head {
    margin: 0 auto clamp(20px, 3vw, 32px);
    max-width: 720px;
    text-align: center;
}

.gm-map-section__head .gm-kicker {
    color: var(--mp-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.gm-map-section__title {
    color: var(--mp-title-color);
    font-family: var(--mp-title-font);
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.2;
    margin: 0 0 12px;
}

.gm-map-section__intro {
    color: var(--mp-text-color);
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}

/* The frame keeps its own aspect via a fixed height — an iframe has no
   intrinsic size, so a percentage height would collapse to zero. */
.gm-map-section__frame {
    border-radius: var(--mp-card-radius);
    box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    margin: 0 auto;
    max-width: var(--gm-page-max-width);
    overflow: hidden;
}

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

/* Full-width variant: the frame spans the section box instead of the page
   max-width, and drops its rounding so it reads as a band. */
.gm-map-section--full {
    padding-inline: 0;
}

.gm-map-section--full .gm-map-section__frame {
    border-radius: 0;
    max-width: none;
}

.gm-map-section--full .gm-map-section__head,
.gm-map-section--full .gm-map-section__meta {
    padding-inline: var(--gm-section-inline-padding);
}

.gm-map-section__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: center;
    margin: 18px auto 0;
    max-width: var(--gm-page-max-width);
}

.gm-map-section__address,
.gm-map-section__directions {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0;
}

.gm-map-section__address i {
    color: var(--mp-kicker-color);
}

.gm-map-section__directions {
    color: var(--mp-link-color);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--gm-transition-fast);
}

.gm-map-section__directions:hover {
    color: var(--mp-text-color);
}

@media (max-width: 640px) {
    .gm-map-section__meta {
        flex-direction: column;
        gap: 10px;
    }
}

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


/* getme-css-bundle: css/commerce/sections/feature-grid.css */
/* ════════════════════════════════════════════════════════════════════
   feature-grid — Inline feature cards (icon + title + body).
   Namespace: --fg-*   Scope: .gm-feature-grid-section
   ════════════════════════════════════════════════════════════════════ */

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

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

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

.gm-feature-grid-section--columns-2 { --fg-grid-columns: 2; }
.gm-feature-grid-section--columns-3 { --fg-grid-columns: 3; }
.gm-feature-grid-section--columns-4 { --fg-grid-columns: 4; }
.gm-feature-grid-section--columns-6 { --fg-grid-columns: 6; }

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

/* Cards are centred and lift on hover — the feature row reads as three equal
   picks rather than a dense text block. */
.gm-feature-grid-section__card {
    background: var(--fg-card-bg);
    border: 1px solid var(--fg-card-border);
    border-radius: var(--fg-card-radius);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--theme-shadow-md);
    transition: transform var(--theme-animation-duration-normal, 300ms)
        var(--theme-animation-easing-standard, ease);
}

.gm-feature-grid-section__card:hover {
    transform: translateY(-10px);
}

.gm-feature-grid-section__icon {
    display: inline-flex;
    color: var(--fg-icon-color);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.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-caption-align: center;
    --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);
}

/* ── Marquee ──────────────────────────────────────────────────────────
   A continuously scrolling strip. The template prints the run twice, so
   translating the track by -50% lands exactly on the start of the second
   copy and the loop is seamless. Hovering pauses it. */
.gm-gallery-section--style-marquee {
    --gl-marquee-item-width: 300px;
    --gl-marquee-item-height: 200px;
    --gl-marquee-duration: 40s;
}

/* Full-bleed: the strip runs past the section's gutter without a bare 100vw,
   which would overflow by the scrollbar width. Negative insets do the same job
   and stay inside the page box. */
.gm-gallery-section--style-marquee .gm-gallery-section__marquee {
    overflow: hidden;
    margin-inline: calc(-1 * var(--gm-section-inline-padding, 0px));
}

.gm-gallery-section--style-marquee .gm-gallery-section__track {
    display: flex;
    gap: var(--gl-grid-gap);
    width: max-content;
    animation: gm-gallery-marquee var(--gl-marquee-duration) linear infinite;
    will-change: transform;
}

.gm-gallery-section--style-marquee .gm-gallery-section__marquee:hover
    .gm-gallery-section__track {
    animation-play-state: paused;
}

.gm-gallery-section--style-marquee .gm-gallery-section__item {
    flex: 0 0 var(--gl-marquee-item-width);
    width: var(--gl-marquee-item-width);
}

.gm-gallery-section--style-marquee .gm-gallery-section__media {
    box-shadow: var(--theme-shadow-md);
}

.gm-gallery-section--style-marquee .gm-gallery-section__media img {
    height: var(--gl-marquee-item-height);
    object-fit: cover;
    width: 100%;
}

.gm-gallery-section--style-marquee .gm-gallery-section__media img:hover {
    transform: scale(1.1);
}

.gm-gallery-section--style-marquee .gm-gallery-section__marquee--slow { --gl-marquee-duration: 60s; }
.gm-gallery-section--style-marquee .gm-gallery-section__marquee--medium { --gl-marquee-duration: 40s; }
.gm-gallery-section--style-marquee .gm-gallery-section__marquee--fast { --gl-marquee-duration: 24s; }

@keyframes gm-gallery-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Motion is decorative here — hold the strip still when reduced motion is asked for. */
@media (prefers-reduced-motion: reduce) {
    .gm-gallery-section--style-marquee .gm-gallery-section__track {
        animation: none;
    }
    .gm-gallery-section--style-marquee .gm-gallery-section__marquee {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .gm-gallery-section--style-marquee { --gl-marquee-item-width: 250px; }
}

@media (max-width: 480px) {
    .gm-gallery-section--style-marquee { --gl-marquee-item-width: 200px; }
}

.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;
    text-align: var(--gl-caption-align);
}

/* Lightbox (CSS-only via :target) */
.gm-gallery-section__lightbox {
    display: none;
    inset: 0;
    position: fixed;
    z-index: 1000;
}
.gm-gallery-section__lightbox:target {
    align-items: center;
    display: flex;
    justify-content: center;
}
.gm-gallery-section__lightbox-backdrop {
    background: rgba(15, 23, 42, 0.88);
    inset: 0;
    position: absolute;
}
.gm-gallery-section__lightbox-frame {
    background: var(--gm-surface, #ffffff);
    border-radius: var(--theme-radius-lg, 12px);
    max-height: 90vh;
    max-width: min(1100px, 92vw);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.gm-gallery-section__lightbox-frame img {
    display: block;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    width: 100%;
}
.gm-gallery-section__lightbox-frame figcaption {
    color: var(--gm-text, #111);
    font-size: 14px;
    padding: 12px 16px;
}
.gm-gallery-section__lightbox-close {
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 22px;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 10px;
    width: 36px;
}

@media (max-width: 980px) {
    .gm-gallery-section--style-uniform .gm-gallery-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-gallery-section--style-masonry .gm-gallery-section__grid { column-count: 2; }
}
@media (max-width: 560px) {
    .gm-gallery-section { padding: var(--gl-section-padding-block) 18px; }
    .gm-gallery-section--style-uniform .gm-gallery-section__grid { grid-template-columns: 1fr; }
    .gm-gallery-section--style-masonry .gm-gallery-section__grid { column-count: 1; }
}

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


/* getme-css-bundle: css/commerce/sections/testimonials.css */
/* ════════════════════════════════════════════════════════════════════
   testimonials — Customer quote cards.
   Namespace: --ts-*   Scope: .gm-testimonials-section
   ════════════════════════════════════════════════════════════════════ */

.gm-testimonials-section {
    --ts-section-bg: color-mix(in srgb, var(--gm-primary) 8%, var(--gm-bg));
    --ts-text-color: var(--gm-text);
    --ts-title-color: var(--gm-text);
    --ts-kicker-color: var(--gm-primary);
    --ts-card-bg: #ffffff;
    --ts-card-border: var(--gm-border);
    --ts-quote-color: var(--gm-text);
    --ts-section-padding-block: var(--theme-spacing-3xl, 64px);
    --ts-grid-gap: var(--theme-spacing-lg, 24px);
    --ts-card-radius: var(--theme-radius-lg, 12px);
    --ts-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --ts-body-font: var(--font-primary, sans-serif);
    --ts-grid-columns: 3;

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

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

.gm-testimonials-section--columns-1 { --ts-grid-columns: 1; }
.gm-testimonials-section--columns-1 .gm-testimonials-section__grid {
    margin: 0 auto;
    max-width: 720px;
}
.gm-testimonials-section--columns-2 { --ts-grid-columns: 2; }
.gm-testimonials-section--columns-3 { --ts-grid-columns: 3; }

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

.gm-testimonials-section__card {
    background: var(--ts-card-bg);
    border: 1px solid var(--ts-card-border);
    border-radius: var(--ts-card-radius);
    margin: 0;
    padding: 28px;
    position: relative;
}

.gm-testimonials-section__card::before {
    color: var(--ts-kicker-color);
    content: "\201C";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 0.7;
    margin-bottom: 6px;
}

.gm-testimonials-section__card blockquote {
    color: var(--ts-quote-color);
    font-size: 16px;
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 16px;
}

.gm-testimonials-section__card figcaption {
    display: grid;
    gap: 2px;
}
.gm-testimonials-section__card figcaption strong {
    color: var(--ts-title-color);
    font-family: var(--ts-title-font);
    font-size: 14px;
    font-weight: 700;
}
.gm-testimonials-section__card figcaption span {
    color: var(--ts-text-color);
    font-size: 13px;
    opacity: 0.7;
}

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

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


/* getme-css-bundle: css/commerce/sections/faq.css */
/* ════════════════════════════════════════════════════════════════════
   faq — Accordion using native <details>.
   Namespace: --fq-*   Scope: .gm-faq-section
   ════════════════════════════════════════════════════════════════════ */

.gm-faq-section {
    --fq-section-bg: transparent;
    --fq-text-color: var(--gm-text);
    --fq-title-color: var(--gm-text);
    --fq-kicker-color: var(--gm-primary);
    --fq-question-color: var(--gm-text);
    --fq-answer-color: var(--gm-muted);
    --fq-item-bg: var(--gm-surface);
    --fq-item-border: var(--gm-border);
    --fq-section-padding-block: var(--theme-spacing-3xl, 64px);
    --fq-item-gap: var(--theme-spacing-sm, 12px);
    --fq-item-radius: var(--theme-radius-md, 10px);
    --fq-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --fq-body-font: var(--font-primary, sans-serif);

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

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

.gm-faq-section__list {
    display: grid;
    gap: var(--fq-item-gap);
    margin: 0 auto;
    max-width: 820px;
}

.gm-faq-section--layout-two-column .gm-faq-section__list {
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
}

.gm-faq-section__item {
    background: var(--fq-item-bg);
    border: 1px solid var(--fq-item-border);
    border-radius: var(--fq-item-radius);
    padding: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.gm-faq-section__item[open] {
    border-color: color-mix(in srgb, var(--gm-primary) 40%, var(--fq-item-border));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.gm-faq-section__question {
    align-items: center;
    color: var(--fq-question-color);
    cursor: pointer;
    display: flex;
    font-weight: 700;
    gap: 14px;
    justify-content: space-between;
    list-style: none;
    padding: 18px 22px;
}
.gm-faq-section__question::-webkit-details-marker { display: none; }
.gm-faq-section__question:focus-visible {
    border-radius: var(--fq-item-radius);
    outline: 2px solid var(--gm-primary);
    outline-offset: 2px;
}

.gm-faq-section__icon {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--fq-question-color);
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 18px;
    font-weight: 400;
    height: 28px;
    justify-content: center;
    transition: transform 180ms ease;
    width: 28px;
}
.gm-faq-section__item[open] .gm-faq-section__icon { transform: rotate(45deg); }

.gm-faq-section__answer {
    color: var(--fq-answer-color);
    line-height: 1.6;
    padding: 0 22px 20px;
}

@media (max-width: 760px) {
    .gm-faq-section--layout-two-column .gm-faq-section__list {
        grid-template-columns: 1fr;
    }
    .gm-faq-section__question { padding: 16px 18px; }
    .gm-faq-section__answer { padding: 0 18px 16px; }
}

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


/* getme-css-bundle: css/commerce/sections/pricing.css */
/* ════════════════════════════════════════════════════════════════════
   pricing — Plan tier cards with optional "popular" emphasis.
   Namespace: --pc-*   Scope: .gm-pricing-section
   ════════════════════════════════════════════════════════════════════ */

.gm-pricing-section {
    --pc-section-bg: transparent;
    --pc-text-color: var(--gm-text);
    --pc-title-color: var(--gm-text);
    --pc-kicker-color: var(--gm-primary);
    --pc-card-bg: var(--gm-surface);
    --pc-card-border: var(--gm-border);
    --pc-popular-accent: var(--gm-primary);
    --pc-price-color: var(--gm-text);
    --pc-feature-color: var(--gm-muted);
    --pc-cta-bg: var(--gm-primary);
    --pc-cta-text: #ffffff;
    --pc-section-padding-block: var(--theme-spacing-3xl, 64px);
    --pc-grid-gap: var(--theme-spacing-lg, 24px);
    --pc-card-radius: var(--theme-radius-lg, 12px);
    --pc-grid-columns: 3;
    --pc-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --pc-body-font: var(--font-primary, sans-serif);

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

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

.gm-pricing-section__grid {
    display: grid;
    gap: var(--pc-grid-gap);
    grid-template-columns: repeat(var(--pc-grid-columns), minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1180px;
}

.gm-pricing-section__card {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-card-border);
    border-radius: var(--pc-card-radius);
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 28px 24px;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.gm-pricing-section__card:hover {
    border-color: color-mix(in srgb, var(--pc-popular-accent) 35%, var(--pc-card-border));
    transform: translateY(-2px);
}

.gm-pricing-section__card--popular {
    border-color: var(--pc-popular-accent);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.gm-pricing-section__badge {
    align-self: flex-start;
    background: var(--pc-popular-accent);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    text-transform: uppercase;
}

.gm-pricing-section__plan-name {
    color: var(--pc-title-color);
    font-family: var(--pc-title-font);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.gm-pricing-section__price-row {
    align-items: baseline;
    color: var(--pc-price-color);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.gm-pricing-section__price {
    color: var(--pc-price-color);
    font-family: var(--pc-title-font);
    font-size: 36px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}
.gm-pricing-section__period {
    color: var(--pc-feature-color);
    font-size: 14px;
}

.gm-pricing-section__features {
    color: var(--pc-feature-color);
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gm-pricing-section__features li {
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}
.gm-pricing-section__features li::before {
    color: var(--pc-popular-accent);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
}

.gm-pricing-section__cta {
    align-items: center;
    background: var(--pc-cta-bg);
    border: 1px solid var(--pc-cta-bg);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md, 8px)));
    box-shadow: var(--gm-button-shadow, var(--theme-button-shadow, none));
    color: var(--pc-cta-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    margin-top: auto;
    min-height: 44px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
}
.gm-pricing-section__cta:hover { filter: brightness(0.92); }
.gm-pricing-section__card--popular .gm-pricing-section__cta { background: var(--pc-popular-accent); border-color: var(--pc-popular-accent); }

@media (max-width: 980px) {
    .gm-pricing-section__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .gm-pricing-section { padding: var(--pc-section-padding-block) 18px; }
    .gm-pricing-section__grid { grid-template-columns: 1fr; }
    .gm-pricing-section__price { font-size: 32px; }
}

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


/* getme-css-bundle: css/commerce/sections/cta-banner.css */
/* ════════════════════════════════════════════════════════════════════
   cta-banner — Compact call-to-action band.
   Namespace: --cb-*   Scope: .gm-cta-banner-section
   ════════════════════════════════════════════════════════════════════ */

.gm-cta-banner-section {
    --cb-section-bg: linear-gradient(135deg, var(--gm-primary), color-mix(in srgb, var(--gm-primary) 70%, #000));
    --cb-text-color: rgba(255, 255, 255, 0.9);
    --cb-title-color: #ffffff;
    --cb-kicker-color: rgba(255, 255, 255, 0.8);
    --cb-primary-bg: #ffffff;
    --cb-primary-text: var(--gm-primary);
    --cb-secondary-bg: transparent;
    --cb-secondary-text: #ffffff;
    --cb-section-padding-block: var(--theme-spacing-3xl, 64px);
    --cb-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --cb-body-font: var(--font-primary, sans-serif);

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

/* Full-width background — opt-in via the "Full width background" editor toggle.
   .gm-main is inset from the page edges (one gutter per side, and past
   --gm-page-max-width it is pinned and centred, leaving far more), so by
   default the band stops short of both edges.

   Rather than let the section escape its container, widen the container and
   re-inset its other children — the same shape the theme already uses for the
   header and footer, which are full-bleed bands with their contents centred by
   an inner width. Nothing is ever wider than the page, so there is no overhang
   to clip and no horizontal scrollbar: document.scrollWidth was measured equal
   to clientWidth at 390/768/1280/1920/2560 (GR-10).

   :has() keeps this scoped to a page that actually switches the toggle on;
   every other page keeps .gm-main exactly as the theme defines it (GR-3).

   Two alternatives were measured and rejected:
   * margin-inline: calc(50% - 50vw) + width: 100vw — reaches both edges, but
     100vw counts the vertical scrollbar, so it hangs 7.5px past each side and
     document.scrollWidth exceeded clientWidth at every width tested. Adding
     overflow-x:clip on .gm-main removed the overhang but clipped the bleed with
     it (left edge fell back to page background). Checkout gets away with that
     pairing because it clips on <body> in a full-screen layout.
   * margin-inline: calc(var(--gm-page-gutter) * -1) — no overhang, but leaves
     194px of page background each side at 1920px, since past the max-width the
     leftover is half the difference rather than a gutter. */
.gm-main:has(> .gm-cta-banner-section--full) {
    max-width: none;
    width: 100%;
}

.gm-main:has(> .gm-cta-banner-section--full) > :not(.gm-cta-banner-section--full) {
    margin-inline: auto;
    width: min(var(--gm-page-max-width), calc(100% - (var(--gm-page-gutter) * 2)));
}

.gm-cta-banner-section__inner {
    align-items: center;
    display: grid;
    gap: 28px;
    margin: 0 auto;
    max-width: 1200px;
}

.gm-cta-banner-section--layout-centered .gm-cta-banner-section__inner {
    justify-items: center;
    text-align: center;
}
.gm-cta-banner-section--layout-row .gm-cta-banner-section__inner {
    grid-template-columns: minmax(0, 1.6fr) auto;
}

.gm-cta-banner-section__copy .gm-kicker {
    color: var(--cb-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.gm-cta-banner-section__title {
    color: var(--cb-title-color);
    font-family: var(--cb-title-font);
    font-size: clamp(24px, 3.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
}
.gm-cta-banner-section__intro {
    color: var(--cb-text-color);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    max-width: 680px;
}

.gm-cta-banner-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

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

@media (max-width: 980px) {
    .gm-cta-banner-section--layout-row .gm-cta-banner-section__inner {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .gm-cta-banner-section { padding: var(--cb-section-padding-block) var(--gm-section-inline-padding); }
}

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


/* getme-css-bundle: css/commerce/sections/newsletter.css */
/* ════════════════════════════════════════════════════════════════════
   newsletter — Inline subscribe form.
   Namespace: --nw-*   Scope: .gm-newsletter-section
   ════════════════════════════════════════════════════════════════════ */

.gm-newsletter-section {
    --nw-section-bg: var(--gm-bg);
    --nw-text-color: var(--gm-text);
    --nw-title-color: var(--gm-text);
    --nw-kicker-color: var(--gm-primary);
    --nw-field-bg: #ffffff;
    --nw-field-text: var(--gm-text);
    --nw-field-border: var(--gm-border);
    --nw-button-bg: var(--gm-primary);
    --nw-button-text: #ffffff;
    --nw-section-padding-block: var(--theme-spacing-3xl, 64px);
    --nw-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --nw-body-font: var(--font-primary, sans-serif);

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

.gm-newsletter-section__inner {
    align-items: center;
    display: grid;
    gap: 28px;
    margin: 0 auto;
    max-width: 1080px;
}

.gm-newsletter-section--layout-centered .gm-newsletter-section__inner {
    justify-items: center;
    text-align: center;
}

.gm-newsletter-section--layout-row .gm-newsletter-section__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.gm-newsletter-section__copy { min-width: 0; }
.gm-newsletter-section__copy .gm-kicker {
    color: var(--nw-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.gm-newsletter-section__title {
    color: var(--nw-title-color);
    font-family: var(--nw-title-font);
    font-size: clamp(22px, 3vw, 34px);
    margin: 0 0 8px;
}
.gm-newsletter-section__intro {
    color: var(--nw-text-color);
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
}

.gm-newsletter-section__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 560px;
}
.gm-newsletter-section--layout-centered .gm-newsletter-section__form { margin: 0 auto; }

.gm-newsletter-section__field {
    display: grid;
    flex: 1;
    min-width: 220px;
}
.gm-newsletter-section__field-label {
    color: var(--nw-text-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    opacity: 0.7;
    text-transform: uppercase;
}
.gm-newsletter-section--layout-centered .gm-newsletter-section__field-label {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.gm-newsletter-section__field input {
    background: var(--nw-field-bg);
    border: 1px solid var(--nw-field-border);
    border-radius: var(--gm-control-radius, var(--theme-input-radius, var(--theme-radius-md, 8px)));
    color: var(--nw-field-text);
    font-family: inherit;
    font-size: 15px;
    min-height: 48px;
    padding: 0 14px;
}

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

.gm-newsletter-section__consent {
    color: var(--nw-text-color);
    font-size: 12px;
    margin: 18px auto 0;
    max-width: 700px;
    opacity: 0.65;
    text-align: center;
}

@media (max-width: 980px) {
    .gm-newsletter-section--layout-row .gm-newsletter-section__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .gm-newsletter-section { padding: var(--nw-section-padding-block) var(--gm-section-inline-padding); }
}

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


/* getme-css-bundle: css/commerce/sections/contact-form.css */
/* ════════════════════════════════════════════════════════════════════
   contact-form — Shell around the backend-owned GetMe forms widget.
   Namespace: --cf-*   Scope: .gm-contact-form-section

   The widget ships its own stylesheet (runtime "widgets" entry, linked by
   layout/base.html). We deliberately do not restyle its internals — that
   would be a parallel layer fighting the library on its own selectors (GR-3).
   Instead we style the card around it and hand the brand values down through
   the platform's own control tokens, which the widget already consumes.

   The forms capability declares editable_settings: [], so none of these values
   arrive as section settings — they resolve from the theme's own tokens, which
   is where a merchant changes them (settings_data.json).
   ════════════════════════════════════════════════════════════════════ */

.gm-contact-form-section {
    --cf-section-bg: transparent;
    --cf-text-color: var(--gm-text);
    --cf-title-color: var(--gm-primary);
    --cf-kicker-color: var(--gm-primary);
    --cf-card-bg: var(--gm-surface);
    --cf-accent: var(--gm-primary);
    --cf-card-max-width: 720px;
    --cf-card-radius: var(--theme-radius-lg, 12px);
    --cf-section-padding-block: var(--theme-spacing-3xl, 64px);
    --cf-title-font: var(--font-heading, var(--font-primary, sans-serif));
    --cf-body-font: var(--font-primary, sans-serif);

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

.gm-contact-form-section__inner {
    margin: 0 auto;
    max-width: var(--gm-container-max-width, 1200px);
}

.gm-contact-form-section__head {
    margin: 0 auto 32px;
    max-width: 800px;
    text-align: center;
}

.gm-contact-form-section__kicker {
    color: var(--cf-kicker-color);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gm-contact-form-section__title {
    color: var(--cf-title-color);
    font-family: var(--cf-title-font);
    margin: 8px 0 0;
}

.gm-contact-form-section__intro {
    color: var(--gm-muted);
    line-height: 1.7;
    margin: 12px 0 0;
}

.gm-contact-form-section__card {
    background: var(--cf-card-bg);
    border: 1px solid var(--gm-border);
    border-radius: var(--cf-card-radius);
    /* Brand-tinted rather than neutral black, which reads cleaner on the warm
       backgrounds this theme uses. */
    box-shadow: 0 18px 40px color-mix(in srgb, var(--cf-accent) 10%, transparent);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px);
}

.gm-contact-form-section__card {
    max-width: var(--cf-card-max-width);
}

/* Hand the accent down through the tokens the widget already reads, so its
   inputs and submit button pick up the brand without selector overrides. */
.gm-contact-form-section__mount {
    --color-primary: var(--cf-accent);
    --theme-input-focus: var(--cf-accent);
}

.gm-contact-form-section__empty {
    color: var(--gm-muted);
    margin: 0;
    text-align: center;
}

@media (max-width: 600px) {
    .gm-contact-form-section__card { padding: 24px 20px; }
}

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


/* getme-css-bundle: css/commerce/sections/action-buttons.css */
/* ════════════════════════════════════════════════════════════════════
   action-buttons — Row of CTA pills.
   Namespace: --ab-*   Scope: .gm-action-buttons-section

   Mirrors the header's action pills (theme.css "Action buttons"): 30px
   radius, uppercase, 700 weight, lift on hover. Kept as its own section
   stylesheet rather than reusing .gm-nav__link--action-* so the two can
   diverge without one breaking the other (GR-4).
   ════════════════════════════════════════════════════════════════════ */

.gm-action-buttons-section {
    --ab-section-bg: transparent;
    --ab-section-padding-block: var(--theme-spacing-2xl, 48px);
    --ab-gap: var(--theme-spacing-md, 16px);
    --ab-radius: 30px;
    --ab-font: var(--font-primary, sans-serif);

    background: var(--ab-section-bg);
    font-family: var(--ab-font);
    padding: var(--ab-section-padding-block) var(--gm-section-inline-padding);
}

.gm-action-buttons-section__inner {
    margin: 0 auto;
    max-width: var(--gm-container-max-width, 1200px);
}

.gm-action-buttons-section__head {
    margin: 0 0 24px;
    text-align: center;
}

.gm-action-buttons-section__kicker {
    color: var(--gm-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gm-action-buttons-section__title {
    color: var(--gm-text);
    font-family: var(--font-heading, var(--font-primary, sans-serif));
    margin: 8px 0 0;
}

.gm-action-buttons-section__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ab-gap);
    justify-content: center;
}

.gm-action-buttons-section--align-start .gm-action-buttons-section__row { justify-content: flex-start; }
.gm-action-buttons-section--align-end .gm-action-buttons-section__row { justify-content: flex-end; }
.gm-action-buttons-section--align-start .gm-action-buttons-section__head { text-align: left; }
.gm-action-buttons-section--align-end .gm-action-buttons-section__head { text-align: right; }

.gm-action-buttons-section__button {
    /* Falls back to the theme palette when a block sets no colours, so a newly
       added button is never unstyled. */
    --ab-btn-bg: var(--gm-primary);
    --ab-btn-text: #fff;

    align-items: center;
    background: var(--ab-btn-bg);
    border: 2px solid var(--ab-btn-bg);
    border-radius: var(--ab-radius);
    color: var(--ab-btn-text);
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    gap: 0.6rem;
    letter-spacing: 0.5px;
    line-height: 1.2;
    padding: 0.8rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
                color var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease),
                transform var(--theme-animation-duration-fast, 150ms) var(--theme-animation-easing-standard, ease),
                box-shadow var(--theme-animation-duration-fast, 150ms) var(--theme-animation-easing-standard, ease);
    white-space: nowrap;
}

.gm-action-buttons-section__button:hover,
.gm-action-buttons-section__button:focus-visible {
    /* Hover colours are optional; without them the pill just lifts, which still
       reads as interactive. */
    background: var(--ab-btn-hover-bg, var(--ab-btn-bg));
    border-color: var(--ab-btn-hover-bg, var(--ab-btn-bg));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--ab-btn-bg) 35%, transparent);
    color: var(--ab-btn-hover-text, var(--ab-btn-text));
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .gm-action-buttons-section__row {
        flex-direction: column;
        align-items: stretch;
    }

    .gm-action-buttons-section__button {
        justify-content: center;
        width: 100%;
    }
}

/* getme-css-bundle:end css/commerce/sections/action-buttons.css */


/* getme-css-bundle: css/commerce/sections/announcement-bar.css */
/* ════════════════════════════════════════════════════════════════════
   announcement-bar — campaign / announcement marquee strip.

   Owner     : sections/announcement-bar.json + .html
   Namespace : --ab-*  (announcement-bar). Unique to this section.
   Scope     : Every rule starts with `.gm-announcement-bar`.
   Marquee   : CSS-only. The track holds two identical message groups and
               translates -50% for a seamless loop. Paused on hover and
               disabled (static, centered) for reduced-motion visitors.
   ════════════════════════════════════════════════════════════════════ */

.gm-announcement-bar {
    --ab-bg: var(--color-bg-dark, #0f172a);
    --ab-text: #ffffff;
    --ab-padding: var(--theme-spacing-sm, 10px);
    --ab-font-size: 14px;
    --ab-duration: 28s;

    background: var(--ab-bg);
    color: var(--ab-text);
    overflow: hidden;
}

/* Optional edge-to-edge full-bleed (off by default). overflow:hidden on the
   bar clips the marquee so the page never gains a horizontal scrollbar. */
.gm-announcement-bar--full {
    margin-inline: calc(50% - 50vw);
}

.gm-announcement-bar--font-sm { --ab-font-size: 13px; }
.gm-announcement-bar--font-md { --ab-font-size: 14px; }
.gm-announcement-bar--font-lg { --ab-font-size: 16px; }

.gm-announcement-bar--speed-slow { --ab-duration: 42s; }
.gm-announcement-bar--speed-medium { --ab-duration: 28s; }
.gm-announcement-bar--speed-fast { --ab-duration: 18s; }

.gm-announcement-bar__link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.gm-announcement-bar__viewport {
    overflow: hidden;
    padding: var(--ab-padding) 0;
}

.gm-announcement-bar__track {
    animation: gm-ab-marquee var(--ab-duration) linear infinite;
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

.gm-announcement-bar:hover .gm-announcement-bar__track {
    animation-play-state: paused;
}

.gm-announcement-bar__group {
    align-items: center;
    display: inline-flex;
}

.gm-announcement-bar__item {
    font-size: var(--ab-font-size);
    font-weight: 500;
    padding: 0 10px;
}

.gm-announcement-bar__sep {
    font-size: var(--ab-font-size);
    opacity: 0.55;
    padding: 0 2px;
}

@keyframes gm-ab-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Static (off) + reduced-motion: show one centered group, no animation. */
.gm-announcement-bar--speed-off .gm-announcement-bar__track {
    animation: none;
    justify-content: center;
    width: 100%;
}
.gm-announcement-bar--speed-off .gm-announcement-bar__group[aria-hidden="true"] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .gm-announcement-bar__track {
        animation: none;
        justify-content: center;
        width: 100%;
    }
    .gm-announcement-bar__group[aria-hidden="true"] {
        display: none;
    }
}

/* ── Arrows mode (one message, prev/next) ───────────────────────── */
.gm-announcement-bar__arrows {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: var(--ab-padding) 12px;
}

.gm-announcement-bar__stage {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    text-align: center;
}

.gm-announcement-bar__slide {
    display: none;
    font-size: var(--ab-font-size);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-announcement-bar__slide.is-active {
    animation: gm-ab-fade 280ms ease;
    display: block;
}

@keyframes gm-ab-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gm-announcement-bar__nav {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 22px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    opacity: 0.75;
    width: 28px;
}

.gm-announcement-bar__nav:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .gm-announcement-bar__slide.is-active { animation: none; }
}

/* getme-css-bundle:end css/commerce/sections/announcement-bar.css */


/* ── Legacy stylesheets — service listing surfaces not yet migrated ── */

/* getme-css-bundle: css/commerce/listings.css */
/* ════════════════════════════════════════════════════════════════════
   commerce/listings.css — shared listing chrome

   The service listing was migrated to a section-scoped stylesheet
   (commerce/sections/service-listing.css, --sl-*). The .gm-service-*
   classes below are now consumed by the booking-listing section
   (sections/booking-listing.html reuses .gm-service-section / -grid /
   -card / -category), so this file must stay until booking-listing
   gets its own namespace.
   ════════════════════════════════════════════════════════════════════ */

.gm-service-section {
    --gm-commerce-action-bg: var(--gm-primary);
    --gm-commerce-action-hover: var(--gm-primary-dark);
    --gm-commerce-action-text: #ffffff;
    --gm-commerce-secondary-text: var(--gm-primary-dark);
    --gm-commerce-grid-columns: 3;
    --gm-commerce-action-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    padding: 26px;
}

.gm-service-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(var(--gm-commerce-grid-columns), minmax(0, 1fr));
}

.gm-service-card {
    background: #ffffff;
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-card-service-radius, var(--theme-radius-lg));
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

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

.gm-service-card a {
    color: var(--gm-text);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100%;
    text-decoration: none;
}

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

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

.gm-service-image-placeholder {
    background: linear-gradient(135deg, #eef2f7, #dbe3ef);
    display: block;
    width: 100%;
}

.gm-service-category {
    color: var(--gm-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    min-height: 16px;
    overflow: hidden;
    padding: 14px 14px 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-service-card h3 {
    font-size: 16px;
    line-height: 1.3;
    margin: 6px 14px 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.gm-service-card p {
    color: var(--gm-muted);
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 18px 0;
    min-height: 42px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.gm-service-price-stack {
    align-items: center;
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: 16px 14px;
    min-height: 46px;
}

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

.gm-service-actions {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
}

.gm-service-actions a,
.gm-service-actions button {
    align-items: center;
    background: var(--gm-commerce-action-bg);
    border: 1px solid var(--gm-commerce-action-bg);
    border-radius: var(--gm-commerce-action-radius);
    color: var(--gm-commerce-action-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.gm-service-actions a:hover,
.gm-service-actions button:hover {
    background: var(--gm-commerce-action-hover);
    border-color: var(--gm-commerce-action-hover);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--gm-commerce-action-bg) 26%, transparent);
}

.gm-service-actions a:active,
.gm-service-actions button:active {
    filter: brightness(0.92);
}

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

.gm-product-section__pagination,
.gm-service-listing-section__pagination,
.gm-category-listing-section__pagination,
.gm-brand-listing-section__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 28px;
}

.gm-product-section__pagination a,
.gm-product-section__pagination span,
.gm-service-listing-section__pagination a,
.gm-service-listing-section__pagination span,
.gm-category-listing-section__pagination a,
.gm-category-listing-section__pagination span,
.gm-brand-listing-section__pagination a,
.gm-brand-listing-section__pagination span {
    align-items: center;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-button-radius, var(--theme-button-radius, var(--theme-radius-md)));
    color: var(--gm-text);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 38px;
    min-width: 38px;
    padding: 0 12px;
    text-decoration: none;
}

.gm-product-section__pagination span,
.gm-service-listing-section__pagination span,
.gm-category-listing-section__pagination span,
.gm-brand-listing-section__pagination span {
    border-color: transparent;
    color: var(--gm-muted);
}

.gm-product-section__pagination a[aria-current="page"],
.gm-service-listing-section__pagination a[aria-current="page"],
.gm-category-listing-section__pagination a[aria-current="page"],
.gm-brand-listing-section__pagination a[aria-current="page"] {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary, #ffffff);
}

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

/* getme-css-bundle:end css/commerce/listings.css */


:root {
    color-scheme: light;

    /* Token bridge
       The renderer injects merchant/theme settings as canonical tokens such as
       --color-primary, --color-bg-primary, --font-primary and --theme-radius-lg.
       Atlas maps only those canonical tokens into its own --gm-*
       internal surface. */
    --gm-primary: var(--color-primary);
    /* Dark/light primary shades derive from the BRAND primary (or the renderer's
       derived --color-primary-hover), NOT --color-primary-dark/light: Atlas
       ships those canonical tokens with a non-brand default that does not track
       --color-primary, so they leaked a stale colour onto hovers + outline
       buttons (e.g. blue on an orange theme). One source of truth = the primary. */
    --gm-primary-dark: var(--color-primary-hover, color-mix(in srgb, var(--gm-primary) 80%, #000));
    --gm-primary-light: color-mix(in srgb, var(--gm-primary) 12%, transparent);
    --gm-on-primary: var(--color-text-on-primary, #ffffff);
    --gm-bg: var(--color-bg-secondary, var(--color-bg-primary));
    --gm-surface: var(--color-surface, var(--color-card-bg, var(--color-bg-primary)));
    /* Single source for card media/image backgrounds — keeps every product &
       service card (featured / listing / booking) on the same light surface. */
    --gm-media-surface: var(--color-bg-tertiary, #eef2f7);
    --gm-text: var(--color-text-primary);
    --gm-muted: var(--color-text-muted, var(--color-text-secondary));
    --gm-border: var(--color-border, var(--color-border-light, var(--color-border-medium)));
    --gm-button-radius: var(--theme-button-radius, var(--theme-radius-md));
    --gm-button-shadow: var(--theme-button-shadow, none);
    --gm-control-bg: var(--theme-input-background, var(--gm-surface));
    --gm-control-border: var(--theme-input-border, var(--gm-border));
    --gm-control-focus: var(--theme-input-focus, var(--gm-primary));
    --gm-control-radius: var(--theme-input-radius, var(--theme-radius-md));
    --gm-dropdown-bg: var(--theme-dropdown-popup-background, var(--gm-bg));
    --gm-dropdown-radius: var(--theme-dropdown-popup-radius, var(--gm-control-radius));
    /* Interaction + semantic tokens — a single source for radius, shadow, motion
       and focus, so components reference tokens instead of literal values. */
    --gm-card-radius: var(--theme-card-radius, var(--theme-radius-lg, 12px));
    --gm-card-shadow: var(--theme-card-shadow, none);
    --gm-pill-radius: var(--theme-variant-pill-radius, var(--theme-radius-pill, 9999px));
    --gm-badge-radius: var(--theme-badge-radius, var(--theme-radius-pill, 9999px));
    --gm-shadow-sm: var(--theme-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    --gm-shadow-md: var(--theme-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    --gm-shadow-lg: var(--theme-shadow-lg, 0 12px 28px rgba(15, 23, 42, 0.1));
    --gm-transition-fast: var(--theme-animation-duration-fast, 160ms) var(--theme-animation-easing-standard, ease);
    --gm-transition: var(--theme-animation-duration-normal, 240ms) var(--theme-animation-easing-standard, ease);
    --gm-focus-ring-width: 3px;
    --gm-focus-ring-mix: 16%;
    --gm-focus-ring-color: var(--gm-control-focus, var(--gm-primary));
    --gm-focus-ring: 0 0 0 var(--gm-focus-ring-width) color-mix(in srgb, var(--gm-focus-ring-color) var(--gm-focus-ring-mix), transparent);
    --gm-hover-bg: color-mix(in srgb, var(--gm-primary) 82%, #000);
    --gm-disabled-opacity: 0.56;
    /* Color palette — named colors derived from the theme's --color-* tokens.
       The color schemes below are built from these. */
    --palette-brand: var(--color-primary);
    --palette-brand-contrast: var(--color-text-on-primary, #ffffff);
    --palette-accent: var(--color-accent, var(--color-primary));
    --palette-accent-contrast: var(--color-text-on-accent, #ffffff);
    --palette-surface: var(--gm-surface);
    --palette-surface-text: var(--gm-text);
    --palette-surface-border: var(--gm-border);
    --palette-muted: var(--color-bg-secondary, var(--gm-surface));
    --palette-muted-text: var(--gm-muted);
    --palette-inverse: var(--color-bg-dark, var(--color-secondary));
    --palette-inverse-text: var(--color-text-light, #ffffff);
    /* Color schemes — named role sets (background, text, border, button) built
       from the palette. A section applies one via its Color scheme setting. */
    --scheme-background-1-bg: var(--palette-surface);
    --scheme-background-1-text: var(--palette-surface-text);
    --scheme-background-1-border: var(--palette-surface-border);
    --scheme-background-1-button: var(--palette-brand);
    --scheme-background-1-button-text: var(--palette-brand-contrast);
    --scheme-background-2-bg: var(--palette-muted);
    --scheme-background-2-text: var(--palette-muted-text);
    --scheme-background-2-border: var(--palette-surface-border);
    --scheme-background-2-button: var(--palette-brand);
    --scheme-background-2-button-text: var(--palette-brand-contrast);
    --scheme-inverse-bg: var(--palette-inverse);
    --scheme-inverse-text: var(--palette-inverse-text);
    --scheme-inverse-border: color-mix(in srgb, var(--palette-inverse-text) 20%, transparent);
    --scheme-inverse-button: var(--palette-brand);
    --scheme-inverse-button-text: var(--palette-brand-contrast);
    /* Header chrome — single source for the hairline separator + pinned elevation.
       Token-only (no editor field): follows the theme border + a soft shadow. */
    --gm-header-border: var(--gm-border);
    --gm-header-shadow: 0 6px 20px -12px color-mix(in srgb, var(--gm-text) 40%, transparent);

    --gm-page-max-width: var(--theme-container-content-max-width, 1440px);
    --gm-page-gutter: var(--theme-container-content-inline-padding, clamp(14px, 2vw, 40px));
    --gm-section-inline-padding: clamp(14px, 1.5vw, 24px);
    /* Page sections own their block-start spacing. Keeping the base main flush
       with header chrome avoids stacking a second, theme-wide top gap. */
    --gm-main-padding-block-start: 0px;
    --gm-main-padding-block-end: 72px;
}

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-primary, sans-serif);
    background: var(--gm-bg);
    color: var(--gm-text);
    /* Crisp grayscale antialiasing site-wide (inherited → storefront + widgets, incl. the
       checkout shadow DOM). Themeable from the Typography settings via --gm-font-smoothing
       (e.g. "auto" to restore the OS default subpixel rendering). */
    -webkit-font-smoothing: var(--gm-font-smoothing, antialiased);
    -moz-osx-font-smoothing: var(--gm-font-smoothing-moz, grayscale);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, var(--font-primary, sans-serif));
}

a {
    color: inherit;
}

.gm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Header and footer are full-bleed colour bands; their contents are centred by
   an inner max-width instead. Width is 100% (never 100vw) so a visible
   scrollbar cannot cause horizontal overflow. */
.gm-header,
.gm-footer {
    width: 100%;
    margin: 0 auto;
}

.gm-footer {
    flex-shrink: 0;
}

.gm-header {
    background: var(--gm-header-bg, transparent);
    color: var(--gm-header-text, var(--gm-text));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--theme-spacing-xl, 32px);
    min-height: var(--gm-header-height, 120px);
    padding-block: var(--gm-header-padding-block, 0);
    /* Symmetric side padding that also centres the contents at the page
       max-width — no wrapper element needed, since the component template
       does not emit one. */
    padding-inline: max(
        var(--gm-page-gutter),
        calc((100% - var(--gm-page-max-width)) / 2)
    );
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Sticky header — opt-in via the "Stick header to top on scroll" editor toggle
   (component setting `sticky`). Pins to top with a readable surface + soft
   elevation. A merchant-set header background still wins via the var fallback. */
.gm-header--sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--gm-header-bg, var(--gm-surface));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.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: var(--gm-header-logo-width, 200px);
}

/* The logo fills the header band rather than sitting at a fixed small cap —
   the brand mark is the primary identifier in this header. */
.gm-brand-logo {
    max-height: calc(var(--gm-header-height, 120px) - 20px);
    object-fit: contain;
    width: auto;
}

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

/* Desktop grouping: nav links sit next to the logo on the left, the two CTA
   buttons stay pinned to the right edge. Below the mobile breakpoint the header
   switches to its own grid/drawer layout, so this is scoped to wide viewports. */
@media (min-width: 761px) {
    .gm-header-actions {
        flex: 1 1 auto;
        justify-content: space-between;
        gap: var(--theme-spacing-xl, 32px);
        min-width: 0;
    }

    .gm-header-actions > .gm-nav {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: var(--theme-spacing-sm, 8px);
        min-width: 0;
    }

    /* The first action button absorbs the free space, pushing both buttons right. */
    .gm-nav__item--action-call,
    .gm-nav__item--action-order {
        flex: 0 0 auto;
    }

    .gm-nav__item--action-call {
        margin-left: auto;
    }
}

.gm-header-mobile-actions {
    display: none;
    align-items: center;
    gap: 4px;
}

.gm-header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-button-radius);
    background: var(--gm-surface);
    color: var(--gm-text);
    cursor: pointer;
}

.gm-header-menu-toggle {
    transition:
        background var(--gm-transition-fast),
        border-color var(--gm-transition-fast);
}

.gm-header-menu-toggle:hover {
    border-color: var(--gm-primary);
}

.gm-header-menu-toggle[aria-expanded="true"] {
    background: var(--gm-primary-light);
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
}

.gm-header-menu-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.gm-nav,
.gm-header-utility {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.gm-nav__item {
    display: inline-flex;
    position: relative;
}

.gm-nav__item--has-children {
    --gm-submenu-offset: 8px;
}

.gm-nav__item--has-children > .gm-nav__link::after {
    color: currentColor;
    content: "⌄";
    font-size: 12px;
    line-height: 1;
    opacity: 0.72;
    transition: transform var(--gm-transition-fast);
}

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

.gm-nav__link {
    align-items: center;
    border-radius: 20px;
    border: 1px solid transparent;
    color: var(--gm-muted);
    display: inline-flex;
    font-size: 1.2rem;
    font-weight: 600;
    gap: 7px;
    line-height: 1.2;
    min-height: 38px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    box-shadow: var(--gm-button-shadow);
    transition: all var(--theme-animation-duration-normal, 300ms)
        var(--theme-animation-easing-standard, ease);
}

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

/* Inside the gold header band the hover is an inverted black pill with a
   subtle lift, rather than the light-tint hover used elsewhere. */
.gm-header .gm-nav__link:hover {
    background: var(--color-secondary, #000);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Current page reads as an outlined pill, not a filled one. */
.gm-header .gm-nav__link[aria-current="page"],
.gm-header .gm-nav__link.is-active {
    background: transparent;
    border-color: var(--color-secondary, #000);
    color: var(--color-secondary, #000);
    font-weight: 700;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gm-header .gm-nav__link[aria-current="page"]:hover,
.gm-header .gm-nav__link.is-active:hover {
    background: var(--color-secondary, #000);
    color: #fff;
}

.gm-nav__submenu {
    background: var(--gm-dropdown-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-dropdown-radius);
    box-shadow: var(--theme-shadow-lg);
    display: grid;
    gap: 2px;
    left: 0;
    min-width: 220px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + var(--gm-submenu-offset));
    transform: translateY(-4px);
    transition:
        opacity var(--gm-transition-fast),
        transform var(--gm-transition-fast);
    z-index: 35;
}

.gm-nav__submenu::before {
    content: "";
    height: var(--gm-submenu-offset);
    left: 0;
    position: absolute;
    right: 0;
    top: calc(var(--gm-submenu-offset) * -1);
}

.gm-nav__submenu--mega-columns,
.gm-nav__submenu--logo-grid,
.gm-nav__submenu--card-grid,
.gm-nav__submenu--featured-panel {
    gap: 16px;
    left: 50%;
    padding: 16px;
    transform: translate(-50%, -4px);
    width: min(760px, calc(100vw - (var(--gm-page-gutter) * 2)));
}

.gm-nav__submenu--mega-columns {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.gm-nav__submenu--logo-grid {
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}

.gm-nav__submenu--card-grid,
.gm-nav__submenu--featured-panel {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.gm-nav__submenu-column {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.gm-nav__submenu-list {
    display: grid;
    gap: 2px;
}

.gm-nav__submenu-heading.gm-nav__link {
    border-bottom: 1px solid var(--gm-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--gm-text);
    font-size: 13px;
    font-weight: 700;
    justify-content: flex-start;
    min-height: 34px;
    padding: 0 0 8px;
    text-transform: uppercase;
    white-space: normal;
}

.gm-nav__tile {
    align-items: center;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    color: var(--gm-text);
    display: grid;
    gap: 9px;
    justify-items: center;
    min-height: 96px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
}

.gm-nav__tile:hover {
    border-color: var(--gm-primary);
    box-shadow: var(--theme-shadow-sm, none);
    color: var(--gm-primary-dark);
}

.gm-nav__tile-media {
    align-items: center;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 100%;
}

.gm-nav__tile-media img {
    display: block;
    max-height: 38px;
    max-width: 92px;
    object-fit: contain;
}

.gm-nav__tile-label {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.gm-nav__item:hover > .gm-nav__submenu,
.gm-nav__item:focus-within > .gm-nav__submenu,
.gm-nav__item[data-open="true"] > .gm-nav__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gm-nav__item:hover > .gm-nav__submenu--mega-columns,
.gm-nav__item:focus-within > .gm-nav__submenu--mega-columns,
.gm-nav__item:hover > .gm-nav__submenu--logo-grid,
.gm-nav__item:focus-within > .gm-nav__submenu--logo-grid,
.gm-nav__item:hover > .gm-nav__submenu--card-grid,
.gm-nav__item:focus-within > .gm-nav__submenu--card-grid,
.gm-nav__item:hover > .gm-nav__submenu--featured-panel,
.gm-nav__item:focus-within > .gm-nav__submenu--featured-panel,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--mega-columns,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--logo-grid,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--card-grid,
.gm-nav__item[data-open="true"] > .gm-nav__submenu--featured-panel {
    transform: translate(-50%, 0);
}

.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--featured-panel {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--featured-panel,
.gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--featured-panel,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--mega-columns,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--logo-grid,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--card-grid,
.gm-nav__item:nth-last-child(-n+2)[data-open="true"] > .gm-nav__submenu--featured-panel {
    transform: translateY(0);
}

.gm-nav__submenu-link.gm-nav__link {
    border-radius: calc(var(--gm-dropdown-radius) - 4px);
    box-shadow: none;
    color: var(--gm-text);
    justify-content: flex-start;
    min-height: 38px;
    padding: 9px 10px;
    white-space: nowrap;
}

.gm-nav__link--ghost {
    background: transparent;
    color: var(--gm-muted);
}

.gm-nav__icon {
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1;
}

.gm-nav__label {
    min-width: 0;
}

.gm-header-utility {
    gap: 8px;
}

.gm-header-utility__link {
    min-width: 42px;
}

.gm-nav__badge {
    align-items: center;
    background: var(--theme-badge-background, var(--gm-primary));
    border-radius: var(--theme-badge-radius, 9999px);
    color: var(--theme-badge-text, var(--gm-on-primary));
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-width: 19px;
    padding: 4px 6px;
}

.gm-nav__badge[hidden],
[data-getme-cart-count][hidden] {
    display: none;
}

.gm-nav__link--primary,
.gm-nav__link--button-primary,
.gm-header-cta--primary,
.gm-header-cta--button-primary {
    background: var(--gm-primary);
    border-color: var(--gm-primary);
    color: var(--gm-on-primary);
    font-weight: 700;
}

.gm-nav__link--primary:hover,
.gm-nav__link--button-primary:hover,
.gm-header-cta--primary:hover,
.gm-header-cta--button-primary:hover {
    background: var(--gm-primary-dark);
    border-color: var(--gm-primary-dark);
    color: var(--gm-on-primary);
}

.gm-nav__link--secondary,
.gm-nav__link--button-secondary,
.gm-header-cta--secondary,
.gm-header-cta--button-secondary {
    background: var(--color-bg-tertiary);
    border-color: var(--gm-border);
    color: var(--gm-text);
    font-weight: 700;
}

.gm-nav__link--secondary:hover,
.gm-nav__link--button-secondary:hover,
.gm-header-cta--secondary:hover,
.gm-header-cta--button-secondary:hover {
    background: var(--gm-surface);
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
}

.gm-nav__link--outline,
.gm-nav__link--outline-primary,
.gm-header-cta--outline,
.gm-header-cta--outline-primary {
    background: transparent;
    border-color: var(--gm-primary);
    color: var(--gm-primary-dark);
    font-weight: 700;
}

.gm-nav__link--outline:hover,
.gm-nav__link--outline-primary:hover,
.gm-header-cta--outline:hover,
.gm-header-cta--outline-primary:hover {
    background: var(--gm-primary-light);
    color: var(--gm-primary-dark);
}

.gm-nav__link--outline-light,
.gm-header-cta--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.72);
    color: #ffffff;
    font-weight: 700;
}

.gm-nav__link--outline-light:hover,
.gm-header-cta--outline-light:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* ── Action buttons ────────────────────────────────────────────────────
   The two header CTAs ("Order Now" / "Call Now"). Both are uppercase pills
   that lift on hover; each resolves to a different colour on hover so the
   two actions stay visually distinct. Applied via a nav item's `style`. */
.gm-nav__link--action-order,
.gm-nav__link--action-call {
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.8rem 1.5rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The source steps the pills down twice before the mobile drawer takes over.
   Without these the two full-size pills plus the logo overflow the bar between
   the desktop layout and the 760px breakpoint. Widths mirror the source's
   1200px / 992px steps. */
@media (max-width: 1200px) {
    .gm-nav__link--action-order,
    .gm-nav__link--action-call {
        font-size: 0.95rem;
        padding: 0.7rem 1.2rem;
    }
}

@media (max-width: 992px) {
    .gm-nav__link--action-order,
    .gm-nav__link--action-call {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }

    /* Source drops the bar from 120px to 90px here; the logo is capped off the
       same variable, so it follows automatically. */
    .gm-header {
        --gm-header-height: 90px;
    }
}

/* Order sits in the brand red with white copy, so it reads as the primary
   action against the gold bar. */
.gm-nav__link--action-order,
.gm-header .gm-nav__link--action-order {
    background: var(--color-accent, #ff3b3b);
    border-color: var(--color-accent, #ff3b3b);
    color: #fff;
}

.gm-nav__link--action-order:hover,
.gm-header .gm-nav__link--action-order:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-accent, #ff3b3b);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gm-nav__link--action-call,
.gm-header .gm-nav__link--action-call {
    background: var(--color-secondary, #000);
    border-color: var(--color-secondary, #000);
    color: #fff;
}

.gm-nav__link--action-call:hover,
.gm-header .gm-nav__link--action-call:hover {
    background: var(--color-success, #28a745);
    border-color: var(--color-success, #28a745);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gm-header .gm-header-cta {
    background: var(--gm-header-cta-bg, var(--gm-primary));
    border-color: var(--gm-header-cta-bg, var(--gm-primary));
    color: var(--gm-header-cta-text, var(--gm-on-primary));
}

.gm-language-switcher {
    position: relative;
    color: var(--gm-text);
    font-size: 13px;
    font-weight: 700;
}

.gm-language-switcher--dropdown {
    display: inline-block;
}

.gm-language-switcher__summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    /* Outline treatment to match the Cart/Account header buttons. */
    border: 1px solid var(--gm-primary);
    border-radius: var(--gm-button-radius);
    background: transparent;
    color: var(--gm-primary-dark);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast),
        color var(--gm-transition-fast);
}

.gm-language-switcher__summary::-webkit-details-marker {
    display: none;
}

.gm-language-switcher__summary:hover,
.gm-language-switcher[open] .gm-language-switcher__summary {
    border-color: var(--gm-control-focus);
    color: var(--gm-primary-dark);
    box-shadow: var(--gm-focus-ring);
}

.gm-language-switcher__flag {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    object-fit: cover;
}

.gm-language-switcher__current,
.gm-language-switcher__label {
    min-width: 0;
    white-space: nowrap;
}

.gm-language-switcher__chevron {
    color: var(--gm-muted);
    font-size: 14px;
    line-height: 1;
    transition: transform var(--gm-transition-fast);
}

.gm-language-switcher[open] .gm-language-switcher__chevron {
    color: var(--gm-primary-dark);
    transform: rotate(180deg);
}

.gm-language-switcher__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 184px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-dropdown-radius);
    background: var(--gm-dropdown-bg);
    box-shadow: var(--theme-shadow-lg);
    transform-origin: top right;
    animation: gm-lang-menu-in 140ms var(--theme-animation-easing-standard, ease);
}

@keyframes gm-lang-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gm-language-switcher__menu { animation: none; }
    .gm-header--mobile-menu .gm-header-actions[data-open="true"] { animation: none; }
    .gm-nav__item--has-children > .gm-nav__link::after { transition: none; }
}

.gm-language-switcher__item,
.gm-language-switcher--pills a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gm-text);
    line-height: 1.1;
    text-decoration: none;
}

.gm-language-switcher__item {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--gm-control-radius, 8px);
    font-weight: 600;
    transition:
        background var(--gm-transition-fast),
        color var(--gm-transition-fast);
}

.gm-language-switcher__item:hover,
.gm-language-switcher--pills a:hover {
    background: var(--gm-primary-light);
    color: var(--gm-primary-dark);
}

.gm-language-switcher__item[aria-current="page"] {
    background: var(--gm-primary);
    color: var(--gm-on-primary);
    font-weight: 700;
}

.gm-language-switcher--pills {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-button-radius);
    background: var(--theme-variant-pill-background, var(--gm-control-bg));
}

.gm-language-switcher--pills a {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
}

.gm-language-switcher--pills a + a {
    border-left: 1px solid var(--gm-border);
}

.gm-language-switcher--pills a[aria-current="page"] {
    background: var(--gm-primary);
    color: var(--gm-on-primary);
}

.gm-search-overlay[hidden] {
    display: none;
}

.gm-search-overlay {
    inset: 0;
    position: fixed;
    z-index: 80;
}

.gm-search-overlay__backdrop {
    background: rgba(15, 23, 42, 0.46);
    inset: 0;
    position: absolute;
}

.gm-search-overlay__dialog {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-container-radius, var(--theme-radius-lg, 14px));
    box-shadow: var(--theme-shadow-lg);
    display: grid;
    gap: 12px;
    left: 50%;
    max-height: min(680px, calc(100vh - 48px));
    max-width: min(680px, calc(100vw - 32px));
    overflow: hidden;
    padding: 14px;
    position: absolute;
    top: 48px;
    transform: translateX(-50%);
    width: 100%;
}

.gm-search-overlay__form {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.gm-search-overlay__input {
    background: var(--gm-control-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    box-sizing: border-box;
    color: var(--gm-text);
    font: inherit;
    font-size: 16px;
    min-height: 40px;
    padding: 9px 12px;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast);
    width: 100%;
}

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

.gm-search-overlay__input:focus {
    border-color: var(--gm-control-focus);
    box-shadow: var(--gm-focus-ring);
    outline: none;
}

.gm-search-overlay__close {
    align-items: center;
    background: var(--gm-control-bg);
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-button-radius);
    box-shadow: var(--gm-button-shadow);
    color: var(--gm-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 20px;
    height: 40px;
    justify-content: center;
    line-height: 1;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast),
        color var(--gm-transition-fast);
    width: 40px;
}

.gm-search-overlay__close:hover,
.gm-search-overlay__close:focus-visible {
    border-color: var(--gm-control-focus);
    box-shadow:
        var(--gm-button-shadow),
        var(--gm-focus-ring);
    outline: none;
}

.gm-search-overlay__results {
    display: grid;
    gap: 12px;
    max-height: min(520px, calc(100vh - 160px));
    overflow: auto;
    padding: 2px;
}

.gm-search-overlay__empty {
    color: var(--gm-muted);
    margin: 10px 4px;
}

.gm-search-group {
    display: grid;
    gap: 6px;
}

.gm-search-group h3 {
    color: var(--gm-muted);
    font-size: 12px;
    letter-spacing: 0;
    margin: 6px 4px 0;
    text-transform: uppercase;
}

.gm-search-result {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--gm-control-radius);
    color: var(--gm-text);
    display: grid;
    gap: 10px;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 58px;
    padding: 8px;
    text-decoration: none;
}

.gm-search-result:hover {
    background: var(--gm-primary-light);
    border-color: var(--gm-border);
}

.gm-search-result img,
.gm-search-result__mark {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-media-radius, var(--theme-radius-sm, 6px));
    height: 46px;
    object-fit: cover;
    width: 46px;
}

.gm-search-result span {
    min-width: 0;
}

.gm-search-result strong,
.gm-search-result small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gm-search-result small {
    color: var(--gm-muted);
    font-size: 13px;
    margin-top: 3px;
}

:where(.gm-main, .gm-header, .gm-footer) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    min-height: 38px;
    border: 1px solid var(--gm-control-border);
    border-radius: var(--gm-control-radius);
    background: var(--gm-control-bg);
    color: var(--gm-text);
    font: inherit;
    padding: 8px 11px;
    transition:
        border-color var(--gm-transition-fast),
        box-shadow var(--gm-transition-fast);
}

:where(.gm-main, .gm-header, .gm-footer) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
):focus {
    border-color: var(--gm-control-focus);
    box-shadow: var(--gm-focus-ring);
    outline: none;
}

:where(.gm-main, .gm-header, .gm-footer) :where(button) {
    border-radius: var(--gm-button-radius);
    font: inherit;
}

.gm-main {
    flex: 1 0 auto;
    width: min(var(--gm-page-max-width), calc(100% - (var(--gm-page-gutter) * 2)));
    margin: 0 auto;
    padding: var(--gm-main-padding-block-start) 0 var(--gm-main-padding-block-end);
}

.gm-hero,
.gm-page-heading,
.gm-widget-card,
.gm-grid article {
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-lg);
}

.gm-hero {
    padding: 56px;
}

.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 {
    /* Full-width cart (Shopify-style): the cart is NOT a boxed card. Strip the shared
       .gm-runtime-section container chrome (surface/border/shadow/padding) so it reads
       edge-to-edge within the page gutter. Cart-specific only — .gm-runtime-section
       (product/service runtime pages) keeps its card. */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.gm-cart-page-section__copy {
    max-width: 720px;
}

.gm-cart-page-section__copy p {
    max-width: 560px;
}

.gm-cart-page-section__frame {
    background: transparent;
    border: 0;
    min-height: 0;
    min-width: 0;
    padding: 0;
}

/* Empty cart: the widget body already shows "Your cart is empty", so hide this
   section's page heading/intro to avoid a redundant double title. The widget flags an
   empty cart on its mount host (data-getme-checkout-empty="true"), which lives in light
   DOM, so :has() can react from here. */
.gm-cart-page-section:has([data-getme-checkout-empty="true"]) .gm-cart-page-section__copy {
    display: none;
}

.gm-footer:not(.gm-footer--columns):not(.gm-footer--minimal) {
    --gm-footer-bg-resolved: var(--gm-footer-bg, var(--color-footer-bg, var(--color-bg-dark, #0f172a)));
    --gm-footer-text-resolved: var(--gm-footer-text, var(--color-text-on-footer, var(--color-text-light, #ffffff)));
    --gm-footer-muted-resolved: var(--gm-footer-muted, color-mix(in srgb, var(--gm-footer-text-resolved) 72%, transparent));
    --gm-footer-link-resolved: var(--gm-footer-link, color-mix(in srgb, var(--gm-footer-text-resolved) 86%, transparent));
    --gm-footer-accent-resolved: var(--gm-footer-accent, var(--gm-primary));
    --gm-footer-border-resolved: var(--gm-footer-border, color-mix(in srgb, var(--gm-footer-text-resolved) 18%, transparent));
    background: var(--gm-footer-bg-resolved);
    color: var(--gm-footer-text-resolved);
    font-family: var(--gm-footer-font, inherit);
    /* Matches the source site's footer box exactly: 4rem block padding, no side
       gutter (the inner max-width supplies it), and a 4rem gap from the last
       section above. */
    margin: 4rem 0 0;
    max-width: none;
    padding: 4rem 0;
    width: 100%;
}

.gm-footer__inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

/* Three fixed columns separated by a vertical gold gradient rule — the source
   site's footer motif. The 2rem column padding plus the 4rem gap is what places
   the divider exactly midway between two columns (right: -2rem). */
.gm-footer__grid {
    align-items: start;
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 2rem;
}

.gm-footer__grid > * {
    padding: 0 2rem;
    position: relative;
}

.gm-footer__grid > *:not(:last-child)::after {
    background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--gm-footer-accent-resolved) 30%, transparent),
        transparent
    );
    content: "";
    height: 100%;
    position: absolute;
    right: -2rem;
    top: 0;
    width: 1px;
}

.gm-footer__brand {
    display: grid;
    gap: 12px;
    max-width: 480px;
}

.gm-footer__brand-head {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.gm-footer-logo {
    height: auto;
    max-height: 58px;
    max-width: min(200px, 100%);
    object-fit: contain;
    object-position: left center;
}

.gm-footer__brand-mark {
    align-items: center;
    background: color-mix(in srgb, var(--gm-footer-accent-resolved) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--gm-footer-accent-resolved) 42%, transparent);
    border-radius: var(--theme-radius-md, 8px);
    color: var(--gm-footer-text-resolved);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    line-height: 1;
    width: 40px;
}

.gm-footer__brand-name {
    color: var(--gm-footer-text-resolved);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.gm-footer .gm-footer__tagline,
.gm-footer .gm-footer__description,
.gm-footer .gm-footer-copyright {
    margin: 0;
}

.gm-footer .gm-footer__tagline {
    color: var(--gm-footer-accent-resolved);
    font-weight: 800;
    line-height: 1.45;
    margin-top: 6px;
}

.gm-footer .gm-footer__description {
    color: var(--gm-footer-muted-resolved);
    line-height: 1.65;
    max-width: 42rem;
}

.gm-footer__column {
    display: block;
    min-width: 0;
}

/* Column headings are set in the accent colour at a readable size, with a short
   rule beneath — the footer's main structural motif. */
.gm-footer__heading {
    color: var(--gm-footer-accent-resolved);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    position: relative;
    text-transform: none;
}

.gm-footer__heading::after {
    background: var(--gm-footer-accent-resolved);
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 50px;
}

/* Address column — plain lines plus a gold "Get directions" link, matching the
   body copy metrics of the other columns. */
.gm-footer .gm-footer-address__lines {
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0 0 0.8rem;
}

.gm-footer-address__link {
    color: var(--gm-footer-accent-resolved);
    display: inline-block;
    font-size: 1.1rem;
    margin-top: 0.5rem;
    text-decoration: none;
    transition: color var(--gm-transition-fast);
}

.gm-footer-address__link:hover {
    color: var(--gm-footer-text-resolved);
}

/* Opening hours — day range left, time right, so the column scans vertically. */
.gm-footer-hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-footer-hours-list li {
    color: var(--gm-footer-text-resolved);
    display: flex;
    font-size: 1.1rem;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.gm-footer-hours-list__value {
    color: var(--gm-footer-text-resolved);
    white-space: nowrap;
}

.gm-footer-hours-note {
    color: var(--gm-footer-muted-resolved);
    font-size: 0.92em;
    margin: 0;
}

.gm-footer-link-list,
.gm-footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The source renders contact rows white with a gold icon, at 1.1rem. */
.gm-footer-link,
.gm-footer-contact-list a,
.gm-footer-contact-list span {
    color: var(--gm-footer-text-resolved);
    font-size: 1.1rem;
    line-height: 1.8;
    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: center;
    display: flex;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.gm-footer-contact-list i {
    color: var(--gm-footer-accent-resolved);
    flex: 0 0 auto;
    font-size: 1.2rem;
    margin-right: 0.8rem;
}

.gm-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Bare icons, not pill buttons — the source lifts them on hover and tints gold. */
.gm-footer-social__link {
    align-items: center;
    color: var(--gm-footer-text-resolved);
    display: inline-flex;
    font-size: 1.8rem;
    justify-content: center;
    text-decoration: none;
    transition: color var(--gm-transition-fast), transform var(--gm-transition-fast);
}

.gm-footer-social__link:hover {
    color: var(--gm-footer-accent-resolved);
    transform: translateY(-3px);
}

/* The bottom bar stacks centred: copyright on one line, the GetMe wordmark
   centred beneath it. space-between pushed the wordmark to the right edge. */
.gm-footer__bottom {
    align-items: center;
    border-top: 1px solid var(--gm-footer-border-resolved);
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    margin-top: clamp(28px, 4vw, 48px);
    padding-top: 22px;
    text-align: center;
}

.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 {
    /* Centre rather than baseline: the wordmark is an image and has no text
       baseline to align the "Powered by" label against. */
    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;
}

/* The wordmark is 1125x300 (3.75:1). Sizing it off the label's cap height keeps
   it optically level with "Powered by" instead of towering over it: the glyphs
   fill roughly the middle 60% of the artwork, so a 1.55em box lands the letter
   height near the 13px label. width:auto preserves the ratio. */
.gm-footer-powered__logo {
    display: block;
    height: 1.55em;
    opacity: 0.92;
    transition: opacity var(--gm-transition-fast, 160ms ease);
    width: auto;
}

.gm-footer-powered:hover .gm-footer-powered__logo {
    opacity: 1;
}

/* The source footer goes straight from three columns to one at 768px — there is
   no intermediate two-column state, so it is not reintroduced here. */
@media (max-width: 768px) {
    .gm-footer__grid {
        gap: 4rem;
        grid-template-columns: 1fr;
        padding: 0;
        text-align: center;
    }

    .gm-footer__grid > * {
        border-bottom: 1px solid color-mix(in srgb, var(--gm-footer-accent-resolved) 30%, transparent);
        padding: 2rem 1rem;
    }

    .gm-footer__grid > *:last-child {
        border-bottom: none;
    }

    /* The vertical dividers only make sense side by side. */
    .gm-footer__grid > *:not(:last-child)::after {
        display: none;
    }

    .gm-footer__heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .gm-footer-hours-list li {
        flex-direction: column;
        gap: 0.3rem;
    }

    .gm-footer-contact-list li,
    .gm-footer-social {
        justify-content: center;
    }

    .gm-footer__brand,
    .gm-footer__brand-head {
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .gm-header {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        /* Source: 80px bar at <=768px. */
        min-height: 80px;
    }

    .gm-brand-logo {
        max-height: 60px;
        max-width: 180px;
    }

    /* Hamburger, then logo, then the stacked action buttons at the right edge —
       the source's mobile order. The logo sits next to the toggle rather than
       centred, matching the source's left-aligned group. */
    .gm-header--mobile-menu {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        /* Source: 0.8rem between the hamburger and the logo. */
        column-gap: 0.8rem;
        row-gap: 10px;
    }

    .gm-header--mobile-menu .gm-brand {
        grid-column: 3;
        justify-self: start;
        min-width: 0;
    }

    .gm-header--mobile-menu .gm-header-menu-toggle {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;
        margin-left: 0;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions {
        display: inline-flex;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions:empty {
        display: none;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions--leading {
        grid-column: 2;
        justify-self: start;
    }

    .gm-header--mobile-menu .gm-header-mobile-actions--trailing {
        grid-column: 4;
        justify-self: end;
    }

    /* Call / Order live in the header bar on mobile (source site behaviour), so
       their copies inside the collapsible menu would be duplicates. */
    .gm-header--mobile-menu .gm-header-actions .gm-nav__item--action-call,
    .gm-header--mobile-menu .gm-header-actions .gm-nav__item--action-order {
        display: none;
    }

    /* Stacked at the right edge, matching the source's <=530px treatment: two
       short pills, one above the other, vertically centred in the bar.
       The source insets them 15px from the viewport edge; the header's own
       gutter can compute smaller than that on narrow phones, so the shortfall
       is added here to keep the wider "Order Now" pill off the edge. */
    .gm-header--mobile-menu .gm-header-mobile-actions--trailing {
        align-items: stretch;
        flex-direction: column;
        gap: 0.3rem;
        padding-right: max(0px, calc(15px - var(--gm-page-gutter)));
    }

    .gm-header--mobile-menu .gm-header-mobile-actions .gm-nav__link {
        order: var(--gm-mobile-action-order, 0);
        width: auto;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
    }

    /* Declared after the generic rule above so the fixed pill size wins.
       The source sets a flat width: 85px, but that assumes Arial. This theme
       renders the same uppercase labels in Poppins, which is wider — "ORDER NOW"
       needs ~91px, so a fixed 85px pushed the text past the pill edge. Sizing to
       the content with an 85px floor keeps both pills equal to the source when
       the text fits and lets the longer one grow instead of overflowing. */
    .gm-header--mobile-menu .gm-header-mobile-actions .gm-nav__link--action-call,
    .gm-header--mobile-menu .gm-header-mobile-actions .gm-nav__link--action-order {
        font-size: 0.75rem;
        min-height: 0;
        min-width: 85px;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
        width: auto;
    }

    .gm-header--mobile-menu .gm-header-actions {
        display: none;
        grid-column: 1 / -1;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gm-header-border);
    }

    .gm-header--mobile-menu .gm-header-actions[data-open="true"] {
        display: flex;
        animation: gm-header-menu-in var(--theme-animation-duration, 200ms) var(--theme-animation-easing-standard, ease);
    }

    @keyframes gm-header-menu-in {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .gm-nav,
    .gm-header-utility {
        width: 100%;
        justify-content: flex-start;
    }

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

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

    .gm-nav__link,
    .gm-header-utility__link {
        width: 100%;
        justify-content: flex-start;
        min-height: 44px;
    }

    .gm-nav__submenu {
        position: static;
        min-width: 0;
        width: 100%;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        margin: 2px 0 6px;
    }

    .gm-nav__submenu::before {
        display: none;
    }

    .gm-nav__submenu--mega-columns,
    .gm-nav__submenu--logo-grid,
    .gm-nav__submenu--card-grid,
    .gm-nav__submenu--featured-panel {
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
    }

    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2) > .gm-nav__submenu--featured-panel {
        left: auto;
        right: auto;
        transform: none;
    }

    .gm-nav__item:hover > .gm-nav__submenu--mega-columns,
    .gm-nav__item:focus-within > .gm-nav__submenu--mega-columns,
    .gm-nav__item:hover > .gm-nav__submenu--logo-grid,
    .gm-nav__item:focus-within > .gm-nav__submenu--logo-grid,
    .gm-nav__item:hover > .gm-nav__submenu--card-grid,
    .gm-nav__item:focus-within > .gm-nav__submenu--card-grid,
    .gm-nav__item:hover > .gm-nav__submenu--featured-panel,
    .gm-nav__item:focus-within > .gm-nav__submenu--featured-panel,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--mega-columns,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--logo-grid,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--card-grid,
    .gm-nav__item:nth-last-child(-n+2):hover > .gm-nav__submenu--featured-panel,
    .gm-nav__item:nth-last-child(-n+2):focus-within > .gm-nav__submenu--featured-panel {
        transform: none;
    }

    .gm-nav__submenu-link.gm-nav__link {
        white-space: normal;
    }

    .gm-language-switcher,
    .gm-language-switcher__summary,
    .gm-language-switcher--pills {
        width: 100%;
    }

    .gm-language-switcher__summary {
        justify-content: space-between;
    }

    .gm-language-switcher__menu {
        right: auto;
        left: 0;
        width: 100%;
    }

    .gm-language-switcher--pills {
        flex-wrap: wrap;
    }

    .gm-hero {
        padding: 32px 24px;
    }

    .gm-hero h1,
    .gm-page-heading h1 {
        font-size: 32px;
    }

    .gm-grid,
    .gm-lab-grid,
    .gm-runtime-section {
        grid-template-columns: 1fr;
    }

    /* The single-column collapse is handled in the 768px block above, together
       with the centred text and per-column rules the source uses. The bottom
       bar is centred and stacked at every width now, so it needs no override. */
}

/* Smallest phones — the source drops the bar to 70px and the logo to 140px. */
@media (max-width: 480px) {
    .gm-header {
        min-height: 70px;
    }

    .gm-brand-logo {
        max-height: 52px;
        max-width: 140px;
    }

    .gm-header--mobile-menu .gm-header-menu-toggle {
        min-height: 24px;
        min-width: 24px;
    }
}