/* ---------- Self-hosted fonts ---------- */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Variable.woff2') format('woff2'), url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Italic-Variable.woff2') format('woff2'), url('../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Variable.woff2') format('woff2'), url('../fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open_Sans/OpenSans-Italic-Variable.woff2') format('woff2'), url('../fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   golfhq-store - storefront.css
   Tokens are the live golfhq.co.nz --ghq-* values (audited 26 Sep 2026) so
   the rebuild evolves the current look rather than redesigning it.
   Conventions: .sf- prefix, BEM (.sf-block__element--modifier), state
   classes .is-*, show/hide only via .hidden (never inline display).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --sf-primary: #22ad65;
    --sf-primary-dark: #0f2d1a;
    --sf-primary-light: #2d5a3d;
    --sf-primary-hover: #1c9456;
    /* AA-contrast green (4.99:1 with white) for white-on-green fills and green text on white; --sf-primary alone is 2.9:1. */
    --sf-primary-aa: #168046;
    --sf-primary-aa-hover: #0f6b3b;
    --sf-ink: #212529;
    --sf-ink-muted: #495057;
    --sf-ink-subtle: #667078;
    --sf-bg: #ffffff;
    --sf-bg-soft: #f8f9fa;
    --sf-bg-muted: #f1f3f5;
    --sf-border: #dee2e6;
    --sf-border-soft: #e9ecef;
    --sf-danger: #dc3545;
    --sf-footer-bg: #222021;
    --sf-footer-ink: #ffffff;
    --sf-label-1: #3f6ab1;
    --sf-label-2: #8a44ae;
    --sf-star: #f5b301;

    --sf-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --sf-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --sf-radius-sm: 4px;
    --sf-radius: 6px;
    --sf-radius-lg: 10px;
    --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
    --sf-shadow-xl: 0 20px 50px rgba(0, 0, 0, .15);
    --sf-fast: 150ms ease;
    --sf-normal: 250ms ease;

    --sf-container: 1600px;
    --sf-smaller: 1200px;
    --sf-gutter: 16px;
    --sf-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 16px;
    --sf-space-5: 24px;
    --sf-space-6: 32px;
    --sf-space-7: 48px;
    --sf-space-8: 64px;
}
@media (min-width: 750px) {
    :root { --sf-gutter: 24px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sf-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--sf-ink);
    background: var(--sf-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
a:hover { color: var(--sf-primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }

h1, h2, h3, h4, .sf-h1, .sf-h2, .sf-h3 {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 var(--sf-space-4);
    color: var(--sf-ink);
}
.sf-h1 { font-size: clamp(26px, 4vw, 36px); }
.sf-h2 { font-size: clamp(22px, 3vw, 28px); }
.sf-h3 { font-size: 18px; }
p { margin: 0 0 var(--sf-space-4); }
.sf-lead { font-size: 17px; color: var(--sf-ink-muted); }

/* ---------- Utilities ---------- */
.hidden { display: none !important; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.sf-container { width: 100%; max-width: var(--sf-container); margin: 0 auto; padding: 0 var(--sf-gutter); }
.sf-recent {max-width: var(--sf-smaller); margin: 0 auto;}
.sf-main { flex: 1 0 auto; }
.sf-section { padding: var(--sf-space-7) 0; }
.sf-stack > * + * { margin-top: var(--sf-space-4); }
.sf-cluster { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); align-items: center; }

.sf-skip-link {
    position: absolute; left: var(--sf-space-4); top: -100px; z-index: 100;
    background: var(--sf-ink); color: #fff; padding: var(--sf-space-2) var(--sf-space-4); border-radius: var(--sf-radius);
}
.sf-skip-link:focus { top: var(--sf-space-4); color: #fff; }

/* Header, footer and browse-page styles: see "Stage 1" at the end of this file. */

/* ---------- Icon ---------- */
.sf-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Button ---------- */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-space-2);
    border: 1px solid transparent; border-radius: var(--sf-radius);
    font-family: var(--sf-font-heading); font-weight: 600; letter-spacing: .01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--sf-fast), border-color var(--sf-fast), color var(--sf-fast);
    padding: var(--sf-radius);
}
.sf-btn--sm { min-height: 36px; padding: 0 var(--sf-space-3); font-size: 13px; }
.sf-btn--md { min-height: 44px; padding: 0 var(--sf-space-5); font-size: 14px; }
.sf-btn--lg { min-height: 52px; padding: 0 var(--sf-space-6); font-size: 16px; }
.sf-btn--block { display: flex; width: 100%; }
.sf-btn--primary { background: var(--sf-primary-aa); color: #fff; }
.sf-btn--primary:hover { background: var(--sf-primary-aa-hover); color: #fff; }
.sf-btn--secondary { background: var(--sf-ink); color: #fff; }
.sf-btn--secondary:hover { background: #000; color: #fff; }
.sf-btn--ghost { background: transparent; border-color: var(--sf-border); color: var(--sf-ink); }
.sf-btn--ghost:hover { border-color: var(--sf-ink); color: var(--sf-ink); }
.sf-btn--danger { background: var(--sf-danger); color: #fff; }
.sf-btn[disabled] { opacity: .55; cursor: not-allowed; }
.sf-btn.is-loading .sf-btn__label { opacity: .6; }
.sf-btn.is-loading::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: sf-spin .7s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ---------- Badge ---------- */
.sf-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--sf-radius-sm);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.6;
}
.sf-badge--sale { background: var(--sf-danger); color: #fff; }
.sf-badge--soldout { background: var(--sf-ink-muted); color: #fff; }
.sf-badge--exdemo { background: var(--sf-ink); color: #fff; }
.sf-badge--new { background: var(--sf-primary); color: #fff; }
.sf-badge--stock { background: #e6f6ee; color: var(--sf-primary-dark); }
.sf-badge--info { background: var(--sf-bg-muted); color: var(--sf-ink-muted); }
.sf-badge--label1 { background: var(--sf-label-1); color: #fff; }
.sf-badge--label2 { background: var(--sf-label-2); color: #fff; }

/* ---------- Price ---------- */
.sf-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-space-2); }
.sf-price__amount { font-family: var(--sf-font-heading); font-weight: 700; color: var(--sf-ink); }
.sf-price.is-on-sale .sf-price__amount { color: var(--sf-danger); }
.sf-price__from { font-weight: 400; font-family: var(--sf-font-body); color: var(--sf-ink-muted); }
.sf-price__compare { color: var(--sf-ink-subtle); }
.sf-price--sm .sf-price__amount { font-size: 15px; }
.sf-price--md .sf-price__amount { font-size: 18px; }
.sf-price--lg .sf-price__amount { font-size: 26px; }

/* ---------- Rating ---------- */
.sf-rating { display: inline-flex; align-items: center; gap: var(--sf-space-1); color: var(--sf-star); }
.sf-rating__stars { display: inline-flex; }
.sf-rating__star { width: 16px; height: 16px; }
.sf-rating__count { color: var(--sf-ink-muted); font-size: 13px; text-decoration: none; }

/* ---------- Image ---------- */
.sf-image-box { display: block; position: relative; overflow: hidden; background: var(--sf-bg-muted); }
.sf-image-box--1-1 { aspect-ratio: 1 / 1; }
.sf-image-box--4-3 { aspect-ratio: 4 / 3; }
.sf-image-box--16-9 { aspect-ratio: 16 / 9; }
.sf-image-box--3-4 { aspect-ratio: 3 / 4; }
.sf-image-box .sf-image { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Breadcrumb ---------- */
.sf-breadcrumb__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-breadcrumb__item + .sf-breadcrumb__item::before { content: '/'; margin: 0 var(--sf-space-2); color: var(--sf-ink-subtle); }
.sf-breadcrumb a { text-decoration: none; }

/* ---------- Pagination ---------- */
.sf-pagination { display: flex; justify-content: center; align-items: center; gap: var(--sf-space-2); margin: var(--sf-space-6) 0; }
.sf-pagination__list { display: flex; gap: var(--sf-space-1); list-style: none; margin: 0; padding: 0; }
.sf-pagination__link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--sf-space-2);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius); text-decoration: none; font-weight: 600;
}
.sf-pagination__link.is-current { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }
/* Live: plain numbers, the current page a green circle, "Previous" / "Next" as text links. */
.sf-pagination__list .sf-pagination__link { border-color: transparent; border-radius: 50%; min-width: 36px; height: 36px; padding: 0; }
.sf-pagination__prev, .sf-pagination__next { border: 0; gap: var(--sf-space-1); font-size: 14px; }
.sf-pagination__prev .sf-icon, .sf-pagination__next .sf-icon { width: 14px; height: 14px; }
.sf-pagination__gap { display: inline-flex; align-items: flex-end; padding: 0 var(--sf-space-1); color: var(--sf-ink-subtle); }

/* ---------- Accordion ---------- */
.sf-accordion { border-top: 1px solid var(--sf-border); }
.sf-accordion__item { border-bottom: 1px solid var(--sf-border); }
.sf-accordion__summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3);
    padding: var(--sf-space-4) 0; cursor: pointer; list-style: none;
    font-family: var(--sf-font-heading); font-weight: 600;
}
.sf-accordion__summary::-webkit-details-marker { display: none; }
.sf-accordion__chevron { transition: transform var(--sf-fast); }
.sf-accordion__item[open] .sf-accordion__chevron { transform: rotate(180deg); }
.sf-accordion__body { padding: 0 0 var(--sf-space-4); color: var(--sf-ink-muted); }

/* ---------- Dialog (modal + drawer) ---------- */
.sf-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: var(--sf-ink); }
.sf-dialog::backdrop { background: rgba(0, 0, 0, .45); }
html.is-dialog-open { overflow: hidden; } /* scroll lock while a dialog is open */
.sf-dialog__panel { background: var(--sf-bg); display: flex; flex-direction: column; max-height: 100%;padding: 1rem }
.sf-dialog--modal { width: calc(100% - 2 * var(--sf-gutter)); margin: auto; }
.sf-dialog--modal.sf-dialog--sm { max-width: 420px; }
.sf-dialog--modal.sf-dialog--md { max-width: 640px; }
.sf-dialog--modal.sf-dialog--lg { max-width: 960px; }
.sf-dialog--modal .sf-dialog__panel { border-radius: var(--sf-radius-lg); max-height: calc(100vh - 2 * var(--sf-gutter)); box-shadow: var(--sf-shadow-xl); }
.sf-dialog--drawer { margin: 0 0 0 auto; width: min(420px, 100%); height: 100%; }
.sf-dialog--drawer .sf-dialog__panel { height: 100%; }
.sf-dialog--drawer[open] .sf-dialog__panel { animation: sf-drawer-in var(--sf-normal); }
@keyframes sf-drawer-in { from { transform: translateX(100%); } }
.sf-dialog__header { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-4) var(--sf-space-5); border-bottom: 1px solid var(--sf-border-soft); }
.sf-dialog__title { margin: 0; font-size: 18px; }
.sf-dialog__close { background: none; border: 0; padding: var(--sf-space-2); cursor: pointer; border-radius: var(--sf-radius); }
.sf-dialog__close:hover { background: var(--sf-bg-muted); }
.sf-dialog__body { padding: var(--sf-space-5); overflow-y: auto; flex: 1; }
.sf-dialog__footer { padding: var(--sf-space-4) var(--sf-space-5); border-top: 1px solid var(--sf-border-soft); }
@media (prefers-reduced-motion: reduce) {
    .sf-dialog--drawer[open] .sf-dialog__panel { animation: none; }
}

/* ---------- Toast ---------- */
.sf-toast-region {
    position: fixed; z-index: 1000; bottom: var(--sf-space-4); left: var(--sf-space-4); right: var(--sf-space-4);
    display: flex; flex-direction: column; gap: var(--sf-space-2); pointer-events: none;
}
@media (min-width: 750px) {
    .sf-toast-region { left: auto; width: 360px; }
}
.sf-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sf-space-3);
    padding: var(--sf-space-3) var(--sf-space-4); border-radius: var(--sf-radius); background: var(--sf-ink); color: #fff;
    box-shadow: var(--sf-shadow-md); font-size: 14px;
}
.sf-toast--success { background: var(--sf-primary-dark); }
.sf-toast--error { background: var(--sf-danger); }
.sf-toast__close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

/* ---------- Skeleton ---------- */
.sf-skeleton__line, .sf-skeleton__block {
    display: block; border-radius: var(--sf-radius-sm);
    background: linear-gradient(90deg, var(--sf-bg-muted) 25%, var(--sf-border-soft) 50%, var(--sf-bg-muted) 75%);
    background-size: 200% 100%; animation: sf-shimmer 1.2s infinite;
}
.sf-skeleton__line { height: 12px; margin-bottom: var(--sf-space-2); }
.sf-skeleton__line--short { width: 60%; }
.sf-skeleton__block--image { aspect-ratio: 1 / 1; margin-bottom: var(--sf-space-3); }
@keyframes sf-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .sf-skeleton__line, .sf-skeleton__block { animation: none; }
}

/* ---------- Empty state ---------- */
.sf-empty { text-align: center; max-width: 520px; margin: 0 auto; padding: var(--sf-space-7) 0; }
.sf-empty__icon { width: 40px; height: 40px; margin: 0 auto var(--sf-space-4); color: var(--sf-ink-subtle); }
.sf-empty__text { color: var(--sf-ink-muted); }

