/* =============================================================================
   Hands on Synth — public ticket storefront theme
   =============================================================================

   Loaded only by resources/views/layouts/smact.blade.php, and every rule is
   scoped to `.storefront-shell` (the storefront body class). The Metronic
   administration, the mail layout and the PDF templates never see this file.

   Tokens, panel geometry, the wordmark treatment and the focus ring are taken
   from the Hands on Synth event site so both properties read as one product.
   Fonts are served from this application; nothing here contacts a third party.
   ========================================================================== */

/* --- Tilt Neon: the display identity, two static cuts ---------------------
   One weight, no italic. Nothing may ask for a bolder or slanted cut — the
   browser would synthesise it, and a faked slant on a face drawn as neon
   tubing looks broken. The lean is the font's own YROT axis, baked into its
   own cut. Licence: public/web/fonts/OFL-TiltNeon.txt                       */
@font-face {
    font-family: 'Tilt Neon';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/web/fonts/tilt-neon-upright.woff2') format('woff2');
}

@font-face {
    font-family: 'Tilt Neon Lean';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/web/fonts/tilt-neon-lean.woff2') format('woff2');
}

.storefront-shell {
    /* Ink: near-black violet, the base the neon sits on. */
    --hos-ink-950: #06030c;
    --hos-ink-900: #0b0616;
    --hos-ink-850: #120a20;
    --hos-ink-800: #180e2b;
    --hos-ink-700: #221338;
    --hos-ink-600: #2f1c4c;
    --hos-ink-500: #422a66;

    /* Accents. Pink leads, cyan signals, violet adds depth. */
    --hos-pink: #ff2d87;
    --hos-cyan: #22e0e6;
    --hos-violet: #a274ff;

    /* Status signals. Availability, warnings and errors never rely on colour
       alone — each one is paired with a label and an LED shape. */
    --hos-amber: #ffb020;
    --hos-red: #ff5c7a;

    --hos-chalk: #f6f1fb;
    --hos-mist: #b6a6cc;
    --hos-mist-dim: #9a89b5;

    --hos-display: 'Tilt Neon', 'Archivo', 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --hos-display-lean: 'Tilt Neon Lean', 'Tilt Neon', 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --hos-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Panel geometry: the chamfer that makes a surface read as hardware. */
    --hos-notch: 0.875rem;
    --hos-notch-sm: 0.5rem;
    --hos-edge: rgba(255, 45, 135, 0.5);
    --hos-panel-fill: rgba(10, 5, 20, 0.86);

    --hos-gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* =============================================================================
   1 — Shell
   ========================================================================== */

html {
    background: #06030c;
}

body.storefront-shell {
    font-family: var(--hos-sans);
    color: var(--hos-chalk);
    background: var(--hos-ink-950);
    /* `overflow-x: clip` contains stray wide children without creating a
       scroll container, so `position: sticky` keeps working inside. */
    overflow-x: clip;
    position: relative;
}

/* The Triemer shell painted two blurred radial blooms through body::before /
   ::after. They are removed rather than recoloured: full-viewport blur filters
   are expensive and the grid below carries the atmosphere instead. */
body.storefront-shell::before,
body.storefront-shell::after {
    content: none;
}

.storefront-shell .storefront-stage-noise {
    display: none;
}

/* --- Horizon grid --------------------------------------------------------
   One fixed layer, two repeating gradients, no blur and no per-element loop.
   It drifts slowly toward the horizon; the animation is paused when the tab is
   hidden and removed entirely under reduced motion.                         */
.hos-grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 60% at 50% 100%, rgba(162, 116, 255, 0.16), transparent 70%),
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(255, 45, 135, 0.09), transparent 70%);
}

.hos-grid-bg::after {
    content: '';
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -10%;
    height: 70%;
    background-image:
        repeating-linear-gradient(to right, rgba(255, 45, 135, 0.24) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(to bottom, rgba(163, 96, 255, 0.22) 0 1px, transparent 1px 64px);
    transform: perspective(340px) rotateX(74deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%, transparent);
    animation: hos-grid-drift 14s linear infinite;
    will-change: background-position;
}

@keyframes hos-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 0, 0 64px; }
}

body.hos-paused .hos-grid-bg::after {
    animation-play-state: paused;
}

.storefront-shell .storefront-header,
.storefront-shell .storefront-main,
.storefront-shell .storefront-footer,
.storefront-shell #backToTop {
    position: relative;
    z-index: 1;
}

.storefront-shell .storefront-main {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 0;
}

/* =============================================================================
   2 — Type
   ========================================================================== */

/* The shared legacy stylesheet (public/web/css/smact.css) declares
   `html, body { font-family: "Montserrat" !important }` and
   `h1 / h3 { font-family: "CormorantInfant", Serif !important; font-size: … !important }`.
   That file is shared with other storefront themes in this copied project and
   is deliberately left untouched, so the storefront scope has to answer in
   kind — this is the only place in the theme that uses !important. */
body.storefront-shell {
    font-family: var(--hos-sans) !important;
    font-size: 1rem;
}

