/*
 * Sticky's Speed Shop — site-wide styles.
 * No preprocessor: plain CSS with custom properties.
 *
 * Palette below is read off phone photos of the live dev site (this
 * sandbox cannot reach dev.stickysspeedshop.co.uk to extract exact hex
 * values or real photography — see DECISIONS.md, Step 3). Swap the
 * --sss-* values here for exact brand hex codes and add real imagery to
 * public/images/ when available; the rest of the site inherits from
 * these custom properties and the Bootstrap primary override.
 */

:root {
    --sss-purple: #7c3aed;
    --sss-purple-dark: #5b21b6;
    --sss-pink: #ec1da6;
    --sss-pink-dark: #b0147c;
    --sss-yellow: #ccff00;
    --sss-yellow-dark: #b9e702;
    --sss-ink: #0d0d0d;
    --sss-charcoal: #171717;
    --sss-paper: #ffffff;
    --sss-page-bg: #fbe1f0; /* the page background; --sss-paper stays white for cards and panels */
    --sss-muted: #6c757d;
    --sss-line: rgba(255, 255, 255, .14);

    --sss-font-display: "Bebas Neue", Impact, sans-serif;
    --sss-font-script: "Kaushan Script", cursive;
    --sss-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Retheme Bootstrap's primary to the brand purple everywhere it reads
       these two tokens (bg-primary, text-primary, border-primary, form
       focus rings, etc.). Components with their own baked-in --bs-btn-*
       custom properties (buttons, below) need overriding separately. */
    --bs-primary: var(--sss-purple);
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: var(--sss-purple);
    --bs-link-color-rgb: 124, 58, 237;
    --bs-link-hover-color: var(--sss-purple-dark);
    --bs-link-hover-color-rgb: 91, 33, 182;
}

html {
    scroll-behavior: smooth;
    overflow-anchor: none;
    background-color: var(--sss-ink);
    overscroll-behavior-y: none;
}

body {
    font-family: var(--sss-font-body);
    color: var(--sss-ink);
    background-color: color-mix(in srgb, var(--sss-purple) 10%, white);
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    isolation: isolate;
}
#main-content {
    flex: 1 0 auto;
}

/* Home page load-in: holds on public/images/stickys-speed-shop-glue.jpg
   for 2s (see the script pushed from home.blade.php) then fades out. */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sss-ink);
    opacity: 1;
    transition: opacity .6s ease;
}
.splash-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.splash-screen-img {
    width: min(50vw, 320px);
    height: auto;
    border-radius: 50%;
}

.maintenance-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--sss-ink);
    text-align: center;
}
.maintenance-screen-inner {
    width: 100%;
    max-width: 36rem;
    margin: auto;
}
.maintenance-screen .splash-screen-logo {
    display: block;
    width: 100%;
    max-width: 28rem;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 575.98px) {
    .maintenance-screen .splash-screen-img {
        width: min(55vw, 14rem);
    }
    .maintenance-screen .lead {
        font-size: 1.05rem;
    }
    .maintenance-screen .btn {
        width: 100%;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .maintenance-screen .splash-screen-img {
        width: 7rem;
    }
}
.maintenance-screen-script {
    font-family: var(--sss-font-script);
    font-size: 1.5rem;
    color: var(--sss-yellow);
}

body > footer {
    flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: var(--sss-font-display);
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
}

.btn-primary {
    --bs-btn-bg: var(--sss-purple);
    --bs-btn-border-color: var(--sss-purple);
    --bs-btn-hover-bg: var(--sss-purple-dark);
    --bs-btn-hover-border-color: var(--sss-purple-dark);
    --bs-btn-active-bg: var(--sss-purple-dark);
    --bs-btn-active-border-color: var(--sss-purple-dark);
    --bs-btn-disabled-bg: var(--sss-purple);
    --bs-btn-disabled-border-color: var(--sss-purple);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    font-family: var(--sss-font-display);
    letter-spacing: .05em;
}

.pagination {
    --bs-pagination-color: var(--sss-pink);
    --bs-pagination-hover-color: var(--sss-pink-dark);
    --bs-pagination-focus-color: var(--sss-pink-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(236, 29, 166, .25);
    --bs-pagination-active-bg: var(--sss-pink);
    --bs-pagination-active-border-color: var(--sss-pink);
}

.btn-outline-primary {
    --bs-btn-color: var(--sss-purple);
    --bs-btn-border-color: var(--sss-purple);
    --bs-btn-hover-bg: var(--sss-purple);
    --bs-btn-hover-border-color: var(--sss-purple);
    --bs-btn-active-bg: var(--sss-purple);
    --bs-btn-active-border-color: var(--sss-purple);
    font-family: var(--sss-font-display);
    letter-spacing: .05em;
}

.btn-pink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sss-pink);
    --bs-btn-border-color: var(--sss-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sss-pink-dark);
    --bs-btn-hover-border-color: var(--sss-pink-dark);
    --bs-btn-active-bg: var(--sss-pink-dark);
    --bs-btn-active-border-color: var(--sss-pink-dark);
    font-family: var(--sss-font-display);
    letter-spacing: .05em;
}