/* ---------- Form fields ---------- */
.sf-field { margin-bottom: var(--sf-space-4); }
.sf-field__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--sf-space-1); }
.sf-field__req { color: var(--sf-danger); }
.sf-input {
    width: 100%; min-height: 44px; padding: var(--sf-space-2) var(--sf-space-3);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: var(--sf-bg);
    transition: border-color var(--sf-fast), box-shadow var(--sf-fast);
}
.sf-input:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(34, 173, 101, .2); }
textarea.sf-input { resize: vertical; }
.sf-field.has-error .sf-input { border-color: var(--sf-danger); }
.sf-field__hint { margin: var(--sf-space-1) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-field__error { margin: var(--sf-space-1) 0 0; font-size: 13px; color: var(--sf-danger); font-weight: 600; }
.sf-check { display: inline-flex; align-items: center; gap: var(--sf-space-2); cursor: pointer; }
.sf-check input { width: 18px; height: 18px; accent-color: var(--sf-primary); }

/* ---------- Quantity ---------- */
.sf-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); overflow: hidden; }
.sf-qty__btn { width: 40px; background: var(--sf-bg); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sf-qty__btn:hover { background: var(--sf-bg-muted); }
.sf-qty__btn .sf-icon { width: 16px; height: 16px; }
.sf-qty__input { width: 52px; min-height: 44px; border: 0; text-align: center; -moz-appearance: textfield; }
.sf-qty__input::-webkit-outer-spin-button, .sf-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Preview gate ---------- */
.sf-gate { max-width: 420px; text-align: center; }
.sf-gate__form { text-align: left; margin-top: var(--sf-space-5); }

/* ---------- Styleguide (preview-only page) ---------- */
.sf-sg__block { padding: var(--sf-space-5) 0; border-top: 1px solid var(--sf-border-soft); }
.sf-sg__label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-ink-subtle); margin-bottom: var(--sf-space-3); }
.sf-sg__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sf-space-3); }
.sf-sg__swatch { border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); overflow: hidden; font-size: 12px; }
.sf-sg__swatch-chip { height: 56px; }
.sf-sg__swatch-name { padding: var(--sf-space-2); }
.sf-sg__narrow { max-width: 420px; }
.sf-sg__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sf-space-4); }
.sf-sg__logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sf-space-4); }
.sf-sg__logo-tile { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: var(--sf-space-5); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: #fff; }
.sf-sg__logo-tile--dark { background: var(--sf-footer-bg); border-color: var(--sf-footer-bg); }
.sf-sg__logo-tile--mint { background: #eef8f2; }
.sf-sg__logo-tile img { width: 200px; max-width: 100%; height: auto; }
.sf-sg__rules { margin: 0; padding-left: 20px; display: grid; gap: var(--sf-space-2); color: var(--sf-ink-muted); max-width: 65ch; }
.sf-sg__swatch-note { display: block; margin-top: 2px; color: var(--sf-ink-subtle); }

/* ==========================================================================
   Stage 1 - browse: chrome, listings, product page (specs/32 §4.2, 4.4, 4.5)
   ========================================================================== */

/* ==========================================================================
   Header - ported from the live theme (shopify-files/header-mega.css,
   27 Sep 2026): same colours, sizes and layouts, .sf- names. Desktop
   from 1024px like the live site; below that the mobile header + bottom nav.
   ========================================================================== */
/* Space the sticky header takes, for other sticky elements (filters, gallery). */
:root { --sf-sticky-top: 84px; }
@media (min-width: 1024px) { :root { --sf-sticky-top: 180px; } }
:root { --sf-header-max: 1400px; --sf-mobile-nav-height: 65px; --sf-gray-100: #f1f3f5; --sf-gray-200: #e9ecef; --sf-gray-500: #adb5bd; --sf-gray-600: #5f676e; --sf-gray-700: #495057; --sf-gray-800: #343a40; }

/* ---------- Announcement bar (scrolling, pauses on hover) ---------- */
.sf-announcement { background: var(--sf-primary-aa); color: #fff; padding: 8px 0; overflow: hidden; font-size: 14px; font-weight: 500; letter-spacing: .3px; }
.sf-announcement__track { display: flex; width: max-content; animation: sf-marquee 45s linear infinite reverse; }
.sf-announcement:hover .sf-announcement__track { animation-play-state: paused; }
.sf-announcement__group { display: flex; flex-shrink: 0; }
.sf-announcement__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 150px; white-space: nowrap; }
.sf-announcement__item a { color: inherit; text-decoration: underline; }
.sf-announcement__icon { width: 24px; height: 24px; }
@keyframes sf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .sf-announcement__track { animation: none; width: auto; justify-content: center; }
    .sf-announcement__group + .sf-announcement__group, .sf-announcement__item + .sf-announcement__item { display: none; }
    .sf-announcement__item { padding: 0 var(--sf-gutter); white-space: normal; }
}

/* ---------- Top strip (desktop) ---------- */
.sf-topbar { display: none; background: var(--sf-gray-100); border-bottom: 1px solid var(--sf-gray-200); padding: 8px 0; font-size: 13px; }
.sf-topbar__inner { max-width: var(--sf-header-max); margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.sf-topbar__group { display: flex; align-items: center; gap: 20px; }
.sf-topbar__group > a { display: flex; align-items: center; gap: 6px; color: var(--sf-gray-700); text-decoration: none; transition: color var(--sf-fast); }
.sf-topbar__group > a:hover { color: var(--sf-primary); }
.sf-topbar__group .sf-icon { width: 16px; height: 16px; }
.sf-topbar__social { display: flex; gap: 12px; }
.sf-topbar__social a { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sf-gray-200); color: var(--sf-gray-700); transition: all var(--sf-fast); }
.sf-topbar__social a:hover { background: var(--sf-primary); color: #fff; }
.sf-topbar__social .sf-icon { width: 14px; height: 14px; }

/* ---------- Header: black band ---------- */
.sf-header { position: sticky; top: 0; z-index: 1000; background: #000; box-shadow: var(--sf-shadow-md); }
.sf-header__inner {
    max-width: var(--sf-header-max); margin: 0 auto; padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap;
}
.sf-header__menu-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; background: none; border: 0; cursor: pointer; padding: 0; }
.sf-header__logo { flex: 1; display: flex; justify-content: center; text-decoration: none; color: #fff; }
.sf-header__logo:hover { color: #fff; }
.sf-header__logo img { height: 35px; width: auto; }
.sf-header__wordmark { display: inline-flex; align-items: center; gap: 2px; font-family: var(--sf-font-heading); font-weight: 800; font-size: 24px; letter-spacing: -1px; }
.sf-header__wordmark-hq { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--sf-primary); letter-spacing: 0; }
.sf-header__actions { display: flex; align-items: center; gap: 8px; }
.sf-header__action {
    display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; text-decoration: none;
    font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; transition: color var(--sf-fast);
}
.sf-header__action:hover { color: var(--sf-primary); }
.sf-header__action-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.sf-header__action-icon .sf-icon { width: 24px; height: 24px; }
.sf-header__action-label { display: none; }

/* Search: hidden on mobile until the bottom-nav Search opens it (site-header island). */
.sf-search { position: relative; display: none; flex: 1 1 100%; order: 10; }
.sf-header.is-search-open .sf-search { display: flex; }
.sf-search__input {
    flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid grey; border-right: 0; border-radius: 9px 0 0 9px;
    font-size: 16px; font-family: var(--sf-font-body); background: #fff; color: var(--sf-ink); outline: none;
}
.sf-search__input::placeholder { color: var(--sf-gray-500); }
.sf-search__input:focus-visible { box-shadow: 0 0 0 3px rgba(34, 173, 101, .45); }
.sf-search__submit {
    display: flex; align-items: center; justify-content: center; padding: 12px 20px; border: 0; border-radius: 0 9px 9px 0;
    background: var(--sf-primary); color: #fff; cursor: pointer; transition: background var(--sf-fast); line-height: 1;
}
.sf-search__submit:hover { background: var(--sf-gray-500); }
.sf-search__submit .sf-icon { width: 20px; height: 20px; }
.sf-search--page { display: flex; max-width: 560px; margin-top: var(--sf-space-4); }
.sf-search--page .sf-search__input { border-color: var(--sf-border); }

@media (min-width: 1024px) {
    .sf-topbar { display: block; }
    .sf-header__inner { padding: 15px 20px; gap: 30px; flex-wrap: nowrap; }
    .sf-header__menu-btn { display: none; }
    .sf-header__logo { flex: 0 0 auto; justify-content: flex-start; }
    .sf-header__logo img { height: auto; max-height: 80px; }
    .sf-header__wordmark { font-size: 32px; }
    .sf-search { display: flex; flex: 1 1 auto; max-width: 500px; order: 0; }
    .sf-search__input { font-size: 14px; }
    .sf-header__actions { gap: 20px; }
    .sf-header__action-icon { width: 40px; height: 40px; }
    .sf-header__action-label { display: block; }
}

/* ---------- Main nav (desktop) ---------- */
.sf-nav { display: none; position: relative; background: #fff; border-top: 1px solid var(--sf-gray-200); }
@media (min-width: 1024px) { .sf-nav { display: block; } }
.sf-nav__list { max-width: var(--sf-header-max); margin: 0 auto; padding: 0 20px; display: flex; justify-content: center; flex-wrap: wrap; list-style: none; }
.sf-nav__item { position: static; display: flex; align-items: center; border-bottom: 3px solid transparent; transition: border-color var(--sf-fast); }
.sf-nav__link {
    display: flex; align-items: center; padding: 16px 4px 16px 18px;
    font-family: var(--sf-font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: var(--sf-gray-800); text-decoration: none; transition: color var(--sf-fast);
}
.sf-nav__item:not(.has-children) .sf-nav__link { padding-right: 18px; }
.sf-nav__toggle { display: flex; align-items: center; padding: 16px 14px 16px 2px; background: none; border: 0; cursor: pointer; color: var(--sf-gray-800); }
.sf-nav__toggle .sf-icon { width: 10px; height: 10px; transition: transform var(--sf-fast); }
.sf-nav__item:hover, .sf-nav__item.is-open { border-bottom-color: var(--sf-primary); }
.sf-nav__item:hover > .sf-nav__link, .sf-nav__item.is-open > .sf-nav__link,
.sf-nav__item:hover > .sf-nav__toggle, .sf-nav__item.is-open > .sf-nav__toggle { color: var(--sf-primary); }
.sf-nav__item:hover > .sf-nav__toggle .sf-icon, .sf-nav__item.is-open > .sf-nav__toggle .sf-icon { transform: rotate(180deg); }
.sf-nav__item.is-sale > .sf-nav__link, .sf-nav__item.is-sale > .sf-nav__toggle { color: var(--sf-danger); }

/* ---------- Mega menu ---------- */
.sf-mega {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 999; background: #fff; box-shadow: var(--sf-shadow-xl);
    opacity: 0; visibility: hidden; transition: opacity var(--sf-normal), visibility var(--sf-normal);
    max-height: calc(100vh - 220px); overflow-y: auto;
}
.sf-nav__item:hover > .sf-mega, .sf-nav__item.is-open > .sf-mega { opacity: 1; visibility: visible; }
/* Hover-intent: wait 100ms before a hovered panel opens, so sweeping the
   cursor across the nav doesn't flash menus. The delay sits on the hover
   state only, so closing is immediate and click/keyboard (.is-open) is instant. */
@media (hover: hover) { .sf-nav__item:hover:not(.is-open) > .sf-mega { transition-delay: 100ms; } }
.sf-mega__inner { max-width: var(--sf-header-max); margin: 0 auto; padding: 30px 40px; display: flex; gap: 30px; }
/* Flat: 3 columns of uppercase items */
.sf-mega__items { flex: 1; columns: 3; column-gap: 30px; }
.sf-mega__item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 4px; break-inside: avoid;
    font-family: var(--sf-font-heading); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
    color: var(--sf-gray-800); text-decoration: none; border-radius: 6px; transition: all var(--sf-fast);
}
.sf-mega__item:hover { background: var(--sf-gray-100); color: var(--sf-primary); }
/* Grouped: headed columns */
.sf-mega__col { flex: 1; min-width: 140px; max-width: 200px; }
.sf-mega__col-header {
    margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--sf-gray-200);
    font-family: var(--sf-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-primary);
}
.sf-mega__col-header a { color: inherit; text-decoration: none; }
.sf-mega__col-header a:hover { color: var(--sf-primary-light); }
.sf-mega__col-links { display: flex; flex-direction: column; gap: 2px; }
.sf-mega__link { display: flex; padding: 8px 10px; font-size: 14px; color: var(--sf-gray-700); text-decoration: none; border-radius: 6px; transition: all var(--sf-fast); }
.sf-mega__link:hover { background: var(--sf-gray-100); color: var(--sf-primary); }
/* Utility bar */
.sf-mega__utility { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 15px 40px; background: var(--sf-gray-100); border-top: 1px solid var(--sf-gray-200); }
.sf-mega__utility-link {
    display: flex; align-items: center; padding: 8px 16px; background: #fff; border-radius: 6px; text-decoration: none;
    font-family: var(--sf-font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-primary);
    transition: all var(--sf-fast);
}
.sf-mega__utility-link:hover { background: var(--sf-primary); color: #fff; }
/* Brands: logo tiles */
/* Menu icons + brand side panel (live header-mega.css: .ghq-menu-icon, .ghq-mega-brands) */
.sf-mega__item.has-icon, .sf-mega__link.has-icon, .sf-mega__utility-link.has-icon { display: flex; align-items: center; gap: 10px; }
.sf-mega__icon { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }
.sf-mega__utility-link .sf-mega__icon { width: 32px; height: 32px; }
.sf-mega__item.has-icon { break-inside: avoid; }
.sf-mega__side { margin-left: auto; min-width: 240px; max-width: 280px; flex-shrink: 0; border-left: 1px solid var(--sf-gray-200); padding-left: 16px; }
.sf-mega__side-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sf-mega__side-logo {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; padding: 12px 10px;
    background: var(--sf-gray-100); border-radius: 8px; transition: all var(--sf-fast);
}
.sf-mega__side-logo:hover { background: var(--sf-gray-200); transform: scale(1.03); }
.sf-mega__side-logo img { max-width: 100%; max-height: 35px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: all var(--sf-fast); }
.sf-mega__side-logo:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sf-mega__side-logo:hover { transform: none; } }
.sf-mega__brands { max-width: var(--sf-header-max); margin: 0 auto; padding: 30px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.sf-mega__brand {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 20px 15px;
    background: var(--sf-gray-100); border-radius: 10px; text-decoration: none; transition: all var(--sf-fast);
}
.sf-mega__brand:hover { background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.sf-mega__brand img { max-width: 100%; max-height: 45px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .6; transition: all var(--sf-fast); }
.sf-mega__brand:hover img { filter: none; opacity: 1; }
.sf-mega__brand-text { font-family: var(--sf-font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-gray-600); text-align: center; }
.sf-mega__brand:hover .sf-mega__brand-text { color: var(--sf-primary); }
@media (prefers-reduced-motion: reduce) { .sf-mega, .sf-mega__brand { transition: none; } .sf-mega__brand:hover { transform: none; } }

/* ---------- Service tiles band (desktop) ---------- */
.sf-services { display: none; background: #eef8f2; border-bottom: 1px solid var(--sf-gray-200); }
@media (min-width: 1024px) { .sf-services { display: block; } }
.sf-services__inner { max-width: var(--sf-header-max); margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; }
.sf-services__item {
    display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 16px 24px;
    border-left: 1px solid var(--sf-gray-200); text-decoration: none; transition: background var(--sf-fast);
}
.sf-services__item:first-child { border-left: 0; }
.sf-services__item:hover { background: rgba(34, 173, 101, .06); }
/* Live site shows the icons in colour on a white circle (the theme file's
   invert filter is overridden there - most icons have white backgrounds). */
.sf-service-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sf-service-icon img { width: 52px; height: 52px; object-fit: contain; }
.sf-service-icon--sm { width: 32px; height: 32px; }
.sf-service-icon--sm img { width: 22px; height: 22px; }
.sf-services__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-services__title { font-family: var(--sf-font-heading); font-size: 14px; font-weight: 700; color: var(--sf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-services__subtitle { font-size: 12px; color: var(--sf-gray-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-services__arrow { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; color: var(--sf-gray-500); transition: transform var(--sf-fast), color var(--sf-fast); }
.sf-services__item:hover .sf-services__arrow { color: var(--sf-primary); transform: translateX(3px); }
@media (max-width: 1200px) { .sf-services__item { padding: 14px 16px; gap: 10px; } .sf-service-icon { width: 44px; height: 44px; } }

/* ---------- Mobile bottom nav ---------- */
.sf-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: var(--sf-mobile-nav-height); padding-bottom: env(safe-area-inset-bottom, 0); background: #fff; box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
}
@media (min-width: 1024px) { .sf-bottom-nav { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: calc(var(--sf-mobile-nav-height) + env(safe-area-inset-bottom, 0)); } .sf-toast-region { bottom: calc(var(--sf-mobile-nav-height) + 12px); } }
.sf-bottom-nav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: 0; cursor: pointer; text-decoration: none; color: var(--sf-gray-600);
    font-family: var(--sf-font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.sf-bottom-nav__item::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--sf-primary); transition: width var(--sf-fast); }
.sf-bottom-nav__item:hover, .sf-bottom-nav__item.is-active { color: var(--sf-primary); }
.sf-bottom-nav__item:hover::before, .sf-bottom-nav__item.is-active::before { width: 40px; }
.sf-bottom-nav__item .sf-icon, .sf-bottom-nav__item img { width: 24px; height: 24px; object-fit: contain; }

/* ---------- Mobile drawer (modal component, drawer variant) ---------- */
.sf-dialog--drawer .sf-dialog__body { padding: 0; }
.sf-drawer-nav__list { list-style: none; margin: 0; padding: 0; }
.sf-drawer-nav__list > li { border-bottom: 1px solid var(--sf-gray-200); }
.sf-drawer-nav__link {
    display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 20px; cursor: pointer; list-style: none;
    font-family: var(--sf-font-heading); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-gray-800); text-decoration: none;
}
.sf-drawer-nav__link::-webkit-details-marker { display: none; }
.sf-drawer-nav__link.is-sale { color: var(--sf-danger); }
.sf-drawer-nav__chevron { width: 16px; height: 16px; transition: transform var(--sf-fast); }
.sf-drawer-nav__group[open] > summary .sf-drawer-nav__chevron { transform: rotate(180deg); }
.sf-drawer-nav__sub { padding: 0 20px 12px; background: var(--sf-gray-100); }
.sf-drawer-nav__viewall { display: block; padding: 12px 0; font-weight: 700; color: var(--sf-primary); text-decoration: none; }
.sf-drawer-nav__title { margin: 12px 0 4px; font-family: var(--sf-font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-primary); }
.sf-drawer-nav__sublink { display: block; padding: 8px 0 8px 12px; font-size: 14px; color: var(--sf-gray-700); text-decoration: none; }
.sf-drawer-services { padding: 20px; border-bottom: 1px solid var(--sf-gray-200); }
.sf-drawer-services__title { margin: 0 0 12px; font-family: var(--sf-font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sf-gray-600); }
.sf-drawer-services__link { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 600; text-decoration: none; }
.sf-drawer-account { display: flex; align-items: center; gap: 10px; padding: 20px; font-weight: 600; text-decoration: none; }

/* ---------- Predictive search dropdown ---------- */
.sf-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--sf-bg); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-xl);
    padding: var(--sf-space-2) 0;
}
.sf-suggest__heading { margin: var(--sf-space-2) var(--sf-space-4) var(--sf-space-1); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-subtle); }
.sf-suggest__list { list-style: none; margin: 0; padding: 0; }
.sf-suggest__item { display: flex; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-2) var(--sf-space-4); text-decoration: none; }
.sf-suggest__item:hover, .sf-suggest__item.is-active, .sf-suggest__all:hover, .sf-suggest__all.is-active { background: var(--sf-bg-muted); color: var(--sf-ink); }
.sf-suggest__item--text { font-weight: 600; }
.sf-suggest__thumb { width: 48px; flex-shrink: 0; border-radius: var(--sf-radius-sm); overflow: hidden; background: var(--sf-bg-muted); }
.sf-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.sf-suggest__name { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-suggest__price { font-size: 13px; font-weight: 700; color: var(--sf-ink-muted); }
.sf-suggest__all { display: block; margin-top: var(--sf-space-2); padding: var(--sf-space-3) var(--sf-space-4); border-top: 1px solid var(--sf-border-soft); font-weight: 600; font-size: 14px; color: var(--sf-primary); text-decoration: none; }
.sf-suggest__empty { margin: 0; padding: var(--sf-space-4); color: var(--sf-ink-muted); font-size: 14px; }

/* ---------- Value props + footer ---------- */
.sf-values { background: var(--sf-bg-soft); border-top: 1px solid var(--sf-border-soft); margin-top: var(--sf-space-7); }
.sf-values__list { display: grid; gap: var(--sf-space-4); list-style: none; margin: 0 auto; padding-top: var(--sf-space-5); padding-bottom: var(--sf-space-5); }
@media (min-width: 750px) { .sf-values__list { grid-template-columns: repeat(3, 1fr); } }
.sf-values__item { display: flex; align-items: center; gap: var(--sf-space-3); font-size: 14px; color: var(--sf-ink-muted); }
.sf-values__item strong { color: var(--sf-ink); }
.sf-values__icon { width: 28px; height: 28px; color: var(--sf-primary); }
.sf-footer { background: var(--sf-footer-bg); color: var(--sf-footer-ink); font-size: 14px; }
.sf-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.sf-footer a:hover { color: #fff; text-decoration: underline; }
.sf-footer__grid { display: grid; gap: var(--sf-space-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-top: var(--sf-space-7); padding-bottom: var(--sf-space-6); }
.sf-footer__heading { color: #fff; font-size: 15px; margin-bottom: var(--sf-space-3); }
.sf-footer__links { list-style: none; margin: 0; padding: 0; }
.sf-footer__links li { padding: 3px 0; }
.sf-footer__contact li, .sf-footer__contact a { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-footer__contact .sf-icon { width: 16px; height: 16px; opacity: .8; }
.sf-footer__store { color: rgba(255, 255, 255, .8); }
.sf-footer__legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--sf-space-4); padding-bottom: var(--sf-space-4); font-size: 13px; color: rgba(255, 255, 255, .65); }
.sf-footer__legal p { margin: 0; }

/* ---------- Page scaffolding ---------- */
.sf-page { padding-top: var(--sf-space-4); padding-bottom: var(--sf-space-6); }
.sf-page-header { margin: var(--sf-space-4) 0 var(--sf-space-5); }
.sf-page-header__desc { max-width: 820px; color: var(--sf-ink-muted); }
.sf-collection-banner { margin-top: var(--sf-space-4); border-radius: var(--sf-radius-lg); overflow: hidden; background: var(--sf-bg-muted); }
.sf-collection-banner__img { width: 100%; max-height: 360px; object-fit: cover; }

/* Rich text from the portal (descriptions) */
.sf-rte > :last-child { margin-bottom: 0; }
.sf-rte ul, .sf-rte ol { padding-left: 1.25em; margin: 0 0 var(--sf-space-4); }
.sf-rte h2, .sf-rte h3, .sf-rte h4 { font-size: 16px; margin-top: var(--sf-space-5); }
.sf-rte a { color: var(--sf-primary); }
.sf-rte table { border-collapse: collapse; width: 100%; margin-bottom: var(--sf-space-4); font-size: 14px; display: block; overflow-x: auto; }
.sf-rte th, .sf-rte td { border: 1px solid var(--sf-border); padding: var(--sf-space-2) var(--sf-space-3); text-align: left; }
.sf-rte img { border-radius: var(--sf-radius); }

/* ---------- Listing: layout, facets, toolbar ---------- */
.sf-listing { display: grid; gap: var(--sf-space-4); grid-template-areas: "head" "side" "main"; }
.sf-listing__head { grid-area: head; }
.sf-listing__sidebar { grid-area: side; }
.sf-listing__main { grid-area: main; min-width: 0; }
@media (min-width: 990px) {
    .sf-listing { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "side head" "side main"; column-gap: var(--sf-space-6); row-gap: 0; align-items: start; }
    .sf-listing__sidebar { align-self: stretch; }
}
.sf-listing__title { margin: 0 0 var(--sf-space-2); }
.sf-listing__desc { color: var(--sf-ink-muted); font-size: 14px; max-width: 900px; margin-bottom: var(--sf-space-4); }
.sf-facets__title { margin: 0 0 var(--sf-space-2); font-family: var(--sf-font-heading); font-weight: 700; font-size: 16px; }
@media (max-width: 989px) { .sf-facets__title { display: none; } }

.sf-facets__toggle { list-style: none; }
.sf-facets__toggle::-webkit-details-marker { display: none; }
.sf-facets[open] > .sf-facets__toggle { margin-bottom: var(--sf-space-3); }
.sf-facets.is-desktop > .sf-facets__toggle { display: none; }
.sf-facets.is-desktop { position: sticky; top: var(--sf-sticky-top); max-height: calc(100vh - var(--sf-sticky-top) - var(--sf-space-4)); overflow-y: auto; }
.sf-facet { border-bottom: 1px solid var(--sf-border-soft); }
.sf-facet__summary {
    display: flex; justify-content: space-between; align-items: center; padding: var(--sf-space-3) 0; cursor: pointer; list-style: none;
    font-family: var(--sf-font-heading); font-weight: 600; font-size: 14px;
}
.sf-facet__summary::-webkit-details-marker { display: none; }
.sf-facet__chevron { width: 16px; height: 16px; transition: transform var(--sf-fast); }
.sf-facet[open] .sf-facet__chevron { transform: rotate(180deg); }
.sf-facet__body { padding-bottom: var(--sf-space-3); }
.sf-facet__list { list-style: none; margin: 0; padding: 0 var(--sf-space-3) 0 0; max-height: 280px; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
.sf-facet__option { display: flex; align-items: center; gap: var(--sf-space-2); min-height: 32px; font-size: 14px; cursor: pointer; }
.sf-facet__option input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sf-primary); }
.sf-facet__value { flex: 1; min-width: 0; }
.sf-facet__count { color: var(--sf-ink-subtle); font-size: 13px; }
.sf-swatch { flex-shrink: 0; }
.sf-facets__actions { padding-top: var(--sf-space-4); }

.sf-range { display: flex; align-items: flex-end; gap: var(--sf-space-2); }
/* Two-handle price slider (facets island). --lo / --hi are set by JS. */
.sf-range-slider { --lo: 0%; --hi: 100%; position: relative; height: 28px; margin: 0 9px var(--sf-space-3); }
.sf-range-slider::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px;
    background: linear-gradient(to right, var(--sf-border) var(--lo), var(--sf-primary) var(--lo), var(--sf-primary) var(--hi), var(--sf-border) var(--hi));
}
.sf-range-slider__input { position: absolute; left: -9px; width: calc(100% + 18px); top: 0; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sf-range-slider__input::-webkit-slider-runnable-track { background: transparent; }
.sf-range-slider__input::-moz-range-track { background: transparent; }
.sf-range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
    background: var(--sf-bg); border: 2px solid var(--sf-primary); cursor: pointer; margin-top: 0;
}
.sf-range-slider__input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--sf-bg); border: 2px solid var(--sf-primary); cursor: pointer; }
.sf-range-slider__input:focus-visible { outline: none; }
.sf-range-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(34, 173, 101, .35); }
.sf-range-slider__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(34, 173, 101, .35); }
.sf-range__field { flex: 1; min-width: 0; }
.sf-range__label { display: block; font-size: 12px; color: var(--sf-ink-muted); margin-bottom: 2px; }
.sf-range__input-wrap { position: relative; display: block; }
.sf-range__input-wrap > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sf-ink-subtle); font-size: 14px; }
.sf-range__input { padding-left: 22px; min-height: 40px; }
.sf-range__sep { padding-bottom: 10px; color: var(--sf-ink-subtle); }

.sf-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sf-space-3); margin-bottom: var(--sf-space-4); }
.sf-toolbar__count { margin: 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-toolbar__count-long { display: none; }
@media (min-width: 750px) { .sf-toolbar__count-long { display: inline; } .sf-toolbar__count-short { display: none; } }
.sf-toolbar { padding-bottom: var(--sf-space-3); border-bottom: 1px solid var(--sf-border-soft); }
.sf-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); }
.sf-toolbar__control { display: flex; align-items: center; gap: var(--sf-space-2); font-size: 14px; }
.sf-toolbar__label { color: var(--sf-ink-muted); }
.sf-toolbar__select { width: auto; min-height: 40px; }
.sf-toolbar__control--perpage { display: none; }
@media (min-width: 750px) { .sf-toolbar__control--perpage { display: flex; } }

.sf-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); list-style: none; margin: 0 0 var(--sf-space-4); padding: 0; }
.sf-pill {
    display: inline-flex; align-items: center; gap: var(--sf-space-1); min-height: 32px; padding: 0 var(--sf-space-2) 0 var(--sf-space-3);
    border: 1px solid var(--sf-border); border-radius: 999px; font-size: 13px; text-decoration: none; background: var(--sf-bg);
}
.sf-pill:hover { border-color: var(--sf-ink); color: var(--sf-ink); }
.sf-pill .sf-icon { width: 14px; height: 14px; }
.sf-active-filters__clear { font-size: 13px; font-weight: 600; color: var(--sf-primary); }
.sf-active-filters__title { font-size: 13px; font-weight: 600; }

/* ---------- Product grid + card ---------- */
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-5) var(--sf-space-3); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-6) var(--sf-space-4); } }
@media (min-width: 1200px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.sf-card__media { position: relative; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-bg-soft); }
.sf-card__media .sf-image-box { background: transparent; }
.sf-card__media > .sf-image-box + .sf-image-box { position: absolute; inset: 0; }
.sf-card__img { transition: opacity var(--sf-normal); }
.sf-card__img--hover { opacity: 0; }
@media (hover: hover) {
    .sf-card.has-hover:hover .sf-card__img--hover { opacity: 1; }
    /* Swap, not overlay: product photos with transparent backgrounds would otherwise show both. */
    .sf-card.has-hover:hover .sf-card__img:not(.sf-card__img--hover) { opacity: 0; }
}
/* Sizes (apparel / shoes): strip over the photo on hover-capable screens, text line under the title on touch. */
.sf-card__sizestrip { display: none; list-style: none; margin: 0; padding: var(--sf-space-2) var(--sf-space-3); position: absolute; left: var(--sf-space-2); right: var(--sf-space-2); bottom: var(--sf-space-2);
    flex-wrap: wrap; gap: var(--sf-space-1) var(--sf-space-3); background: rgba(255, 255, 255, .92); border-radius: var(--sf-radius); font-size: 13px; font-weight: 600; color: var(--sf-ink); pointer-events: none; }
.sf-card__size.is-out { color: var(--sf-ink-subtle); text-decoration: line-through; font-weight: 400; }
.sf-card__size--more { color: var(--sf-ink-subtle); font-weight: 400; }
.sf-card__sizeline { margin: 0; font-size: 12px; color: var(--sf-ink-muted); }
@media (hover: hover) {
    .sf-card:hover .sf-card__sizestrip, .sf-card:focus-within .sf-card__sizestrip { display: flex; }
    /* The strip is aria-hidden, so keep the text line for screen readers but out of sight. */
    .sf-card__sizeline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sf-card__noimg { display: flex; align-items: center; justify-content: center; color: var(--sf-ink-subtle); }
.sf-card__noimg .sf-icon { width: 40px; height: 40px; }
.sf-card__badges { position: absolute; top: var(--sf-space-2); left: var(--sf-space-2); display: flex; flex-direction: column; gap: var(--sf-space-1); }
.sf-card__body { padding-top: var(--sf-space-3); display: flex; flex-direction: column; gap: var(--sf-space-1); }
.sf-card__brand { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-subtle); }
.sf-card__title { margin: 0; font-family: var(--sf-font-body); font-weight: 600; font-size: 14px; line-height: 1.4; }
.sf-card__link { text-decoration: none; }
.sf-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable, one tab stop */
.sf-card__link:focus-visible { outline: none; }
.sf-card:focus-within { outline: 2px solid var(--sf-primary); outline-offset: 4px; border-radius: var(--sf-radius); }
.sf-card:hover .sf-card__title { color: var(--sf-primary); }
.sf-card__por { margin: 0; font-size: 14px; font-weight: 600; color: var(--sf-ink-muted); }
/* Live product-item parity: green price, stock line, full-width button at the bottom. */
.sf-card .sf-price:not(.is-on-sale) .sf-price__amount { color: var(--sf-primary-aa); }
.sf-card__stock { margin: 0; font-size: 12px; }
.sf-card__body { flex: 1; }
.sf-card__cta { margin-top: auto; }
.sf-card__stock { margin-bottom: var(--sf-space-2); }
.sf-card__cta { background: var(--sf-primary-aa); border-color: var(--sf-primary-aa); color: #fff; pointer-events: none; }
.sf-card:hover .sf-card__cta { background: var(--sf-primary-aa-hover); border-color: var(--sf-primary-aa-hover); }
.sf-card__cta.is-soldout { background: var(--sf-ink-subtle); border-color: var(--sf-ink-subtle); }
/* Add to cart on a card: a real button, lifted above the whole-card link (z-index 1) and live to the mouse. */
.sf-card__add { position: relative; z-index: 2; margin-top: auto; }
.sf-card__cta--add { pointer-events: auto; cursor: pointer; }
.sf-card__add .sf-form-msg { margin: var(--sf-space-1) 0 0; font-size: 12px; }

/* ---------- Product page ---------- */
.sf-product { display: grid; gap: var(--sf-space-5); margin-top: var(--sf-space-4); }
@media (min-width: 990px) { .sf-product { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: var(--sf-space-7); align-items: start; } }
.sf-product__media { min-width: 0; }
@media (min-width: 990px) { .sf-product__media { position: sticky; top: var(--sf-sticky-top); z-index: 2; } }   /* z-index: the hover-zoom pane overlays the buy box */
.sf-product__brand { margin: 0 0 var(--sf-space-1); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sf-product__brand a { color: var(--sf-ink-muted); text-decoration: none; }
.sf-product__brand a:hover { color: var(--sf-primary); }
.sf-product__title { margin-bottom: var(--sf-space-3); }
.sf-product__details { margin-top: var(--sf-space-6); }

.sf-gallery__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0;
    border-radius: var(--sf-radius-lg); 
}
.sf-gallery__track::-webkit-scrollbar { display: none; }
.sf-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; }
.sf-gallery__slide .sf-image-box { background: transparent; }
.sf-gallery__thumbs { display: flex; gap: var(--sf-space-2); overflow-x: auto; list-style: none; margin: var(--sf-space-3) 0 0; padding: 2px; }
.sf-gallery__thumb { display: block; width: 72px; border: 2px solid transparent; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-bg-soft); }
.sf-gallery__thumb.is-active { border-color: var(--sf-ink); }
.sf-gallery__thumb .sf-image-box { background: transparent; }
@media (prefers-reduced-motion: no-preference) { .sf-gallery__track { scroll-behavior: smooth; } }

.sf-product-form__price { margin-bottom: var(--sf-space-5); }
.sf-product-form__por { margin: 0; font-family: var(--sf-font-heading); font-weight: 700; font-size: 20px; }
.sf-option { border: 0; margin: 0 0 var(--sf-space-4); padding: 0; min-width: 0; }
.sf-option__legend { padding: 0; margin-bottom: var(--sf-space-2); font-weight: 600; font-size: 14px; }
.sf-option__current { font-weight: 400; color: var(--sf-ink-muted); }
.sf-option__values { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-option__chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 var(--sf-space-3);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius); font-size: 14px; cursor: pointer; background: var(--sf-bg);
    transition: border-color var(--sf-fast);
}
.sf-option__chip:hover { border-color: var(--sf-ink); }
.sf-option__input:checked + .sf-option__chip { border-color: var(--sf-ink); box-shadow: inset 0 0 0 1px var(--sf-ink); font-weight: 600; }
.sf-option__input:focus-visible + .sf-option__chip { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.sf-option__chip.is-unavailable { color: var(--sf-ink-subtle); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--sf-border) 50%, transparent calc(50% + 1px)); }
.sf-product-form__nojs { margin-bottom: var(--sf-space-4); }

.sf-availability { margin: var(--sf-space-5) 0; padding: var(--sf-space-4); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg-soft); }
.sf-availability__title { font-size: 14px; margin-bottom: var(--sf-space-2); }
.sf-availability__list { list-style: none; margin: 0; padding: 0; }
.sf-availability__row { display: flex; align-items: center; gap: var(--sf-space-2); padding: var(--sf-space-1) 0; font-size: 14px; }
.sf-availability__row .sf-icon { width: 18px; height: 18px; color: var(--sf-ink-subtle); }
.sf-availability__store { flex: 1; }
.sf-stock { font-weight: 600; font-size: 13px; }
.sf-stock::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; }
.sf-stock--in { color: #1c7c4a; }
.sf-stock--low { color: #b35c00; }
.sf-stock--out { color: var(--sf-ink-subtle); }
.sf-product-form__actions { display: flex; flex-direction: column; gap: var(--sf-space-3); }
.sf-product-form__note { margin: var(--sf-space-2) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-product-form__sku { margin: 0; font-size: 12px; color: var(--sf-ink-subtle); }

/* ==========================================================================
   Stage 2 - sections (sections/*.php), content pages, blog
   ========================================================================== */
.sf-section-block { padding: 0 0 var(--sf-space-6); }
.sf-section-heading { margin-bottom: var(--sf-space-5); }
@media (min-width: 990px) { .sf-section-block { padding: var(--sf-space-5) 0; } }

/* Rich text */
.sf-rich-text--narrow .sf-container > * { max-width: 820px; }
.sf-rich-text--center .sf-container > * { margin-left: auto; margin-right: auto; text-align: center; }

/* Image with text */
.sf-image-text__grid { display: grid; gap: var(--sf-space-5); align-items: center; }
@media (min-width: 990px) {
    .sf-image-text__grid { grid-template-columns: 1fr 1fr; gap: var(--sf-space-7); }
    .sf-image-text--reverse .sf-image-text__media { order: 2; }
}
.sf-image-text__media { border-radius: var(--sf-radius-lg); overflow: hidden; }
.sf-image-text__media .sf-image { object-fit: cover; }
.sf-image-text__cta { margin-top: var(--sf-space-5); }

/* Slideshow */
.sf-slideshow { position: relative; }
.sf-slideshow__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.sf-slideshow__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .sf-slideshow__track { scroll-behavior: smooth; } }
.sf-slideshow__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.sf-slideshow__link { display: block; }
.sf-slideshow__picture, .sf-slideshow__img { display: block; width: 100%; }
.sf-slideshow__img { height: auto; }
.sf-slideshow__caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sf-space-6) var(--sf-gutter) var(--sf-space-7);
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); color: #fff;
}
.sf-slideshow__heading { margin: 0 0 var(--sf-space-2); font-family: var(--sf-font-heading); font-weight: 700; font-size: clamp(24px, 4vw, 44px); line-height: 1.1; }
.sf-slideshow__text { margin: 0 0 var(--sf-space-4); font-size: 17px; max-width: 640px; }
.sf-slideshow__controls { position: absolute; left: 50%; bottom: var(--sf-space-3); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sf-space-2); padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.sf-slideshow__arrow, .sf-slideshow__pause { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.sf-slideshow__arrow:hover, .sf-slideshow__pause:hover { background: rgba(255, 255, 255, .2); }
.sf-slideshow__arrow .sf-icon { width: 18px; height: 18px; }
.sf-slideshow__pause { font-size: 11px; }
.sf-slideshow__dots { display: flex; gap: 6px; }
.sf-slideshow__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sf-slideshow__dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; }
.sf-slideshow__dot.is-active::before { background: #fff; }

/* Promo tiles */
.sf-tiles__grid { display: grid; gap: var(--sf-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 990px) {
    .sf-tiles__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf-tiles__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-tile { position: relative; border-radius: var(--sf-radius-lg); overflow: hidden; }
.sf-tile__link { display: block; text-decoration: none; }
.sf-tile .sf-image { object-fit: cover; transition: transform var(--sf-normal); }
.sf-tile__link:hover .sf-image { transform: scale(1.03); }
.sf-tile__title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sf-space-4); background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); color: #fff; font-family: var(--sf-font-heading); font-weight: 700; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .sf-tile .sf-image { transition: none; } .sf-tile__link:hover .sf-image { transform: none; } }

/* Collection list */
.sf-collection-list__grid { display: grid; gap: var(--sf-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .sf-collection-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 990px) {
    .sf-collection-list__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sf-collection-list__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sf-collection-tile { display: block; text-decoration: none; text-align: center; }
.sf-collection-tile .sf-image-box { border-radius: var(--sf-radius-lg); background: none; }
.sf-collection-tile__name { display: block; margin-top: var(--sf-space-2); font-family: var(--sf-font-heading); font-weight: 700; font-size: 15px; }
.sf-collection-tile:hover .sf-collection-tile__name { color: var(--sf-primary); }

/* Product carousel + section header rows */
.sf-carousel__header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sf-space-3); margin-bottom: var(--sf-space-4); }
.sf-carousel__header .sf-section-heading { margin: 0; }
.sf-carousel__nav { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-carousel__all { font-weight: 600; font-size: 14px; color: var(--sf-primary-aa); white-space: nowrap; }
.sf-carousel__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-border); border-radius: 50%; background: var(--sf-bg); cursor: pointer; }
.sf-carousel__arrow:hover:not([disabled]) { border-color: var(--sf-ink); }
.sf-carousel__arrow[disabled] { opacity: .35; cursor: default; }
.sf-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--sf-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; margin: 0; padding: 0 0 var(--sf-space-2); }
.sf-carousel__track::-webkit-scrollbar { display: none; }
@media (min-width: 750px) { .sf-carousel__track { grid-auto-columns: 31%; gap: var(--sf-space-4); } }
@media (min-width: 1200px) { .sf-carousel__track { grid-auto-columns: calc(25% - 12px); } }
.sf-carousel__item { scroll-snap-align: start; }