.storefront-shell h1,
.storefront-shell h2,
.storefront-shell h3,
.storefront-shell h4,
.storefront-shell h5,
.storefront-shell h6 {
    font-family: var(--hos-display) !important;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--hos-chalk);
}

.storefront-shell h1 { font-size: clamp(1.4rem, 6vw, 2.6rem) !important; }
.storefront-shell h2 { font-size: clamp(1.15rem, 3.6vw, 1.6rem) !important; }
.storefront-shell h3 { font-size: clamp(0.98rem, 2.6vw, 1.12rem) !important; }

.storefront-shell a {
    color: var(--hos-cyan);
}

.storefront-shell .text-grey,
.storefront-shell .text-tgrey,
.storefront-shell .text-naviblue {
    color: var(--hos-mist) !important;
}

.storefront-shell .text-red {
    color: var(--hos-red) !important;
}

/* Silkscreen label: the small caps line printed on a module's front panel. */
.hos-label {
    display: block;
    font-family: var(--hos-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hos-mist);
}

.hos-muted {
    color: var(--hos-mist);
}

/* =============================================================================
   3 — Focus
   One treatment everywhere. Focus is never removed, only made deliberate.
   Clip-path cuts an outline off the element that carries it, so anything
   chamfered gets an inset ring instead.
   ========================================================================== */

.storefront-shell :focus-visible {
    outline: 2px solid var(--hos-cyan);
    outline-offset: 2px;
}

.storefront-shell .hos-clipped:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 2px var(--hos-cyan),
        0 0 12px rgba(34, 224, 230, 0.45);
}

/* =============================================================================
   4 — Panels
   A hairline neon edge, a chamfered outline and four screw heads. Two layers:
   the outer element paints the edge, the inner one the dark face inset by that
   hairline, so the cut corners keep a drawn edge instead of an open gap.
   ========================================================================== */

.hos-panel {
    position: relative;
    padding: 1px;
    background: var(--hos-edge);
    clip-path: polygon(
        var(--hos-notch) 0,
        calc(100% - var(--hos-notch)) 0,
        100% var(--hos-notch),
        100% calc(100% - var(--hos-notch)),
        calc(100% - var(--hos-notch)) 100%,
        var(--hos-notch) 100%,
        0 calc(100% - var(--hos-notch)),
        0 var(--hos-notch)
    );
}

.hos-panel--cyan   { --hos-edge: rgba(34, 224, 230, 0.45); }
.hos-panel--violet { --hos-edge: rgba(162, 116, 255, 0.45); }
.hos-panel--quiet  { --hos-edge: rgba(66, 42, 102, 0.9); }

.hos-panel__inner {
    position: relative;
    height: 100%;
    background: var(--hos-panel-fill);
    clip-path: inherit;
}

/* Four screw heads drawn with one element. */
.hos-panel__inner::before {
    content: '';
    position: absolute;
    inset: 0.5rem;
    pointer-events: none;
    z-index: 2;
    background-image:
        radial-gradient(circle, rgba(246, 241, 251, 0.45) 1.4px, transparent 1.6px),
        radial-gradient(circle, rgba(246, 241, 251, 0.45) 1.4px, transparent 1.6px),
        radial-gradient(circle, rgba(246, 241, 251, 0.45) 1.4px, transparent 1.6px),
        radial-gradient(circle, rgba(246, 241, 251, 0.45) 1.4px, transparent 1.6px);
    background-repeat: no-repeat;
    background-size: 5px 5px;
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

/* =============================================================================
   5 — Header
   ========================================================================== */

.storefront-shell .storefront-header {
    padding: 0 !important;
    border-bottom: 1px solid rgba(162, 116, 255, 0.22);
    background: rgba(6, 3, 12, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.storefront-shell .storefront-header-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: left;
}

.storefront-shell .storefront-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    text-decoration: none;
    padding: 0.25rem 0;
}

/* --- Wordmark ------------------------------------------------------------
   The Hands on Synth repository ships no logo file: the mark is typographic,
   set in the leaning cut and given its chrome gradient here. drop-shadow is
   used rather than text-shadow, which would show through the clipped
   background.                                                              */
.hos-wordmark {
    display: inline-block;
    max-width: 100%;
    font-family: var(--hos-display-lean);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.05rem, 4.2vw, 1.6rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-image: linear-gradient(180deg, #ffffff 0%, #f3d7ff 34%, #ff9ecb 54%, #a274ff 78%, #5b2fa8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 45, 135, 0.4));
}

.hos-context {
    font-family: var(--hos-sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hos-cyan);
    white-space: nowrap;
}

/* --- Cart pill -----------------------------------------------------------
   A real link to the cart, never a decorative icon. The chamfer is a
   clip-path, so focus uses the inset ring.                                  */
.hos-cart-pill {
    --hos-notch: var(--hos-notch-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    background: linear-gradient(180deg, rgba(255, 45, 135, 0.22), rgba(255, 45, 135, 0.1));
    border: 0;
    color: var(--hos-chalk) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 45, 135, 0.55);
    clip-path: polygon(
        var(--hos-notch) 0, calc(100% - var(--hos-notch)) 0, 100% var(--hos-notch),
        100% calc(100% - var(--hos-notch)), calc(100% - var(--hos-notch)) 100%,
        var(--hos-notch) 100%, 0 calc(100% - var(--hos-notch)), 0 var(--hos-notch)
    );
    transition: background 180ms ease, box-shadow 180ms ease;
}

.hos-cart-pill:hover {
    background: linear-gradient(180deg, rgba(255, 45, 135, 0.34), rgba(255, 45, 135, 0.18));
    color: #fff !important;
}

.hos-cart-pill__led {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--hos-cyan);
    box-shadow: 0 0 8px var(--hos-cyan);
    flex: none;
}

/* =============================================================================
   6 — Storefront intro and section headings
   ========================================================================== */

.hos-intro {
    padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 1.5rem);
}

