/* Storefront base styles. Colours are the current site's (WooCommerce Storefront theme
   settings) except the link colour: the site's #2f87ff is 3.5:1 on white and 2.4:1 on the
   footer, below WCAG AA's 4.5:1, so links use a darker blue that passes on every
   background here. Every colour, space and font is a custom property defined here once.

   Spec S25: the light theme is the values on :root; the dark theme replaces the colour
   properties, in the two identical blocks below (one for "follow the device", one for
   "dark" chosen). ThemeTests checks they match and that text meets 4.5:1 in both. */
:root {
    --font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;

    color-scheme: light dark;

    --color-text: #6d6d6d;
    --color-heading: #333333;
    --color-link: #0a58ca;
    --color-link-hover: #084298;
    --color-page-bg: #ffffff;
    --color-header-bg: #ffffff;
    --color-header-text: #000000;
    --color-nav-text: #000000;
    --color-nav-hover: #414141;
    --color-submenu-bg: #f0f0f0;
    --color-footer-bg: #d8d8d8;
    --color-footer-text: #000000;
    --color-border: #f0f0f0;
    --color-border-strong: #d5d5d5;
    --color-button-bg: #eeeeee;
    --color-button-text: #333333;
    --color-button-dark: #333333;
    --color-button-dark-text: #ffffff;
    --color-banner-bg: #000000;
    --color-banner-text: #ffffff;
    --color-error: #b00020;
    /* Sponsors' logos are drawn for a white background, in both themes. */
    --color-logo-tile: #ffffff;
    --color-shadow: rgb(0 0 0 / 0.15);
    --color-shadow-soft: rgb(0 0 0 / 0.08);
    --color-input-bg: #ffffff;
    /* Spec S37: cards and panels, secondary text, and the order status badge. */
    --color-surface: #f8f8f8;
    --color-muted: #636363;
    --color-badge-bg: #ececec;
    --color-badge-text: #333333;
    /* Spec S38: the hero's quieter text, and the accent the home page's main button and the
       welcome offer use (cards use S37's surface). The accent is the yellow of the "TF" in
       the hero's logo (images/home/hero.png); its text is a warm near-black to match. */
    --color-banner-muted: #d6d8db;
    --color-accent: #fecb08;
    --color-accent-text: #1a1400;
    /* The logo is a black PNG: white in the dark theme. */
    --logo-filter: none;
    /* The header's theme switch shows the button for the other theme. */
    --show-in-light: inline-flex;
    --show-in-dark: none;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Spec S37: inputs and buttons, then cards and panels. Rounded but plain (owner, 6 October
       2026): one modest radius for every control, never pills, no shadows or gradients. */
    --radius-1: 8px;
    --radius-2: 12px;
    /* Spec S38: the home page's larger cards and hero, pills and round dots. */
    --radius-3: 0.75rem;
    --radius-4: 1rem;
    --radius-5: 1.25rem;
    --radius-pill: 999px;
    --radius-round: 50%;

    --page-width: 72rem;
    --text-width: 46rem;
    accent-color: var(--color-button-dark);
}