/* Brand wall */
.sf-brand-wall__item { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: var(--sf-space-3); background: var(--sf-bg-muted); border-radius: var(--sf-radius-lg); transition: all var(--sf-fast); }
a.sf-brand-wall__item:hover { background: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); }
.sf-brand-wall__item img { max-height: 48px; width: auto; object-fit: contain; }

/* FAQ */
.sf-faq__inner > * { max-width: 860px; }

/* Embeds (sections and inside rich text) */
.sf-embed { position: relative; aspect-ratio: 16 / 9; margin: var(--sf-space-4) 0; border-radius: var(--sf-radius); overflow: hidden; background: var(--sf-bg-muted); }
.sf-embed--4-3 { aspect-ratio: 4 / 3; }
.sf-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-embed-section__frame { display: block; width: 100%; border: 0; }

/* Blog: cards, index, article */
.sf-lgrid.sf-post-grid { --g: var(--sf-space-5); }   /* after .sf-lgrid in specificity */

.sf-post-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.sf-post-card__media { border-radius: var(--sf-radius-lg); overflow: hidden; background: var(--sf-bg-soft); }
.sf-post-card__media .sf-image { object-fit: cover; }
.sf-post-card__body { padding-top: var(--sf-space-3); }
.sf-post-card__date { display: block; font-size: 13px; color: var(--sf-ink-subtle); margin-bottom: var(--sf-space-1); }
.sf-post-card__title { font-size: 18px; margin-bottom: var(--sf-space-2); }
.sf-post-card__link { text-decoration: none; }
.sf-post-card__link::after { content: ''; position: absolute; inset: 0; }
.sf-post-card:hover .sf-post-card__title { color: var(--sf-primary); }
.sf-post-card__excerpt { font-size: 14px; color: var(--sf-ink-muted); }
.sf-post-card__excerpt > :last-child { margin-bottom: 0; }

.sf-content-page__title { margin-top: var(--sf-space-4); margin-bottom: 0; }
.sf-content-page .sf-breadcrumb { padding-top: var(--sf-space-4); }
.sf-order__parcels { list-style: none; padding: 0; margin: var(--sf-space-3) 0 0; }
.sf-order__parcels li { margin-bottom: var(--sf-space-3); }
/* Policy pages (/policies/...) */
.sf-policy .sf-container { max-width: 860px; padding-bottom: var(--sf-space-7); }
.sf-policy__updated { color: var(--sf-ink-subtle); font-size: 14px; margin: var(--sf-space-2) 0 var(--sf-space-5); }
.sf-policy .sf-rte h2 { font-size: 20px; margin-top: var(--sf-space-5); }
.sf-policy__more { margin-top: var(--sf-space-7); padding-top: var(--sf-space-5); border-top: 1px solid var(--sf-border, #e5e7eb); }
.sf-policy__more ul, .sf-policy__list { list-style: none; padding: 0; margin: 0; }
.sf-policy__more li, .sf-policy__list li { margin-bottom: var(--sf-space-2); }
.sf-policy__list li { font-size: 18px; }
.sf-article__container { max-width: 900px; padding-top: var(--sf-space-4); padding-bottom: var(--sf-space-6); }
.sf-article__header { margin: var(--sf-space-4) 0 var(--sf-space-5); }
.sf-article__meta { color: var(--sf-ink-subtle); font-size: 14px; }
.sf-article__image { margin-bottom: var(--sf-space-5); border-radius: var(--sf-radius-lg); overflow: hidden; }
.sf-article__body { font-size: 16px; }
.sf-article__body img { height: auto; margin: var(--sf-space-4) 0; }
.sf-article__nav { display: grid; gap: var(--sf-space-3); margin-top: var(--sf-space-7); padding-top: var(--sf-space-5); border-top: 1px solid var(--sf-border-soft); }
@media (min-width: 750px) { .sf-article__nav { grid-template-columns: 1fr 1fr; } }
.sf-article__nav-link { display: flex; flex-direction: column; gap: 2px; padding: var(--sf-space-3) var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); text-decoration: none; font-weight: 600; }
.sf-article__nav-link span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-ink-subtle); }
.sf-article__nav-link--next { text-align: right; grid-column: -2; }
.sf-article__nav-link:hover { border-color: var(--sf-primary); }