.hos-intro__claim {
    font-family: var(--hos-display);
    font-size: clamp(1.4rem, 6vw, 2.6rem);
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
}

.hos-intro__claim span {
    display: block;
}

.hos-intro__claim span:first-child { color: var(--hos-pink); }
.hos-intro__claim span:last-child  { color: var(--hos-cyan); }

/* A compact waveform rule: one signal line under the claim. */
.hos-wave {
    height: 1.5rem;
    margin-top: 1rem;
    background-repeat: repeat-x;
    background-position: left center;
    background-size: 96px 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M0 12 L8 12 L12 3 L16 21 L20 7 L24 17 L28 12 L40 12 L44 6 L48 18 L52 12 L64 12 L68 9 L72 15 L76 12 L96 12' fill='none' stroke='%2322e0e6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'/%3E%3C/svg%3E");
    mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}

.hos-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: var(--hos-gap);
}

.hos-section-head h2 {
    font-size: clamp(1.15rem, 3.6vw, 1.6rem);
    margin: 0;
    white-space: nowrap;
}

/* The rule that runs out from a heading, like a panel's silkscreen divider. */
.hos-section-head::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 45, 135, 0.55), rgba(255, 45, 135, 0));
}

.hos-section-head--cyan::after {
    background: linear-gradient(to right, rgba(34, 224, 230, 0.5), rgba(34, 224, 230, 0));
}

/* =============================================================================
   7 — Product grid and ticket module cards
   ========================================================================== */

.hos-grid {
    display: grid;
    gap: var(--hos-gap);
    /* Cards never fall below a readable width and never stretch into a wide
       single column: one per row on narrow mobile, two on tablet, at most
       three on desktop, always centred. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 23rem));
    justify-content: center;
    align-items: stretch;
}

.hos-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 200ms ease, filter 200ms ease;
}

.hos-card:hover,
.hos-card:focus-within {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 26px rgba(255, 45, 135, 0.18));
}

.hos-card .hos-panel__inner {
    display: flex;
    flex-direction: column;
}

/* --- Channel strip: the label printed across the top of the module ------- */
.hos-card__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(162, 116, 255, 0.2);
    background: linear-gradient(180deg, rgba(47, 28, 76, 0.55), rgba(10, 5, 20, 0));
    min-height: 2.6rem;
}

.hos-card__where {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hos-mist);
    overflow-wrap: anywhere;
}

/* --- Availability: an LED plus a word. Never colour on its own. ---------- */
.hos-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hos-state__led {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
}

.hos-state--low { color: var(--hos-amber); }
.hos-state--low .hos-state__led {
    background: var(--hos-amber);
    box-shadow: 0 0 8px rgba(255, 176, 32, 0.8);
    animation: hos-led-breathe 2.4s ease-in-out infinite;
}

.hos-state--sold { color: var(--hos-mist); }
.hos-state--sold .hos-state__led {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hos-mist);
}

@keyframes hos-led-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

body.hos-paused .hos-state__led {
    animation-play-state: paused;
}

/* --- Image well --------------------------------------------------------- */
.hos-card__art {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--hos-ink-850);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(162, 116, 255, 0.2);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Theme-native fallback when a product has no managed image: a panel grid and
   a waveform trace, never a fabricated photograph. */
.hos-card__art--empty {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cpath d='M0 45 L30 45 L38 18 L46 72 L54 30 L62 60 L70 45 L110 45 L118 24 L126 66 L134 45 L180 45 L188 33 L196 57 L204 45 L240 45' fill='none' stroke='%23ff2d87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E"),
        repeating-linear-gradient(to right, rgba(162, 116, 255, 0.14) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(to bottom, rgba(162, 116, 255, 0.1) 0 1px, transparent 1px 28px);
    background-size: 70% auto, auto, auto;
    background-position: center, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
}

/* The name sits under the art rather than over it: a long product name would
   otherwise be clipped by the art well or bury the image it sits on. */
.hos-card__title {
    width: 100%;
    margin: 0;
    padding: 0.85rem 1rem 0;
    line-height: 1.3;
    color: var(--hos-chalk);
    overflow-wrap: anywhere;
}

.hos-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hos-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    flex: 1 1 auto;
}