/* Dark theme, following the device (no theme chosen, or "Device"). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-text: #b9bec6;
        --color-heading: #eef0f3;
        --color-link: #7db4ff;
        --color-link-hover: #a9ceff;
        --color-page-bg: #121416;
        --color-header-bg: #181b1e;
        --color-header-text: #eef0f3;
        --color-nav-text: #eef0f3;
        --color-nav-hover: #ffffff;
        --color-submenu-bg: #1f2327;
        --color-footer-bg: #181b1e;
        --color-footer-text: #dfe2e6;
        --color-border: #262a2f;
        --color-border-strong: #3b4047;
        --color-button-bg: #2a2e34;
        --color-button-text: #eef0f3;
        --color-button-dark: #eef0f3;
        --color-button-dark-text: #121416;
        --color-banner-bg: #23272d;
        --color-banner-text: #ffffff;
        --color-error: #ff8f8f;
        --color-shadow: rgb(0 0 0 / 0.55);
        --color-shadow-soft: rgb(0 0 0 / 0.4);
        --color-input-bg: #1a1d21;
        --color-surface: #181b1e;
        --color-muted: #a4aab3;
        --color-badge-bg: #2a2e34;
        --color-badge-text: #eef0f3;
        --color-banner-muted: #d6d8db;
        --color-accent: #fecb08;
        --color-accent-text: #1a1400;
        --logo-filter: invert(1);
        --show-in-light: none;
        --show-in-dark: inline-flex;
    }
}

/* Dark theme, chosen. Keep identical to the block above. */
:root[data-theme="dark"] {
    --color-text: #b9bec6;
    --color-heading: #eef0f3;
    --color-link: #7db4ff;
    --color-link-hover: #a9ceff;
    --color-page-bg: #121416;
    --color-header-bg: #181b1e;
    --color-header-text: #eef0f3;
    --color-nav-text: #eef0f3;
    --color-nav-hover: #ffffff;
    --color-submenu-bg: #1f2327;
    --color-footer-bg: #181b1e;
    --color-footer-text: #dfe2e6;
    --color-border: #262a2f;
    --color-border-strong: #3b4047;
    --color-button-bg: #2a2e34;
    --color-button-text: #eef0f3;
    --color-button-dark: #eef0f3;
    --color-button-dark-text: #121416;
    --color-banner-bg: #23272d;
    --color-banner-text: #ffffff;
    --color-error: #ff8f8f;
    --color-shadow: rgb(0 0 0 / 0.55);
    --color-shadow-soft: rgb(0 0 0 / 0.4);
    --color-input-bg: #1a1d21;
    --color-surface: #181b1e;
    --color-muted: #a4aab3;
    --color-badge-bg: #2a2e34;
    --color-badge-text: #eef0f3;
    --color-banner-muted: #d6d8db;
    --color-accent: #fecb08;
    --color-accent-text: #1a1400;
    --logo-filter: invert(1);
    --show-in-light: none;
    --show-in-dark: inline-flex;
    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Hidden means hidden, whatever display a class gives (a .button kept hidden until a script
   shows it, spec S37 rule 15; forms kept in a page only so a post is accepted). */
[hidden] {
    display: none !important;
}

/* Spec S25: every text box, select and textarea in the site's colours, not the browser's
   (whose dark grey matches nothing here), and in the text's font, not the browser's small
   Arial (TD-054: the one input reset). No specificity, so a form's own rules still win. */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="file"]), select, textarea) {
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-input-bg);
    color: var(--color-heading);
    font: inherit;
}

/* TD-054: the one button reset. Every button the site draws, whatever form it sits in, has no
   browser border or font, and a pointer. No specificity, so .button's weight and a rule that
   gives a button a border (a quiet outline) still win. */
:where(.button, .button-quiet, .link-button, .analytics-preferences, .analytics-consent button, .carousel-toggle, .flight-help-button, .photo-viewer-open) {
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* Every button, text box, select and textarea gets the controls' radius. No specificity, so a
   rule that sets its own (the hero's pill, a joined search box) still wins. */
:where(button, .button, input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"]), select, textarea) {
    border-radius: var(--radius-1);
}

:where(input, select, textarea)::placeholder {
    /* Full opacity: --color-text is 4.5:1 on the input background, and any fading drops
       it below (ThemeTests checks the pair). */
    color: var(--color-text);
    opacity: 1;
}

html {
    -webkit-text-size-adjust: 100%;
    /* The header stays at the top of the window (StoreHeader), so whatever the page
       scrolls to (the product page's chosen disc) lands below it, not under it. */
    scroll-padding-top: 7.5rem;
}

@media (min-width: 48rem) {
    html {
        scroll-padding-top: 8.5rem;
    }
}

/* A column, so the footer sits at the bottom of short pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--color-page-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    line-height: 1.25;
}

h1 {
    font-size: 2rem;
    margin: 0 0 var(--space-5);
}

/* Links are never underlined, on any page (owner, 5 October 2026). Their colour sets them
   apart, the hover colour answers the pointer, and the focus ring marks them for the keyboard. */
a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-link-hover);
}

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

:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

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

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -3rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-button-dark);
    color: var(--color-button-dark-text);
    z-index: 100;
}

.skip-link:focus {
    top: var(--space-2);
}

/* Main area: the layout's own padding keeps text off the screen edge at 360 px. */
.page {
    flex: 1;
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}

.page:has(.team-member-page) {
    max-width: 90rem;
    padding-inline: clamp(1rem, 3vw, 3rem);
}

.team-member-page {
    min-width: 0;
}

.content-page {
    max-width: var(--text-width);
    overflow-wrap: anywhere;
}

.content-page h2 {
    margin-top: var(--space-6);
}

.button {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-button-bg);
    color: var(--color-button-text);
    font-weight: 600;
    text-decoration: none;
}