/* Rich text button, quick links */
.sf-rich-text__cta { margin-top: var(--sf-space-5); }
.sf-quick-links__row { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
.sf-section-anchor { scroll-margin-top: var(--sf-sticky-top); }

/* Newsletter signup (sections/newsletter.php) */
.sf-newsletter--dark { background: var(--sf-footer-bg); color: #fff; }
.sf-newsletter--green { background: var(--sf-primary); color: #fff; }
.sf-newsletter--light { background: var(--sf-bg-soft); }
.sf-newsletter--dark .sf-newsletter__heading, .sf-newsletter--green .sf-newsletter__heading { color: #fff; }
.sf-newsletter__inner { display: grid; gap: var(--sf-space-5); align-items: center; }
@media (min-width: 990px) { .sf-newsletter__inner { grid-template-columns: 1fr 1fr; gap: var(--sf-space-7); } }
.sf-newsletter__heading { margin-bottom: var(--sf-space-2); }
.sf-newsletter__text { margin: 0; opacity: .9; }
.sf-newsletter__row { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-newsletter__input { flex: 1 1 240px; min-height: 52px; color: var(--sf-ink); }
.sf-newsletter--green .sf-btn--primary { background: var(--sf-primary-dark); }
.sf-newsletter__legal { margin: var(--sf-space-2) 0 0; font-size: 12px; opacity: .75; }
.sf-newsletter__msg { margin: var(--sf-space-3) 0 0; font-weight: 600; }
.sf-newsletter__msg.is-error { color: #ff9b9b; }
.sf-newsletter--light .sf-newsletter__msg.is-error { color: var(--sf-danger); }
/* Bot trap - off-screen, not display:none (some bots skip hidden fields). */
.sf-newsletter__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Team (sections/team.php) */
.sf-team__group-title { margin-top: var(--sf-space-6); }
.sf-team__group-title:first-child { margin-top: 0; }
.sf-team__grid { display: grid; gap: var(--sf-space-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); list-style: none; margin: 0 0 var(--sf-space-6); padding: 0; }
.sf-team__member, .sf-team__promo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sf-space-5) var(--sf-space-4); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); }
.sf-team__promo { justify-content: center; background: var(--sf-primary); color: #fff; border-color: var(--sf-primary); }
.sf-team__promo .sf-team__name { color: #fff; }
.sf-team__promo .sf-btn--primary { background: #fff; color: var(--sf-primary-dark); }
.sf-team__photo { width: 160px; height: 160px; object-fit: cover; margin-bottom: var(--sf-space-3); border-radius: var(--sf-radius-lg); }
.sf-team__photo--round { border-radius: 50%; }
.sf-team__name { font-size: 18px; margin-bottom: var(--sf-space-1); }
.sf-team__role { margin: 0; color: var(--sf-ink-muted); font-size: 14px; }
.sf-team__specialty { margin: var(--sf-space-1) 0 0; font-size: 13px; color: var(--sf-primary-dark); font-weight: 600; }
.sf-team__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-2); margin-top: auto; padding-top: var(--sf-space-4); }

/* Icon columns (sections/icon-columns.php) */
.sf-icon-columns__heading { text-align: center; }
.sf-lgrid.sf-icon-columns__grid { --g: var(--sf-space-5); }
.sf-icon-columns__col { padding: var(--sf-space-5); background: #f5f5f5; border-radius: 18px; text-align: center; }
.sf-icon-columns__icon { width: 80px; height: 80px; object-fit: contain; margin: 0 auto var(--sf-space-4); }
.sf-icon-columns__title { font-size: 20px; margin-bottom: var(--sf-space-2); }
.sf-icon-columns__text { color: #616161; }
.sf-icon-columns__text ul { display: inline-block; text-align: left; }

/* Events (sections/events.php) */
.sf-events__grid { display: grid; gap: var(--sf-space-5); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .sf-events__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 990px) { .sf-events__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-event { display: flex; flex-direction: column; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); overflow: hidden; background: var(--sf-bg); }
.sf-event__media .sf-image { object-fit: cover; }
.sf-event__body { display: flex; flex-direction: column; flex: 1; padding: var(--sf-space-4); }
.sf-event__title { font-size: 18px; margin-bottom: var(--sf-space-2); }
.sf-event__meta { font-size: 14px; color: var(--sf-ink-muted); }
.sf-event__meta .sf-icon { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.sf-event__desc { font-size: 14px; }
.sf-event__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); margin-top: auto; padding-top: var(--sf-space-3); }
.sf-event__price { font-family: var(--sf-font-heading); font-weight: 700; }
.sf-events__none { color: var(--sf-ink-muted); }
.sf-store-locations__header {margin-bottom: 2rem;}
.sf-store-location { background: #fbfbfb;}
.sf-store-location__map iframe {width: 100%;min-height: 300px;border: none;}
.sf-store-location__title {line-height: 1.5;padding: 10px 0;font-size: 1.6em;}
.sf-store-location__details {display: grid;grid-template-columns: 1fr 1fr;gap: 0;margin-bottom: 16px;}
.sf-store-location__detail {display: grid;grid-template-columns: 50px 1fr;}
.sf-store-location__content {padding: 0 15px;}
.sf-store-location__detail-content p { margin: 0;}
.sf-store-location__detail-icon {padding: 6px;}
.sf-store-location__actions a{border: 1px solid #000;padding: 10px 15px;margin-bottom: 15px;background: white; width:100%}
/* Contact form (sections/contact-form.php) */
.sf-contact__grid { display: grid; gap: var(--sf-space-6); max-width: 760px; }
.sf-contact__grid--store { max-width: none; }
@media (min-width: 990px) { .sf-contact__grid--store { grid-template-columns: 3fr 2fr; } }
.sf-contact__row { display: grid; gap: 0 var(--sf-space-4); }
@media (min-width: 750px) { .sf-contact__row { grid-template-columns: 1fr 1fr; } }
.sf-contact__intro { margin-bottom: var(--sf-space-4); }
.sf-contact__store { padding: var(--sf-space-5); background: var(--sf-bg-soft); border-radius: var(--sf-radius-lg); }
.sf-contact__store .sf-image-box { margin-bottom: var(--sf-space-4); border-radius: var(--sf-radius); }
.sf-form-msg { margin: var(--sf-space-3) 0 0; font-weight: 600; color: var(--sf-primary-dark); }
.sf-form-msg.is-error { color: var(--sf-danger); }

/* Testimonials (sections/testimonials.php) */
.sf-testimonials__list { display: grid; gap: var(--sf-space-5); list-style: none; margin: 0; padding: 0; }
.sf-testimonial { display: grid; gap: var(--sf-space-4); align-items: center; padding: var(--sf-space-5); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); }
@media (min-width: 990px) { .sf-testimonial.has-image { grid-template-columns: 2fr 3fr; } }
.sf-testimonial__media { border-radius: var(--sf-radius); overflow: hidden; }
.sf-testimonial__body { margin: 0; }
.sf-testimonial__quote { margin: 0 0 var(--sf-space-3); font-size: 16px; }
.sf-testimonial__quote p { margin: 0; }
.sf-testimonial__by { font-weight: 700; font-family: var(--sf-font-heading); font-size: 14px; }
.sf-testimonials__more { margin-top: var(--sf-space-5); text-align: center; }
.sf-testimonial-hl { max-width: 760px; margin: 0 auto; padding: var(--sf-space-6) var(--sf-space-5); text-align: center; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); }
.sf-testimonial-hl__quote { margin: 0 0 var(--sf-space-3); font-size: 18px; font-style: italic; font-weight: 600; }
.sf-testimonial-hl .sf-testimonial__by { margin-bottom: var(--sf-space-4); font-weight: 400; color: var(--sf-ink-muted); }

/* Post feed (sections/post-feed.php) */
.sf-post-feed__inner { max-width: 960px; }
.sf-post-feed__item { display: grid; gap: var(--sf-space-4); padding: var(--sf-space-5) 0; border-bottom: 1px solid var(--sf-border-soft); }
@media (min-width: 750px) {
    .sf-post-feed__item.has-image { grid-template-columns: 240px 1fr; align-items: start; }
    .sf-post-feed__item--alt.has-image { grid-template-columns: 1fr 240px; }
    .sf-post-feed__item--alt .sf-post-feed__media { order: 2; }
}
.sf-post-feed__media { border-radius: var(--sf-radius); overflow: hidden; }
.sf-post-feed__date { margin: 0 0 var(--sf-space-2); font-weight: 700; color: var(--sf-ink-muted); font-size: 14px; }

/* ==========================================================================
   Footer group (sections/text-with-icons.php + sections/footer.php) -
   ported from the live theme's modern footer (theme.css "Modern Footer").
   ========================================================================== */
.sf-footer-group { margin-top: var(--sf-space-7); }
.sf-trust { background: var(--sf-bg-soft); border-top: 1px solid var(--sf-border-soft); }
.sf-trust__list { display: grid; gap: var(--sf-space-5); list-style: none; margin: 0 auto; padding-top: var(--sf-space-6); padding-bottom: var(--sf-space-6); }

.sf-trust__item { display: flex; gap: var(--sf-space-3); align-items: flex-start; line-height: 1.5; }
.sf-trust__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--sf-primary); }
.sf-trust__icon .sf-icon { width: 30px; height: 30px; }
.sf-trust__icon img { max-width: 40px; max-height: 40px; object-fit: contain; }
.sf-trust__title { display: block; font-family: var(--sf-font-heading); font-size: 15px; }
.sf-trust__body { font-size: 14px; color: var(--sf-ink-muted); }

.sf-footer-modern { background: #000; color: #d1d5db; padding-bottom: 30px; font-size: 15px; }
.sf-footer-modern a { color: #d1d5db; text-decoration: none; transition: color .2s; }
.sf-footer-modern a:hover { color: #fff; }
.sf-footer-modern__top { display: grid; gap: var(--sf-space-6); padding: var(--sf-space-6) 0 var(--sf-space-5); border-bottom: 1px solid #374151; }
@media (min-width: 990px) { .sf-footer-modern__top { grid-template-columns: 1fr 1fr; gap: 60px; } .sf-footer-modern__news { justify-self: end; max-width: 450px; width: 100%; } }
.sf-footer-modern__logo { margin: 0 0 12px; color: #fff; font-family: var(--sf-font-heading); font-size: 24px; font-weight: 700; }
.sf-footer-modern__brand { max-width: 520px; }
.sf-footer-modern__brand-text, .sf-footer-modern__brand-text p { color: #9ca3af; line-height: 1.6; }
.sf-footer-modern__brand-text a, .sf-footer-modern__col-text a { color: var(--sf-primary); font-weight: 500; }
.sf-footer-modern__brand-text a:hover, .sf-footer-modern__col-text a:hover { color: #34d399; }
.sf-footer-modern__news-title { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.sf-footer-modern__news-text { font-size: 14px; color: #9ca3af; margin-bottom: 16px; }
.sf-footer-modern__news-row { display: flex; gap: 8px; }
.sf-footer-modern__news-input { flex: 1; min-width: 0; min-height: 44px; padding: 11px 14px; border: 1px solid #374151; border-radius: 6px; font-size: 14px; color: #000; background: #fff; }
.sf-footer-modern__news-input:focus { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(34, 173, 101, .3); }
.sf-footer-modern__news-btn { padding: 11px 24px; min-height: 44px; border: 0; border-radius: 6px; background: var(--sf-primary-aa); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.sf-footer-modern__news-btn:hover { background: var(--sf-primary-aa-hover); }
.sf-footer-modern .sf-newsletter__msg { color: #d1fae5; font-size: 14px; }
.sf-footer-modern .sf-newsletter__msg.is-error { color: #fecaca; }
.sf-footer-modern__middle { display: grid; gap: var(--sf-space-5) 40px; padding: var(--sf-space-5) 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sf-footer-modern__col-title { color: #fff; font-family: var(--sf-font-heading); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.sf-footer-modern__links { list-style: none; margin: 0; padding: 0; }
.sf-footer-modern__links li { margin-bottom: 8px; }
.sf-footer-modern__col-text, .sf-footer-modern__col-text p { color: #9ca3af; line-height: 1.6; }
.sf-footer-modern__col-text p { margin-bottom: 8px; }
.sf-footer-modern__col-text strong { color: #d1d5db; }
.sf-footer-modern__col-text h3 { color: var(--sf-primary); font-size: 15px; text-transform: none; margin-top: var(--sf-space-3); }
/* Live chat entry: desktop only - below 1024px the bottom nav (.sf-bottom-nav) has the Chat item. */
.sf-footer-modern__chat { display: none; }
@media (min-width: 1024px) { .sf-footer-modern__chat { display: block; } }
.sf-footer-modern__chat-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 6px; background: var(--sf-primary-aa); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.sf-footer-modern__chat-btn:hover { background: var(--sf-primary-aa-hover); }
.sf-footer-modern__chat-btn svg { width: 18px; height: 18px; fill: currentColor; }
.sf-footer-modern__chat-btn .ghq-nav-badge { top: -4px; left: auto; right: -4px; }
.sf-footer-modern__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sf-space-4); padding: 24px 0 0; border-top: 1px solid #374151; }
.sf-footer-modern__bottom-left { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.sf-footer-modern__copy { margin: 0 0 0 3rem; color: #9ca3af; font-size: 13px; }
.sf-footer-modern__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sf-footer-modern__social a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #374151; color: #d1d5db; }
.sf-footer-modern__social a:hover { background: var(--sf-primary); color: #fff; }
.sf-footer-modern__social .sf-icon { width: 16px; height: 16px; }
.sf-footer-modern__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-footer-modern__pay-label { color: #9ca3af; font-size: 13px; }
.sf-footer-modern__pay-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sf-cart-modern__pay-list { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 0; padding: 0;justify-content:center; }
.sf-footer-modern__pay-chip { padding: 3px 8px; border: 1px solid #374151; border-radius: 4px; font-size: 11px; font-weight: 600; color: #d1d5db; background: #111; }

/* ==========================================================================
   Product page parity (27 Sep 2026): Afterpay/points lines, quote + notify
   forms, labels, custom-build banner, Golf Ball HQ link, zoom, size guide
   ========================================================================== */
.sf-product__labels { display: flex; flex-wrap: wrap; gap: var(--sf-space-1); margin-bottom: var(--sf-space-2); }
.sf-product-form__afterpay { margin: calc(-1 * var(--sf-space-3)) 0 var(--sf-space-3); font-size: 14px; color: var(--sf-ink-muted); }
.sf-afterpay-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #b2fce4; color: #000; font-weight: 700; font-size: 12px; }
.sf-product-form__points { display: flex; align-items: flex-start; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-5); padding: var(--sf-space-2) var(--sf-space-3); border-radius: var(--sf-radius); background: #eef8f2; font-size: 14px; }
.sf-product-form__points .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); flex-shrink: 0; margin-top: 2px; }
.sf-product-form__points a { color: var(--sf-primary-dark); font-weight: 600; }
.sf-link-btn { background: none; border: 0; padding: 0; margin-left: var(--sf-space-2); color: var(--sf-primary-dark); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sf-quote, .sf-notify { margin: var(--sf-space-4) 0; padding: var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg-soft); }
.sf-quote__intro, .sf-notify__intro { margin: 0 0 var(--sf-space-3); font-size: 14px; }
.sf-quote__row { display: grid; gap: 0 var(--sf-space-3); }
@media (min-width: 750px) { .sf-quote__row { grid-template-columns: 1fr 1fr; } }
.sf-notify__row { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-notify__row .sf-input { flex: 1 1 220px; }
.sf-notify__small { margin: var(--sf-space-2) 0 0; font-size: 12px; color: var(--sf-ink-subtle); }
.sf-custom-build { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: var(--sf-space-4); padding: 14px 16px; border-radius: 8px; background: #eef8f2; text-decoration: none; color: var(--sf-ink); }
.sf-custom-build:hover { color: var(--sf-ink); background: #e2f3e9; }
.sf-custom-build__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #1b4332; color: #fff; display: flex; align-items: center; justify-content: center; }
.sf-custom-build__text { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #5b6b62; }
.sf-custom-build__text strong { font-size: 14px; color: #111; }
.sf-custom-build__cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 6px; background: #1b4332; color: #fff; font-size: 13px; font-weight: 600; }
.sf-custom-build__cta .sf-icon { width: 14px; height: 14px; }
.sf-gbhq { display: inline-flex; align-items: center; gap: var(--sf-space-2); margin-top: var(--sf-space-4); padding: var(--sf-space-2) var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
.sf-gbhq:hover { border-color: var(--sf-primary); }
.sf-gallery__zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* Hover zoom (mouse only - the gallery island): the lens sits over the photo, the pane beside it
   magnifies what the lens covers and overlays the buy box while hovering. */
.sf-gallery { position: relative; }
.sf-gallery__lens { position: absolute; z-index: 1; border: 1px solid #22c55e; background: rgba(34, 197, 94, .12); pointer-events: none; }
.sf-gallery__pane {
    position: absolute; top: 0; z-index: 5; pointer-events: none; background-color: #fff; background-repeat: no-repeat;
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-xl);
}
@media (hover: hover) and (pointer: fine) { .sf-gallery__zoom { cursor: crosshair; } }
.sf-zoom__body { display: flex; justify-content: center; background: #fff; }
.sf-zoom__img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.sf-size-chart { width: 100%; height: auto; }

/* Error / 404 pages (templates/error.php, templates/404.php) */
.sf-error-page { text-align: center; max-width: 560px; margin: 0 auto; padding: var(--sf-space-7) 0; }
.sf-error-page p { color: var(--sf-ink-muted); }
.sf-error-page__actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); justify-content: center; margin-top: var(--sf-space-5); }
.sf-error-page__contact { margin-top: var(--sf-space-4); font-size: var(--sf-text-sm); }

/* Error detail - preview-gate staff only (templates/error.php) */
.sf-error-detail { max-width: 720px; margin: var(--sf-space-4) auto 0; padding: var(--sf-space-3); background: var(--sf-bg-muted); border-radius: var(--sf-radius); font-size: 13px; white-space: pre-wrap; word-break: break-word; }

/* Search: no query / no results (live's empty state) */
.sf-search-empty { max-width: 560px; margin: var(--sf-space-6) auto var(--sf-space-7); text-align: center; }
.sf-search-empty__text { color: var(--sf-ink-muted); }
.sf-search-empty .sf-search--page { margin: var(--sf-space-4) auto var(--sf-space-3); }
.sf-search-empty__home { font-size: 14px; font-weight: 600; color: var(--sf-primary); }

/* ---------- Shared section layout (includes/sections.php sf_layout, 28 Sep 2026) ----------
   --m / --t / --d = columns on mobile / tablet / desktop, set by modifier classes;
   --n = the current breakpoint's count; --g = the gap. */
.sf-lgrid { --m: 2; --t: 3; --d: 4; --n: var(--m); --g: var(--sf-space-4); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--g); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .sf-lgrid { --n: var(--t); } }
@media (min-width: 990px) { .sf-lgrid { --n: var(--d); } }
.sf-lgrid--m1 { --m: 1; } .sf-lgrid--m2 { --m: 2; } .sf-lgrid--m3 { --m: 3; } .sf-lgrid--mswipe { --m: 2; }
.sf-lgrid--t1 { --t: 1; } .sf-lgrid--t2 { --t: 2; } .sf-lgrid--t3 { --t: 3; }
.sf-lgrid--d1 { --d: 1; } .sf-lgrid--d2 { --d: 2; } .sf-lgrid--d3 { --d: 3; } .sf-lgrid--d4 { --d: 4; }
.sf-lgrid--d5 { --d: 5; } .sf-lgrid--d6 { --d: 6; } .sf-lgrid--d7 { --d: 7; } .sf-lgrid--d8 { --d: 8; }
/* Stretch a short last row: flex items sized for --n per row, growing to fill. */
.sf-lgrid--fill { display: flex; flex-wrap: wrap; }
.sf-lgrid--fill > * { flex: 1 1 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width: 0; }
/* Swipe on mobile: one scroll-snap row. */
@media (max-width: 749px) {
    .sf-lgrid.sf-lgrid--mswipe { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .sf-lgrid--mswipe::-webkit-scrollbar { display: none; }
    .sf-lgrid--mswipe > * { scroll-snap-align: start; }
}

/* Logo list / brand wall styles + sizes */
.sf-logos .sf-brand-wall__item { height: 100%; }
.sf-logos .sf-brand-wall__item img { max-width: 100%; height: auto; }
.sf-logos--small .sf-brand-wall__item img { max-height: 36px; }
.sf-logos--medium .sf-brand-wall__item img { max-height: 56px; }
.sf-logos--large .sf-brand-wall__item img { max-height: 80px; }
.sf-logos--plain .sf-brand-wall__item { background: transparent; }
.sf-logos--plain a.sf-brand-wall__item:hover { background: transparent; box-shadow: none; }
/* Boxed: the live "Authorised Resellers Of" grid - no gaps, a line between logos. */
.sf-logos--boxed { --g: 0px; border-top: 1px solid var(--sf-border-soft); border-left: 1px solid var(--sf-border-soft); }
.sf-logos--boxed > li { border-right: 1px solid var(--sf-border-soft); border-bottom: 1px solid var(--sf-border-soft); }
.sf-logos--boxed .sf-brand-wall__item { background: transparent; border-radius: 0; aspect-ratio: 2 / 1; padding: var(--sf-space-4); }
.sf-logos--boxed a.sf-brand-wall__item:hover { background: var(--sf-bg-soft); box-shadow: none; }

/* Promo tiles: fixed heights crop the image to fit */
.sf-tiles--h-small .sf-image-box, .sf-tiles--h-medium .sf-image-box, .sf-tiles--h-large .sf-image-box { aspect-ratio: auto; }
.sf-tiles--h-small .sf-image-box { height: 200px; }
.sf-tiles--h-medium .sf-image-box { height: 300px; }
.sf-tiles--h-large .sf-image-box { height: 420px; }
@media (max-width: 749px) { .sf-tiles--h-large .sf-image-box { height: 320px; } }
.sf-tile .sf-image-box .sf-image { object-fit: cover; }

/* Collection list: circle images */
.sf-collection-list--circle .sf-collection-tile .sf-image-box { border-radius: 50%; }
.sf-collection-list--circle .sf-collection-tile .sf-image { object-fit: cover; }

/* Product carousel: products per row on desktop (--d classes on the section) */
@media (min-width: 990px) {
    .sf-carousel--d2 .sf-carousel__track { grid-auto-columns: calc((100% - 1 * var(--sf-space-4)) / 2); }
    .sf-carousel--d3 .sf-carousel__track { grid-auto-columns: calc((100% - 2 * var(--sf-space-4)) / 3); }
    .sf-carousel--d4 .sf-carousel__track { grid-auto-columns: calc((100% - 3 * var(--sf-space-4)) / 4); }
    .sf-carousel--d5 .sf-carousel__track { grid-auto-columns: calc((100% - 4 * var(--sf-space-4)) / 5); }
    .sf-carousel--d6 .sf-carousel__track { grid-auto-columns: calc((100% - 5 * var(--sf-space-4)) / 6); }
}
.sf-product-grid { row-gap: var(--sf-space-5); }
/* Reassurance row: the grid sits inside its container (.sf-lgrid resets padding). */
.sf-trust__list.sf-lgrid { --g: var(--sf-space-5); padding-top: var(--sf-space-6); padding-bottom: var(--sf-space-6); }

/* ---------- Coach / fitter profile (templates/profile.php) - booking-first layout, 28 Sep 2026 ----------
   Mobile: head -> booking -> about (the side wrapper dissolves with display: contents).
   Desktop: booking left, head + about in a card on the right that stays in view. */
.sf-profile__layout { display: flex; flex-direction: column; gap: var(--sf-space-5); margin-top: var(--sf-space-3); }
.sf-profile__side { display: contents; }
.sf-profile__head { order: 1; display: flex; align-items: center; gap: var(--sf-space-4); }
.sf-profile__booking { order: 2; min-width: 0; }
.sf-profile__about { order: 3; }
.sf-profile__photo { width: 88px; flex-shrink: 0; }
.sf-profile__photo .sf-image-box { border-radius: 50%; }
.sf-profile__photo .sf-image { object-fit: cover; }
.sf-profile__name { margin: 0 0 2px; font-family: var(--sf-font-heading); font-size: clamp(24px, 4vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.sf-profile__title { margin: 0 0 2px; font-family: var(--sf-font-heading); font-weight: 700; font-size: 15px; color: var(--sf-primary); }
.sf-profile__specialty { margin: 0; color: var(--sf-ink-muted); font-style: italic; font-size: 14px; }
.sf-profile__book-title { margin: 0 0 var(--sf-space-4); font-family: var(--sf-font-heading); font-size: clamp(20px, 3vw, 26px); font-weight: 700; }
.sf-profile__about-title { margin: 0 0 var(--sf-space-2); font-size: 17px; }
.sf-profile__bio { font-size: 14px; line-height: 1.65; }
.sf-profile__more { margin-top: var(--sf-space-2); }
.sf-profile__more > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--sf-primary); }
.sf-profile__more > summary::-webkit-details-marker { display: none; }
.sf-profile__more > summary:hover { text-decoration: underline; }
.sf-profile__more-close, .sf-profile__more[open] .sf-profile__more-open { display: none; }
.sf-profile__more[open] .sf-profile__more-close { display: inline; }
.sf-profile__more > .sf-profile__bio { margin-top: var(--sf-space-2); }
.sf-profile__also { margin: var(--sf-space-4) 0 0; font-weight: 600; font-size: 14px; }
.sf-profile__also a { color: var(--sf-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.sf-profile__also .sf-icon { width: 14px; height: 14px; }
.sf-profile__logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: center; justify-items: center; gap: var(--sf-space-5); list-style: none; margin: var(--sf-space-7) 0 var(--sf-space-4); padding: var(--sf-space-6) 0; border-top: 1px solid var(--sf-border-soft); }
.sf-profile__logos img { max-width: 125px; max-height: 125px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 749px) { .sf-profile__logos { grid-template-columns: repeat(3, 1fr); } .sf-profile__logos img { max-width: 90px; max-height: 90px; } }

@media (min-width: 990px) {
    .sf-profile__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: var(--sf-space-7); align-items: start; }
    .sf-profile__side {
        display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--sf-sticky-top, 0px) + var(--sf-space-4));
        padding: var(--sf-space-5); background: var(--sf-bg); 
         
    }
    .sf-profile__booking { grid-column: 1; grid-row: 1; }
    .sf-profile__head { flex-direction: column; text-align: center; gap: var(--sf-space-3); margin-bottom: var(--sf-space-4); }
    .sf-profile__photo { width: 200px; }
    /* No booking stores: the card on its own, full width. */
    .sf-profile--no-booking .sf-profile__layout { grid-template-columns: minmax(0, 720px); }
    .sf-profile--no-booking .sf-profile__side { grid-column: 1; position: static; max-height: none; }
}

/* Team card name links to the profile page */
.sf-team__name a { color: inherit; text-decoration: none; }
.sf-team__name a:hover { color: var(--sf-primary); text-decoration: underline; }

/* ---------- Coaching page parity (28 Sep 2026) - live page.coaches custom CSS ported to sections ---------- */
/* Icon columns: "plain" = live .chq-features, "outline" = live .coaching-for__item */
.sf-icon-columns--plain .sf-icon-columns__col { background: none; padding: 0 var(--sf-space-2); border-radius: 0; }
.sf-icon-columns--plain .sf-icon-columns__icon { width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: #eafaf1; margin-bottom: var(--sf-space-3); }
.sf-icon-columns--plain .sf-icon-columns__title { font-size: 14.5px; margin-bottom: 6px; }
.sf-icon-columns--plain .sf-icon-columns__text { font-size: 13px; color: var(--sf-ink-subtle); line-height: 1.5; }
.sf-icon-columns--outline .sf-icon-columns__col { background: var(--sf-bg); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); text-align: left; }
.sf-icon-columns--outline .sf-icon-columns__title { font-size: 16px; }
.sf-icon-columns--outline .sf-icon-columns__text { font-size: 14px; }

/* Quick links "bar": live's equal bordered cells */
.sf-quick-links__bar { display: grid; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); overflow: hidden; }
@media (min-width: 750px) { .sf-quick-links__bar { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.sf-quick-links__bar li + li { border-top: 1px solid var(--sf-border-soft); }
@media (min-width: 750px) { .sf-quick-links__bar li + li { border-top: 0; border-left: 1px solid var(--sf-border-soft); } }
.sf-quick-links__bar a { display: block; padding: var(--sf-space-4); text-align: center; font-family: var(--sf-font-heading); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--sf-ink); transition: background var(--sf-fast); }
.sf-quick-links__bar a:hover { background: var(--sf-bg-soft); color: var(--sf-primary); }

/* Team: live coaching cards - 3 per row, white with a soft shadow, centred group titles, grey specialty text */
.sf-team__group-title { text-align: center; font-size: 20px; }
@media (min-width: 990px) { .sf-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-team__member { background: var(--sf-bg); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.sf-team__specialty { color: var(--sf-ink-subtle); font-weight: 400; line-height: 1.5; }
.sf-team__actions .sf-btn { padding-left: var(--sf-space-3); padding-right: var(--sf-space-3); }

/* ---------- Native booking widget (components/booking.php + "booking" island, 28 Sep 2026) ---------- */
.sf-booking { max-width: 760px; }
.sf-booking__at { margin: 0 0 var(--sf-space-4); color: var(--sf-ink-muted); }
.sf-booking__step { border: 0; margin: 0 0 var(--sf-space-6); padding: 0; min-width: 0; }
.sf-booking__legend { display: flex; align-items: center; gap: var(--sf-space-2); margin-bottom: var(--sf-space-3); padding: 0; font-family: var(--sf-font-heading); font-weight: 700; font-size: 17px; }
.sf-booking__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-primary); color: #fff; font-size: 14px; flex-shrink: 0; }
.sf-booking__hint { margin: 0; color: var(--sf-ink-muted); font-size: 14px; }
.sf-booking__stores, .sf-booking__services { display: grid; gap: var(--sf-space-2); }
@media (min-width: 750px) { .sf-booking__stores, .sf-booking__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-booking__choice { position: relative; display: flex; gap: var(--sf-space-3); align-items: flex-start; padding: var(--sf-space-3) var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); cursor: pointer; background: var(--sf-bg); }
.sf-booking__choice:hover { border-color: var(--sf-primary); }
.sf-booking__choice:has(input:checked) { border-color: var(--sf-primary); box-shadow: 0 0 0 1px var(--sf-primary); background: #f3fbf6; }
.sf-booking__choice input { margin-top: 3px; accent-color: var(--sf-primary); }
.sf-booking__choice-body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sf-booking__choice-body span { color: var(--sf-ink-muted); font-size: 13px; }
.sf-booking__choice--inline { display: inline-flex; margin: 0 var(--sf-space-2) var(--sf-space-2) 0; align-items: center; }
.sf-booking__choice--inline input { margin-top: 0; }

/* Calendar */
.sf-cal { max-width: 380px; }
.sf-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sf-space-2); }
.sf-cal__title { font-weight: 700; }
.sf-cal__nav { width: 36px; height: 36px; border: 1px solid var(--sf-border); border-radius: 50%; background: var(--sf-bg); font-size: 20px; line-height: 1; cursor: pointer; }
.sf-cal__nav:disabled { opacity: .35; cursor: default; }
.sf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sf-cal__dow { text-align: center; font-size: 12px; font-weight: 600; color: var(--sf-ink-subtle); padding: 4px 0; }
.sf-cal__day { aspect-ratio: 1; min-height: 40px; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); background: var(--sf-bg); font-weight: 600; cursor: pointer; }
.sf-cal__day:hover:not(:disabled) { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-cal__day:disabled { color: var(--sf-ink-subtle); background: var(--sf-bg-soft); border-color: transparent; cursor: default; text-decoration: line-through; opacity: .6; }
.sf-cal__day.is-past { text-decoration: none; background: transparent; opacity: .3; }
.sf-cal__day.is-selected { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }

/* Times */
.sf-booking__times { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-booking__time { min-width: 76px; min-height: 44px; padding: 0 var(--sf-space-3); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: var(--sf-bg); font-weight: 600; cursor: pointer; }
.sf-booking__time:hover { border-color: var(--sf-primary); color: var(--sf-primary); }
.sf-booking__time.is-selected { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }

/* Details, summary, done */
.sf-booking__fields { display: grid; gap: 0 var(--sf-space-4); }
@media (min-width: 750px) { .sf-booking__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-booking__summary { margin: var(--sf-space-4) 0; padding: var(--sf-space-4); background: var(--sf-bg-soft); border-radius: var(--sf-radius); }
.sf-booking__recap { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sf-space-4); margin: 0; font-size: 14px; }
.sf-booking__recap dt { color: var(--sf-ink-muted); }
.sf-booking__recap dd { margin: 0; font-weight: 600; }
.sf-booking__pay { border: 0; padding: 0; margin: 0 0 var(--sf-space-3); }
.sf-booking__small { font-size: 13px; color: var(--sf-ink-muted); }
.sf-booking__done { padding: var(--sf-space-5); border: 1px solid var(--sf-primary); border-radius: var(--sf-radius-lg); background: #f3fbf6; }
.sf-booking__done:focus { outline: none; }
.sf-booking__done-title { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-3); color: var(--sf-primary-dark); }
.sf-booking__done-title .sf-icon { width: 22px; height: 22px; }
.sf-booking__closed { padding: var(--sf-space-4); background: var(--sf-bg-soft); border-radius: var(--sf-radius); }
.sf-booking-section__text { max-width: 760px; margin-bottom: var(--sf-space-4); color: var(--sf-ink-muted); }

/* Booking section: split layout with a store card (sections/booking.php, 28 Sep 2026) */
.sf-bsplit { display: flex; flex-direction: column; gap: var(--sf-space-6); }
.sf-bsplit__main { min-width: 0; }
.sf-bsplit__title { margin-top: 0; }
@media (min-width: 990px) {
    .sf-booking-section--split .sf-bsplit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: var(--sf-space-7); align-items: start; }
    .sf-booking-section--split .sf-bsplit__side { position: sticky; top: calc(var(--sf-sticky-top, 0px) + var(--sf-space-4)); }
}
.sf-store-card { padding: var(--sf-space-5); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); box-shadow: 0 1px 6px rgba(0, 0, 0, .05); font-size: 14px; }
.sf-store-card__name { margin: 0 0 var(--sf-space-3); font-size: 18px; }
.sf-store-card__line { display: flex; gap: var(--sf-space-2); align-items: flex-start; margin: 0 0 var(--sf-space-2); }
.sf-store-card__line .sf-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--sf-primary); }
.sf-store-card__line a { color: var(--sf-primary); font-weight: 600; }
.sf-store-card__sub { margin: var(--sf-space-5) 0 var(--sf-space-2); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-ink-muted); }
.sf-store-card__hours { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sf-space-4); margin: 0; }
.sf-store-card__hours dt { font-weight: 600; }
.sf-store-card__hours dd { margin: 0; }
.sf-store-card__team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-space-2); }
.sf-store-card__person { display: flex; align-items: center; gap: var(--sf-space-3); padding: 6px; border-radius: var(--sf-radius); text-decoration: none; color: inherit; }
.sf-store-card__person:hover { background: var(--sf-bg-soft); }
.sf-store-card__person img, .sf-store-card__initial { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sf-store-card__initial { display: inline-flex; align-items: center; justify-content: center; background: #eafaf1; color: var(--sf-primary-dark); font-weight: 700; }
.sf-store-card__person > span { display: flex; flex-direction: column; }
.sf-store-card__person > span > span { color: var(--sf-ink-muted); font-size: 13px; }
.sf-store-card__person:hover strong { color: var(--sf-primary); }

/* Event page (templates/event.php, 28 Sep 2026) */
.sf-event__hero { display: grid; gap: var(--sf-space-5); margin: var(--sf-space-3) 0 var(--sf-space-7); }
@media (min-width: 990px) { .sf-event__hero.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-space-7); align-items: start; } }
.sf-event__image .sf-image-box { border-radius: var(--sf-radius-lg); }
.sf-event__image .sf-image { object-fit: cover; }
.sf-event__title { margin: 0 0 var(--sf-space-3); }
.sf-event__meta { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-2); font-weight: 600; }
.sf-event__meta .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); flex-shrink: 0; }
.sf-event__from { margin: var(--sf-space-3) 0; font-family: var(--sf-font-heading); font-weight: 700; color: var(--sf-primary); }
.sf-event__desc { margin-top: var(--sf-space-4); color: var(--sf-ink-muted); }
.sf-event__day { border: 0; margin: 0 0 var(--sf-space-5); padding: 0; min-width: 0; }
.sf-event__date { padding: 0; margin-bottom: var(--sf-space-2); font-weight: 700; }
.sf-event__sessions { display: grid; gap: var(--sf-space-2); }
@media (min-width: 750px) { .sf-event__sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-event__session.is-full { opacity: .55; cursor: not-allowed; }
.sf-event__picked { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.sf-event__total { margin: var(--sf-space-3) 0; font-size: 16px; }
.sf-event__booked { padding-left: 1.2em; }
.sf-event__summary .sf-btn { margin-top: var(--sf-space-2); }
@media (min-width: 990px) {
    .sf-event__form .sf-bsplit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: var(--sf-space-7); align-items: start; }
    .sf-event__form .sf-bsplit__side { position: sticky; top: calc(var(--sf-sticky-top, 0px) + var(--sf-space-4)); }
}

/* ---- Video coaching product page (templates/product-video-coaching.php, 28 Sep 2026) ----
   Port of live's .ghqcp-* (shopify-files/live-page-custom-css.css). Package cards are real
   radios - the selected card is styled with :has(:checked), so choosing works without JS. */
.sf-vc__hero { text-align: center; padding: var(--sf-space-7) 0; }
.sf-vc__title { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; }
.sf-vc__lead { max-width: 560px; margin: 0 auto var(--sf-space-5); font-size: 16px; line-height: 1.6; color: var(--sf-ink-muted); }
.sf-vc__section { padding: var(--sf-space-6) 0; border-top: 1px solid var(--sf-border-soft); }
.sf-vc__heading { text-align: center; font-size: 22px; margin-bottom: var(--sf-space-5); }
.sf-vc__steps { list-style: none; margin: 0 auto; padding: 0; max-width: 950px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sf-space-5); }
.sf-vc__step { text-align: center; }
.sf-vc__num { width: 34px; height: 34px; border-radius: 999px; background: var(--sf-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin: 0 auto var(--sf-space-3); }
.sf-vc__step-title { margin: 0 0 6px; font-weight: 600; font-size: 14.5px; }
.sf-vc__step-text { margin: 0; font-size: 13px; color: var(--sf-ink-subtle); line-height: 1.5; }
.sf-vc__buy, .sf-vc__faq { max-width: 950px; }
.sf-vc__packages { border: 0; margin: 0 0 var(--sf-space-5); padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr; gap: var(--sf-space-4); }
.sf-vc__package { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-1); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); padding: var(--sf-space-5) var(--sf-space-4); text-align: center; background: var(--sf-bg); cursor: pointer; transition: border-color var(--sf-fast), box-shadow var(--sf-fast); }
.sf-vc__package:hover { border-color: var(--sf-primary); }
.sf-vc__package.is-featured { padding-top: var(--sf-space-6); margin-top: var(--sf-space-2); }
.sf-vc__package:has(:checked) { border-color: var(--sf-primary); box-shadow: 0 0 0 2px var(--sf-primary); }
.sf-vc__package:has(:focus-visible) { outline: 2px solid var(--sf-ink); outline-offset: 3px; }
.sf-vc__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--sf-primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.sf-vc__label { font-size: 13.5px; font-weight: 600; }
.sf-vc__plan { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sf-primary); }
.sf-vc__price { font-family: var(--sf-font-heading); font-size: 22px; font-weight: 700; }
.sf-vc__desc { font-size: 13px; color: var(--sf-ink-subtle); line-height: 1.5; }
.sf-vc__coach { margin-bottom: var(--sf-space-4); }
.sf-vc__form .sf-product-form__note { text-align: center; }
@media (min-width: 750px) {
    .sf-vc__steps { grid-template-columns: repeat(4, 1fr); }
    .sf-vc__packages { grid-template-columns: repeat(3, 1fr); }
    .sf-vc__package.is-featured { margin-top: 0; }
}

/* ---- Builder products (templates/product-builder.php, 28 Sep 2026) ----
   Custom / seasonal balls, caps, polos, markers, umbrellas. The print layers sit on the
   preview at the print area set in the portal: --x/--y (centre) and --w/--h, in % of the
   image, set by the product-builder island; --ink is the chosen text colour. */
.sf-builder__stage { position: relative; aspect-ratio: 1; background: var(--sf-bg-soft); border-radius: var(--sf-radius-lg); overflow: hidden;
    container-type: inline-size; --x: 50%; --y: 50%; --w: 60%; --h: 60%; --ink: #000; }
.sf-builder__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-builder__print { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform: translate(-50%, -50%); pointer-events: none; }
.sf-builder__print--image { background-position: center; background-repeat: no-repeat; background-size: contain; }
.sf-builder__print--text { display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; white-space: pre-line;
    overflow-wrap: anywhere; color: var(--ink); font-family: var(--sf-font-heading); font-weight: 700; line-height: 1.2; font-size: 22px; font-size: 5.5cqw; }
.sf-builder__print--icons { display: flex; align-items: center; justify-content: center; gap: 4%; }
.sf-builder__icon { width: 30%; height: auto; object-fit: contain; }
.sf-builder__ribbon { position: absolute; top: var(--sf-space-3); left: var(--sf-space-3); z-index: 1; padding: 4px 10px; border-radius: 999px;
    background: var(--sf-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sf-builder__stage-note { margin: var(--sf-space-2) 0 0; font-size: 12.5px; color: var(--sf-ink-subtle); }
.sf-builder__promo { display: flex; align-items: flex-start; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3);
    background: var(--sf-bg-soft); border-left: 3px solid var(--sf-primary); border-radius: var(--sf-radius); font-size: 14px; }
.sf-builder__promo svg { flex: none; width: 18px; height: 18px; color: var(--sf-primary); }

.sf-bstep { min-width: 0; margin: 0 0 var(--sf-space-5); padding: 0; border: 0; }
.sf-bstep__legend { margin-bottom: var(--sf-space-2); padding: 0; font-size: 14px; font-weight: 600; }
.sf-bstep__current, .sf-bicons__count { font-weight: 400; color: var(--sf-ink-muted); }
.sf-bstep__options { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-bopt__face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 6px;
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius); background: var(--sf-bg); text-align: center; cursor: pointer;
    transition: border-color var(--sf-fast), box-shadow var(--sf-fast); }
.sf-bopt__face:hover { border-color: var(--sf-ink-subtle); }
.sf-bopt__input:checked + .sf-bopt__face { border-color: var(--sf-ink); box-shadow: inset 0 0 0 1px var(--sf-ink); }
.sf-bopt__input:focus-visible + .sf-bopt__face { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.sf-bopt__input:disabled + .sf-bopt__face { opacity: .4; cursor: not-allowed; }
.sf-bopt__img { width: 64px; height: 64px; object-fit: contain; }
.sf-bopt__label { font-size: 12px; line-height: 1.25; }
.sf-bstep--logo .sf-bopt__img { width: 96px; height: 40px; }
.sf-bstep--image .sf-bopt__face, .sf-bstep--logo .sf-bopt__face { width: 96px; }
.sf-bstep--chip .sf-bopt__face { flex-direction: row; padding: 0 var(--sf-space-3); }
.sf-bstep--chip .sf-bopt__label { font-size: 14px; }
.sf-bopt__swatch { width: 28px; height: 28px; }
.sf-bopt__swatch circle { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.sf-bopt--dot .sf-bopt__face { padding: 7px; border-radius: 999px; }
.sf-bopt--icon .sf-bopt__img { width: 48px; height: 48px; }
.sf-bpers__modes { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); margin-bottom: var(--sf-space-4); }
.sf-bpers__panel > .sf-field { margin-bottom: var(--sf-space-3); }
.sf-bpers__file { padding: var(--sf-space-2); }
.sf-bpers__colours { min-width: 0; margin: var(--sf-space-3) 0 0; padding: 0; border: 0; }
.sf-bicons__status { margin: var(--sf-space-2) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-builder__buy { padding-top: var(--sf-space-4); border-top: 1px solid var(--sf-border-soft); }
.sf-builder__price { margin-bottom: var(--sf-space-3); }
.sf-builder__choose { margin: 0; color: var(--sf-ink-muted); }
.sf-builder__price-note { margin: 4px 0 0; font-size: 13px; color: var(--sf-ink-subtle); }
.sf-builder__qty { display: flex; align-items: center; gap: var(--sf-space-3); margin-bottom: var(--sf-space-4); }
.sf-builder__qty .sf-field__label { margin: 0; }
.sf-builder__note { font-size: 14px; color: var(--sf-ink-muted); }

/* ---- Product add-ons: print add-on + Clicgear colours (components/print-addon.php, clicgear.php) ---- */
.sf-addon { margin: var(--sf-space-4) 0; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg); }
.sf-addon__summary { display: flex; align-items: center; gap: var(--sf-space-3); min-height: 52px; padding: var(--sf-space-3) var(--sf-space-4); cursor: pointer; list-style: none; }
.sf-addon__summary::-webkit-details-marker { display: none; }
.sf-addon__summary:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; border-radius: var(--sf-radius-lg); }
.sf-addon__title { flex: 1; font-weight: 600; }
.sf-addon__fee { font-size: 14px; color: var(--sf-ink-muted); white-space: nowrap; }
.sf-addon__fee.is-free { color: var(--sf-primary); font-weight: 700; }
.sf-addon__icon { display: flex; transition: transform var(--sf-fast); }
.sf-addon__icon svg { width: 18px; height: 18px; }
.sf-addon[open] .sf-addon__icon { transform: rotate(45deg); }
.sf-addon__panel { padding: 0 var(--sf-space-4) var(--sf-space-4); }
.sf-addon__notice { padding: var(--sf-space-2) var(--sf-space-3); background: var(--sf-bg-soft); border-radius: var(--sf-radius); font-size: 14px; }
.sf-addon .sf-bstep { margin-bottom: var(--sf-space-4); }
.sf-clicgear__std svg { width: 20px; height: 20px; color: var(--sf-primary); }
.sf-clicgear__std { border-style: dashed; }
.sf-clicgear__note { margin: var(--sf-space-2) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-clicgear__total { font-size: 16px; }
.sf-clicgear__small { font-size: 13px; color: var(--sf-ink-muted); }
.sf-product__media--overlay { position: relative; }
.sf-clicgear__preview { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: var(--sf-bg); }
.sf-clicgear__canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-clicgear__loading { position: absolute; left: 50%; bottom: var(--sf-space-4); transform: translateX(-50%); margin: 0; padding: var(--sf-space-2) var(--sf-space-3);
    background: var(--sf-bg-soft); border-radius: var(--sf-radius); font-size: 13px; color: var(--sf-ink-muted); text-align: center; }
.sf-clicgear__close { position: absolute; top: var(--sf-space-2); right: var(--sf-space-2); display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.sf-clicgear__close svg { width: 18px; height: 18px; }
.sf-builder__backdrop { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    border-radius: var(--sf-radius-lg); overflow: hidden; }
.sf-builder__backdrop .sf-builder__stage { width: 66%; max-width: 420px; background: none; border-radius: 0; overflow: visible; }

/* ==========================================================================
   Customer accounts (templates/account*.php, components/account-*.php)
   Built 28 Sep 2026; restyled 10 Oct 2026: sidebar menu, softer cards, split
   sign-in, rewards/orders/addresses polish. One block - sign-in, shell,
   Locker Room, orders, rewards, bookings, coaching.
   ========================================================================== */

/* ---- Sign-in, register, password (the "auth" pages) ---- */
.sf-auth { display: flex; justify-content: center; padding-top: var(--sf-space-7); padding-bottom: var(--sf-space-8); }
.sf-auth__card { width: 100%; max-width: 460px; padding: var(--sf-space-6); border: 1px solid var(--sf-border-soft); border-top: 3px solid var(--sf-primary);
    border-radius: var(--sf-radius-lg); background: var(--sf-bg); box-shadow: 0 10px 30px rgba(15, 45, 26, .08); }
.sf-auth__title { margin-bottom: var(--sf-space-2); font-size: clamp(22px, 3vw, 26px); }
.sf-auth__lead { margin-bottom: var(--sf-space-5); color: var(--sf-ink-muted); }
.sf-auth__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-1) var(--sf-space-3); margin: 0 0 var(--sf-space-4); padding: var(--sf-space-2) var(--sf-space-3);
    border-radius: var(--sf-radius); background: var(--sf-bg-soft); font-weight: 600; overflow-wrap: anywhere; }
.sf-auth__who a { font-weight: 400; font-size: 14px; }
.sf-auth__form { display: grid; gap: var(--sf-space-4);margin-bottom: var(--sf-space-4); }
.sf-auth__form .sf-field { margin: 0; }
.sf-auth__form .sf-input { min-height: 48px; }
.sf-auth__form input[name="code"] { min-height: 60px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 28px; font-weight: 600; letter-spacing: .35em; text-align: center; text-indent: .35em; }
.sf-auth__row { display: grid; gap: var(--sf-space-4); }
@media (min-width: 480px) { .sf-auth__row { grid-template-columns: 1fr 1fr; } }
.sf-auth__alt { margin-top: var(--sf-space-4); text-align: center; }
.sf-auth__alt .sf-link-btn, .sf-auth__links .sf-link-btn { margin: 0; font-size: 14px; font-weight: 600; }
.sf-auth__small { margin: var(--sf-space-4) 0 0; font-size: 13px; color: var(--sf-ink-muted); text-align: center; }
.sf-auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-4); margin-top: var(--sf-space-3); font-size: 14px; font-weight: 600; }
.sf-auth__links form { margin: 0; }
.sf-auth__note { max-width: 460px; margin: 0 auto var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border-left: 3px solid var(--sf-primary);
    border-radius: var(--sf-radius); background: #eef8f2; font-size: 14px; }
.sf-auth .sf-auth__note { max-width: none; margin: 0 0 var(--sf-space-4); }
.sf-auth__card .sf-form-msg.is-error { margin: 0 0 var(--sf-space-4); }
@media (max-width: 479px) { .sf-auth__card { padding: var(--sf-space-5) var(--sf-space-4); border: 0; border-top: 3px solid var(--sf-primary); box-shadow: none; } .sf-auth { padding-top: var(--sf-space-4); } }

/* Split sign-in / register: benefits panel beside the form from tablet up. */
.sf-auth__aside { display: none; }
@media (min-width: 900px) {
    .sf-auth--split { align-items: stretch; justify-content: center; gap: 0; }
    .sf-auth--split .sf-auth__card { max-width: 460px; border-radius: 0 var(--sf-radius-lg) var(--sf-radius-lg) 0; }
    .sf-auth--split .sf-auth__aside { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 420px; padding: var(--sf-space-7) var(--sf-space-6);
        border-radius: var(--sf-radius-lg) 0 0 var(--sf-radius-lg); background: linear-gradient(160deg, var(--sf-primary-dark) 0%, var(--sf-primary-light) 100%); color: #fff; }
}
.sf-auth__aside-eyebrow { margin: 0 0 var(--sf-space-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fe0a8; }
.sf-auth__aside-title { margin: 0 0 var(--sf-space-5); color: #fff; font-size: 26px; }
.sf-auth__perks { display: grid; gap: var(--sf-space-4); margin: 0; padding: 0; list-style: none; }
.sf-auth__perks li { display: flex; gap: var(--sf-space-3); align-items: flex-start; }
.sf-auth__perks .sf-icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; }
.sf-auth__perks strong { display: block; font-family: var(--sf-font-heading); }
.sf-auth__perks span { display: block; font-size: 14px; color: rgba(255, 255, 255, .8); }

/* Password box with a Show / Hide button (the password-reveal island). */
.sf-input-wrap { position: relative; }
.sf-input-wrap .sf-input { padding-right: 68px; }
.sf-input-wrap__toggle { position: absolute; top: 50%; right: var(--sf-space-2); transform: translateY(-50%); padding: var(--sf-space-1) var(--sf-space-2); border: 0; border-radius: var(--sf-radius-sm);
    background: none; color: var(--sf-primary-aa); font-size: 13px; font-weight: 700; cursor: pointer; }
.sf-input-wrap__toggle:hover { background: var(--sf-bg-muted); }

/* ---- Account shell: heading, sidebar menu, main column ---- */
.sf-account { padding-top: var(--sf-space-5); padding-bottom: var(--sf-space-8); }
.sf-account__head { margin-bottom: var(--sf-space-5); }
.sf-account__title { margin: 0; font-size: clamp(24px, 3.4vw, 32px); }
.sf-account__sub { margin: var(--sf-space-1) 0 0; color: var(--sf-ink-muted); }
.sf-account__layout { display: grid; gap: var(--sf-space-4); }
.sf-account__main { min-width: 0; }
@media (min-width: 900px) {
    .sf-account__layout { grid-template-columns: 224px minmax(0, 1fr); gap: var(--sf-space-6); align-items: start; }
}

.sf-account-nav { display: flex; flex-direction: column; gap: var(--sf-space-2); min-width: 0; }
.sf-account-nav__list { position: relative; display: flex; gap: var(--sf-space-2); margin: 0; padding: 0 0 var(--sf-space-1); list-style: none; overflow-x: auto; scrollbar-width: none; }
.sf-account-nav__list::-webkit-scrollbar { display: none; }
.sf-account-nav__item { flex: 0 0 auto; }   /* phones: pills keep their width and the strip scrolls (they shrank and the labels spilled out, 20 Oct 2026) */
.sf-account-nav__link { display: inline-flex; align-items: center; gap: var(--sf-space-2); min-height: 40px; padding: 0 var(--sf-space-4); border: 1px solid var(--sf-border); border-radius: 999px;
    background: var(--sf-bg); color: var(--sf-ink-muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sf-account-nav__link .sf-icon { width: 16px; height: 16px; }
.sf-account-nav__link:hover { border-color: var(--sf-ink); color: var(--sf-ink); }
.sf-account-nav__link.is-current { border-color: var(--sf-primary-dark); background: var(--sf-primary-dark); color: #fff; }
.sf-account-nav__signout { margin: 0; text-align: right; }
.sf-account-nav__out { padding: var(--sf-space-1) 0; border: 0; background: none; color: var(--sf-ink-subtle); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sf-account-nav__out:hover { color: var(--sf-ink); }
@media (min-width: 900px) {
    .sf-account-nav { position: sticky; top: calc(var(--sf-sticky-top, 0px) + var(--sf-space-4)); padding: var(--sf-space-2); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); }
    .sf-account-nav__list { flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
    .sf-account-nav__item--group { margin-top: var(--sf-space-2); padding-top: var(--sf-space-2); border-top: 1px solid var(--sf-border-soft); }
    .sf-account-nav__link { display: flex; min-height: 42px; padding: 0 var(--sf-space-3); border: 0; border-radius: var(--sf-radius); background: none; }
    .sf-account-nav__link .sf-icon { width: 18px; height: 18px; }
    .sf-account-nav__link:hover { background: var(--sf-bg-soft); }
    .sf-account-nav__link.is-current { background: #e8f6ee; color: var(--sf-primary-dark); }
    .sf-account-nav__signout { padding-top: var(--sf-space-2); border-top: 1px solid var(--sf-border-soft); text-align: left; }
    .sf-account-nav__out { padding: var(--sf-space-2) var(--sf-space-3); }
}

/* ---- Cards, notes and small pieces shared by every account page ---- */
.sf-account__card, .sf-locker__card { padding: var(--sf-space-5); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); box-shadow: 0 1px 2px rgba(15, 45, 26, .04); }
.sf-account__card-title, .sf-locker__card-title { margin-bottom: var(--sf-space-3); font-size: 17px; }
.sf-account__muted, .sf-locker__muted { color: var(--sf-ink-muted); font-size: 14px; }
.sf-account__main > .sf-account__muted:first-child { margin-top: 0; }
.sf-account__main .sf-auth__note { max-width: none; margin: 0 0 var(--sf-space-4); }
.sf-account__main .sf-form-msg.is-error { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border-left: 3px solid var(--sf-danger); border-radius: var(--sf-radius); background: #fdecec; }
.sf-account__card .sf-form-msg.is-error { margin-top: 0; margin-bottom: var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border-left: 3px solid var(--sf-danger); border-radius: var(--sf-radius); background: #fdecec; }
.sf-account__email { margin: calc(-1 * var(--sf-space-2)) 0 var(--sf-space-5); color: var(--sf-ink-muted); }
.sf-account__static { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sf-account__forms { display: grid; gap: var(--sf-space-4); max-width: 720px; }
.sf-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2) var(--sf-space-4); margin-top: var(--sf-space-4); font-size: 14px; font-weight: 600; }
.sf-account__actions form { margin: 0; }
.sf-account__actions .sf-link-btn { margin: 0; font-size: 14px; }
.sf-link-btn--danger { color: #b02a37; }
.sf-locker__card .sf-link-btn { margin-left: 0; font-size: 14px; }
.sf-account__main .sf-bag { max-width: none; margin: 0; }
.sf-account__big { margin: 0; font-family: var(--sf-font-heading); font-size: 32px; font-weight: 700; }
.sf-account__big span { font-size: 16px; font-weight: 600; color: var(--sf-ink-muted); }
.sf-account__card--empty { display: flex; flex-direction: column; align-items: center; padding: var(--sf-space-7) var(--sf-space-5); text-align: center; }
.sf-account__card--empty .sf-icon { width: 40px; height: 40px; margin-bottom: var(--sf-space-3); color: var(--sf-primary); }
.sf-account__card--empty p { max-width: 420px; }
.sf-account__signout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-4); margin-top: var(--sf-space-4); }
.sf-account__signout form { margin: 0; }
.sf-account__addresses { display: grid; gap: var(--sf-space-4); margin: 0 0 var(--sf-space-5); padding: 0; list-style: none; }
@media (min-width: 750px) { .sf-account__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-account__addr { display: flex; flex-direction: column; }
.sf-account__addr .sf-account__actions { margin-top: auto; padding-top: var(--sf-space-4); border-top: 1px solid var(--sf-border-soft); }
.sf-account__addr .sf-locker__address { margin-bottom: var(--sf-space-4); }
.sf-account__addr.is-default { border-color: var(--sf-primary); box-shadow: 0 0 0 1px var(--sf-primary); }
.sf-account__badge { align-self: flex-start; display: inline-block; margin: 0 0 var(--sf-space-2); padding: 2px 10px; border-radius: 999px; background: #e8f6ee; color: var(--sf-primary-dark); font-size: 12px; font-weight: 700; }
.sf-account__addr-form { max-width: 720px; margin-bottom: var(--sf-space-5); }

/* ---- My Locker Room (templates/account.php) ---- */
.sf-locker__hero { position: relative; display: flex; align-items: flex-end; min-height: 240px; overflow: hidden;
    background: #111 url('../images/golf-locker-room-header.jpg') center 7% / cover no-repeat; color: #fff; }
.sf-locker__hero::before { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .85) 100%); }
.sf-locker__hero-in { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-space-4) var(--sf-space-5); width: 100%; padding-top: var(--sf-space-8); padding-bottom: var(--sf-space-5); }
@media (min-width: 990px) { .sf-locker__hero { min-height: 300px; } }
/* Slim banner on the other Locker Room pages (components/locker-banner.php) - same lockers photo as the hero. */
.sf-locker__banner { position: relative; display: flex; align-items: flex-end; min-height: 150px; overflow: hidden;
    background: #111 url('../images/golf-locker-room-header.jpg') center 35% / cover no-repeat; color: #fff; }
.sf-locker__banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .8) 100%); }
.sf-locker__banner-in { position: relative; width: 100%; padding-top: var(--sf-space-6); padding-bottom: var(--sf-space-4); }
.sf-locker__banner-title { margin: 0; color: #fff; font-size: clamp(24px, 3.6vw, 34px); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.sf-locker__banner-sub { margin: var(--sf-space-1) 0 0; color: rgba(255, 255, 255, .85); }
@media (min-width: 990px) { .sf-locker__banner { min-height: 180px; } }
.sf-locker__medal { flex: none; width: 88px; height: 88px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
.sf-locker__who { flex: 1; min-width: 200px; }
.sf-locker__eyebrow { margin: 0 0 var(--sf-space-1); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fe0a8; }
.sf-locker__name { margin: 0; color: #fff; font-size: clamp(26px, 4vw, 38px); }
.sf-locker__name, .sf-locker__points-num { text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.sf-locker__tier { margin: var(--sf-space-1) 0 0; color: rgba(255, 255, 255, .85); }
.sf-locker__points { display: flex; flex-direction: column; align-items: center; padding: var(--sf-space-3) var(--sf-space-5); border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--sf-radius-lg);
    background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-locker__points-num { font-family: var(--sf-font-heading); font-size: 40px; font-weight: 700; line-height: 1; }
.sf-locker__points-label { margin-top: var(--sf-space-1); font-size: 13px; color: rgba(255, 255, 255, .85); }
@media (max-width: 599px) { .sf-locker__points { align-items: flex-start; width: 100%; } }
.sf-locker__body { padding-top: var(--sf-space-5); padding-bottom: var(--sf-space-8); }
.sf-locker__grid { display: grid; gap: var(--sf-space-4); }
@media (min-width: 750px) { .sf-locker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-locker__card--wide { grid-column: 1 / -1; } }
@media (min-width: 1300px) { .sf-locker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-locker__small { margin: var(--sf-space-3) 0 0; font-size: 13px; color: var(--sf-ink-subtle); }
.sf-locker__link { margin: var(--sf-space-3) 0 0; font-size: 14px; font-weight: 600; }
.sf-locker__link a { color: var(--sf-primary-aa); text-decoration: none; }
.sf-locker__link a:hover { color: var(--sf-primary-aa-hover); text-decoration: underline; }
.sf-locker__link a:first-child::after { content: ' \2192'; }
.sf-locker__card form + .sf-locker__small, .sf-locker__card form { margin-top: var(--sf-space-3); }
.sf-locker__card > p:first-of-type { margin-top: 0; }
.sf-locker__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sf-space-2) var(--sf-space-4); margin: 0; font-size: 14px; }
.sf-locker__dl dt { color: var(--sf-ink-muted); }
.sf-locker__dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sf-locker__dl dd .sf-locker__muted { font-weight: 400; }
.sf-locker__address { font-style: normal; font-size: 14px; line-height: 1.6; }
.sf-locker__book-links { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-tierbar { margin: var(--sf-space-4) 0; }
.sf-tierbar__labels { display: flex; justify-content: space-between; margin-bottom: var(--sf-space-1); font-size: 13px; font-weight: 700; }
.sf-tierbar__bar { display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; background: var(--sf-bg-muted); overflow: hidden; appearance: none; }
.sf-tierbar__bar::-webkit-progress-bar { background: var(--sf-bg-muted); border-radius: 999px; }
.sf-tierbar__bar::-webkit-progress-value { background: linear-gradient(90deg, var(--sf-primary-aa), var(--sf-primary)); border-radius: 999px; }
.sf-tierbar__bar::-moz-progress-bar { background: var(--sf-primary); border-radius: 999px; }
.sf-tierbar__text { margin: var(--sf-space-2) 0 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-locker__benefits { margin-top: var(--sf-space-3); }
.sf-locker__benefits > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sf-primary-aa); }
.sf-tiers { display: grid; gap: var(--sf-space-3); margin: var(--sf-space-4) 0 0; padding: 0; list-style: none; }
@media (min-width: 750px) { .sf-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sf-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-tiers__tier { display: flex; gap: var(--sf-space-3); padding: var(--sf-space-3); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); }
.sf-tiers__tier.is-current { border-color: var(--sf-primary); background: #f3fbf6; box-shadow: inset 0 0 0 1px var(--sf-primary); }
.sf-tiers__tier img { flex: none; }
.sf-tiers__name { margin: 0; font-weight: 700; }
.sf-tiers__you { margin-left: var(--sf-space-1); padding: 1px 8px; border-radius: 999px; background: var(--sf-primary-aa); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; }
.sf-tiers__when { margin: 2px 0 var(--sf-space-2); font-size: 12px; color: var(--sf-ink-subtle); }
.sf-tiers__perks { margin: 0; padding-left: 18px; font-size: 13px; }

/* ---- Locker Room overview, 10 Oct 2026: tier nameplate, "what's happening" strip, ring, tracker, game tiles ---- */
/* Tier colours drive the hero: medal glow, the nameplate's edge and the light on the photo. */
.sf-locker__hero { --tier: var(--sf-primary); --tier-deep: var(--sf-primary-aa); }
.sf-locker__hero--bronze { --tier: #d9904f; --tier-deep: #8a5527; }
.sf-locker__hero--silver { --tier: #d5dbe1; --tier-deep: #8b949c; }
.sf-locker__hero--gold { --tier: #f2c94c; --tier-deep: #a67c00; }
.sf-locker__hero--diamond { --tier: #8fd8ff; --tier-deep: #3f93c4; }
.sf-locker__hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--tier) 38%, transparent), transparent 55%); pointer-events: none; }
.sf-locker__medal { position: relative; z-index: 1; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tier) 70%, transparent)) drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); animation: sf-medal-in .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sf-medal-in { from { opacity: 0; transform: translateY(14px) scale(.8) rotate(-8deg); } to { opacity: 1; transform: none; } }
/* The nameplate: a screwed-on plate, like the one on a locker door. */
.sf-locker__plate { position: relative; z-index: 1; flex: 1; min-width: 220px; max-width: 560px; padding: var(--sf-space-3) var(--sf-space-5) var(--sf-space-3) var(--sf-space-6);
    border: 2px solid var(--tier); border-radius: var(--sf-radius); background: linear-gradient(135deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .4));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 24px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sf-locker__plate::before, .sf-locker__plate::after { content: ''; position: absolute; left: 12px; width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--tier) 45%, var(--tier-deep)); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sf-locker__plate::before { top: 12px; }
.sf-locker__plate::after { bottom: 12px; }
.sf-locker__plate .sf-locker__eyebrow { color: var(--tier); }
.sf-locker__plate .sf-locker__tier { margin-top: var(--sf-space-1); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--tier); }
.sf-locker__points { position: relative; z-index: 1; border-color: var(--tier); }

.sf-glance__title { margin: 0 0 var(--sf-space-3); font-size: 20px; }
.sf-glance { display: grid; gap: var(--sf-space-4); margin-bottom: var(--sf-space-5); }
@media (min-width: 750px) { .sf-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-glance__tile--wide { grid-column: 1 / -1; } }
@media (min-width: 1300px) { .sf-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-glance__tile { display: flex; flex-direction: column; padding: var(--sf-space-5); border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg);
    box-shadow: 0 1px 2px rgba(15, 45, 26, .04); }
.sf-glance__tile .sf-locker__link { margin-top: auto; padding-top: var(--sf-space-3); }
.sf-glance__kicker { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-muted); }
.sf-glance__kicker .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); }
.sf-glance__row { display: flex; align-items: center; gap: var(--sf-space-4); }
.sf-glance__big { margin: 0; font-family: var(--sf-font-heading); font-size: 20px; font-weight: 700; line-height: 1.25; }
.sf-glance__text { margin: var(--sf-space-1) 0 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-glance__actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); margin-top: var(--sf-space-4); }
/* Points ring: a conic fill with a hollow middle. --p is set per step by .sf-pct-0 ... --100. */
.sf-ring { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%;
    background: conic-gradient(var(--sf-primary) calc(var(--p, 0) * 1%), var(--sf-bg-muted) 0); }
.sf-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--sf-bg); }
.sf-ring span { position: relative; font-family: var(--sf-font-heading); font-size: 16px; font-weight: 700; }
.sf-pct-0 { --p: 0; }
.sf-pct-5 { --p: 5; }
.sf-pct-10 { --p: 10; }
.sf-pct-15 { --p: 15; }
.sf-pct-20 { --p: 20; }
.sf-pct-25 { --p: 25; }
.sf-pct-30 { --p: 30; }
.sf-pct-35 { --p: 35; }
.sf-pct-40 { --p: 40; }
.sf-pct-45 { --p: 45; }
.sf-pct-50 { --p: 50; }
.sf-pct-55 { --p: 55; }
.sf-pct-60 { --p: 60; }
.sf-pct-65 { --p: 65; }
.sf-pct-70 { --p: 70; }
.sf-pct-75 { --p: 75; }
.sf-pct-80 { --p: 80; }
.sf-pct-85 { --p: 85; }
.sf-pct-90 { --p: 90; }
.sf-pct-95 { --p: 95; }
.sf-pct-100 { --p: 100; }
/* Order tracker */
.sf-track { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: sftrack; }
.sf-track li { position: relative; flex: 1; padding-top: 38px; text-align: center; font-size: 13px; color: var(--sf-ink-subtle); counter-increment: sftrack; }
.sf-track li::before { content: counter(sftrack); position: absolute; top: 0; left: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -14px;
    border: 2px solid var(--sf-border); border-radius: 50%; background: var(--sf-bg); font-size: 13px; font-weight: 700; }
.sf-track li::after { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: var(--sf-border); }
.sf-track li:first-child::after { content: none; }
.sf-track li.is-done::before { content: '\2713'; border-color: var(--sf-primary); background: var(--sf-primary); color: #fff; }
.sf-track li.is-done::after, .sf-track li.is-current::after { background: var(--sf-primary); }
.sf-track li.is-current::before { border-color: var(--sf-primary); color: var(--sf-primary-aa); box-shadow: 0 0 0 5px rgba(34, 173, 101, .18); animation: sf-pulse 2s ease-in-out infinite; }
.sf-track li.is-current { color: var(--sf-ink); font-weight: 700; }
@keyframes sf-pulse { 50% { box-shadow: 0 0 0 8px rgba(34, 173, 101, .06); } }
/* For your game */
.sf-gametiles { display: grid; gap: var(--sf-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 750px) { .sf-gametiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sf-gametiles__tile { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--sf-space-4); border-radius: var(--sf-radius-lg); overflow: hidden;
    background: linear-gradient(150deg, var(--sf-primary-dark), var(--sf-primary-light)); color: #fff; text-decoration: none; transition: transform var(--sf-fast), box-shadow var(--sf-fast); }
.sf-gametiles__tile:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sf-shadow-md); }
.sf-gametiles__kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fe0a8; }
.sf-gametiles__brand { font-family: var(--sf-font-heading); font-size: 22px; font-weight: 700; }
.sf-gametiles__go { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sf-space-3); font-size: 13px; font-weight: 600; opacity: .85; }
.sf-gametiles__go .sf-icon { width: 14px; height: 14px; }
.sf-gametiles__tile:hover .sf-gametiles__go { opacity: 1; }
/* Redeeming / referring: the confirmation pops in. */
.sf-rewards__done { animation: sf-pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes sf-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sf-locker__medal, .sf-track li.is-current::before, .sf-rewards__done { animation: none; } .sf-gametiles__tile { transition: none; } }

/* ---- Warmth pass, 10 Oct 2026: cream page, mown stripes, fairway progress, scorecard tables ---- */
body.page-account { --sf-stripes: repeating-linear-gradient(100deg, rgba(255, 255, 255, .05) 0 38px, rgba(255, 255, 255, 0) 38px 76px);  }
.sf-locker__hero, .sf-locker__banner { border-bottom: 6px solid var(--sf-primary-aa); }
.sf-locker__card-title::after, .sf-account__card-title::after { content: ''; display: block; width: 28px; height: 3px; margin-top: 6px; border-radius: 3px; background: var(--sf-primary); }
.sf-glance__tile { border-top: 3px solid var(--sf-primary); }
.sf-glance__intro { margin: calc(-1 * var(--sf-space-2)) 0 var(--sf-space-4); color: var(--sf-ink-muted); }
.sf-glance__title { font-size: clamp(22px, 3vw, 28px); }
/* Dark green surfaces get fairway mowing stripes. */
.sf-rewards__balance { background: var(--sf-stripes), linear-gradient(160deg, var(--sf-primary-dark) 0%, var(--sf-primary-light) 100%); }
.sf-gametiles__tile { background: var(--sf-stripes), linear-gradient(150deg, var(--sf-primary-dark), var(--sf-primary-light)); }
.sf-auth__aside { background-image: var(--sf-stripes), linear-gradient(160deg, var(--sf-primary-dark) 0%, var(--sf-primary-light) 100%); }
/* Tier progress: the ball travels down the fairway to the flag. */
.sf-fairway { --ball: 20px; --flag: 30px; position: relative; height: 30px; margin: var(--sf-space-3) 0 var(--sf-space-1); }
.sf-fairway::before, .sf-fairway::after { content: ''; position: absolute; top: 9px; left: 0; height: 12px; border-radius: 999px; }
.sf-fairway::before { right: var(--flag); background: repeating-linear-gradient(90deg, #d9eddf 0 24px, #cfe6d7 24px 48px); }
.sf-fairway::after { width: calc((100% - var(--flag)) * var(--p, 0) / 100); background: repeating-linear-gradient(90deg, #1f9e5b 0 24px, #25a862 24px 48px); }
.sf-fairway__ball { position: absolute; top: 5px; z-index: 1; left: calc((100% - var(--flag)) * var(--p, 0) / 100 - var(--ball) / 2); width: var(--ball); height: var(--ball);
    border: 2px solid var(--sf-primary-dark); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e9ecef); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.sf-fairway__flag { position: absolute; right: 0; bottom: 0; width: var(--flag); height: var(--flag); color: var(--sf-primary-dark); }
.sf-fairway__flag .sf-icon { width: 100%; height: 100%; }
/* Points activity and past bookings read like a scorecard. */
.sf-rewards__table thead th { padding: var(--sf-space-2) var(--sf-space-3); border-bottom: 0; background: var(--sf-primary-dark); color: #fff; letter-spacing: .08em; }
.sf-rewards__table thead th:first-child { border-top-left-radius: var(--sf-radius); }
.sf-rewards__table thead th:last-child { border-top-right-radius: var(--sf-radius); }
.sf-rewards__table td { padding-left: var(--sf-space-3); padding-right: var(--sf-space-3); }
.sf-rewards__table tbody tr:nth-child(even) { background: #f6faf7; }
.sf-rewards__num { font-variant-numeric: tabular-nums; }
/* A voucher is a ticket: notches either side of the tear line. */
.sf-rewards__voucher { position: relative; }
.sf-rewards__voucher::before, .sf-rewards__voucher::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--sf-bg); border: 1px dashed var(--sf-primary); }
.sf-rewards__voucher::before { left: -8px; border-left-color: transparent; }
.sf-rewards__voucher::after { right: -8px; border-right-color: transparent; }
.sf-rewards__vouchers { overflow: hidden; padding: 0 var(--sf-space-2); }

/* ---- My orders (account-orders.php, account-order.php, account-order-row.php) ---- */
.sf-orders { display: grid; gap: var(--sf-space-3); margin: var(--sf-space-4) 0; padding: 0; list-style: none; }
.sf-orders__row { border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); background: var(--sf-bg); box-shadow: 0 1px 2px rgba(15, 45, 26, .04); transition: border-color var(--sf-fast), box-shadow var(--sf-fast); }
.sf-orders__row:hover { border-color: var(--sf-primary); box-shadow: var(--sf-shadow-md); }
.sf-orders__link { display: flex; align-items: center; gap: var(--sf-space-3); padding: var(--sf-space-4); border-radius: var(--sf-radius-lg); color: inherit; text-decoration: none; }
.sf-orders__link:hover { color: inherit; }
.sf-orders__link:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.sf-orders__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sf-orders__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); }
.sf-orders__num { font-family: var(--sf-font-heading); font-weight: 700; }
.sf-orders__meta { font-size: 13px; color: var(--sf-ink-muted); }
.sf-orders__items { overflow: hidden; font-size: 13px; color: var(--sf-ink-subtle); text-overflow: ellipsis; white-space: nowrap; }
.sf-orders__side { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.sf-orders__total { font-family: var(--sf-font-heading); font-weight: 700; }
.sf-orders__points { font-size: 12px; font-weight: 700; color: var(--sf-primary-aa); }
.sf-orders__chev { display: flex; flex: none; color: var(--sf-ink-subtle); }
.sf-orders__chev svg { width: 16px; height: 16px; }
.sf-orders__link:hover .sf-orders__chev { color: var(--sf-primary); }
/* In the Locker Room card: a plain divided list, not cards in a card. */
.sf-orders--compact { gap: 0; margin: 0; border-top: 1px solid var(--sf-border-soft); }
.sf-orders--compact .sf-orders__row { border: 0; border-bottom: 1px solid var(--sf-border-soft); border-radius: 0; box-shadow: none; }
.sf-orders--compact .sf-orders__row:hover { background: var(--sf-bg-soft); box-shadow: none; }
.sf-orders--compact .sf-orders__link { padding: var(--sf-space-3) var(--sf-space-2); border-radius: 0; }
.sf-order-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sf-bg-muted); color: var(--sf-ink-muted); }
.sf-order-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-order-status--done { background: #e7f6ee; color: #146c3f; }
.sf-order-status--pending { background: #fff4e0; color: #8a5300; }
.sf-order-status--action { background: var(--sf-primary-aa); color: #fff; }
.sf-order-status--refund { background: #fdecec; color: #a12622; }
.sf-order__back { margin: 0 0 var(--sf-space-3); font-size: 14px; font-weight: 600; }
.sf-order__back a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.sf-order__back svg { width: 14px; height: 14px; }
.sf-order__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); }
.sf-order__head .sf-account__title { margin: 0; }
.sf-order { display: grid; gap: var(--sf-space-4); margin-top: var(--sf-space-4); }
@media (min-width: 1100px) { .sf-order { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.sf-order__side { display: grid; gap: var(--sf-space-4); }
.sf-order__lines { margin: 0; padding: 0; list-style: none; }
.sf-order__line { display: flex; gap: var(--sf-space-3); padding: var(--sf-space-3) 0; border-bottom: 1px solid var(--sf-border-soft); }
.sf-order__line:last-child { border-bottom: 0; }
.sf-order__thumb { flex: none; width: 72px; height: 72px; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); background: var(--sf-bg); overflow: hidden; }
.sf-order__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sf-order__desc { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: start; font-size: 14px; }
.sf-order__name { font-weight: 600; color: inherit; }
.sf-order__variant, .sf-order__qty { color: var(--sf-ink-muted); font-size: 13px; }
.sf-order__props { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sf-space-2); margin: var(--sf-space-1) 0; font-size: 13px; }
.sf-order__props dt { color: var(--sf-ink-muted); }
.sf-order__props dd { margin: 0; overflow-wrap: anywhere; }
.sf-order__line-total { flex: none; font-weight: 700; }
.sf-order__totals { display: grid; grid-template-columns: 1fr auto; gap: var(--sf-space-2) var(--sf-space-4); margin: var(--sf-space-3) 0 0; padding: var(--sf-space-4); border-radius: var(--sf-radius); background: var(--sf-bg-soft); font-size: 14px; }
.sf-order__totals dt { color: var(--sf-ink-muted); }
.sf-order__totals dd { margin: 0; text-align: right; }
.sf-order__totals .sf-order__grand { padding-top: var(--sf-space-2); border-top: 1px solid var(--sf-border); color: var(--sf-ink); font-size: 17px; font-weight: 700; }
.sf-order__gst { font-size: 13px; color: var(--sf-ink-muted); }
.sf-order__parcels { list-style: none; padding: 0; margin: var(--sf-space-3) 0 0; }
.sf-order__parcels li { margin-bottom: var(--sf-space-3); }
.sf-order__returns { margin: 0; padding-left: 18px; font-size: 14px; }

.sf-order__again { justify-self: start; font-size: 13px; font-weight: 600; color: var(--sf-primary-aa); text-decoration: none; }
.sf-order__again::after { content: ' \2192'; }
.sf-order__again:hover { color: var(--sf-primary-aa-hover); text-decoration: underline; }

/* ---- Rewards (account-rewards.php) ---- */
.sf-rewards__top, .sf-rewards__grid { display: grid; gap: var(--sf-space-4); margin-bottom: var(--sf-space-4); }
@media (min-width: 1100px) { .sf-rewards__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .sf-rewards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-rewards__section { margin-bottom: var(--sf-space-4); }
.sf-rewards__balance { display: flex; flex-direction: column; justify-content: center; border: 0; background: linear-gradient(160deg, var(--sf-primary-dark) 0%, var(--sf-primary-light) 100%); color: #fff; }
.sf-rewards__balance .sf-account__card-title { margin-bottom: var(--sf-space-2); color: #7fe0a8; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.sf-rewards__balance .sf-account__big { font-size: 48px; line-height: 1.1; color: #fff; }
.sf-rewards__balance .sf-account__big span { color: rgba(255, 255, 255, .8); }
.sf-rewards__balance .sf-account__muted { margin: var(--sf-space-2) 0 0; color: rgba(255, 255, 255, .8); }
.sf-rewards__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-space-3); margin: 0; padding: 0; list-style: none; }
@media (max-width: 599px) { .sf-rewards__options { grid-template-columns: 1fr; } }
.sf-rewards__option { display: flex; flex-direction: column; gap: var(--sf-space-2); padding: var(--sf-space-4) var(--sf-space-3); border: 1px solid var(--sf-primary); border-radius: var(--sf-radius-lg); background: #f3fbf6; text-align: center; transition: box-shadow var(--sf-fast); }
.sf-rewards__option:hover { box-shadow: var(--sf-shadow-md); }
.sf-rewards__option.is-locked { border-color: var(--sf-border); background: var(--sf-bg-soft); }
.sf-rewards__option.is-locked:hover { box-shadow: none; }
.sf-rewards__option form { margin-top: auto; }
.sf-rewards__val { order: -1; margin: 0; font-family: var(--sf-font-heading); font-size: 20px; font-weight: 700; }
.sf-rewards__pts { margin: 0; font-size: 15px; font-weight: 700; color: var(--sf-primary-aa); }
.sf-rewards__pts span { font-size: 13px; font-weight: 600; color: var(--sf-ink-muted); }
.sf-rewards__option.is-locked .sf-rewards__pts { color: var(--sf-ink-muted); }
.sf-rewards__need { margin: auto 0 0; font-size: 13px; color: var(--sf-ink-subtle); }
.sf-rewards__done { margin-bottom: var(--sf-space-4); padding: var(--sf-space-4); border: 1px solid var(--sf-primary); border-radius: var(--sf-radius-lg); background: #f1faf5; }
.sf-rewards__done p { margin: 0 0 var(--sf-space-2); }
.sf-rewards__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: .08em; user-select: all; }
.sf-rewards__vouchers { display: grid; gap: var(--sf-space-3); margin: 0 0 var(--sf-space-3); padding: 0; list-style: none; }
.sf-rewards__voucher { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-space-1) var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border: 1px dashed var(--sf-primary); border-left: 4px solid var(--sf-primary); border-radius: var(--sf-radius); background: #f9fdfb; }
.sf-rewards__vcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .05em; user-select: all; }
.sf-rewards__vval { font-weight: 700; color: var(--sf-primary-aa); }
.sf-rewards__refs { display: grid; gap: var(--sf-space-2); margin: var(--sf-space-4) 0 0; padding: 0; list-style: none; font-size: 14px; }
.sf-rewards__refs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); padding-top: var(--sf-space-2); border-top: 1px solid var(--sf-border-soft); }
.sf-rewards__earn { display: grid; gap: var(--sf-space-3); margin: 0; padding: 0; list-style: none; font-size: 14px; }
.sf-rewards__earn li { display: grid; gap: 2px; padding-left: var(--sf-space-3); border-left: 3px solid var(--sf-primary); }
.sf-rewards__earn span { color: var(--sf-ink-muted); }
.sf-rewards__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sf-rewards__table th { padding: var(--sf-space-2); border-bottom: 2px solid var(--sf-border); text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sf-ink-muted); }
.sf-rewards__table td { padding: var(--sf-space-3) var(--sf-space-2); border-bottom: 1px solid var(--sf-border-soft); vertical-align: top; }
.sf-rewards__table tbody tr:last-child td { border-bottom: 0; }
.sf-rewards__num { text-align: right; white-space: nowrap; font-weight: 700; }
.sf-rewards__num.is-plus { color: var(--sf-primary-aa); }
.sf-rewards__num.is-minus { color: var(--sf-ink-muted); }

/* ---- My bookings + My Coaching (account-bookings.php, account-coaching.php) ---- */
.sf-bookings { display: grid; gap: var(--sf-space-3); margin: var(--sf-space-3) 0; padding: 0; list-style: none; }
.sf-bookings__item { display: flex; gap: var(--sf-space-4); align-items: flex-start; }
.sf-bookings__date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px;
    border-radius: var(--sf-radius); background: var(--sf-primary-dark); color: #fff; }
.sf-bookings__day { font-family: var(--sf-font-heading); font-size: 24px; font-weight: 700; line-height: 1; }
.sf-bookings__mon { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #7fe0a8; }
.sf-bookings__body { min-width: 0; }
.sf-bookings__body p { margin: 0 0 2px; }
.sf-bookings__what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-2); font-family: var(--sf-font-heading); font-weight: 700; }
.sf-bookings__when { font-size: 14px; font-weight: 600; }
.sf-bookings__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-space-3); padding: var(--sf-space-4); border-radius: var(--sf-radius-lg); background: var(--sf-bg-soft); }
.sf-bookings__help p { margin: 0; }

.sf-coach__submit { margin-bottom: var(--sf-space-5); }
.sf-coach__steps { display: flex; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-4); padding: 0; list-style: none; counter-reset: sfco; font-size: 12px; color: var(--sf-ink-subtle); }
.sf-coach__steps li { flex: 1; padding-top: var(--sf-space-2); border-top: 3px solid var(--sf-border); counter-increment: sfco; }
.sf-coach__steps li::before { content: counter(sfco) '. '; font-weight: 700; }
.sf-coach__steps .is-done { border-top-color: var(--sf-primary); }
.sf-coach__steps .is-current { border-top-color: var(--sf-primary); color: var(--sf-ink); font-weight: 600; }
.sf-coach__drop { margin: var(--sf-space-3) 0; padding: var(--sf-space-5) var(--sf-space-4); border: 2px dashed var(--sf-border); border-radius: var(--sf-radius-lg); background: var(--sf-bg-soft); text-align: center; }
.sf-coach__drop-title { margin: 0 0 var(--sf-space-1); font-weight: 600; }
.sf-coach__drop-tip { margin: 0 0 var(--sf-space-3); font-size: 13px; color: var(--sf-ink-subtle); }
.sf-coach__status { min-height: 1.2em; margin: var(--sf-space-2) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-coach__status--center { text-align: center; }
.sf-coach__photos { margin: var(--sf-space-3) 0 var(--sf-space-4); }
.sf-coach__thumbs { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); margin: var(--sf-space-2) 0 0; padding: 0; list-style: none; }
.sf-coach__thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--sf-radius); border: 1px solid var(--sf-border-soft); }
.sf-coach__thumb { position: relative; }
.sf-coach__remove { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: var(--sf-ink); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.sf-coach__credits { display: flex; justify-content: space-between; margin: var(--sf-space-4) 0 0; padding: var(--sf-space-3) var(--sf-space-4); border-radius: var(--sf-radius); background: #f1faf5; font-size: 14px; }
.sf-coach__list { display: grid; gap: var(--sf-space-3); margin: var(--sf-space-3) 0 0; padding: 0; list-style: none; }
.sf-coach__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sf-space-3); }
.sf-coach__head p { margin: 0; }
.sf-coach__title { font-family: var(--sf-font-heading); font-weight: 700; }
.sf-coach__quote { margin: var(--sf-space-2) 0 0; font-size: 14px; font-style: italic; color: var(--sf-ink-muted); }
.sf-coach__more { margin-top: var(--sf-space-3); }
.sf-coach__more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sf-primary-aa); }
.sf-coach__notes { margin: var(--sf-space-2) 0 0; padding: var(--sf-space-3); border-radius: var(--sf-radius); background: var(--sf-bg-soft); font-size: 14px; white-space: normal; }
.sf-coach__reply textarea { margin-top: var(--sf-space-2); }
.sf-coach__reply-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-3); margin: var(--sf-space-2) 0; }
.sf-coach__player { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--sf-space-4); background: rgba(0, 0, 0, .9); }
.sf-coach__player.hidden { display: none; }
.sf-coach__player-box { position: relative; width: 100%; max-width: 560px; }
.sf-coach__frame { height: min(75vh, 680px); border-radius: var(--sf-radius); background: #000; overflow: hidden; }
.sf-coach__frame iframe { width: 100%; height: 100%; border: 0; }
.sf-coach__player-close { position: absolute; top: var(--sf-space-2); right: var(--sf-space-2); z-index: 1; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.sf-coach__player-close svg { width: 18px; height: 18px; }

/* =====================================================================
   Cart (stage 4a, 29 Sep 2026) - templates/cart.php, components/cart-contents.php,
   components/cart-line.php, the cart drawer (layout.php) and the product
   page's add-to-cart form.
   ===================================================================== */
.sf-header__action-icon { position: relative; }
.sf-header__count {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--sf-primary-aa); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

.sf-add-form { margin: 0; }
.sf-add-form__row { display: flex; gap: var(--sf-space-3); align-items: stretch; }
.sf-add-form__row .sf-qty { flex: 0 0 auto; }
.sf-add-form__row .sf-btn { flex: 1 1 auto; }
.sf-add-form [data-add-error] { margin-top: var(--sf-space-2); }
.sf-product-form__after { margin-top: var(--sf-space-4); }

.sf-cart__shipping { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); background: var(--sf-bg-soft); border-radius: var(--sf-radius); }
.sf-cart__shipping-text { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-2); font-size: 14px; }
.sf-cart__shipping-text .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); }
.sf-cart__shipping-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--sf-bg-muted); overflow: hidden; appearance: none; }
.sf-cart__shipping-bar::-webkit-progress-bar { background: var(--sf-bg-muted); border-radius: 999px; }
.sf-cart__shipping-bar::-webkit-progress-value { background: var(--sf-primary); border-radius: 999px; }
.sf-cart__shipping-bar::-moz-progress-bar { background: var(--sf-primary); border-radius: 999px; }