.btn-outline-light,
.btn-outline-dark {
    font-family: var(--sss-font-display);
    letter-spacing: .05em;
}

/* Bebas Neue's glyphs sit high in their line box, so shift the text down
   2px on display-font buttons. The 2px moves from bottom padding to top,
   leaving each button's overall height unchanged. */
.btn-primary,
.btn-outline-primary,
.btn-pink,
.btn-outline-light,
.btn-outline-dark,
.hero-carousel-cta .btn {
    padding-top: calc(var(--bs-btn-padding-y) + 2px);
    padding-bottom: calc(var(--bs-btn-padding-y) - 2px);
}

.text-pink { color: var(--sss-pink) !important; }
.bg-ink { background-color: var(--sss-ink) !important; }
.bg-pink { background-color: var(--sss-pink) !important; color: #fff; }

.section-dark { background: var(--sss-ink); color: #fff; }
.section-dark--machines {
    background-image: radial-gradient(circle at 75% 35%, rgba(43, 39, 41, .85) 0%, rgba(10, 10, 10, .9) 60%),
                      url('/images/background-machines.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
}
.section-light { background: var(--sss-paper); color: var(--sss-ink); }
.section-pink { background: var(--sss-pink); color: var(--sss-ink); }
/* The Shop band: a leopard-print tile at 10% opacity behind the content. A
   pseudo-element, since background images can't have their own opacity.
   Multiply drops the tile's white so only the spots tint the pink. */
.section-shop { position: relative; isolation: isolate; }
.section-shop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/background-leopard.png') repeat center top / 357px auto;
    opacity: .05;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* The Heroes band: a zebra-print tile at 5% opacity, done the same way. */
.section-heroes { position: relative; isolation: isolate; }
.section-heroes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/background-zebra.png') repeat center top / 347px auto;
    opacity: .05;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* The News band: a cracked-earth tile at 5% opacity, done the same way. */
.section-news { position: relative; isolation: isolate; }
.section-news::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/background-cracks.png') repeat center top / 386px auto;
    opacity: .05;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* Public site background: the pink zebra pinned to the viewport and scaled
   with cover, so it always fills the screen without distorting its aspect
   ratio. Drawn on a fixed pseudo-element rather than with
   background-attachment: fixed, which iOS Safari ignores. body's own
   background must stay transparent or it would paint over the layer. */
body.zebra-page {
    background-color: transparent;
    /* How much white is laid over the zebra: 0 shows it at full
       strength, 1 hides it completely (e.g. .5 = half faded). */
    --zebra-overlay-opacity: 0.5;
}
body.zebra-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, var(--zebra-overlay-opacity)), rgba(255, 255, 255, var(--zebra-overlay-opacity))),
        var(--sss-paper) url('../images/zebra-pink.png') center / cover no-repeat;
}
/* Light sections that let the page zebra show through. */
.zebra-pink { background: transparent; }
.py-section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }

/* Header: tall with a large logo, shrinks smoothly on scroll.
   position: fixed (not sticky) is deliberate: a sticky header's own box
   still occupies space in normal document flow, so shrinking it while
   scrolling shortens the page, which makes the browser clamp scrollY back
   down, which un-shrinks the header, which lengthens the page again — a
   feedback loop that flickers/snaps the scroll position, worst on short
   pages where the ~150px shrink is a big fraction of the scrollable
   distance. Taking it out of flow entirely (fixed) means its size can
   never affect page height. .site-header-spacer below reserves the
   equivalent space using the same classes/vars at their unshrunk default. */
.site-header {
    --shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(8, 3, 14, .96);
    isolation: isolate;
    border-bottom: 1px solid transparent;
    overflow-anchor: none;
    transition: box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
    transform: translateZ(0);
}
.site-header .navbar {
    padding-top: calc(1.5rem - .9rem * var(--shrink));
    padding-bottom: calc(1.5rem - .9rem * var(--shrink));
    contain: layout style;
}
.site-header.is-scrolled { border-color: var(--sss-line); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

.site-header-spacer {
    visibility: hidden;
    pointer-events: none;
}
.site-header-spacer .navbar { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* The logo is sized by height only (width follows from its aspect ratio),
   so the lockup must never be squeezed by the rest of the navbar — a
   narrower box would cap the width while the height stayed put. */
.brand-lockup {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    text-decoration: none;
}
.brand-logo {
    height: calc(200px - 150px * var(--shrink, 0));
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.navbar-toggler {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
/* Bootstrap draws the bars as an SVG background with a fixed stroke, so
   the pink (--sss-pink, #ec1da6) is repeated here. */
.navbar-dark .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ec1da6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler-text {
    color: var(--sss-pink);
    font-family: var(--sss-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1;
    position: relative;
    top: 2px;
}

.navbar-dark .nav-link {
    color: var(--sss-pink);
    font-family: var(--sss-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1.425rem;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link.active {
    color: #fff;
}

@media (min-width: 1200px) {
    .site-header #mainNav {
        flex-grow: 1;
    }
    /* Logo, the four links and the button/social group read as six evenly
       spaced sections, scrolled or not. space-evenly puts equal free space
       around each link, and the inline padding matches the list's gap so
       the logo→first link and last link→buttons spacing equals the spacing
       between links. */
    .site-header .navbar-nav {
        justify-content: space-evenly;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* Twice the normal size at the top of the page, easing back to it as
       the header shrinks on scroll (--shrink, set by site.js). The "twice"
       itself scales down towards normal on smaller laptops so the links,
       logo and buttons still fit on one row. */
    .site-header .navbar-nav .nav-link {
        --nav-link-max: clamp(2rem, 3.4vw - .8rem, 2.85rem);
        font-size: calc(var(--nav-link-max) - (var(--nav-link-max) - 1.425rem) * var(--shrink));
    }
}
.nav-icon-link {
    color: rgba(255, 255, 255, .85);
    font-size: 1.2rem;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-icon-link:hover { color: #fff; }
/* Instagram in the header: a pink nav link like Contact, with the icon at
   the same height as the link text beside it. */
.navbar-dark .nav-link-icon { line-height: 1; }
/* Capital letters are only about 0.7em tall, so the glyph is scaled to
   match their height, and nudged down onto the same baseline. */
.navbar-dark .nav-link-icon i {
    display: block;
    line-height: 1;
    font-size: .70em;
    transform: translateY(.46em);
}

/* Below xl (offcanvas nav), the basket/Instagram icons drop to their own
   row under the auth buttons instead of squeezing onto the same line. */
.navbar-icon-row { width: 100%; }
@media (min-width: 1200px) {
    .navbar-icon-row { width: auto; }
}
/* The copy shown in the header bar below xl stays on one line with the
   buttons, beside the menu toggle. */
.navbar-header-actions .navbar-icon-row { width: auto; }

.navbar-account-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* Under 460px there's no room beside the logo for the account buttons
   (three of them for a logged-in admin), so the header bar keeps just the
   icons; the buttons are still in the offcanvas menu. */
@media (max-width: 459.98px) {
    .navbar-header-actions .navbar-account-buttons { display: none; }
}

.navbar-offcanvas { color: #fff; }
.navbar-offcanvas .offcanvas-title { font-family: var(--sss-font-display); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1199.98px) {
    .navbar-offcanvas {
        background: var(--sss-ink);
        max-width: 300px;
        height: 100vh;
        height: 100dvh;
    }
    .navbar-offcanvas .navbar-nav { gap: .5rem; }
    .navbar-offcanvas .nav-link { padding: .5rem 0; }

    /* Matches .site-header.is-scrolled's compact logo position, so the
       offcanvas logo lines up with the header logo behind it once scrolled. */
    .navbar-offcanvas .offcanvas-header {
        padding: .6rem .75rem;
        align-items: center;
    }
    .navbar-offcanvas .offcanvas-brand { margin-right: auto; }
    .navbar-offcanvas .offcanvas-brand .brand-logo { height: 50px; }
}
.cart-badge {
    position: absolute;
    top: -.4rem;
    right: -.6rem;
    font-size: .6rem;
    padding: .15em .4em;
}

/* Hero */
/* The hero and the Shop / Machines / Heroes bands share one minimum height:
   a feature block (22rem) plus the bands' own top and bottom padding. */
:root { --band-block-h: 22rem; }
/* The SSS Machines band sets the height: its photo (1024x701) fills half the
   container's width, so the block is that photo's height, never under 22rem.
   Half of Bootstrap's container content width (936 / 1116 / 1296px at
   lg / xl / xxl) x 701/1024. */
@media (min-width: 1200px) { :root { --band-block-h: 382px; } }
@media (min-width: 1400px) { :root { --band-block-h: 443.6px; } }
.hero {
    min-height: calc(var(--band-block-h) + 2 * clamp(4rem, 8vw, 7rem));
    display: flex;
    align-items: center;
    position: relative;
    color: #fff;
    background: radial-gradient(circle at 75% 35%, rgba(43, 39, 41, .85) 0%, rgba(10, 10, 10, .9) 60%),
                url('/images/header-home.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(124, 58, 237, .25), transparent 55%),
                radial-gradient(circle at 15% 85%, rgba(236, 29, 166, .18), transparent 50%);
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; display: flex; align-items: center; }
/* .hero-inner is itself a flex container (for vertical centering), which
   makes .row a flex ITEM of it rather than just a flex container of its
   own columns. Without a definite width, .row's flex-basis falls back to
   its content size — and the carousel's max-content track inflates that,
   which then inflates every column's percentage width along with it. */
.hero-inner .row { width: 100%; }
.hero h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
.hero h1 .accent { color: var(--sss-pink); }
.hero-title-img { max-width: 100%; width: 42rem; height: auto; }
.hero-lead { max-width: 42rem; color: rgba(255, 255, 255, .78); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

/* Hero carousel: an auto-scrolling filmstrip of public/images/carousel/*
   (read dynamically server-side, nothing hardcoded here). The track's
   image list is duplicated once in the markup and the keyframe travels
   exactly -50% of the track's width, so the loop point is seamless. */
.hero-inner .col-lg-5 {
    /* Without this, the marquee track's width: max-content (below)
       bubbles up through the flex column and forces it wider than the
       grid allows. */
    min-width: 0;
}
.hero-carousel {
    height: 40vh;
    min-width: 0;
    overflow: hidden;
    /* Fades out at all four edges: a left/right gradient and a top/bottom
       one, intersected so each edge fades independently. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}
.hero-carousel-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    gap: 1rem;
    animation: hero-carousel-scroll 32s linear infinite;
}
/* Only the pause button stops the filmstrip - hovering or tapping an image doesn't. */
.hero-carousel.is-paused .hero-carousel-track { animation-play-state: paused; }
.hero-carousel-wrap { position: relative; }
/* Inside the edge fade-out, so it isn't masked away. */
.hero-carousel-toggle {
    position: absolute;
    left: 14%;
    bottom: 14%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 10, 10, .65);
    color: var(--sss-pink);
    font-size: 1.25rem;
    line-height: 1;
}
.hero-carousel-toggle:hover,
.hero-carousel-toggle:focus-visible { color: #fff; }
.hero-carousel-toggle:focus-visible { outline: 2px solid var(--sss-pink); outline-offset: 2px; }
.hero-carousel-item {
    position: relative;
    height: 96%;
    flex-shrink: 0;
    margin: 0;
}
.hero-carousel-img {
    height: 100%;
    width: auto;
    display: block;
    border-radius: .5rem;
    object-fit: cover;
}
.hero-carousel-credit {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(10, 10, 10, .65);
    color: var(--sss-pink);
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.4;
}
.hero-carousel-cta { margin-top: .25rem; }
.hero-carousel-cta .btn {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-color: var(--sss-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    font-family: var(--sss-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.2;
}
@keyframes hero-carousel-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-carousel-track { animation: none; }
    /* Nothing moves, so there's nothing to pause. */
    .hero-carousel-toggle { display: none; }
}

/* Feature blocks (Shop / Machines / Heroes) */
.feature-block { min-height: var(--band-block-h); }
.feature-visual {
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 5rem;
    overflow: hidden;
}
.feature-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The Shop band is the same height as the others; its photo is a square
   that high and the copy takes the rest. Below lg the square sits centred
   above the copy. */
.feature-block--shop { --shop-square: var(--band-block-h); min-height: var(--shop-square); }
.feature-block--shop .feature-visual {
    position: relative;
    width: var(--shop-square);
    height: var(--shop-square);
    min-height: 0;
    max-width: 100%;
    flex: 0 0 auto;
    margin-inline: auto;
}
/* Below lg the text sits under the photo, full width. */
.feature-block--shop .feature-copy { flex: 0 0 100%; }
/* Let the copy run the full width of the text column. */
.feature-block--shop .feature-copy p { max-width: none; }
@media (min-width: 992px) {
    /* More room to the left of the photo (a margin, since padding would
       shrink the square's contents rather than move it) and to the right
       of the text, on lg and up. */
    .feature-block--shop .feature-visual { align-self: center; margin-inline: clamp(3rem, 7vw, 7rem) 0; }
    /* From lg the text moves beside the photo and takes the remaining width. */
    .feature-block--shop .feature-copy { flex: 1 1 0; width: auto; padding-right: clamp(4rem, 9vw, 9rem); }
}
/* Out of flow, so the photo's own proportions can't stretch the square. */
.feature-block--shop .feature-visual-img { position: absolute; inset: 0; }
.feature-visual--shop { background: linear-gradient(135deg, var(--sss-pink), var(--sss-purple)); }
.feature-visual--machines { background: linear-gradient(135deg, var(--sss-purple), var(--sss-ink)); }
.feature-visual--heroes { background: linear-gradient(135deg, var(--sss-ink), var(--sss-pink-dark)); }
.feature-copy { padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.feature-copy p { color: var(--sss-muted); max-width: 34rem; }
.section-dark .feature-copy p { color: rgba(255, 255, 255, .68); }

/* Quote panel */
.quote-panel {
    position: relative;
    background: linear-gradient(rgba(13, 13, 13, .75), rgba(13, 13, 13, .5)), url('/images/background-sideburn.webp') no-repeat center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: clamp(4.5rem, 9vw, 8rem) 1rem;
    overflow: hidden;
}
.quote-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(236, 29, 166, .16), transparent 60%);
}
.quote-mark { display: block; font-family: var(--sss-font-script); color: var(--sss-pink); font-size: 4rem; line-height: 1; position: relative; }
.quote-panel blockquote {
    position: relative;
    max-width: 48rem;
    margin: 0 auto 1.5rem;
    font-family: var(--sss-font-display);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 4vw, 2.75rem);
    line-height: 1.15;
}
.quote-panel cite {
    position: relative;
    display: block;
    color: var(--sss-pink);
    font-family: var(--sss-font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .85rem;
}

/* Footer */
.site-footer { background: #08030e; color: rgba(255, 255, 255, .7); position: relative; isolation: isolate; }
/* A zebra-print tile over the purple, on the footer and the header bar. It's
   black stripes on white, so multiply leaves the purple alone where the tile
   is white and darkens it under the stripes. */
.site-header::before,
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/background-zebra.png') repeat center top / 347px auto;
    opacity: .5;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.footer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}
.footer-mark-img {
    width: 175px;
    max-width: 100%;
    height: auto;
}
.footer-heading {
    font-family: var(--sss-font-display);
    letter-spacing: .1em;
    color: #fff;
    font-size: .95rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li + li { margin-top: .5rem; }
.footer-links a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.footer-links a:hover { color: var(--sss-pink); }

/* Shop */
.shop-category-list li { margin-bottom: .4rem; }
.shop-category-list a { color: var(--sss-ink); text-decoration: none; }
.shop-category-list li.active a,
.shop-category-list a:hover { color: var(--sss-purple); font-weight: 600; }
.shop-category-sublist { padding-left: 1rem; margin-top: .4rem; }
.shop-category-sublist a { font-size: .9rem; }

/* Below lg the filters sit on the zebra background above the products,
   where they get lost - give them a white card there. */
@media (max-width: 991.98px) {
    .shop-filters {
        background: var(--sss-paper);
        border-radius: .5rem;
        padding: 1.25rem;
        box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    }
}
/* From lg up the filters scroll with the page until they reach the bottom
   of the (by then fully shrunk) fixed header, then stick there. The
   header height comes from site.js; 90px is a fallback close to it. If
   the filters are ever taller than the space left, they scroll inside. */
@media (min-width: 992px) {
    .shop-filters {
        --shop-filters-top: calc(var(--site-header-min-height, 90px) + 1.5rem);
        position: sticky;
        top: var(--shop-filters-top);
        max-height: calc(100vh - var(--shop-filters-top) - 1.5rem);
        overflow-y: auto;
        /* Room for the inputs' focus rings, which overflow would clip. */
        padding: .25rem;
        margin: -.25rem;
    }
}

.product-card { display: block; color: var(--sss-ink); }
.product-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: .5rem;
    background: #f2f2f2;
}
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-card-image img { transform: scale(1.04); }
.product-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    color: #ccc;
    font-size: 2.5rem;
}
.product-card-badge { position: absolute; top: .6rem; left: .6rem; }
.product-card-body { padding-top: .75rem; }

.product-gallery-main {
    aspect-ratio: 1;
    border-radius: .5rem;
    overflow: hidden;
    background: #f2f2f2;
    min-width: 0;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: .375rem;
    overflow: hidden;
    background: none;
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumb.active { border-color: var(--sss-purple); }

@media (max-width: 1199.98px) {
    .site-header .navbar,
    .site-header-spacer .navbar { padding-top: 1rem; padding-bottom: 1rem; }
    .brand-logo { height: calc(88px - 48px * var(--shrink, 0)); }
}

/* Flash message modal (partials/flash) */
.flash-modal-icon { font-size: 2.5rem; line-height: 1; }
.flash-modal .modal-body p { font-size: 1.05rem; }

/* Home page bands that rotate through their section's images (see the
   script in home.blade.php). The static image stays in flow to size the
   band; the rotating layers sit on top of it and cross-fade. */
.feature-visual.is-rotating { position: relative; }
.feature-visual-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.feature-visual-layer.is-visible { opacity: 1; }
/* Covers the band so the whole image is clickable; the script points it
   at whichever image is showing. */
.feature-visual:has(.feature-visual-link) { position: relative; }
.feature-visual-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.feature-visual-link:focus-visible { outline: 3px solid var(--sss-pink); outline-offset: -3px; }
/* Name of the image showing, sliding up from the bottom on hover/focus. */
.feature-visual-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.25rem 1rem;
    background: linear-gradient(to top, rgba(10, 10, 10, .85), rgba(10, 10, 10, 0));
    color: #fff;
    font-family: var(--sss-font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
.feature-visual-caption::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-bottom: .5rem;
    background: var(--sss-pink);
}
.feature-visual-link:hover .feature-visual-caption,
.feature-visual-link:focus-visible .feature-visual-caption { opacity: 1; transform: none; }
@media (hover: none) {
    /* No hover on touch screens, so keep the name showing. */
    .feature-visual-caption { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .feature-visual-caption { transition: none; }
}
.basket-modal-success-actions:not([hidden]) { display: flex; gap: .5rem; }

/* Header basket summary (partials/mini-cart-contents). Hidden unless the
   device can hover and the header is in its desktop layout; the dropdown's
   top padding bridges the gap under the icon so moving the pointer down
   into the panel doesn't close it. */
.mini-cart { position: relative; display: inline-flex; }
.mini-cart-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: -1rem;
    padding-top: .75rem;
    z-index: 1040;
}
.mini-cart-panel {
    width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: var(--sss-paper);
    color: var(--sss-ink);
    border-radius: .5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    white-space: normal;
    text-align: left;
    font-family: var(--sss-font-body);
}
.mini-cart-list { max-height: 50vh; overflow-y: auto; }
.mini-cart-list li + li { border-top: 1px solid var(--bs-border-color); }
.mini-cart-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: .25rem;
    object-fit: cover;
}
.mini-cart-thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg);
    color: var(--sss-muted);
}
@media (min-width: 992px) and (hover: hover) {
    .mini-cart:hover .mini-cart-dropdown,
    .mini-cart:focus-within .mini-cart-dropdown { display: block; }
}

/* Home page Insta band (grid loaded in by home.blade.php's script). The
   artwork is a single wide image, not a tile, so it's scaled with cover,
   and sits at 25% opacity on a pseudo-element (a background image can't
   have its own opacity). */
.insta-band { position: relative; isolation: isolate; }
.insta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/background-instagram.webp') center / cover no-repeat;
    opacity: .1;
    pointer-events: none;
}
.insta-band-lead { color: rgba(255, 255, 255, .68); }
.insta-feed:empty { margin-bottom: 0 !important; }
.insta-post {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: .5rem;
    background: var(--sss-charcoal);
}
.insta-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease, opacity .3s ease;
}
.insta-post:hover img,
.insta-post:focus-visible img { transform: scale(1.05); opacity: .85; }

/* ---------- Checkout (and the other white cards on the public site) ---------- */
/* .admin-card only exists in admin.css, so public pages use this instead. */
.site-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

/* A pink bar under page titles, like a number plate underline. */
.page-title { position: relative; padding-bottom: .75rem; }
.page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: 4px;
    border-radius: 2px;
    background: var(--sss-pink);
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.6rem;
}
.checkout-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sss-pink);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    /* Bebas Neue sits high in its box, so nudge the digit down. */
    padding-top: 2px;
}

.checkout-page .form-label {
    font-family: var(--sss-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}
.checkout-page .form-control { padding: .6rem .85rem; border-radius: .5rem; }
.checkout-page .form-control:focus {
    border-color: var(--sss-pink);
    box-shadow: 0 0 0 .25rem rgba(236, 29, 166, .2);
}

/* Payment methods as selectable cards. */
.payment-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 2px solid rgba(0, 0, 0, .1);
    border-radius: .5rem;
    cursor: pointer;
}
.payment-option label { flex: 1; cursor: pointer; margin: 0; }
.payment-option:has(input:checked) { border-color: var(--sss-pink); background: rgba(236, 29, 166, .05); }
.payment-option .form-check-input { margin-top: 0; flex-shrink: 0; }
.payment-option .form-check-input:checked { background-color: var(--sss-pink); border-color: var(--sss-pink); }

/* Order summary: dark purple, like the header and footer. */
.checkout-summary {
    background: #08030e;
    color: rgba(255, 255, 255, .85);
    border-radius: .75rem;
    border-top: 4px solid var(--sss-pink);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.checkout-summary h2 { color: #fff; }
.checkout-summary hr { border-color: rgba(255, 255, 255, .2); opacity: 1; }
.checkout-summary .checkout-discount { color: #6ee7a8; }
.checkout-summary .checkout-total {
    color: #fff;
    font-family: var(--sss-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1.9rem;
    line-height: 1;
}
.checkout-summary .checkout-total span:last-child { color: var(--sss-pink); }
.checkout-summary .form-label { font-size: 1rem; color: #fff; }
.checkout-summary .form-control {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}
.checkout-summary .checkout-link { color: var(--sss-pink); }
@media (min-width: 992px) {
    /* Stays in view beside the form, under the shrunk header. */
    .checkout-summary {
        position: sticky;
        top: calc(var(--site-header-min-height, 90px) + 1.5rem);
    }
}