.button:hover {
    background: var(--color-border-strong);
    color: var(--color-button-text);
}

/* A secondary action that is a form's button but reads as a link (spec S37 rule 1: one
   primary button per form). */
.button-quiet {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    color: var(--color-link);
}

.button-quiet:hover {
    color: var(--color-link-hover);
}

/* Team pages */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-5);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.team-group-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.4;
    object-fit: cover;
    object-position: center 38%;
    border-radius: var(--radius-2);
    margin: 20px 0 32px;
}

.analytics-consent { position: fixed; inset: auto 16px 16px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 960px; margin-inline: auto; padding: 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); background: var(--color-header-bg); color: var(--color-header-text); box-shadow: 0 4px 24px var(--color-shadow); }
.analytics-consent[hidden] { display: none; }
.analytics-preferences { padding: 0; background: none; color: inherit; }
.analytics-consent p { margin: 6px 0 0; font-size: 14px; }
.analytics-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.analytics-consent button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); background: var(--color-header-bg); color: var(--color-header-text); }
.analytics-consent button[data-analytics-choice="granted"] { background: var(--color-button-dark); color: var(--color-button-dark-text); }
@media (max-width: 600px) { .analytics-consent { flex-direction: column; align-items: stretch; inset-inline: 10px; padding: 16px; } .analytics-consent-actions button { flex: 1; } }

@media (max-width: 600px) {
    .team-group-photo { aspect-ratio: 1.5; }
}

.team-grid a {
    display: block;
    color: var(--color-heading);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.team-grid img,
.team-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-1);
    margin-bottom: var(--space-2);
}

.team-photo {
    max-width: 16rem;
}

/* Player profiles: portrait, visible information panels, then their products. */
.team-intro {
    margin-bottom: var(--space-5);
}

.team-player-info .team-photo {
    width: 100%;
    max-width: 14rem;
    margin: 0;
    border-radius: var(--radius-1);
}

.team-card {
    min-width: 0;
    text-align: left;
}

.team-card p {
    margin: 0;
}

.team-card-name {
    margin: 0 0 var(--space-2);
    color: var(--color-heading);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 700;
}

.team-card-tier {
    font-weight: 600;
}

.team-stock {
    display: block;
    color: var(--color-heading);
    font-weight: 600;
}

.team-card .team-stock {
    margin-top: var(--space-3);
    font-size: 1.25rem;
}

.team-bio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-5);
    overflow-wrap: anywhere;
}

.team-bio-section {
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-1);
    background: var(--color-surface);
    min-width: 0;
}

.team-bio-section-wide {
    grid-column: 1 / -1;
    padding: var(--space-4) 0 0;
    border: 0;
    background: none;
}

.team-player-info-body {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.team-profile-side {
    display: grid;
    gap: var(--space-5);
    min-width: 0;
}

.team-bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-5);
    align-items: start;
}

.team-bag-group {
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 0;
    border-radius: var(--radius-1);
    background: var(--color-surface);
}

.team-bio-section > :first-child,
.team-bag-group > :first-child {
    margin-top: 0;
}

.team-card .button {
    margin-top: var(--space-3);
}

.team-shop-heading {
    scroll-margin-top: 7rem;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.team-member-page) {
        scroll-behavior: smooth;
    }
}

.team-grid .team-stock {
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: center;
}

@media (min-width: 48rem) {
    .team-bio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-player-info-body {
        grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    }
}

/* Team Figgins Open sponsors */
.sponsor-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

/* A white tile, so a logo drawn for white stays legible in the dark theme (S25). */
.sponsor-logos img {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--space-2);
    border-radius: var(--radius-2);
    background: var(--color-logo-tile);
}

/* Catalog listings (spec S04) */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
}

.category-description {
    max-width: var(--text-width);
}

/* A formatted introduction (spec S35 rule 3) keeps the text width for its own paragraphs and lists. */
.category-description ul,
.category-description ol {
    padding-left: 1.25rem;
}

.subcategories,
.category-links,
.popular-categories,
.related-links ul,
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.subcategories a,
.category-links a,
.popular-categories a,
.related-links a,
.active-filters a {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    /* They work as buttons, so they take the controls' radius. */
    border-radius: var(--radius-1);
    color: var(--color-heading);
    text-decoration: none;
}

.subcategories a:hover,
.category-links a:hover,
.popular-categories a:hover,
.related-links a:hover,
.active-filters a:hover {
    background: var(--color-button-bg);
}