.sf-cart__lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-border-soft); }
.sf-cart-line {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 125px) 84px; gap: var(--sf-space-3);align-items: start;
    padding: var(--sf-space-4) 0; border-bottom: 1px solid var(--sf-border-soft);
}
.sf-cart--compact .cart-grid {
  display: block;
}
@media (min-width: 750px) { 
    .sf-cart:not(.sf-cart--compact) 
    .sf-cart-line { grid-template-columns: 96px minmax(0, 1fr) 125px 100px; gap: var(--sf-space-4); }
    .cart-grid {display: grid;grid-template-columns: 1fr auto;gap: var(--sf-space-4);} 
}
.sf-cart-line__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--sf-radius-sm); background: var(--sf-bg-soft); }
.sf-cart-line__name { margin: 0; font-weight: 600; line-height: 1.3; }
.sf-cart-line__name a { color: var(--sf-ink); text-decoration: none; }
.sf-cart-line__name a:hover { text-decoration: underline; }
.sf-cart-line__variant { margin: 2px 0 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-cart-line__details { margin: var(--sf-space-1) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-cart-line__details div { margin: 0; }
.sf-cart-line__details dt, .sf-cart-line__details dd { display: inline; margin: 0; }
.sf-cart-line__details dt { font-weight: 600; }
.sf-cart-line__details dd { overflow-wrap: anywhere; }
.sf-cart-line__extras { margin: var(--sf-space-1) 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--sf-ink-muted); }
.sf-cart-line__extras li { display: flex; justify-content: space-between; gap: var(--sf-space-3); }
.sf-cart-line__unit { margin: var(--sf-space-1) 0 0; font-size: 14px; }
.sf-cart-line__was { margin-left: var(--sf-space-1); color: var(--sf-ink-subtle); }
.sf-cart-line__issue { margin: var(--sf-space-1) 0 0; font-size: 14px; font-weight: 600; color: var(--sf-danger); }
.sf-cart-line.has-issue .sf-cart-line__media img { opacity: .5; }
.sf-cart-line__actions { display: flex; flex-wrap: wrap; align-items: center; }
.sf-cart-line__qty { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0; }
.sf-cart-line__qty-input { width: 72px; min-height: 44px; text-align: center; }
.sf-cart-line__actions form { margin: 0; }
.sf-cart-line__remove { min-height: 44px; }
.sf-cart-line__total { margin: 0; font-weight: 700; white-space: nowrap; text-align: right; }
.sf-cart-line__fixed { margin: 0; font-size: 14px; color: var(--sf-ink-muted); }

/* Two carts: their own, and an order Golf HQ prepared (components/cart-switch.php). */
.sf-cart-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-space-3); margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); background: var(--sf-bg-soft); border: 1px solid var(--sf-border); border-radius: var(--sf-radius); }
.sf-cart-switch__text { margin: 0; font-weight: 600; }