/* --- Price: a readout on the module's display --------------------------- */
.hos-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    padding: 0.6rem 0.75rem;
    background: rgba(6, 3, 12, 0.75);
    box-shadow: inset 0 0 0 1px rgba(34, 224, 230, 0.28);
}

.hos-price__net {
    font-family: var(--hos-display);
    font-size: clamp(1.05rem, 3.2vw, 1.3rem);
    line-height: 1;
    color: var(--hos-cyan);
    overflow-wrap: anywhere;
}

.hos-price__gross {
    font-size: 0.76rem;
    color: var(--hos-mist);
    overflow-wrap: anywhere;
}

.hos-card__desc {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--hos-mist);
    overflow-wrap: anywhere;
}

.hos-card__desc > :last-child { margin-bottom: 0; }

.hos-card__desc--empty {
    font-style: italic;
    color: var(--hos-mist-dim);
}

/* The action rail is pushed to the bottom so purchase controls line up across
   a row without any card clipping its content. */
.hos-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(162, 116, 255, 0.2);
    background: linear-gradient(180deg, rgba(10, 5, 20, 0), rgba(47, 28, 76, 0.4));
}

.hos-card__actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    width: 100%;
}

/* The purchase control keeps its own full-width row under the stepper, so the
   label never has to break across two lines and every card's primary action
   sits in the same place. */
.hos-card__actions .hos-btn {
    flex: 1 1 100%;
    white-space: nowrap;
}

/* =============================================================================
   8 — Buttons
   ========================================================================== */

.storefront-shell .hos-btn,
.storefront-shell .btn.smact {
    --hos-notch: var(--hos-notch-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    font-family: var(--hos-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    color: var(--hos-chalk);
    background: linear-gradient(180deg, rgba(255, 45, 135, 0.9), rgba(214, 22, 106, 0.9));
    box-shadow: inset 0 0 0 1px rgba(255, 158, 203, 0.5);
    clip-path: polygon(
        var(--hos-notch) 0, calc(100% - var(--hos-notch)) 0, 100% var(--hos-notch),
        100% calc(100% - var(--hos-notch)), calc(100% - var(--hos-notch)) 100%,
        var(--hos-notch) 100%, 0 calc(100% - var(--hos-notch)), 0 var(--hos-notch)
    );
    transition: filter 180ms ease, transform 120ms ease;
}

.storefront-shell .hos-btn:hover,
.storefront-shell .btn.smact:hover {
    color: #fff;
    filter: brightness(1.14);
}

.storefront-shell .hos-btn:active,
.storefront-shell .btn.smact:active {
    transform: translateY(1px);
}

.storefront-shell .hos-btn:focus-visible,
.storefront-shell .btn.smact:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 2px var(--hos-cyan),
        0 0 12px rgba(34, 224, 230, 0.45);
}

.storefront-shell .hos-btn:disabled,
.storefront-shell .btn.smact:disabled,
.storefront-shell .hos-btn[disabled],
.storefront-shell .btn.smact[disabled] {
    background: rgba(66, 42, 102, 0.55);
    color: var(--hos-mist);
    box-shadow: inset 0 0 0 1px rgba(154, 137, 181, 0.4);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* Quiet variant: the same geometry, no fill. */
.storefront-shell .hos-btn--quiet,
.storefront-shell .btn.btn-secondary {
    background: rgba(24, 14, 43, 0.9);
    color: var(--hos-chalk);
    box-shadow: inset 0 0 0 1px rgba(162, 116, 255, 0.55);
}

.storefront-shell .hos-btn--quiet:hover,
.storefront-shell .btn.btn-secondary:hover {
    background: rgba(47, 28, 76, 0.95);
    color: #fff;
}

.storefront-shell .hos-btn--cyan {
    background: linear-gradient(180deg, rgba(34, 224, 230, 0.9), rgba(16, 168, 174, 0.9));
    color: var(--hos-ink-950);
    box-shadow: inset 0 0 0 1px rgba(180, 250, 252, 0.55);
}

/* A text-weight control for "details", so the purchase button stays the one
   obvious action on the card. */
.storefront-shell .hos-btn--ghost {
    background: none;
    color: var(--hos-cyan);
    box-shadow: inset 0 0 0 1px rgba(34, 224, 230, 0.4);
}

.storefront-shell .hos-btn--ghost:hover {
    background: rgba(34, 224, 230, 0.12);
    color: var(--hos-cyan);
}

.storefront-shell #backToTop {
    --hos-notch: var(--hos-notch-sm);
    min-width: 2.75rem;
    min-height: 2.75rem;
    background: linear-gradient(180deg, rgba(34, 224, 230, 0.92), rgba(16, 168, 174, 0.92));
    color: var(--hos-ink-950) !important;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(180, 250, 252, 0.6);
    clip-path: polygon(
        var(--hos-notch) 0, calc(100% - var(--hos-notch)) 0, 100% var(--hos-notch),
        100% calc(100% - var(--hos-notch)), calc(100% - var(--hos-notch)) 100%,
        var(--hos-notch) 100%, 0 calc(100% - var(--hos-notch)), 0 var(--hos-notch)
    );
}

/* =============================================================================
   9 — Quantity stepper
   The jQuery plugin injects .qty-btn elements around the number input; only
   their appearance changes here. Both controls clear 44 x 44 CSS pixels.
   ========================================================================== */

.storefront-shell .numberstyle-qty {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    /* the legacy stylesheet reserves `min-width: 175px` here, which left a dead
       strip of panel next to the "+" control; the stepper owns its own box */
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 0;
    background: rgba(6, 3, 12, 0.8);
    box-shadow: inset 0 0 0 1px rgba(162, 116, 255, 0.45);
}

.storefront-shell .numberstyle-qty .qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: rgba(47, 28, 76, 0.75);
    color: var(--hos-chalk);
    font-family: var(--hos-sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background 150ms ease, color 150ms ease;
}

.storefront-shell .numberstyle-qty .qty-btn:hover {
    background: rgba(255, 45, 135, 0.28);
    color: #fff;
}

.storefront-shell .numberstyle-qty .qty-btn.disabled {
    color: var(--hos-mist-dim);
    background: rgba(24, 14, 43, 0.75);
    cursor: not-allowed;
}

.storefront-shell .numberstyle-qty input,
.storefront-shell input.numberstyle {
    width: 3.25rem;
    min-height: 2.75rem;
    padding: 0 0.25rem;
    text-align: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--hos-chalk);
    font-family: var(--hos-sans);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: none;
    -moz-appearance: textfield;
}