.active-filters .clear-all {
    border-color: transparent;
    color: var(--color-link);
}

.listing {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.filters-toggle,
.filters-toggle-label {
    display: none;
}

.filters fieldset {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.filters legend {
    margin-bottom: var(--space-1);
    color: var(--color-heading);
    font-weight: 600;
}

.filters label {
    display: block;
}

.filters .range {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filters .range legend {
    width: 100%;
}

/* Native fields and the custom dropdowns share a border-box height so browser select
   sizing and summary line-height cannot make the filter controls differ. */
.filters input[type="text"],
.filters input[type="search"],
.filters input[type="number"],
.filters select,
.filters .multi-select summary {
    height: 2.5rem;
    padding: var(--space-1) var(--space-2);
}

.filters input[type="number"] {
    width: 5rem;
}

/* The listing dropdowns (a <details>, as the storefront has no JavaScript). The summary takes
   the number boxes' border, padding and font. A fieldset is as wide
   as its content by default, which would let a long plastic widen the filter column. */
.filters .multi-select {
    min-width: 0;
}

.multi-select summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    background-color: var(--color-input-bg);
    color: var(--color-heading);
    list-style: none;
    cursor: pointer;
}

.multi-select summary::-webkit-details-marker {
    display: none;
}

/* A long plastic name ends in an ellipsis rather than widening the filter column. */
.multi-select summary span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The chevron a select shows, pointing up while the list is open. */
.multi-select summary::after {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    margin: 0 0.15em 0.2em auto;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.multi-select details[open] summary::after {
    margin-bottom: -0.2em;
    transform: rotate(-135deg);
}

.multi-select-options {
    max-height: 15rem;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    background-color: var(--color-input-bg);
}

.manufacturer-select .multi-select-options a {
    display: block;
    padding: var(--space-2) 0;
    overflow-wrap: anywhere;
}

.manufacturer-select .multi-select-options a:hover {
    color: var(--color-heading);
}

/* A long plastic wraps beside its checkbox, not under it. */
.filters .multi-select-options label {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.filters .sort {
    margin-bottom: var(--space-4);
    color: var(--color-heading);
    font-weight: 600;
}

.filters select {
    display: block;
    max-width: 100%;
    margin-top: var(--space-1);
    font-weight: 400;
}

/* Drawn at the text's weight, not .button's 600, since S04 (its own font reset came after
   .button's weight); kept so by TD-054, as are the six like it below. */
.filters button {
    font-weight: inherit;
}

.result-count {
    margin: 0 0 var(--space-3);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-5);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.product-card a {
    display: block;
    color: var(--color-heading);
    text-decoration: none;
}

.product-card a:hover .product-name {
    color: var(--color-link-hover);
}

.product-image {
    display: block;
    aspect-ratio: 1;
    margin-bottom: var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-2);
    background: var(--color-border);
}

.product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-name {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.product-flight {
    display: inline-block;
    margin-top: var(--space-1);
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: 0.9375rem;
}

.product-meta .price {
    color: var(--color-heading);
}

.badge {
    padding: 0 var(--space-2);
    background: var(--color-button-dark);
    color: var(--color-button-dark-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.sold-out .product-image img {
    opacity: 0.5;
}

.sold-out .status {
    font-weight: 600;
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
}

/* Narrow screens: one column, filters behind a toggle that needs no JavaScript. */
@media (max-width: 48rem) {
    .listing {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    /* Invisible but still in the tab order, so the keyboard can open the filters. */
    .filters-toggle {
        display: block;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .filters-toggle:focus-visible + .filters-toggle-label {
        outline: 2px solid var(--color-link);
        outline-offset: 2px;
    }

    .filters-toggle-label {
        display: inline-block;
        justify-self: start;
        cursor: pointer;
    }

    .filters {
        display: none;
    }

    .filters-toggle:checked ~ .filters {
        display: block;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

/* Sign-in, registration and password forms (spec S03). The sign-in pages' card, .account-page,
   is account.css's (S37); the pages outside /my-account/ that are one short form (the gift card
   balance, the email and welcome offer pages) take its 28rem column, without the card, as
   .narrow-page (TD-053). */
.narrow-page {
    max-width: 28rem;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

/* A form kept in the page only so a post is accepted (CLAUDE.md); display: flex above
   would otherwise override the hidden attribute. */
.account-form[hidden] {
    display: none;
}

.account-form label {
    color: var(--color-heading);
    font-weight: 600;
}

.account-form label.checkbox {
    font-weight: 400;
}

.account-form input[type="email"],
.account-form input[type="password"] {
    padding: var(--space-2);
}

.account-form .button {
    align-self: flex-start;
    margin-top: var(--space-2);
}

.button-primary {
    background: var(--color-button-dark);
    color: var(--color-button-dark-text);
}

.button-primary:hover {
    background: var(--color-heading);
    color: var(--color-button-dark-text);
    opacity: 0.85;
}

.hint {
    margin: 0;
    font-size: 0.875rem;
}

.validation-message,
.form-error {
    color: var(--color-error);
}

.notice {
    padding: var(--space-3);
    background: var(--color-submenu-bg);
    color: var(--color-heading);
}

/* A POS-only session's 403 (owner, 7 October 2026): sign in as staff, or back to the POS. */
.pos-only-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-5);
}

/* A staff member's sign-in (spec S18) */
.account-form input:not([type]),
.account-form input[type="text"] {
    padding: var(--space-2);
}

.staff-security .setup-steps li {
    margin-bottom: var(--space-3);
}

.staff-security .qr-code {
    display: block;
    margin-top: var(--space-2);
    image-rendering: pixelated;
}

.staff-security .authenticator-key,
.staff-security .recovery-codes code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 1.05rem;
}

.staff-security .recovery-codes ol {
    columns: 2;
}

/* Connecting an AI assistant (spec S23) */
.assistant-list ul {
    padding-left: var(--space-4);
}

.assistant-list li {
    margin-bottom: var(--space-2);
}

.assistant-list .button {
    display: block;
    margin-top: var(--space-1);
    font-weight: inherit;
}

.connect-assistant .account-form {
    flex-direction: row;
    gap: var(--space-3);
}

.connect-assistant .account-form .button {
    font-weight: inherit;
}

/* Customer account (spec S10). The frame, its navigation and every .account-body rule are in
   account.css (S37), which no selector here repeats (TD-053). */
.account-form input[type="text"],
.account-form input[type="tel"],
.account-form input:not([type]),
.account-form select {
    width: 100%;
    padding: var(--space-2);
    background: var(--color-input-bg);
}

.field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
}

.field-pair > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.optional,
.muted {
    color: var(--color-text);
    font-weight: 400;
}

.same-as-billing {
    margin-bottom: var(--space-4);
}

.same-as-billing .button {
    font-weight: inherit;
}

address {
    font-style: normal;
    color: var(--color-heading);
}

.address-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
}

.address-pair > h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.address-pair h3 {
    margin: 0 0 var(--space-2);
}

.order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-table th,
.order-table td {
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-strong);
    text-align: left;
}

.order-table thead th {
    color: var(--color-heading);
}

.order-table tbody th {
    font-weight: 600;
}

.order-table .amount {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.order-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0 0 var(--space-5);
}

.order-facts dt {
    font-size: 0.875rem;
}

.order-facts dd {
    margin: 0;
    color: var(--color-heading);
    font-weight: 600;
}

.order-lines {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.order-lines li {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-strong);
}

.order-line-image img {
    display: block;
    width: 4rem;
    height: 4rem;
    object-fit: cover;
}

.order-line-name {
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

.order-line-sku {
    display: block;
    color: var(--color-text);
    font-size: 0.875rem;
}

.order-line-total {
    color: var(--color-heading);
    text-align: right;
    white-space: nowrap;
}

.order-line-total del {
    display: block;
    color: var(--color-text);
    font-size: 0.875rem;
}

.order-amounts {
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    border-collapse: collapse;
}

.order-amounts th {
    font-weight: 400;
    text-align: left;
}

.order-amounts td {
    color: var(--color-heading);
    text-align: right;
    white-space: nowrap;
}

.order-amounts th,
.order-amounts td {
    padding: var(--space-1) 0;
}

.order-amounts .order-total th,
.order-amounts .order-total td {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-strong);
    color: var(--color-heading);
    font-weight: 700;
}

.order-discounts,
.order-payments {
    margin-top: var(--space-4);
}

.order-discounts h3,
.order-payments h3 {
    margin-bottom: var(--space-1);
}

.order-discounts ul,
.order-payments ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
}

.customer-note {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .address-pair,
    .field-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The order table becomes one card per order, each cell labelled. */
    .order-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .order-table tr {
        display: block;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-border-strong);
    }

    .order-table th,
    .order-table td,
    .order-table .amount {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-1) 0;
        border: 0;
        text-align: right;
    }

    .order-table th::before,
    .order-table td::before {
        content: attr(data-label);
        color: var(--color-text);
        font-weight: 400;
        text-align: left;
    }

    .order-lines li {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
    }

    .order-line-image img {
        width: 3rem;
        height: 3rem;
    }

    .order-line-quantity {
        grid-column: 2;
    }

    .order-line-total {
        grid-column: 3;
        grid-row: 1;
    }

    .order-amounts {
        max-width: none;
    }
}

/* The product page (spec S05). Its rules are in ProductPage.razor.css and its components'
   stylesheets (TD-055); these stay here because several of its components draw them: the
   add-to-cart form (AddToCartForm, GiftCardForm) and .sold-out-note (ProductPage,
   StandardProductForm, GiftCardForm). */
.sold-out-note {
    color: var(--color-heading);
    font-size: 1.375rem;
    font-weight: 700;
}

.add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 0;
}

.add-to-cart .quantity {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
}

.add-to-cart input[type="number"] {
    width: 4.5rem;
    padding: var(--space-1) var(--space-2);
}

.add-to-cart .button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* A gift card's message keeps the lines it was written in. */
.gift-message {
    white-space: pre-line;
}

/* Cart and checkout (spec S08). The cart's and checkout's own rules are in their components'
   scoped stylesheets (Cart.razor.css, CheckoutFrame.razor.css, CheckoutBody.razor.css and each
   step's and page's, TD-055); the ones here are shared with the order pages, the account's
   balances or the layout. */
.link-button {
    padding: 0;
    background: none;
    color: var(--color-link);
}

.link-button:hover {
    color: var(--color-link-hover);
}

.cart-notice {
    margin: 0 0 var(--space-4);
}

/* A line's detail under its name, in the cart and in checkout's summary. */
.cart-line-detail {
    display: block;
    color: var(--color-text);
    font-size: 0.875rem;
}

/* Gift cards, store credit and points (spec S13 part B) */
.balance-form {
    max-width: 28rem;
}

.balance-form p {
    margin: 0;
}

.balance-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.balance-field input {
    flex: 1 1 10rem;
    min-width: 0;
}

.account-form .balance-field input[type="number"] {
    padding: var(--space-2);
}

.account-form .balance-field .button {
    margin-top: 0;
}

.applied-balances {
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.applied-balances li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.inline-form {
    display: inline;
    margin: 0;
}

.balance-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.balance-pair h3,
.balance-pair p {
    margin: 0 0 var(--space-1);
}

.balance-amount {
    color: var(--color-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.balance-history {
    margin-bottom: var(--space-3);
}

/* Spec S30 part C: the QR code for our table, on a white tile in both themes so it scans. */
.table-card {
    margin-top: var(--space-6);
}

.table-card-code {
    display: inline-block;
    padding: var(--space-2);
    background: var(--color-logo-tile);
    border-radius: var(--radius-2);
}

.table-card-code svg {
    display: block;
    width: 240px;
    height: 240px;
}

.balance-history summary {
    color: var(--color-link);
    cursor: pointer;
}

.balance-ledger {
    width: 100%;
    margin-top: var(--space-2);
    border-collapse: collapse;
    font-size: 0.875rem;
}

.balance-ledger th,
.balance-ledger td {
    padding: var(--space-1) var(--space-2) var(--space-1) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.balance-ledger .amount {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .balance-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------------------------------
   The home page (spec S38, rules 1 to 8). Its rules are in Home.razor.css and
   CarouselCard.razor.css (TD-055); the hero's two buttons stay here with the other buttons, and
   the flight numbers' pill with the listings' cards. Every colour is a property above.
   ------------------------------------------------------------------------------------------ */
.button-accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.button-accent:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
    filter: brightness(1.06);
}

.button-outline {
    background: transparent;
    color: var(--color-banner-text);
    box-shadow: inset 0 0 0 2px var(--color-banner-muted);
}

.button-outline:hover {
    background: color-mix(in srgb, var(--color-banner-text) 12%, transparent);
    color: var(--color-banner-text);
}

/* Flight numbers as a pill: the home carousel's cards and every listing's. */
.carousel-flight,
.product-flight {
    align-self: flex-start;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.welcome-code-value {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
}

.welcome-code {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 0.375rem solid var(--color-accent);
    border-radius: var(--radius-2);
    background: var(--color-surface);
}

.welcome-code p {
    margin: 0 0 var(--space-1);
}

/* A link in the welcome code's box is bold: nothing is underlined here, and the link colour alone
   is too close to the text's for WCAG's 3:1 (axe's link-in-text-block). The offer's page does the
   same for its other sentences (WelcomeOfferPage.razor.css). */
.welcome-code a {
    font-weight: 600;
}

/* Spec S39: choosing newsletter topics (the preferences page and My Account). */
.topic-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    padding: 0;
    border: 0;
}

.topic-choices legend {
    margin-bottom: var(--space-2);
    padding: 0;
    color: var(--color-heading);
    font-weight: 600;
}

.account-form .topic-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: 400;
}

.topic-choice input {
    margin-top: 0.3rem;
}

.topic-choice strong {
    display: block;
    color: var(--color-heading);
}

.topic-description {
    display: block;
    font-size: 0.9375rem;
}

.email-preferences .account-form .button:not(.button-primary) {
    border: 1px solid var(--color-border-strong);
}

/* The Flight Finder (spec S41). Its classes start with flight- so none collides with the
   product page's .flight-numbers or the carousel's .carousel-flight. */
.flight-finder-title,
.category-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.flight-finder-title h1,
.category-title h1 {
    margin: 0;
}

.flight-help-button {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-button-bg);
    color: var(--color-heading);
    font-size: 0.875rem;
    font-weight: 600;
}

.flight-help-button:hover {
    background: var(--color-border-strong);
}

.flight-finder-lead {
    max-width: var(--text-width);
    color: var(--color-heading);
    font-size: 1.0625rem;
}

/* The help popover. The browser centres it (its defaults are position: fixed, inset: 0 and
   margin: auto), closes it on Escape or a click outside, and dims the page through the
   backdrop. A browser without popovers shows it in place, boxed, which still reads. */
.flight-help {
    width: min(34rem, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-4));
    padding: var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    background: var(--color-page-bg);
    color: var(--color-text);
}

.flight-help::backdrop {
    background: rgb(0 0 0 / 0.45);
}

.flight-help h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.125rem;
}

.flight-help p {
    margin: 0 0 var(--space-3);
}

/* At the text's weight, not .button's 600, as #150 drew it (its own font reset came after
   .button's weight), like the six in TD-054. */
.flight-help-close {
    font-weight: inherit;
}

/* Used category introductions can be long, including lists and formatted headings. */
.category-help {
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.flight-finder-notices ul {
    margin: 0;
    padding-left: var(--space-5);
}

.flight-presets {
    margin-bottom: var(--space-6);
}

.flight-presets h2 {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1.125rem;
}

/* Each group is a label and a row of pills that wraps. */
.flight-preset-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}

.flight-preset-group h3 {
    flex: 0 0 7rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.flight-preset-group ul {
    display: flex;
    flex: 1 1 20rem;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.flight-presets a {
    display: block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    font-size: 0.9375rem;
}

.flight-presets a:hover {
    background: var(--color-button-bg);
}

/* The preset the ranges are set to now. */
.flight-presets a[aria-current="true"] {
    border-color: var(--color-button-dark);
    background: var(--color-button-dark);
    color: var(--color-page-bg);
}

/* The filters fold on a phone only (flight-finder.js closes them there). On a wider screen
   the summary is a plain heading; it still folds them if clicked. */
.flight-filters summary {
    margin-bottom: var(--space-3);
    color: var(--color-heading);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
}

.flight-filters-recap {
    display: none;
}

.flight-clear {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
}

.flight-range-value {
    margin-left: var(--space-2);
    color: var(--color-text);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.flight-finder-body {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.flight-form fieldset {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.flight-form legend,
.flight-form-field {
    margin-bottom: var(--space-1);
    color: var(--color-heading);
    font-weight: 600;
}

.flight-form label {
    display: block;
}

.flight-range {
    --thumb: 1.25rem;
}

/* Two range inputs stacked on one track (the low end and the high end). The inputs let the
   pointer through and only their thumbs take it, so either thumb can be dragged. The span
   between the thumbs is shaded from --low and --high (fractions of the track), which the page
   writes and flight-finder.js updates. */
.flight-slider {
    position: relative;
    height: 1.75rem;
}

.flight-slider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--thumb) / 2);
    right: calc(var(--thumb) / 2);
    height: 4px;
    margin-top: -2px;
    border-radius: var(--radius-pill);
    /* The track spans what a thumb's centre travels, so the fractions map straight onto it.
       Drawn under the inputs, so the shading never takes the pointer from a thumb. */
    background: linear-gradient(to right,
        var(--color-border-strong) calc(var(--low, 0) * 100%),
        var(--color-button-dark) calc(var(--low, 0) * 100%) calc(var(--high, 1) * 100%),
        var(--color-border-strong) calc(var(--high, 1) * 100%));
}

.flight-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
}

.flight-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 100%;
    background: none;
}

.flight-slider input[type="range"]::-moz-range-track {
    background: none;
}

.flight-slider input[type="range"]::-webkit-slider-thumb {
    width: var(--thumb);
    height: var(--thumb);
    margin-top: calc((1.75rem - var(--thumb)) / 2);
    border: 2px solid var(--color-page-bg);
    border-radius: var(--radius-round);
    background: var(--color-button-dark);
    box-shadow: 0 0 0 1px var(--color-button-dark);
    cursor: grab;
    pointer-events: auto;
    appearance: none;
}

.flight-slider input[type="range"]::-moz-range-thumb {
    width: var(--thumb);
    height: var(--thumb);
    box-sizing: border-box;
    border: 2px solid var(--color-page-bg);
    border-radius: var(--radius-round);
    background: var(--color-button-dark);
    box-shadow: 0 0 0 1px var(--color-button-dark);
    cursor: grab;
    pointer-events: auto;
}

/* The focus ring goes on the thumb being moved, not round the whole stacked input. */
.flight-slider input[type="range"]:focus-visible {
    outline: none;
}

.flight-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

.flight-slider input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

/* Evenly spaced marks, each centred on a zero-width box, over a span inset by half a thumb:
   the same span a thumb's centre travels, so a mark sits under the thumb set to its value. */
.flight-slider-scale {
    display: flex;
    justify-content: space-between;
    margin: 0 calc(var(--thumb) / 2);
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.flight-slider-scale li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 0;
    white-space: nowrap;
}

.flight-slider-scale li::before {
    content: "";
    width: 1px;
    height: 0.3rem;
    margin-bottom: 0.125rem;
    background: var(--color-border-strong);
}

.flight-form select {
    display: block;
    min-width: 5.5rem;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    background: var(--color-input-bg);
    color: var(--color-heading);
    font-weight: 400;
}

.flight-form-field {
    margin-bottom: var(--space-4);
}

.flight-form button {
    font-weight: inherit;
}

.flight-prompt {
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    color: var(--color-heading);
    font-size: 1.0625rem;
}

.flight-results h2 {
    margin: 0 0 var(--space-4);
    font-size: 1.25rem;
}

.flight-results-note,
.flight-none {
    max-width: var(--text-width);
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.flight-card {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-top: var(--space-2);
    font-size: 0.875rem;
}

.flight-card-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.flight-card-numbers {
    color: var(--color-heading);
    font-weight: 700;
}

.flight-card-stability {
    color: var(--color-text);
}

.flight-card-outside {
    color: var(--color-heading);
    font-weight: 600;
}

/* Rule 13: the drawing takes the theme's colours, so it follows light and dark. */
.flight-path {
    flex: none;
    border-radius: var(--radius-1);
    background: var(--color-surface);
}

.flight-path-axis {
    stroke: var(--color-border-strong);
    stroke-dasharray: 2 3;
}

.flight-path-line {
    fill: none;
    stroke: var(--color-heading);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.flight-path-tee {
    fill: var(--color-heading);
}

/* Rule 16: the hero's third link, quieter than its buttons. */
@media (max-width: 48rem) {
    .flight-finder-body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A phone folds the filters into one line above the results; the line says what is set. */
    .flight-filters {
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-2);
    }

    .flight-filters summary {
        margin: 0;
        padding: var(--space-3) var(--space-4);
    }

    .flight-filters-recap {
        display: block;
        color: var(--color-muted);
        font-size: 0.875rem;
        font-weight: 400;
    }

    .flight-filters .flight-form {
        padding: 0 var(--space-4) var(--space-2);
    }

    .flight-preset-group h3 {
        flex-basis: 100%;
    }
}

.cart-feedback { flex-basis: 100%; margin: 0.5rem 0 0; font-size: 0.875rem; }
.cart-feedback:empty { display: none; }

/* Account theme controls. Keep these scoped by class so existing account markup stays stable. */
.account-theme { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border-strong); }
.account-theme [role="group"] { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.account-theme button[aria-pressed="true"] { font-weight: 700; outline: 2px solid var(--color-link); outline-offset: 2px; }