/* Staff-prepared order banner (components/order-link-note.php; portal specs/39) - cart and checkout. */
.sf-order-link-note { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); background: #eef8f2; border: 1px solid #cfe9db; border-radius: var(--sf-radius); color: var(--sf-ink); }
.sf-order-link-note p { margin: 0 0 var(--sf-space-2); }
.sf-order-link-note p:last-child { margin-bottom: 0; }
.sf-order-link-note__title { display: flex; align-items: center; gap: var(--sf-space-2); font-weight: 700; color: var(--sf-primary-aa); }
.sf-order-link-note__small { font-size: 13px; color: var(--sf-ink-muted); }

.sf-cart__summary { padding: 0 var(--sf-space-1); }
@media (min-width: 750px) { .sf-cart:not(.sf-cart--compact) .sf-cart__summary { max-width: 380px; margin-left: auto; } }
.sf-cart__subtotal { display: flex; justify-content: space-between; margin: 0; font-size: 18px; }
.sf-cart__small { margin: var(--sf-space-2) 0 var(--sf-space-4); font-size: 13px; color: var(--sf-ink-muted); }
.sf-cart__links { margin: var(--sf-space-3) 0 0; text-align: center; font-size: 14px; }
.sf-cart .sf-form-msg { margin-bottom: var(--sf-space-4); }
.sf-cart[aria-busy="true"], [data-island="cart"][aria-busy="true"] .sf-cart { opacity: .6; transition: opacity var(--sf-fast); }
.sf-cart--compact .sf-empty { padding: var(--sf-space-6) 0; }

/* =====================================================================
   Checkout (stage 4b, 29 Sep 2026) - templates/checkout.php
   ===================================================================== */
.sf-checkout__grid { display: grid; gap: var(--sf-space-6); }
@media (min-width: 990px) { .sf-checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } }
.sf-checkout__form { margin: 0; }
.sf-checkout__section { padding: var(--sf-space-5) 0; border-bottom: 1px solid var(--sf-border-soft); }
.sf-checkout__section.is-locked { color: var(--sf-ink-subtle); }
.sf-checkout__heading { margin: 0 0 var(--sf-space-3); font-family: var(--sf-font-heading); font-size: 20px; font-weight: 700; }
.sf-checkout__row { display: grid; gap: 0 var(--sf-space-3); }
@media (min-width: 600px) { .sf-checkout__row { grid-template-columns: 1fr 1fr; } }
.sf-checkout__signin, .sf-checkout__signed { margin: 0 0 var(--sf-space-3); font-size: 14px; color: var(--sf-ink-muted); }
.sf-checkout__choice, .sf-checkout__addresses { margin: 0 0 var(--sf-space-3); padding: 0; border: 0; }
.sf-checkout__option {
    display: flex; align-items: center; gap: var(--sf-space-3); min-height: 56px; padding: var(--sf-space-3) var(--sf-space-4);
    border: 1px solid var(--sf-border); border-radius: var(--sf-radius); cursor: pointer; margin-bottom: var(--sf-space-2);
}
.sf-checkout__option:has(input:checked) { border-color: var(--sf-primary); box-shadow: 0 0 0 1px var(--sf-primary); }
.sf-checkout__option input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--sf-primary); }
.sf-checkout__option-main { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 14px; }
.sf-checkout__option-main span { color: var(--sf-ink-muted); }
.sf-checkout__option-price { flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 14px; }
.sf-checkout__wait { display: block; font-weight: 400; color: var(--sf-ink-muted); font-size: 13px; }
.sf-checkout__panel { margin: var(--sf-space-3) 0 0; padding: 0; border: 0; }
.sf-checkout__address { display: flex; align-items: flex-start; gap: var(--sf-space-2); padding: var(--sf-space-2) 0; font-size: 14px; cursor: pointer; }
.sf-checkout__address input { margin-top: 3px; accent-color: var(--sf-primary); }
.sf-checkout__note { margin: 0 0 var(--sf-space-3); font-size: 14px; color: var(--sf-ink-muted); }
.sf-checkout__note--wait { display: flex; align-items: center; gap: var(--sf-space-2); color: var(--sf-ink); font-weight: 600; }
.sf-checkout__note--wait .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); }
.sf-checkout__country { margin: 0; padding: 10px 0; }
.sf-checkout__actions { padding: var(--sf-space-5) 0 0; }

.sf-checkout__summary { padding: var(--sf-space-5); background: var(--sf-bg-soft); border-radius: var(--sf-radius-lg); }
@media (min-width: 990px) { .sf-checkout__summary { position: sticky; top: var(--sf-space-5); } }
.sf-checkout__lines { margin: 0; padding: 0; list-style: none; }
.sf-checkout__line { display: flex; gap: var(--sf-space-3); padding: var(--sf-space-2) 0; font-size: 14px; }
.sf-checkout__thumb { position: relative; flex: 0 0 56px; }
.sf-checkout__thumb img { display: block; width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius); }
.sf-checkout__qty {
    position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--sf-ink-muted); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.sf-checkout__line-info { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.sf-checkout__line-name { font-weight: 600; }
.sf-checkout__line-sub { color: var(--sf-ink-muted); font-size: 13px; overflow-wrap: anywhere; }
.sf-checkout__line-total { flex: 0 0 auto; font-weight: 600; }
.sf-checkout__edit { margin: var(--sf-space-2) 0 var(--sf-space-4); font-size: 14px; }
.sf-checkout__code { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-4) 0; border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border); }
.sf-checkout__more { margin: 0 0 var(--sf-space-4); }
.sf-checkout__more-link { display: inline-block; min-height: 44px; padding: var(--sf-space-3) 0; color: var(--sf-primary-dark); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; list-style: none; }
.sf-checkout__more-link::-webkit-details-marker { display: none; }
.sf-checkout__more[open] > .sf-checkout__more-link { padding-bottom: var(--sf-space-1); }
.sf-checkout__more > .sf-checkout__code { margin-bottom: 0; }
.sf-checkout__code-row { display: flex; gap: var(--sf-space-2); }
.sf-checkout__code-row .sf-input { flex: 1 1 auto; text-transform: uppercase; }
.sf-checkout__code-applied { display: flex; align-items: center; gap: var(--sf-space-2); margin: 0 0 var(--sf-space-1); font-size: 14px; }
.sf-checkout__code-applied .sf-icon { width: 18px; height: 18px; color: var(--sf-primary); }
.sf-checkout__totals { margin: 0; }
.sf-checkout__totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.sf-checkout__totals dt, .sf-checkout__totals dd { margin: 0; }
.sf-checkout__totals .is-discount dd { color: var(--sf-primary-dark); font-weight: 600; }
.sf-checkout__total { margin-top: var(--sf-space-2); padding-top: var(--sf-space-3) !important; border-top: 1px solid var(--sf-border); font-size: 18px !important; font-weight: 700; }
.sf-checkout__currency { font-size: 12px; font-weight: 400; color: var(--sf-ink-muted); }
.sf-checkout__gst { margin: var(--sf-space-1) 0 0; font-size: 13px; color: var(--sf-ink-muted); text-align: right; }