.storefront-shell .numberstyle-qty input:focus,
.storefront-shell input.numberstyle:focus {
    background: rgba(34, 224, 230, 0.1);
    color: var(--hos-chalk);
    box-shadow: none;
    outline: 2px solid var(--hos-cyan);
    outline-offset: -2px;
}

.storefront-shell .numberstyle-qty input::-webkit-outer-spin-button,
.storefront-shell .numberstyle-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.storefront-shell .numberstyle-qty input:disabled {
    color: var(--hos-mist-dim);
}

/* On a product card the stepper takes a row of its own, directly above the
   purchase button, so it is stretched to the same full inner width instead of
   sitting content-sized against the panel edge. Three tracks — two equal outer
   segments for the buttons and a slightly wider centre for the value — each
   with a 44 px floor, so the hit areas hold their size on the narrowest card.
   Scoped to the card rail: the cart page reuses .numberstyle-qty inline next to
   its own controls and keeps the content-sized stepper. */
.storefront-shell .hos-card__actions .numberstyle-qty {
    display: grid;
    grid-template-columns:
        minmax(2.75rem, 1fr) minmax(3.25rem, 1.4fr) minmax(2.75rem, 1fr);
    flex: 1 1 100%;
}

.storefront-shell .hos-card__actions .numberstyle-qty .qty-btn,
.storefront-shell .hos-card__actions .numberstyle-qty input {
    width: auto;
    min-width: 0;
}

/* Stretched that wide the fills alone read as one bar, so each button keeps a
   hairline against the value — the same edge colour the stepper is framed in. */
.storefront-shell .hos-card__actions .numberstyle-qty .qty-rem {
    box-shadow: inset -1px 0 0 rgba(162, 116, 255, 0.45);
}

.storefront-shell .hos-card__actions .numberstyle-qty .qty-add {
    box-shadow: inset 1px 0 0 rgba(162, 116, 255, 0.45);
}

/* =============================================================================
   10 — Forms
   ========================================================================== */

.storefront-shell .form-control,
.storefront-shell input[type='text'],
.storefront-shell input[type='email'],
.storefront-shell input[type='number'],
.storefront-shell textarea,
.storefront-shell select {
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-radius: 0;
    background: rgba(6, 3, 12, 0.8);
    color: var(--hos-chalk);
    font-family: var(--hos-sans);
    box-shadow: inset 0 0 0 1px rgba(162, 116, 255, 0.45);
}

.storefront-shell .form-control::placeholder { color: var(--hos-mist-dim); }

.storefront-shell .form-control:focus,
.storefront-shell input[type='text']:focus,
.storefront-shell input[type='email']:focus,
.storefront-shell textarea:focus {
    background: rgba(6, 3, 12, 0.95);
    color: var(--hos-chalk);
    box-shadow: inset 0 0 0 1px var(--hos-cyan);
    outline: 2px solid var(--hos-cyan);
    outline-offset: 1px;
}

.storefront-shell .form-control:user-invalid {
    box-shadow: inset 0 0 0 1px var(--hos-red);
}

.hos-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hos-field label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hos-mist);
}

.hos-field__opt {
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
    color: var(--hos-mist-dim);
}

/* =============================================================================
   11 — Status signals
   Cyan informs, amber warns, red fails, pink calls to action. Each carries a
   label as well as a colour.
   ========================================================================== */

.hos-note {
    --hos-note-edge: var(--hos-cyan);
    --hos-note-ring: rgba(34, 224, 230, 0.5);
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: rgba(10, 5, 20, 0.9);
    box-shadow: inset 0 0 0 1px var(--hos-note-ring);
    color: var(--hos-chalk);
    font-size: 0.9rem;
    line-height: 1.5;
}