/* =====================================================================
   Payment + order complete (stage 4c, 29 Sep 2026) - templates/checkout-payment.php,
   templates/checkout-complete.php
   ===================================================================== */
.sf-checkout__review { margin: 0; font-size: 14px; }
.sf-checkout__review div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sf-space-3); padding: var(--sf-space-2) 0; border-bottom: 1px solid var(--sf-border-soft); }
.sf-checkout__review dt { color: var(--sf-ink-muted); }
.sf-checkout__review dd { margin: 0; overflow-wrap: anywhere; }
.sf-pay { margin: 0; }
.sf-pay__element { min-height: 120px; margin-bottom: var(--sf-space-4); }
.sf-pay [data-pay-error] { margin: 0 0 var(--sf-space-3); }
.sf-pay__secure { display: flex; align-items: center; gap: var(--sf-space-2); margin: var(--sf-space-3) 0 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-pay__secure .sf-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.sf-pay__test-banner { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); background: #fff8e1; border: 1px solid #f5d77a; border-radius: var(--sf-radius); font-size: 14px; }
.sf-pay__test-buttons { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
.sf-complete { max-width: 640px; text-align: center; }
.sf-complete__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: var(--sf-space-3); border-radius: 50%; background: var(--sf-primary); color: #fff; }
.sf-complete__icon .sf-icon { width: 32px; height: 32px; }

/* Club builder section (29 Sep 2026) - sections/club-builder.php. The island sets the height the configurator reports. */
.sf-club-builder__inner { max-width: 1200px; }
.sf-club-builder__frame { display: block; width: 100%; min-height: 500px; border: 0; }   /* placeholder until the first height message */

/* Order complete (stage 4d, 30 Sep 2026) - templates/checkout-complete.php */
.sf-complete__number { font-size: 18px; }
.sf-complete__how { display: flex; gap: var(--sf-space-3); align-items: flex-start; margin: var(--sf-space-4) auto; max-width: 440px; padding: var(--sf-space-4); background: var(--sf-bg-soft); border-radius: var(--sf-radius); text-align: left; font-size: 14px; }
.sf-complete__how .sf-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--sf-primary); }
.sf-complete__lines { max-width: 440px; margin: var(--sf-space-4) auto; padding: 0; list-style: none; text-align: left; font-size: 14px; }
.sf-complete__lines li { display: flex; justify-content: space-between; gap: var(--sf-space-3); padding: var(--sf-space-2) 0; border-bottom: 1px solid var(--sf-border-soft); }
.sf-complete__total { font-weight: 700; border-bottom: 0 !important; }
.sf-complete__links { display: flex; justify-content: center; align-items: center; gap: var(--sf-space-4); }

/* Dream Bag (30 Sep 2026) - templates/account-dream-bag.php, island `dreambag` */
.sf-bag { max-width: 760px; margin: 0 auto; }
.sf-bag__intro { color: var(--sf-ink-muted); }
.sf-bag__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-space-3); margin: var(--sf-space-4) 0; }
.sf-bag__status { flex: 1 1 200px; margin: 0; min-height: 1.4em; font-size: 13px; color: var(--sf-ink-muted); }
.sf-bag__status.is-error { color: var(--sf-danger); font-weight: 600; }
.sf-bag__total { margin: 0; font-weight: 700; }
.sf-bag__panel { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-5); padding: var(--sf-space-6) var(--sf-space-3) var(--sf-space-5);
    border: 4px solid var(--sf-primary); border-radius: 160px 160px 24px 24px / 120px 120px 24px 24px; background: linear-gradient(to bottom, #eaf8f0, #c9ecd7); }
.sf-bag__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sf-space-4) var(--sf-space-5); width: 100%; }
.sf-bag__slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-2); width: 132px; text-align: center; }
.sf-bag__circle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 0; border: 3px dashed var(--sf-gray-500); border-radius: 50%;
    background: var(--sf-bg); color: var(--sf-ink-subtle); cursor: pointer; transition: border-color var(--sf-fast), background var(--sf-fast); }
.sf-bag__circle:hover { border-color: var(--sf-primary); background: #f3fbf6; }
.sf-bag__circle:focus-visible { outline: none; border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(34, 173, 101, .35); }
.sf-bag__slot.is-filled .sf-bag__circle { border-style: solid; border-color: var(--sf-primary); }
.sf-bag__circle img { width: 74px; height: 74px; object-fit: cover; border-radius: 50%; }
.sf-bag__plus { font-size: 26px; line-height: 1; }
.sf-bag__label { padding: 0 var(--sf-space-2); font-size: 12px; line-height: 1.2; }
.sf-bag__initial { font-size: 28px; }
.sf-bag__remove { position: absolute; top: -6px; right: calc(50% - 58px); width: 32px; height: 32px; border: 2px solid var(--sf-bg); border-radius: 50%; background: var(--sf-danger);
    color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.sf-bag__remove:hover { background: #b02a37; }
.sf-bag__remove:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-bag__caption { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; line-height: 1.3; }
.sf-bag__slot-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-primary-light); }
.sf-bag__name { font-weight: 600; color: var(--sf-ink); overflow-wrap: anywhere; }
a.sf-bag__name:hover { color: var(--sf-primary-dark); text-decoration: underline; }
.sf-bag__variant { color: var(--sf-ink-muted); overflow-wrap: anywhere; }
.sf-bag__price { font-weight: 600; }
.sf-bag__note { color: var(--sf-danger); font-weight: 600; }
.sf-bag__option { margin-left: 0; }
.sf-bag__fallback { margin: var(--sf-space-4) 0 0; padding-left: var(--sf-space-5); }

.sf-bag__picker-note { min-height: 1.4em; margin: var(--sf-space-2) 0; font-size: 13px; color: var(--sf-ink-muted); }
.sf-bag__list { margin: 0; padding: 0; list-style: none; }
.sf-bag__list li + li { border-top: 1px solid var(--sf-border-soft); }
.sf-bag__pick { display: flex; align-items: center; gap: var(--sf-space-3); width: 100%; min-height: 56px; padding: var(--sf-space-2); border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--sf-radius); }
.sf-bag__pick:hover, .sf-bag__pick:focus-visible { background: var(--sf-bg-soft); outline: none; }
.sf-bag__pick:focus-visible { box-shadow: inset 0 0 0 2px var(--sf-primary); }
.sf-bag__pick img, .sf-bag__pick-noimg { flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--sf-radius-sm); object-fit: cover; background: var(--sf-bg-muted); }
.sf-bag__pick-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sf-bag__pick-name { font-weight: 600; font-size: 14px; }
.sf-bag__pick-brand { font-size: 12px; color: var(--sf-ink-muted); }
.sf-bag__pick-meta { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; font-size: 13px; font-weight: 600; }
.sf-bag__pick-soldout { font-size: 11px; font-weight: 700; color: var(--sf-danger); text-transform: uppercase; }
.sf-bag__variant-name { margin: 0 0 var(--sf-space-2); font-weight: 700; }
.sf-bag__variants { margin: var(--sf-space-3) 0; padding: 0; border: 0; max-height: 40vh; overflow-y: auto; }
.sf-bag__variant-opt { display: flex; align-items: center; gap: var(--sf-space-3); min-height: 44px; padding: var(--sf-space-2) var(--sf-space-1); border-bottom: 1px solid var(--sf-border-soft); cursor: pointer; }
.sf-bag__variant-opt input { width: 18px; height: 18px; accent-color: var(--sf-primary); }
.sf-bag__variant-opt span:first-of-type { flex: 1 1 auto; }
.sf-bag__variant-price { font-weight: 600; font-size: 14px; }
.sf-bag__variant-actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); }
@media (max-width: 480px) {
    .sf-bag__panel { border-radius: 100px 100px 20px 20px / 80px 80px 20px 20px; gap: var(--sf-space-4); padding-top: var(--sf-space-5); }
    .sf-bag__slot { width: 46%; }
}

/* -----------------------------------------------------------------------
   Reviews (1 Oct 2026) - product page + /review write page
   ----------------------------------------------------------------------- */

/* Section */
.sf-reviews { background: var(--sf-bg-soft); }
.sf-reviews__header { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sf-space-3); margin-bottom: var(--sf-space-5); }
.sf-reviews__aggregate { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-reviews__avg { font-size: 28px; font-weight: 700; line-height: 1; color: var(--sf-ink); }
.sf-reviews__stars { font-size: 22px; color: #f59e0b; letter-spacing: 2px; line-height: 1; }
.sf-reviews__count { font-size: 14px; color: var(--sf-ink-muted); }
.sf-reviews__loading { color: var(--sf-ink-muted); font-size: 14px; }

/* Individual review card */
.sf-review-card { padding: var(--sf-space-5) 0; border-top: 1px solid var(--sf-border-soft); }
.sf-review-card:first-child { border-top: none; }
.sf-review-card__header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sf-space-2) var(--sf-space-4); margin-bottom: var(--sf-space-2); }
.sf-review-card__stars { font-size: 18px; color: #f59e0b; line-height: 1; }
.sf-review-card__author { font-weight: 600; font-size: 14px; }
.sf-review-card__date { font-size: 13px; color: var(--sf-ink-muted); margin-left: auto; }
.sf-review-card__title { font-size: 15px; font-weight: 600; margin: 0 0 var(--sf-space-2); }
.sf-review-card__body { font-size: 15px; margin: 0 0 var(--sf-space-3); white-space: pre-line; color: var(--sf-ink); }
.sf-review-card__reply { background: var(--sf-bg-muted); border-left: 3px solid var(--sf-primary); padding: var(--sf-space-3) var(--sf-space-4); border-radius: 0 var(--sf-radius-sm) var(--sf-radius-sm) 0; font-size: 14px; margin-top: var(--sf-space-3); }

/* "Show more" button */
.sf-reviews__more { display: block; margin: var(--sf-space-5) auto 0; }

/* Write-a-review page */
.sf-review-page { max-width: 560px; margin: 0 auto; padding: var(--sf-space-8) 0; }
.sf-review-page__product { display: flex; align-items: center; gap: var(--sf-space-4); padding: var(--sf-space-4); background: var(--sf-bg-soft); border-radius: var(--sf-radius); margin-bottom: var(--sf-space-6); }
.sf-review-page__img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--sf-radius-sm); flex-shrink: 0; }
.sf-review-page__product-name { font-weight: 600; margin: 0 0 var(--sf-space-1); }
.sf-review-page__note { margin-top: var(--sf-space-5); font-size: 13px; color: var(--sf-ink-muted); }
.sf-review-form { display: flex; flex-direction: column; gap: var(--sf-space-5); }
.sf-textarea { resize: vertical; }