.hos-note--warn  { --hos-note-edge: var(--hos-amber); --hos-note-ring: rgba(255, 176, 32, 0.5); }
.hos-note--error { --hos-note-edge: var(--hos-red);   --hos-note-ring: rgba(255, 92, 122, 0.55); }
.hos-note--ok    { --hos-note-edge: var(--hos-cyan);  --hos-note-ring: rgba(34, 224, 230, 0.5); }

/* The status word carries a lit indicator, so the state is legible without
   relying on the tint of the panel. */
.hos-note__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hos-note-edge);
    padding-top: 0.2rem;
}

.hos-note__tag::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--hos-note-edge);
    box-shadow: 0 0 8px var(--hos-note-edge);
}

.hos-note ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }

/* The legacy flash container keeps its id and class so nothing that targets
   either of them breaks; only its skin changes.
   `#flash.fde` in the legacy stylesheet fades the message out for good after
   ten seconds — and under reduced motion, where animation durations collapse,
   it would vanish immediately. A status message must not be hidden by
   animation, so the fade is cancelled here and the notice simply stays. */
.storefront-shell #flash {
    position: static;
    margin: 0 0 var(--hos-gap);
    padding: 0;
    background: none !important;
    color: var(--hos-chalk);
    animation: none !important;
    opacity: 1 !important;
}

.storefront-shell #flash .container {
    padding-left: 0;
    padding-right: 0;
}

.storefront-shell .storefront-flash {
    background: rgba(10, 5, 20, 0.9);
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(34, 224, 230, 0.5);
    padding: 0.8rem 1rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.storefront-shell .storefront-flash-copy {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    color: var(--hos-chalk);
    font-weight: 500;
    text-align: left;
}

.storefront-shell .storefront-flash-copy::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--hos-cyan);
    box-shadow: 0 0 8px var(--hos-cyan);
}

/* =============================================================================
   12 — Details drawer
   ========================================================================== */

.storefront-shell .drawer {
    background: var(--hos-ink-900);
    color: var(--hos-chalk);
    border-left: 1px solid rgba(255, 45, 135, 0.4);
    z-index: 1080;
}

.storefront-shell .drawer:not(.open) {
    box-shadow: none;
}

.storefront-shell .drawer.open {
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
}

.storefront-shell .drawer-content {
    background: var(--hos-ink-900);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.storefront-shell .drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* keeps the last line clear of mobile browser chrome */
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    color: var(--hos-mist);
    line-height: 1.65;
}

.storefront-shell .drawer-body h1,
.storefront-shell .drawer-body h2,
.storefront-shell .drawer-body h3 {
    color: var(--hos-chalk);
}

.storefront-shell .drawer-body img,
.storefront-shell .drawer-body .event-image {
    max-width: 100%;
    height: auto;
}

.storefront-shell .drawer-close {
    --hos-notch: var(--hos-notch-sm);
    position: sticky;
    top: 0;
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.5rem 0.5rem 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(47, 28, 76, 0.95);
    color: var(--hos-chalk);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(162, 116, 255, 0.55);
    clip-path: polygon(
        var(--hos-notch) 0, calc(100% - var(--hos-notch)) 0, 100% var(--hos-notch),
        100% calc(100% - var(--hos-notch)), calc(100% - var(--hos-notch)) 100%,
        var(--hos-notch) 100%, 0 calc(100% - var(--hos-notch)), 0 var(--hos-notch)
    );
}

.storefront-shell .drawer-close:hover {
    background: rgba(255, 45, 135, 0.4);
    color: #fff;
}

/* =============================================================================
   13 — Seat plan modal
   The renderer, its coordinates, ids and payload are untouched; this only
   gives the seats a visible skin, which the project previously had none of.
   ========================================================================== */

.storefront-shell .modal-content {
    background: var(--hos-ink-900);
    color: var(--hos-chalk);
    border: 1px solid rgba(255, 45, 135, 0.35);
    border-radius: 0;
}

.storefront-shell .modal-header,
.storefront-shell .modal-footer {
    border-color: rgba(162, 116, 255, 0.25);
    background: rgba(10, 5, 20, 0.95);
}

.storefront-shell .modal-title {
    font-family: var(--hos-display);
}

/* Bootstrap ships this at 1em square; a fullscreen modal's only close control
   needs a full touch target. */
.storefront-shell .btn-close {
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex: none;
    padding: 0;
    margin: 0;
    background-size: 1rem 1rem;
    background-position: center;
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.85;
}

.storefront-shell .btn-close:hover {
    opacity: 1;
}

.storefront-shell .modal-footer.sticky-footer {
    position: sticky;
    bottom: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* The seat plan keeps its own light background where an event ships an SVG
   plan, so the plan artwork stays legible; the states below work on both. */
.storefront-shell .modal-body {
    background: var(--hos-ink-950);
}

.storefront-shell .seat {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--hos-chalk);
    background: rgba(34, 224, 230, 0.16);
    box-shadow: inset 0 0 0 1px var(--hos-cyan);
    cursor: pointer;
    overflow: hidden;
    transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.storefront-shell .seat:hover {
    background: rgba(34, 224, 230, 0.34);
    transform: scale(1.06);
}

/* Selected: filled, plus a check glyph so selection is not colour-only. */
.storefront-shell .seat.selected {
    background: var(--hos-pink);
    color: #fff;
    box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(255, 45, 135, 0.8);
}

.storefront-shell .seat.selected::after {
    content: '✓';
    position: absolute;
    right: 2px;
    top: 1px;
    font-size: 0.55rem;
    line-height: 1;
}

/* Reserved: hatched. Sold: crossed out. Both carry a shape, not just a hue. */
/* Unavailable seats keep their name readable: the hatching and the cross are
   held back behind a halo so the label never competes with the pattern. */
.storefront-shell .seat.reserved {
    cursor: not-allowed;
    color: #1b1000;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(255, 226, 176, 0.95), 0 0 6px rgba(255, 226, 176, 0.8);
    background:
        repeating-linear-gradient(45deg, rgba(255, 176, 32, 0.85) 0 3px, rgba(255, 176, 32, 0.3) 3px 6px);
    box-shadow: inset 0 0 0 1px var(--hos-amber);
    transform: none;
}

.storefront-shell .seat.sold {
    cursor: not-allowed;
    color: var(--hos-mist);
    text-shadow: 0 0 3px rgba(6, 3, 12, 0.95), 0 0 6px rgba(6, 3, 12, 0.9);
    background: rgba(66, 42, 102, 0.6);
    box-shadow: inset 0 0 0 1px rgba(154, 137, 181, 0.5);
    transform: none;
}

.storefront-shell .seat.sold::after,
.storefront-shell .seat.sold::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    height: 1px;
    background: rgba(154, 137, 181, 0.75);
}

.storefront-shell .seat.sold::before { transform: rotate(45deg); }
.storefront-shell .seat.sold::after  { transform: rotate(-45deg); }

.storefront-shell .seat.sold:hover,
.storefront-shell .seat.reserved:hover {
    background-color: inherit;
}

.storefront-shell .seat:focus-visible {
    outline: 2px solid var(--hos-cyan);
    outline-offset: 2px;
    z-index: 3;
}

/* Legend: names every seat state in words next to its swatch. */
.hos-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    padding: 0.65rem 1rem;
    background: rgba(10, 5, 20, 0.95);
    border-bottom: 1px solid rgba(162, 116, 255, 0.25);
    font-size: 0.72rem;
    color: var(--hos-mist);
}

.hos-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }

.hos-legend__swatch {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    background: rgba(34, 224, 230, 0.16);
    box-shadow: inset 0 0 0 1px var(--hos-cyan);
}

.hos-legend__swatch--selected {
    background: var(--hos-pink);
    box-shadow: inset 0 0 0 2px #fff;
}

.hos-legend__swatch--reserved {
    background: repeating-linear-gradient(45deg, rgba(255, 176, 32, 0.85) 0 3px, rgba(255, 176, 32, 0.3) 3px 6px);
    box-shadow: inset 0 0 0 1px var(--hos-amber);
}

.hos-legend__swatch--sold {
    background: rgba(66, 42, 102, 0.6);
    box-shadow: inset 0 0 0 1px rgba(154, 137, 181, 0.5);
}

/* =============================================================================
   14 — Cart, checkout and summary
   ========================================================================== */

.hos-doc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 var(--hos-gap);
}

.hos-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--hos-mist);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.hos-back:hover { color: var(--hos-cyan); }

.hos-lines { display: flex; flex-direction: column; gap: 0.75rem; }

.hos-line {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    grid-template-columns: 1fr;
}

.hos-line__name {
    font-family: var(--hos-display);
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--hos-chalk);
    overflow-wrap: anywhere;
}

.hos-line__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.hos-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 5.5rem;
}

.hos-figure__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hos-mist-dim);
}

.hos-figure__value {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--hos-chalk);
    white-space: nowrap;
}

.hos-line__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.hos-line__controls form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

/* The legacy stylesheets hide the cart's save control (`.hidden-sub`) until the
   jQuery stepper reveals it. That left the control unreachable for anyone who
   typed a quantity or used the keyboard rather than clicking + / -, so it stays
   visible here. The class is kept so the existing `.show()` calls remain valid. */
.storefront-shell .hidden-sub {
    display: inline-flex;
}

/* Totals module: the summed readout at the end of the rack. */
.hos-totals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.hos-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--hos-mist);
}

.hos-totals__row--grand {
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(162, 116, 255, 0.3);
    font-family: var(--hos-display);
    font-size: 1.15rem;
    color: var(--hos-chalk);
}

.hos-totals__row--grand .hos-totals__value { color: var(--hos-cyan); }

.hos-totals__value { font-weight: 700; white-space: nowrap; text-align: right; }

.hos-stack { display: flex; flex-direction: column; gap: var(--hos-gap); }