/* Star rating input (CSS-only, row-reverse hack) */
.sf-star-rating { display: flex; flex-direction: row-reverse; gap: 4px; width: max-content; }
.sf-star-rating input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-star-rating label { cursor: pointer; font-size: 32px; color: #d1d5db; transition: color 0.1s; line-height: 1; }
.sf-star-rating label:hover,
.sf-star-rating label:hover ~ label,
.sf-star-rating input:checked ~ label { color: #f59e0b; }

.sf-cart__savings { margin: calc(var(--sf-space-1) * -1) 0 var(--sf-space-2); font-size: 13px; font-weight: 600; color: var(--sf-primary-dark); text-align: right; }

/* ---- Gift card page (templates/product-gift-card.php, 6 Oct 2026): amounts reuse the video coaching package cards ---- */
.sf-gift__amounts { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 750px) { .sf-gift__amounts { grid-template-columns: repeat(4, 1fr); } }

/* ---- PayPal button on the checkout (6 Oct 2026) ---- */
.sf-pay__paypal { min-height: 48px; }
.sf-pay__or { display: flex; align-items: center; gap: var(--sf-space-3); margin: var(--sf-space-4) 0 0; color: var(--sf-ink-subtle); font-size: 13px; }
.sf-pay__or::before, .sf-pay__or::after { content: ""; flex: 1; border-top: 1px solid var(--sf-border-soft); }
.no-cursor {cursor:not-allowed;}
.paypal-button-container {margin: 0 auto;}

/* ---- Other ways to pay, in one row above the card form (17 Oct 2026): Apple / Google Pay full width, then PayPal and Afterpay
   side by side from 600px (stacked below). A hidden button takes no column, so whichever is left fills the row. ---- */
.sf-pay__alts { margin-bottom: var(--sf-space-4); }
.sf-pay__alts-row { display: grid; grid-template-columns: 1fr; gap: var(--sf-space-3); align-items: start; }
@media (min-width: 600px) { .sf-pay__alts-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.sf-pay__alts-row > .sf-pay__express { grid-column: 1 / -1; margin-bottom: 0; }
.sf-pay__alts > .sf-pay__test-banner { margin: var(--sf-space-3) 0 0; }

/* ---- Express row at the TOP of the checkout form (24 Oct 2026), above Contact. While the wallet / PayPal scripts load, the island keeps
   the row's space (.is-loading) so the form doesn't jump; the divider waits until there's something above it. ---- */
.sf-pay__alts--top { margin: var(--sf-space-4) 0 0; }
.sf-pay__alts--top.is-loading .sf-pay__alts-row { min-height: 48px; }
.sf-pay__alts--top.is-loading .sf-pay__or { visibility: hidden; }
.sf-pay__alts--top > .sf-form-msg { margin: var(--sf-space-3) 0 0; }
.sf-pay__express-note { margin: var(--sf-space-2) 0 0; font-size: 13px; }

/* ---- Slim checkout header (24 Oct 2026, components/checkout-header.php): back to cart / logo / phone, nothing else.
   Beats the shared .sf-header__inner rules (flex, and the 1024px+ gap) by one class; no bottom nav, so no padding for it. ---- */
.sf-header--slim .sf-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sf-space-3); flex-wrap: nowrap; padding: 8px 16px; }
.sf-header--slim .sf-header__logo { flex: none; justify-content: center; }
.sf-header--slim .sf-header__logo img { height: 35px; max-height: none; width: auto; }
.sf-header__slim-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #fff; font-size: 14px; text-decoration: none; }
.sf-header__slim-link:hover { color: var(--sf-primary); }
.sf-header__slim-link .sf-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.sf-header__slim-link--end { justify-self: end; }
.sf-header__slim-phone { display: none; }
@media (min-width: 600px) { .sf-header__slim-phone { display: inline; } .sf-header--slim .sf-header__logo img { height: 40px; } }
@media (max-width: 1023px) { body.has-slim-header { padding-bottom: 0; } }

/* ---- Afterpay button on the checkout (17 Oct 2026, portal specs/50): Afterpay's own mint, shown by the checkout island ---- */
.sf-pay__afterpay-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 48px;
    padding: var(--sf-space-1) var(--sf-space-4); border: 0; border-radius: var(--sf-radius);
    background: #b2fce4; color: #000; font: inherit; cursor: pointer;
}
.sf-pay__afterpay-btn:hover { background: #9af5d6; }
.sf-pay__afterpay-btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.sf-pay__afterpay-btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-pay__afterpay-name { font-family: var(--sf-font-heading); font-size: 15px; font-weight: 700; line-height: 1.2; }
.sf-pay__afterpay-sub { font-size: 12px; line-height: 1.2; }

/* ---------- Native club builder (8-9 Oct 2026) - sections/club-builder.php native mode, assets/js/club-builder.js ----------
   Looks like the old configurator (club-configurator layouts/embed.php): dark green accent, black primary buttons,
   2px bordered cards, same radii. Tokens are scoped to .sf-club so nothing else on the site changes. */
.sf-club {
    --c-primary: #1a1a1a; --c-accent: #2d5a27; --c-light: #4a7c43; --c-soft: #f8f9fa; --c-border: #e5e7eb; --c-muted: #6b7280;
    --c-radius-sm: .5rem; --c-radius-md: .75rem; --c-radius-lg: 1rem;
    --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --c-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    position: relative; max-width: 1100px; margin: 0 auto; color: var(--c-primary);
}
.sf-club.is-busy .sf-club__stage { opacity: .55; pointer-events: none; transition: opacity var(--sf-fast); }
.sf-club .sf-btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; border-radius: var(--c-radius-sm); }
.sf-club .sf-btn--primary:hover { background: #333; border-color: #333; color: #fff; }
.sf-club .sf-btn--ghost { background: #fff; border-color: var(--c-primary); color: var(--c-accent); border-radius: var(--c-radius-sm); }
.sf-club .sf-btn--ghost:hover { background: var(--c-soft); border-color: var(--c-border); color: var(--c-primary); }
.sf-club .sf-link-btn { color: var(--c-accent); }
.sf-club .sf-input { border: 2px solid var(--c-border); border-radius: var(--c-radius-md); }
.sf-club .sf-input:focus { border-color: var(--c-accent); box-shadow: none; }

.sf-club__loading { text-align: center; padding: var(--sf-space-7) 0; color: var(--c-muted); }
.sf-club__status { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border-radius: var(--c-radius-md); background: #fdf0f1; color: #842029; font-size: 14px; }
.sf-club__notice { margin: 0 0 var(--sf-space-4); padding: var(--sf-space-3) var(--sf-space-4); border-radius: var(--c-radius-md); background: #eef6ec; color: var(--c-accent); font-size: 14px; }

/* Top bar and progress (old layouts/embed.php) */
.sf-club__topbar { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; margin-bottom: 1rem; }
.sf-club__mybuild { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.sf-club__mybuild img { width: auto; height: 25px; }
.sf-club__badge { position: absolute; top: -8px; right: -8px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #dc3545; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; }
.sf-club__progress { margin-bottom: 2rem; }
.sf-club__track { height: 4px; background: var(--c-border); border-radius: 2px; margin-bottom: 1rem; overflow: hidden; }
.sf-club__fill { height: 100%; background: var(--c-accent); border-radius: 2px; transition: width .4s ease; }
.sf-club__steps { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.sf-club__steps li { flex: 1; text-align: center; font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.sf-club__steps li.is-current { color: var(--c-primary); font-weight: 600; }
.sf-club__steps li.is-done { color: var(--c-accent); }
.sf-club__stepnum { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-bottom: .35rem; border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-soft); font-size: .7rem; font-weight: 600; }
.sf-club__steps li.is-current .sf-club__stepnum, .sf-club__steps li.is-done .sf-club__stepnum { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.sf-club__steplabel { display: block; }
@media (max-width: 768px) { .sf-club__steplabel, .sf-club__mybuild-text { display: none; } }

.sf-club__head { text-align: center; margin: 0 0 2rem; }
.sf-club__head h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5rem; }
.sf-club__head h2:focus { outline: none; }
.sf-club__head p { margin: 0 auto; max-width: 640px; color: var(--c-muted); font-size: .95rem; }
.sf-club__back { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 1.5rem; padding: 0; border: 0; background: none; color: var(--c-muted); font-size: .9rem; font-weight: 500; cursor: pointer; }
.sf-club__back:hover { color: var(--c-primary); }
.sf-club__form { max-width: 860px; margin: 0 auto; }
.sf-club__actions { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-2); margin: 3rem 0 0; }
.sf-club__hint, .sf-club__fine { margin: var(--sf-space-2) 0 0; font-size: 13px; color: var(--c-muted); }
.sf-club__label { display: block; margin: 0 0 var(--sf-space-2); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.sf-club__statlabel { display: block; color: var(--c-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.sf-club__stattext { display: block; font-size: .75rem; color: var(--c-muted); }
.sf-club__box { margin: 0 0 1.5rem; padding: 0; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; }
.sf-club__box > h3 { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); margin: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-border); font-size: 1rem; font-weight: 600; }
.sf-club__box > h3 .sf-club__fine { margin: 0; font-weight: 400; font-size: .8rem; }
.sf-club__box > :not(h3) { margin-left: 1.25rem; margin-right: 1.25rem; }
.sf-club__box > :last-child { margin-bottom: 1.25rem; }
.sf-club__box > h3 + * { margin-top: 1.25rem; }
.sf-club__note { margin: 0 0 1rem; padding: 1rem 1.25rem; border-radius: var(--c-radius-md); background: #cff4fc; color: #055160; font-size: .9rem; }
.sf-club__empty { text-align: center; padding: 3rem 2rem; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; color: var(--c-muted); }
.sf-club__chosen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: 1rem 0 0; color: var(--c-muted); font-size: .9rem; }
.sf-club__count { text-align: center; margin: 1rem 0 0; font-size: .9rem; color: var(--c-muted); }
.sf-club__groups { list-style: none; margin: 0 0 var(--sf-space-3); padding: 0; font-size: .9rem; }
.sf-club__groups li { display: flex; justify-content: space-between; gap: var(--sf-space-3); padding: .5rem 0; border-bottom: 1px solid var(--c-border); }
.sf-club__groups li:last-child { border-bottom: 0; }
.sf-club__selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 var(--sf-space-3); }
@media (max-width: 576px) { .sf-club__selects { grid-template-columns: 1fr; } }
.sf-club__selects label, .sf-club__filters label { display: flex; flex-direction: column; gap: var(--sf-space-1); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); }
.sf-club__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 0 0 2rem; padding: 1rem; background: var(--c-soft); border-radius: var(--c-radius-md); }
.sf-club__price { font-size: .9rem; font-weight: 600; color: var(--c-accent); }
.sf-club__price.is-extra { display: inline-block; padding: .25rem .75rem; border-radius: var(--c-radius-sm); background: #fff3cd; color: #856404; font-size: .85rem; }
.sf-club__price.is-total { font-size: 1.35rem; font-weight: 700; color: var(--c-primary); }
.sf-club__brandlogo { max-width: 100%; max-height: 40px; width: auto; filter: grayscale(100%); border: 1px solid var(--c-border); border-radius: 8px; padding: 6px 10px; background: var(--c-soft); }
.sf-club__brandname { font-size: .85rem; font-weight: 500; color: var(--c-muted); }
.sf-club__done { max-width: 640px; margin: 0 auto; padding: 2rem 0; }
.sf-club__done .sf-club__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }

/* Splash */
.sf-club-hero { text-align: center; padding: 2rem 0 1rem; }
.sf-club-hero h2 { font-size: 3rem; font-weight: 800; line-height: 1.1; color: #1a1a1a; margin: 0 0 var(--sf-space-4); }
.sf-club-hero h2:focus { outline: none; }
.sf-club-hero p { max-width: 640px; margin: 0 auto 2rem; font-size: 1.2rem; line-height: 1.6; color: #666; }
.sf-club-hero .sf-btn { border-radius: 50px; background: var(--c-accent); border-color: var(--c-accent); box-shadow: 0 4px 15px rgba(45, 90, 39, .3); }
.sf-club-hero .sf-btn:hover { background: var(--c-light); border-color: var(--c-light); }
.sf-club-how { padding: 2rem 0; text-align: center; }
.sf-club-how h3 { font-size: 2rem; font-weight: 700; margin: 0 0 3rem; }
.sf-club-how__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 992px) { .sf-club-how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .sf-club-how__steps { grid-template-columns: 1fr; } }
.sf-club-how__steps li { position: relative; padding: 2rem 1.5rem; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, .06); transition: all .3s; }
.sf-club-how__steps li:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, .1); }
.sf-club-how__steps h4 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }
.sf-club-how__steps p { margin: 0; font-size: .9rem; color: #666; line-height: 1.5; }
.sf-club-how__num { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: .85rem; font-weight: 700; }
@media (max-width: 768px) { .sf-club-hero h2 { font-size: 2.2rem; } }

/* Profile questions */
.sf-club-q { margin: 0 0 1.25rem; padding: 1.5rem; background: var(--c-soft); border: 0; border-radius: var(--c-radius-lg); }
.sf-club-q legend { float: left; width: 100%; padding: 0; margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--c-primary); }
.sf-club-q legend + * { clear: both; }
.sf-club-q legend abbr { color: #dc3545; text-decoration: none; margin-left: .25rem; }
.sf-club-q__help { display: block; margin: 0 0 1rem; font-size: .85rem; color: var(--c-muted); }
.sf-club-q .sf-input { width: 100%; padding: .75rem 1rem; font-size: 1rem; background: #fff; }

/* Selectable tiles (radio / checkbox hidden inside the label) */
.sf-club-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.sf-club-tiles--types { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .sf-club-tiles--types { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.sf-club-tiles--chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
@media (max-width: 576px) { .sf-club-q .sf-club-tiles { grid-template-columns: repeat(2, 1fr); } }
.sf-club-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 70px; padding: 1rem .75rem; background: #fff; border: 2px solid var(--c-border); border-radius: var(--c-radius-md); text-align: center; cursor: pointer; transition: all .15s ease; font-size: .85rem; font-weight: 500; }
.sf-club-tile:hover { border-color: var(--c-accent); }
.sf-club-tile.is-selected { border-color: var(--c-accent); background: rgba(45, 90, 39, .05); }
.sf-club-tile.is-disabled { opacity: .4; cursor: not-allowed; }
.sf-club-tile:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sf-club-tile input { position: absolute; opacity: 0; pointer-events: none; }
.sf-club-tile__label { font-size: .9rem; font-weight: 600; }
.sf-club-tile__desc { font-size: .85rem; font-weight: 400; color: var(--c-muted); }
.sf-club-tile--type { min-height: 0; padding: 2rem 1.5rem; border-radius: var(--c-radius-lg); font-size: 1.1rem; font-weight: 600; }
.sf-club-tile--type:hover { box-shadow: var(--c-shadow-md); transform: translateY(-2px); }
.sf-club-tile--type.is-selected { background: #fff; box-shadow: 0 0 0 3px rgba(45, 90, 39, .15); }
.sf-club-tile__icon { width: 80px; height: 60px; margin: 0 auto 1rem; object-fit: contain; opacity: .7; transition: all .2s ease; }
.sf-club-tile--type:hover .sf-club-tile__icon, .sf-club-tile--type.is-selected .sf-club-tile__icon { opacity: 1; transform: scale(1.05); }
.sf-club-tile__check { position: absolute; top: .75rem; right: .75rem; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border); background: #fff; }
.sf-club-tile--type.is-selected .sf-club-tile__check { border-color: var(--c-accent); background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sf-club-tile--chip { flex: 0 0 auto; min-width: 56px; min-height: 56px; padding: .75rem 1.25rem; border-radius: 50px; font-weight: 700; }
.sf-club-swatch { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .25rem; border-radius: 50%; overflow: hidden; }
.sf-club-swatch img { width: 100%; height: 100%; object-fit: cover; }
.sf-club-swatch--colour { border: 1px solid var(--c-border); }
.sf-club-swatch--none { color: var(--c-muted); font-size: 24px; }

/* Product cards (heads, shafts, grips) */
.sf-club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 0 1.5rem; }
@media (max-width: 992px) { .sf-club-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .sf-club-grid { grid-template-columns: 1fr; } }
.sf-club-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--c-border); border-radius: var(--c-radius-lg); box-shadow: var(--c-shadow-sm); overflow: hidden; transition: all .2s ease; }
.sf-club-card:hover { border-color: var(--c-accent); box-shadow: var(--c-shadow-md); transform: translateY(-2px); }
.sf-club-card__match { position: absolute; top: .75rem; right: .75rem; z-index: 1; padding: .25rem .6rem; border-radius: 2rem; background: var(--c-accent); color: #fff; font-size: .7rem; font-weight: 600; }
.sf-club-card__media { display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 1.5rem; background: var(--c-soft); text-align: center; }
.sf-club-card__media img { max-height: 245px; max-width: 100%; width: auto; object-fit: contain; transition: transform .3s ease; }
.sf-club-card:hover .sf-club-card__media img { transform: scale(1.05); }
.sf-club-card__noimage { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--c-border); }
.sf-club-card__body { display: flex; flex-direction: column; flex: 1; gap: .25rem; padding: 1.25rem; }
.sf-club-card__brand { display: flex; justify-content: space-between; align-items: center; gap: var(--sf-space-3); padding-bottom: .75rem; margin-bottom: .5rem; border-bottom: 1px solid var(--c-border); }
.sf-club-card__year { text-align: center; font-size: .8rem; }
.sf-club-card__year strong { display: block; font-weight: 600; }
.sf-club-card__title { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; }
.sf-club-card__sub { margin: 0 0 .5rem; font-size: .85rem; color: var(--c-muted); }
.sf-club-card__desc { margin: .5rem 0; font-size: .8rem; line-height: 1.4; color: var(--c-muted); }
.sf-club-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .75rem 0; margin-top: .5rem; border-top: 1px solid var(--c-border); }
.sf-club-card__stat { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; }
.sf-club-card__foot { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: .75rem; }
.sf-club-card__set { margin: .75rem 0; }
.sf-club-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.sf-club-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .5rem; border-radius: .25rem; background: var(--c-soft); color: var(--c-muted); font-size: .7rem; font-weight: 600; }
.sf-club-badge.is-dark { background: #212529; color: #fff; }
.sf-club-badge.is-selected { background: var(--c-accent); color: #fff; }
.sf-club-badge .sf-link-btn { margin: 0; color: inherit; text-decoration: none; font-size: 16px; line-height: 1; }
.sf-club-bar { position: relative; height: 8px; margin: 6px 0; border-radius: 6px; background: #eee; overflow: hidden; }
.sf-club-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.sf-club-bar__range { background: #1565c0; }
.sf-club-bar__fill { background: #2e7d32; transition: width .3s ease; }

/* Review */
.sf-club-review { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 980px; margin: 0 auto 1.5rem; }
@media (min-width: 800px) { .sf-club-review { grid-template-columns: 1fr 1fr; } }
.sf-club-review__spec { padding: 1.25rem; background: #fff; border-radius: var(--c-radius-lg); box-shadow: var(--c-shadow-sm); }
.sf-club-review__row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--c-border); }
.sf-club-review__row > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.sf-club-review__row > div:last-child { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.sf-club-review__order { align-self: start; padding: 1.5rem; background: var(--c-soft); border-radius: var(--c-radius-lg); }
.sf-club-review__order h3 { margin: 0 0 1rem; font-size: 1.25rem; }
.sf-club-review__sum { display: flex; justify-content: space-between; gap: var(--sf-space-3); padding: .5rem 0; font-size: .95rem; }
.sf-club-review__sum.is-total { margin: .5rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: 1.25rem; }
.sf-club-review__sum.is-total strong:last-child { color: var(--c-accent); }
.sf-club-review__qty { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-space-3); margin: 0 0 1rem; font-size: .9rem; }
.sf-club-review__qty .sf-input { width: 80px; }

/* Parity pass 2 (9 Oct 2026): details from the old shaft / grip / options / review screens */
.sf-club__steps li { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.sf-club__stepnum { margin-bottom: 0; }
.sf-club__steplabel { display: inline; }
.sf-club-card__brand--plain { justify-content: flex-start; padding-bottom: 0; margin-bottom: .25rem; border-bottom: 0; }
.sf-club-card__stats--center { text-align: center; }
.sf-club-card__stats--center strong { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 600; }
.sf-club-badge.is-grey { background: #6c757d; color: #fff; }
.sf-club-card__foot .sf-btn { min-height: 40px; font-size: 15px; font-weight: 600; }
.sf-club__more { min-width: 200px; color: #0d6efd; border-color: #0d6efd; }
.sf-club .sf-club__more:hover { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.sf-club__more .sf-btn__label::after { content: "\00a0\25BE"; }
.sf-club__plus .sf-btn__label::before { content: "\2295\00a0"; }
.sf-club__back--blue { color: #0d6efd; }
.sf-club__back--blue:hover { color: #0a58ca; }
.sf-club__note { display: flex; align-items: flex-start; gap: .75rem; }
.sf-club__note strong { display: block; }
.sf-club__noteicon { flex: 0 0 auto; margin-top: 2px; }
.sf-club__note--review { max-width: 760px; margin: 0 auto 1.5rem; }
.sf-club__guide { margin: 1rem 1.25rem 0; text-align: center; font-size: .8rem; color: var(--c-muted); }
.sf-club__guide strong { color: var(--c-primary); }
.sf-club__filters label { flex: 0 0 auto; }
.sf-club__filters .sf-input { min-width: 150px; padding: .5rem 2rem .5rem .75rem; font-size: .9rem; border-width: 1px; border-radius: var(--c-radius-sm); }
.sf-club-tile--opt { min-height: 0; padding: 1rem .75rem; background: var(--c-soft); border-color: transparent; border-radius: 8px; }
.sf-club-tile--opt:hover { border-color: var(--c-accent); }
.sf-club-tile--opt.is-selected { border-color: var(--c-accent); background: rgba(45, 90, 39, .05); }
.sf-club-tile--opt .sf-club__price { padding: 0; background: none; font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.sf-club-tile--opt .sf-club__price.is-extra { color: var(--c-accent); }
.sf-club-tile--pill { flex: 0 0 auto; min-width: 70px; min-height: 0; padding: .75rem 1.25rem; background: var(--c-soft); border-color: transparent; border-radius: 50px; font-size: 1rem; font-weight: 700; }
.sf-club-tile--pill:hover { border-color: var(--c-accent); transform: scale(1.05); }
.sf-club-tile--pill.is-selected { border-color: var(--c-accent); background: rgba(45, 90, 39, .1); color: var(--c-accent); }
.sf-club-review__h { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; }
.sf-club-review__spec .sf-club-review__row:last-child { border-bottom: 0; }
.sf-club-review__qty { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .35rem; }
.sf-club-review__qty .sf-input { width: 100px; }

/* ---------------------------------------------------------------------------
   Reviews: write button, verified badge, empty state (9 Oct 2026)
   Stars are brand green (Dave: the live site's green was deliberate).
   --------------------------------------------------------------------------- */
:root { --sf-star: var(--sf-primary); }
.sf-reviews__stars, .sf-review-card__stars { color: var(--sf-primary); }
.sf-star-rating label:hover,
.sf-star-rating label:hover ~ label,
.sf-star-rating input:checked ~ label { color: var(--sf-primary); }
.sf-reviews__write { margin-left: auto; }
.sf-reviews__empty { color: var(--sf-ink-muted); font-size: 15px; margin: 0; }
.sf-review-card__verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sf-primary); border: 1px solid var(--sf-primary); border-radius: 999px; padding: 1px 8px; }
.sf-review-card__verified::before { content: "\2713"; }

/* Afterpay badge opens the "how it works" dialog (required by Afterpay) */
button.sf-afterpay-badge { border: 0; cursor: pointer; font-family: inherit; line-height: 1.4; }
button.sf-afterpay-badge:hover { background: #8ef3d3; }
button.sf-afterpay-badge:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sf-afterpay-badge__info { font-size: 11px; margin-left: 2px; }
#sf-afterpay .sf-dialog__panel { background: #b2fce4; color: #000; }
#sf-afterpay .sf-dialog__header { border-bottom-color: rgba(0, 0, 0, .15); }
.sf-afterpay__lead { font-size: 22px; font-weight: 700; line-height: 1.25; text-align: center; margin: 0 0 var(--sf-space-5); }
.sf-afterpay__steps { list-style: none; margin: 0 0 var(--sf-space-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--sf-space-4); text-align: center; }
.sf-afterpay__steps li { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-2); font-size: 12px; }
.sf-afterpay__steps .sf-icon { width: 36px; height: 36px; }
.sf-afterpay__small { font-size: 12px; margin: 0 0 var(--sf-space-2); }
.sf-afterpay__small a { color: inherit; text-decoration: underline; }

/* Stars under the product title and on cards (9 Oct 2026) */
.sf-product__rating { margin: 0 0 var(--sf-space-3); }
.sf-product__rating .sf-rating__star { width: 20px; height: 20px; }
.sf-product__rating .sf-rating__count { font-size: 15px; }
.sf-product__rating a.sf-rating__count:hover { text-decoration: underline; }
.sf-card__rating { margin: 0 0 var(--sf-space-1); }
.sf-card__rating .sf-rating__star { width: 14px; height: 14px; }

/* ---------- CRO pass, 11 Oct 2026 ---------- */

/* Delivery / pick-up / returns reassurance under Add to cart */
.sf-assure { display: grid; gap: var(--sf-space-2); list-style: none; margin: var(--sf-space-4) 0 0; padding: 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-assure__item { display: flex; align-items: center; gap: var(--sf-space-2); }
.sf-assure__item strong { color: var(--sf-ink); }
.sf-assure__icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--sf-primary-aa); }

/* Cart: padlock line (was inline styles) */
.sf-cart__secure { display: flex; align-items: center; justify-content: center; text-align: center; margin: 1rem 0 0; }
.sf-cart__secure-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Sticky add-to-cart bar: phones and tablets only, above the bottom nav */
.sf-stickybuy {
    position: fixed; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; gap: var(--sf-space-3);
    bottom: calc(var(--sf-mobile-nav-height) + env(safe-area-inset-bottom, 0)); padding: 10px var(--sf-gutter);
    background: #fff; border-top: 1px solid var(--sf-border-soft); box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
}
.sf-stickybuy.hidden { display: none !important; }
.sf-stickybuy__info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.sf-stickybuy__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--sf-ink-muted); }
.sf-stickybuy__price { font-family: var(--sf-font-heading); font-weight: 700; font-size: 17px; color: var(--sf-ink); }
.sf-stickybuy__btn { flex-shrink: 0; }
@media (min-width: 1024px) { .sf-stickybuy { display: none !important; } }
@media (max-width: 1023px) { .has-stickybuy .sf-toast-region { bottom: calc(var(--sf-mobile-nav-height) + 80px); } }

/* Slideshow: bigger touch targets, clear focus, text-free (button-only) captions */
.sf-slideshow__arrow:focus-visible, .sf-slideshow__pause:focus-visible, .sf-slideshow__dot:focus-visible { outline: 3px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 5px var(--sf-ink); }
.sf-slideshow__controls { background: rgba(0, 0, 0, .6); }
.sf-slideshow__dot.is-active::before { background: #fff; transform: scale(1.2); }
@media (pointer: coarse) {
    .sf-slideshow__arrow, .sf-slideshow__pause { width: 44px; height: 44px; }
    .sf-slideshow__dot { width: 32px; height: 44px; }
    .sf-slideshow__controls { padding: 2px 6px; }
}
/* A slide with only a button (the banner image carries the words): no dark wash, button sits bottom-left clear of the controls */
.sf-slideshow__caption--cta { background: none; padding-bottom: calc(var(--sf-space-7) + 28px); }
.sf-slideshow__caption--cta .sf-btn { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
@media (max-width: 749px) { .sf-slideshow__controls { bottom: var(--sf-space-2); } }

/* Slideshow: the track follows the current slide's height (set by the island) so mixed-shape banners don't leave a gap or jump */
.sf-slideshow__track { align-items: flex-start; height: var(--sf-slide-h, auto); overflow-y: hidden; }
@media (prefers-reduced-motion: no-preference) { .sf-slideshow__track { transition: height .3s ease; } }

/* Availability: click & collect wording under the store's stock badge */
.sf-availability__row { flex-wrap: wrap; }
.sf-availability__note { flex-basis: 100%; padding-left: 28px; font-size: 13px; color: var(--sf-ink-muted); }

.sf-cart__afterpay { margin: 0 0 var(--sf-space-2); font-size: 14px; color: var(--sf-ink-muted); }
.sf-cart__afterpay strong { color: var(--sf-ink); }

/* Search: no-results page with ways forward */
.sf-search-empty__did-you-mean { font-size: 18px; }
.sf-search-empty__did-you-mean a { color: var(--sf-primary-aa); }
.sf-search-more { margin: var(--sf-space-7) 0; }
.sf-search-more__title { margin: 0 0 var(--sf-space-3); }
.sf-search-more__note { margin: 0 0 var(--sf-space-4); color: var(--sf-ink-muted); }
.sf-search-more__all { margin: var(--sf-space-4) 0 0; font-weight: 600; }
.sf-search-more__help { text-align: center; color: var(--sf-ink-muted); margin: var(--sf-space-6) 0; }
.sf-chips { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); list-style: none; margin: 0; padding: 0; }
.sf-chip { display: inline-block; padding: 10px 18px; border: 1px solid var(--sf-border); border-radius: 999px; background: #fff; color: var(--sf-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.sf-chip:hover { border-color: var(--sf-primary); color: var(--sf-primary-aa); }

/* NZ Post address lookup */
.sf-addr-field { position: relative; }
.sf-addr-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 280px; overflow-y: auto;
    background: #fff; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-md); }
.sf-addr-suggest.hidden { display: none !important; }
.sf-addr-suggest__item { padding: 10px 14px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.sf-addr-suggest__item[aria-selected="true"], .sf-addr-suggest__item:hover { background: var(--sf-bg-soft); }
.sf-addr-check { margin: var(--sf-space-4) 0; padding: var(--sf-space-4); border: 1px solid #f0c36d; border-radius: var(--sf-radius-lg); background: #fff8e6; }
.sf-addr-check__text { margin: 0 0 var(--sf-space-3); }
.sf-addr-check__actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-2); margin: 0; }

/* Express checkout (Apple Pay / Google Pay) above the card form */
.sf-pay__express { margin-bottom: var(--sf-space-4); }
.sf-pay__express.hidden { display: none !important; }
.sf-pay__express-title { margin: 0 0 var(--sf-space-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-ink-muted); }

/* Checkout delivery / pick-up options: a long wait ("Usually ready in 1-2 days (transfer between store)") must wrap, not push past the card.
   On narrow screens a pick-up store puts its price and wait on their own line under the name. */
.sf-checkout__option-main { min-width: 0; }
.sf-checkout__option-price { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow-wrap: anywhere; }
@media (max-width: 599px) {
    .sf-checkout__store { flex-wrap: wrap; }
    .sf-checkout__store .sf-checkout__option-main { flex: 1 1 0; }
    .sf-checkout__store .sf-checkout__option-price { flex: 1 0 100%; max-width: none; padding-left: 30px; text-align: left; }
}

/* Reviews strip (homepage) */
.sf-revstrip { background: var(--sf-bg-soft); }
.sf-revstrip__layout { display: grid; gap: var(--sf-space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 990px) { .sf-revstrip__layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sf-space-6); } }
.sf-revstrip__heading { margin: 0 0 var(--sf-space-3); }
.sf-revstrip__big { margin: 0 0 var(--sf-space-1); line-height: 1; }
.sf-revstrip__num { font-family: var(--sf-font-heading); font-size: 56px; font-weight: 700; }
.sf-revstrip__outof { font-size: 15px; color: var(--sf-ink-muted); }
.sf-revstrip__based { margin: var(--sf-space-2) 0 0; font-size: 14px; color: var(--sf-ink-muted); }
.sf-revstrip__list { display: grid; gap: var(--sf-space-4); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 750px) { .sf-revstrip__list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sf-revstrip__card { display: flex; flex-direction: column; gap: var(--sf-space-2); height: 100%; margin: 0; padding: var(--sf-space-4); background: #fff; border: 1px solid var(--sf-border-soft); border-radius: var(--sf-radius-lg); }
.sf-revstrip__title { margin: 0; font-weight: 700; }
.sf-revstrip__quote { margin: 0; flex: 1; color: var(--sf-ink); }
.sf-revstrip__quote p { margin: 0; }
.sf-revstrip__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--sf-ink-muted); }
.sf-revstrip__author { font-weight: 700; color: var(--sf-ink); }
.sf-revstrip__verified { display: inline-flex; align-items: center; gap: 3px; color: var(--sf-primary-aa); }
.sf-revstrip__verified .sf-icon { width: 14px; height: 14px; }
.sf-revstrip__product { flex-basis: 100%; }
.sf-revstrip__product a { color: var(--sf-primary-aa); }

/* Instagram feed (homepage) */
.sf-igfeed__grid { --g: var(--sf-space-2); }
.sf-igfeed__follow { display: inline-flex; align-items: center; gap: 6px; }
.sf-igfeed__follow .sf-icon { width: 18px; height: 18px; }
.sf-igfeed__tile { display: block; border-radius: var(--sf-radius); overflow: hidden; }
.sf-igfeed__tile .sf-image-box { background: var(--sf-bg-soft); }
.sf-igfeed__tile .sf-image { object-fit: cover; transition: transform var(--sf-fast); }
.sf-igfeed__tile:hover .sf-image, .sf-igfeed__tile:focus-visible .sf-image { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .sf-igfeed__tile .sf-image { transition: none; } .sf-igfeed__tile:hover .sf-image { transform: none; } }

/* Why Pay is greyed out */
.sf-checkout__pay-hint { margin: var(--sf-space-2) 0 0; font-size: 14px; color: var(--sf-ink-muted); text-align: center; }
.sf-checkout__pay-hint.hidden { display: none !important; }

/* Speed pass, 13 Oct 2026 (portal specs/43 s4) */
/* Held-back images (components/image.php `defer`, sections/slideshow.php): without scripting the <noscript> copy shows, so hide the placeholder. */
@media (scripting: none) { picture[data-defer], img[data-defer] { display: none; } }
/* Don't lay out or paint what is off-screen until it nears the viewport: the footer, and product cards after the first eight (a long listing is ~4,000 elements). */
.sf-footer, .sf-footer-group { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.sf-grid > li:nth-child(n+9) { content-visibility: auto; contain-intrinsic-size: auto 380px; }

/* ==========================================================================
   Slideshow - "Hero" layout (24 Oct 2026). sections/slideshow.php `layout = hero`.
   Same scroll-snap track + island as the banner layout; this only restyles it.
   Words/cut-outs only hide for the entrance animation once the island has run
   (.is-enhanced), so no-JS visitors and reduced-motion visitors always see everything.
   ========================================================================== */
.sf-slideshow--hero { --sf-hero-h: clamp(520px, 74vh, 760px); background: var(--sf-primary-dark); color: #fff; }
.sf-slideshow--hero .sf-slideshow__track { height: var(--sf-hero-h); }
.sf-hero__slide { height: 100%; overflow: hidden; background: var(--sf-primary-dark); }
.sf-slideshow--hero .sf-slideshow__picture { position: absolute; inset: 0; }
.sf-slideshow--hero .sf-slideshow__img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transform-origin: 70% 50%; }

/* Dark wash from the left (words) and from the bottom (progress nav) */
.sf-hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(8, 24, 15, .75) 0, rgba(8, 24, 15, 0) 32%),
        linear-gradient(100deg, rgba(8, 24, 15, .88) 0, rgba(8, 24, 15, .62) 38%, rgba(8, 24, 15, .08) 72%);
}
.sf-hero__inner { position: absolute; inset: 0; margin: 0 auto; display: flex; align-items: center; padding-bottom: 96px; }
.sf-hero__copy { position: relative; z-index: 2; max-width: 640px; }
.sf-hero__eyebrow {
    display: inline-block; margin: 0 0 var(--sf-space-4); padding: 6px 14px; border-radius: 999px;
    background: var(--sf-primary-aa); color: #fff; font-family: var(--sf-font-heading); font-weight: 700;
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.sf-hero__heading {
    margin: 0 0 var(--sf-space-4); font-family: var(--sf-font-heading); font-weight: 800;
    font-size: clamp(38px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.sf-hero__text { margin: 0 0 var(--sf-space-5); max-width: 520px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .92); }
.sf-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sf-space-3); margin: 0; }
.sf-hero__actions .sf-btn--primary { box-shadow: 0 8px 24px rgba(34, 173, 101, .45); }
.sf-hero__btn-ghost, .sf-hero__btn-ghost:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }
.sf-hero__btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* Product cut-out: green glow behind, floats, drifts a little with the pointer (--mx/--my are -1..1, set by the island) */
.sf-hero__media {
    position: absolute; z-index: 1; right: var(--sf-gutter); top: 4%; bottom: 96px; width: min(46%, 660px);
    display: flex; align-items: center; justify-content: center;
    transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -10px), 0); transition: transform .35s ease-out;
}
.sf-hero__media::before {
    content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 173, 101, .55) 0, rgba(34, 173, 101, 0) 68%);
}
.sf-hero__cutout { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .5)); }

/* Controls: progress bars bottom-left, arrows + pause bottom-right, no pill */
.sf-slideshow--hero .sf-slideshow__controls {
    left: 50%; bottom: 0; width: 100%; max-width: var(--sf-container); padding: 0 var(--sf-gutter) 22px; gap: var(--sf-space-3);
    border-radius: 0; background: none; justify-content: flex-end;
}
.sf-slideshow--hero .sf-slideshow__dots { order: -1; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sf-space-4); max-width: 640px; margin-right: auto; }
.sf-slideshow--hero .sf-slideshow__dot { width: auto; height: auto; padding: 14px 0 0; text-align: left; display: flex; flex-direction: column; gap: 8px; color: rgba(255, 255, 255, .65); }
.sf-slideshow--hero .sf-slideshow__dot::before { display: none; }
.sf-hero__tick { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.sf-hero__tick i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.sf-slideshow--hero .sf-slideshow__dot.is-active { color: #fff; }
.sf-slideshow--hero .sf-slideshow__dot.is-active .sf-hero__tick i { transform: scaleX(1); }
.sf-hero__tnum { font-family: var(--sf-font-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.sf-hero__tlabel { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-slideshow--hero .sf-slideshow__arrow, .sf-slideshow--hero .sf-slideshow__pause { background: rgba(255, 255, 255, .14); }
.sf-slideshow--hero .sf-slideshow__arrow:hover, .sf-slideshow--hero .sf-slideshow__pause:hover { background: rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: no-preference) {
    /* Ken Burns on the live slide */
    .sf-slideshow--hero.is-enhanced .sf-hero__slide.is-active .sf-slideshow__img { animation: sf-hero-zoom 16s ease-out forwards; }
    /* Staggered entrance */
    .sf-slideshow--hero.is-enhanced .sf-hero__eyebrow,
    .sf-slideshow--hero.is-enhanced .sf-hero__heading,
    .sf-slideshow--hero.is-enhanced .sf-hero__text,
    .sf-slideshow--hero.is-enhanced .sf-hero__actions { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
    .sf-slideshow--hero.is-enhanced .sf-hero__cutout { opacity: 0; transform: translateX(70px) rotate(-5deg) scale(.9); transition: opacity .8s ease .25s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
    .sf-slideshow--hero.is-enhanced .is-active .sf-hero__eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
    .sf-slideshow--hero.is-enhanced .is-active .sf-hero__heading { opacity: 1; transform: none; transition-delay: .22s; }
    .sf-slideshow--hero.is-enhanced .is-active .sf-hero__text { opacity: 1; transform: none; transition-delay: .38s; }
    .sf-slideshow--hero.is-enhanced .is-active .sf-hero__actions { opacity: 1; transform: none; transition-delay: .52s; }
    .sf-slideshow--hero.is-enhanced .is-active .sf-hero__cutout { opacity: 1; transform: none; animation: sf-hero-float 6s ease-in-out 1.4s infinite alternate; }
    /* Progress bar fills over the slide's time on screen; hover/focus holds it, Pause/interaction leaves the bar full */
    .sf-slideshow--hero.is-running .sf-slideshow__dot.is-active .sf-hero__tick i { transform: scaleX(0); animation: sf-hero-fill var(--sf-slide-ms, 6000ms) linear forwards; }
    .sf-slideshow--hero.is-hold .sf-slideshow__dot.is-active .sf-hero__tick i { animation-play-state: paused; }
}
@keyframes sf-hero-zoom { from { transform: scale(1); } to { transform: scale(1.13); } }
@keyframes sf-hero-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes sf-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 749px) {
    .sf-slideshow--hero { --sf-hero-h: clamp(500px, 82vh, 640px); }
    .sf-hero__scrim { background: linear-gradient(to top, rgba(8, 24, 15, .92) 0, rgba(8, 24, 15, .7) 45%, rgba(8, 24, 15, .15) 100%); }
    .sf-slideshow--hero .sf-slideshow__img { object-position: 60% 30%; }
    .sf-hero__inner { align-items: flex-end; padding-bottom: 84px; }
    .sf-hero__media { display: none; }
    .sf-hero__tlabel { display: none; }
    .sf-slideshow--hero .sf-slideshow__arrow { display: none; }
    .sf-slideshow--hero .sf-slideshow__controls { padding-bottom: 14px; }
    .sf-hero__actions .sf-btn { flex: 1 1 auto; justify-content: center; }
}