/* The cart-adjust action closes the summary column. While the checkout is one
   stacked column the customer-data panel follows immediately after it, with no
   grid gap left to separate them — so here the action is centred over the
   column and carries the separation itself. --hos-gap alone bottoms out at 1rem
   on a narrow phone, which is not enough to read as a break, hence the floor.
   The two-column breakpoint below restores the column flow. */
.hos-cart-adjust {
    text-align: center;
    margin-bottom: max(var(--hos-gap), 1.5rem);
}

.hos-form-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}

.hos-address {
    font-style: normal;
    line-height: 1.7;
    color: var(--hos-mist);
}

.hos-address strong { color: var(--hos-chalk); }

/* The PayPal button block sits on its own light plate: the provider renders
   its own branded iframe and must not be restyled. */
.hos-payment {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hos-payment__plate {
    background: #ffffff;
    padding: 0.75rem;
    min-height: 3.5rem;
}

/* =============================================================================
   15 — Donation options
   ========================================================================== */

.storefront-shell .donation-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border: 0;
    padding: 0;
}

.storefront-shell .donation-option { margin: 0; cursor: pointer; }

.storefront-shell .donation-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 5rem;
    padding: 0.9rem 1.1rem;
    background: rgba(10, 5, 20, 0.9);
    box-shadow: inset 0 0 0 1px rgba(162, 116, 255, 0.45);
    color: var(--hos-chalk);
    transition: box-shadow 160ms ease, background 160ms ease;
}

.storefront-shell .donation-option:hover .donation-box {
    box-shadow: inset 0 0 0 1px var(--hos-cyan);
}

.storefront-shell .donation-radio { position: absolute; opacity: 0; pointer-events: none; }

.storefront-shell .donation-radio:checked + .donation-box {
    background: rgba(255, 45, 135, 0.16);
    box-shadow: inset 0 0 0 2px var(--hos-pink);
}

.storefront-shell .donation-radio:focus-visible + .donation-box {
    outline: 2px solid var(--hos-cyan);
    outline-offset: 2px;
}

.storefront-shell .form__label-name { font-weight: 700; }
.storefront-shell .form__label-text { color: var(--hos-cyan); font-weight: 700; }

/* =============================================================================
   16 — Long-form legal prose
   ========================================================================== */

.hos-prose { color: var(--hos-mist); line-height: 1.75; overflow-wrap: anywhere; }

.hos-prose h1,
.hos-prose h2,
.hos-prose h3,
.hos-prose h4 {
    color: var(--hos-chalk);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}

.hos-prose h1:first-child,
.hos-prose h2:first-child { margin-top: 0; }

.hos-prose a { color: var(--hos-cyan); }
.hos-prose table { width: 100%; }
.hos-prose img { max-width: 100%; height: auto; }

/* =============================================================================
   17 — Footer
   ========================================================================== */

.storefront-shell .storefront-footer {
    margin-top: auto;
    padding-top: 0 !important;
    border-top: 1px solid rgba(162, 116, 255, 0.25);
    background: rgba(6, 3, 12, 0.92);
}

.storefront-shell .storefront-footer .container {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.hos-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
}

.storefront-shell .storefront-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    color: var(--hos-mist);
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 160ms ease;
}

.storefront-shell .storefront-footer-link:hover,
.storefront-shell .storefront-footer-link:focus-visible {
    color: var(--hos-cyan);
}

.storefront-shell .storefront-footer-copy {
    color: var(--hos-mist-dim);
    border-top: 1px solid rgba(162, 116, 255, 0.18) !important;
    padding-top: 1rem;
}

.hos-seller {
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--hos-mist-dim);
}

/* =============================================================================
   18 — Utilities
   ========================================================================== */

.hos-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hos-empty {
    padding: clamp(1.75rem, 6vw, 3rem) 1.25rem;
    text-align: center;
    color: var(--hos-mist);
}

.hos-empty h2 { margin-bottom: 0.5rem; }

/* =============================================================================
   19 — Breakpoints
   ========================================================================== */

@media (min-width: 576px) {
    .hos-line {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .hos-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hos-form-grid .hos-field--wide { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
    .hos-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hos-form-grid .hos-field--3 { grid-column: span 3; }
    .hos-form-grid .hos-field--2 { grid-column: span 2; }
    .hos-form-grid .hos-field--4 { grid-column: span 4; }
    .hos-form-grid .hos-field--wide { grid-column: 1 / -1; }

    .hos-checkout-cols {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        gap: var(--hos-gap);
        align-items: start;
    }

    .hos-checkout-cols__aside { position: sticky; top: 5.5rem; }

    /* Two columns again: the grid gap separates the panels, so the action goes
       back to sitting at the start of the summary column with no extra space. */
    .hos-cart-adjust { text-align: start; margin-bottom: 0; }
}

/* =============================================================================
   20 — Reduced motion
   A complete static design: nothing moves, everything still reads.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .storefront-shell *,
    .storefront-shell *::before,
    .storefront-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hos-grid-bg::after { animation: none; }

    .hos-card:hover,
    .hos-card:focus-within,
    .storefront-shell .seat:hover,
    .storefront-shell .hos-btn:active,
    .storefront-shell .btn.smact:active {
        transform: none;
    }
}