/* ==========================================================================
   S.A.R.S. redesign - "novinski kiosk"
   Loads last and re-skins the existing markup, so the shop, the three.js
   carousel and the language switch keep working untouched.
   Reference notes: Rammstein (plain condensed nav, no chrome), Gorillaz
   (artwork drives the palette), Arctic Monkeys (a flat non-black ground as
   identity). The band's own 20-godina collage is newsprint, so the site is
   built as a Balkan gig poster rather than a metal site.
   ========================================================================== */

:root {
    --ink: #14110f;
    --ink-soft: #3a3532;
    --paper: #f3ece0;
    --paper-2: #e7ddcc;
    --red: #d8362a;
    --red-dark: #a82419;
    --teal: #2f6f6b;
    --on-red: #f7f2ea;   /* stays light in both themes */
    --rule: rgba(20, 17, 15, 0.16);

    --display: "Oswald", "Arial Narrow", Impact, sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Only body paints the ground. If html carried the background too it would
   resolve --paper from :root, and the dark tokens live on body - which left a
   cream slab showing under every dark page. A body background with no html
   background propagates to the viewport canvas anyway. */
html {
    color: var(--ink) !important;
    font-family: var(--body) !important;
}

body {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--body) !important;
    min-height: 100%;
}

/* ---------- Type ---------- */
h1, h2, h3, h4,
.section-title, section h2 {
    font-family: var(--display) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

section h2 {
    font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
    line-height: 0.95 !important;
    margin: 0 0 6px !important;
    text-align: left !important;
}

/* The poster rule under every section title. */
section h2::after {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    margin-top: 14px;
    background: var(--ink);
}

p, li, label, span, a { font-family: var(--body); }

/* ---------- Header / nav: plain condensed text, no pills ---------- */
header {
    background: var(--paper) !important;
    border-bottom: 3px solid var(--ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 24px !important;
}

.main-nav ul {
    gap: clamp(10px, 1.8vw, 26px) !important;
}

.main-nav .nav-link {
    font-family: var(--display) !important;
    font-size: clamp(0.78rem, 1.05vw, 0.95rem) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
    position: relative;
}

.main-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
}

.main-nav .nav-link:hover::after { transform: scaleX(1); }
.main-nav .nav-link:hover { color: var(--red) !important; }

.header-logo { filter: invert(1); }

.language-switcher img {
    border-radius: 0 !important;
    border: 2px solid var(--ink) !important;
}

.cart-indicator a { color: var(--ink) !important; font-family: var(--display) !important; }

/* ---------- Sections as poster blocks ---------- */
section {
    /* background-color, not the shorthand: `background` would reset
       background-image and wipe the hero collage set in components.css. */
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px) !important;
    max-width: 1280px;
    margin: 0 auto !important;
    border-bottom: 3px solid var(--ink);
    min-height: auto !important;
}

section p, section li { color: var(--ink-soft) !important; font-size: 1.02rem; line-height: 1.6; }

/* Home keeps the collage, but as a framed poster rather than a wallpaper. */
/* Height of the fixed header. The hero offsets the collage by it so the
   header cannot cover the artwork. */
#home { --hdr-h: 115px; }

#home {
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--paper) !important;
    background-image: url('../image/hero-2560.jpg?v=1787138596') !important;
    background-image: image-set(url('../image/hero-2560.webp?v=1787138596') type('image/webp'),
                                url('../image/hero-2560.jpg?v=1787138596') type('image/jpeg')) !important;
    /* cover: the collage fills the whole section edge to edge. It is square
       and the section is wide, so the top and bottom of the artwork are
       cropped - accepted, the wordmark sits in the middle and stays whole. */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    /* Width must be the definite side, or aspect-ratio derives the width from
       an inherited height and the section grows wider than the viewport. */
    width: 100% !important;
    max-width: 100% !important;
    /* Height is min(width, the cap). On phones the width is the smaller side,
       so the box stays square and the whole collage shows uncropped. On
       desktop the cap wins and the artwork is cropped top and bottom.
       content-box sizing keeps the ratio and the cap on the artwork area, so
       the header strip below is added on top rather than eaten out of it. */
    aspect-ratio: 1 / 1;
    /* The wordmark occupies the middle 27.2%-71.6% of the square, so at least
       44.4% of the artwork's height has to stay visible or `cover` slices the
       top off "S.A.R.S." and the bottom off "GODINA". Height therefore tracks
       width, not just the viewport: 88vh alone leaves only 43.5% at 1920 wide.
       50vw keeps the wordmark whole with a small margin at every width, at the
       cost of a hero taller than a short window - the artwork is the page. */
    max-height: max(50vw, calc(88vh - var(--hdr-h)));
    min-height: 0 !important;
    height: auto !important;
    box-sizing: content-box !important;
    display: block !important;
    /* The header is fixed and opaque, so without this it covers the top of the
       collage - a seventh of it on desktop, over a quarter on a phone.
       background-origin keeps the artwork out from under it; the ground still
       paints the full box, and it matches the header, so the strip is unseen. */
    padding: var(--hdr-h) 0 0 0 !important;
    background-origin: content-box !important;
    margin: 0 !important;
    max-width: none !important;
    border-bottom: 3px solid var(--ink);
}

/* A 1440 screen was being sent the 2560 rendition. Same picture, half the
   bytes, and the 2560 one still serves anything wider. */
@media (max-width: 1600px) and (min-width: 901px) {
    #home {
        background-image: url('../image/hero-1600.jpg?v=1787138596') !important;
        background-image: image-set(url('../image/hero-1600.webp?v=1787138596') type('image/webp'),
                                    url('../image/hero-1600.jpg?v=1787138596') type('image/jpeg')) !important;
    }
}

@media (max-width: 900px) {
    #home {
        --hdr-h: 105px;
        background-image: url('../image/hero-1280.jpg?v=1787138596') !important;
        background-image: image-set(url('../image/hero-1280.webp?v=1787138596') type('image/webp'),
                                    url('../image/hero-1280.jpg?v=1787138596') type('image/jpeg')) !important;
    }
}

#home [data-lang] { position: relative; z-index: 2; }

/* No extra wordmark: the collage already says "20 GODINA". */

/* ---------- Discography: deliberate ink block so the covers pop ---------- */
#discography {
    background: var(--ink) !important;
    max-width: none;
    border-bottom: none;
}
#discography h2 { color: var(--paper) !important; }
#discography h2::after { background: var(--red); }
#discography p { color: rgba(243, 236, 224, 0.75) !important; }
.album-carousel-3d {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    max-width: 1280px;
    margin: 0 auto !important;
}

/* ---------- Tour dates read like a gig poster ---------- */
#performances .bit-widget-initializer,
#performances .bit-widget { filter: none; }

/* ---------- Shop ---------- */
#shop { background: var(--paper-2) !important; max-width: none; }
#shop > * { max-width: 1280px; margin-left: auto; margin-right: auto; }

/* .shop-grid is the section wrapper, not the card grid: making it a grid
   too put each category into a single 277px column. */
.shop-grid { display: block !important; }

.products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 28px !important;
    float: none !important;
}

.product-card {
    background: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 20px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }

.product-card img {
    border-radius: 0 !important;
    border-bottom: 3px solid var(--ink);
    background: var(--paper-2);
}

.product-card h3, .product-card h4 {
    font-size: 1.15rem !important;
    padding: 16px 16px 0 !important;
    color: var(--ink) !important;
    text-align: left !important;
}

.product-card p { padding: 0 16px !important; font-size: 0.92rem !important; text-align: left !important; }

.price, .product-price {
    font-family: var(--display) !important;
    font-size: 1.5rem !important;
    color: var(--red) !important;
    padding: 0 16px !important;
    text-align: left !important;
}

.size-selector-container { padding: 0 16px !important; }

.size-select {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    font-family: var(--body) !important;
}

.size-selector-container .size-label {
    font-family: var(--display) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink) !important;
    font-size: 0.8rem !important;
}

.add-to-cart-btn, .buy-button {
    margin: 0 16px !important;
    width: calc(100% - 32px) !important;
    background: var(--red) !important;
    color: var(--on-red) !important;
    font-family: var(--display) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
}

.add-to-cart-btn:hover, .buy-button:hover {
    /* --ink is the foreground colour, so on the dark theme it is cream. Only
       flipping the background left cream text on a cream button. The text has
       to invert with it. */
    background: var(--ink) !important;
    color: var(--paper) !important;
    transform: none !important;
    box-shadow: none !important;
}

.add-to-cart-btn:focus-visible, .buy-button:focus-visible {
    background: var(--ink) !important;
    color: var(--paper) !important;
    outline: 3px solid var(--red) !important;
    outline-offset: 3px !important;
}

.stock-message {
    font-family: var(--display) !important;
    background: var(--teal) !important;
    color: var(--paper) !important;
    border-radius: 0 !important;
    margin: 0 16px !important;
}

/* ---------- Social ---------- */
.social-links a {
    background: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    width: 64px !important;
    height: 64px !important;
    transition: transform 0.15s ease, background 0.15s ease;
}

.social-links a:hover {
    background: var(--red) !important;
    transform: translate(-3px, -3px) !important;
    box-shadow: 6px 6px 0 var(--ink) !important;
    border-color: var(--ink) !important;
}

.social-links a::before, .social-links a::after { display: none !important; }
.social-links img { filter: invert(1); }

/* ---------- Footer ---------- */
/* ---------- Slanted transitions between sections ---------- */
/* The edge is a fade along a tilted line rather than a cut. Two things make it
   work:
   - the picture moves to its own layer, so only the picture is masked; masking
     the section would take the headings and buttons near the edges with it;
   - the layer fades to nothing over the section's own background colour, which
     is the same colour every section and the page itself carry, so there is no
     band of a different shade where the fade ends.
   The sections deliberately do NOT overlap. They did while the edge was a hard
   clip, but with a fade an overlap is harmful: the next section's opaque
   background paints over the tail of the fade and puts the hard edge back. */
body.theme-dark {
    --fade: 150px;
    /* A tilted gradient's line is longer than the box is tall by the width
       times the sine of the angle, so the stops sit partly outside the box and
       the fade never finishes at the edge - one corner keeps a quarter of the
       picture and steps straight into the next section. This is that overhang,
       and the stops are pulled in by it. */
    --over: 5.3vw;
}

body.theme-dark #discography,
body.theme-dark #videos,
body.theme-dark #booking,
body.theme-dark #shop,
body.theme-dark #press {
    position: relative;
    background-image: none !important;
    background-color: var(--paper) !important;
    padding-top: calc(clamp(48px, 7vw, 96px) + var(--fade) * 0.55) !important;
    padding-bottom: calc(clamp(48px, 7vw, 96px) + var(--fade) * 0.55) !important;
}

body.theme-dark #discography::before,
body.theme-dark #videos::before,
body.theme-dark #booking::before,
body.theme-dark #shop::before,
body.theme-dark #press::before {
    /* section::before is switched off further down this file - that rule drops
       the old grey scrim - so this has to say so explicitly, and keep the
       scrim's colour off while reusing the element. */
    content: '' !important;
    display: block !important;
    background-color: transparent;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

body.theme-dark #discography > *,
body.theme-dark #videos > *,
body.theme-dark #booking > *,
body.theme-dark #shop > *,
body.theme-dark #press > * {
    position: relative;
    z-index: 2;
}

/* Same pictures, same sizing as before - only the layer they sit on changed. */
body.theme-dark #videos::before {
    background-image: url('../image/events-bkg.webp?v=1787214306');
    background-size: cover;
}
body.theme-dark #booking::before {
    background-image: url('../image/video-bkg.jpg');
    background-size: cover;
}
body.theme-dark #press::before {
    background-image: url('../image/press-kit.webp');
    background-size: auto;
}
/* Discography and shop carry no picture, only a lighter block. Fading the
   block the same way keeps every seam on the page soft, not just the ones
   that happen to have a photograph behind them. */
body.theme-dark #discography::before,
body.theme-dark #shop::before {
    background-color: var(--paper-2) !important;
}

/* The fade runs along a line tilted about three degrees, alternating down the
   page. Only applied where masking is supported; without it each layer simply
   shows with a straight edge, which is what the page looked like before. */
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    body.theme-dark #discography::before,
    body.theme-dark #booking::before,
    body.theme-dark #press::before {
        -webkit-mask-image: linear-gradient(177deg, transparent var(--over), #000 calc(var(--over) + var(--fade)), #000 calc(100% - var(--over) - var(--fade)), transparent calc(100% - var(--over)));
        mask-image: linear-gradient(177deg, transparent var(--over), #000 calc(var(--over) + var(--fade)), #000 calc(100% - var(--over) - var(--fade)), transparent calc(100% - var(--over)));
    }
    body.theme-dark #videos::before,
    body.theme-dark #shop::before {
        -webkit-mask-image: linear-gradient(183deg, transparent var(--over), #000 calc(var(--over) + var(--fade)), #000 calc(100% - var(--over) - var(--fade)), transparent calc(100% - var(--over)));
        mask-image: linear-gradient(183deg, transparent var(--over), #000 calc(var(--over) + var(--fade)), #000 calc(100% - var(--over) - var(--fade)), transparent calc(100% - var(--over)));
    }
}

/* The hairline under each section drew a straight line across every fade. */
body.theme-dark #performances,
body.theme-dark #discography,
body.theme-dark #videos,
body.theme-dark #photos,
body.theme-dark #booking,
body.theme-dark #shop,
body.theme-dark #press {
    border-bottom: none !important;
}

@media (max-width: 700px) {
    body.theme-dark {
        /* shorter sections need a shorter fade, or the picture never reaches
           full strength between one edge and the other */
        --fade: 80px;
        --over: 5.3vw;
    }
}
/* ---------- Video facade ---------- */
/* Looks like the embed's own poster state; the player arrives on click. */
body.theme-dark .yt-facade {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    line-height: 0;
    overflow: hidden;
}
body.theme-dark .yt-facade img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
body.theme-dark .yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 12px;
    background: rgba(18, 17, 16, 0.78);
    border: 2px solid var(--ink);
    transition: background 0.15s ease;
}
body.theme-dark .yt-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent var(--ink);
}
body.theme-dark .yt-facade:hover .yt-play { background: var(--red); }
body.theme-dark .yt-facade:hover .yt-play::after { border-left-color: #fff; }
body.theme-dark .yt-facade:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- Photos ---------- */
body.theme-dark .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 26px;
}

body.theme-dark .photo-item { margin: 0; }

body.theme-dark .photo-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 3px solid var(--ink);
    background: var(--paper-2);
    cursor: pointer;
    line-height: 0;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.theme-dark .photo-open img {
    width: 100%;
    height: auto;
    /* square cells keep the grid even; the lightbox shows the whole frame */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
body.theme-dark .photo-open:hover { box-shadow: 8px 8px 0 var(--red); transform: translate(-2px, -2px); }
body.theme-dark .photo-open:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

body.theme-dark .photo-cap { display: block; padding: 8px 2px 0; }
body.theme-dark .photo-date {
    display: block;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    color: var(--ink-soft) !important;
}
body.theme-dark .photo-gig {
    display: block;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
    color: var(--red) !important;
    margin-top: 2px;
}
body.theme-dark .photo-empty { color: var(--ink-soft) !important; margin-top: 20px; }

body.theme-dark .photo-more-wrap { text-align: center; margin-top: 28px; }
body.theme-dark .photo-more {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    min-height: 48px;
    padding: 12px 30px;
    background: var(--paper);
    color: var(--ink);
    border: 3px solid var(--ink);
    cursor: pointer;
}
body.theme-dark .photo-more:hover { background: var(--ink); color: var(--paper); }
body.theme-dark .photo-more:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------- Photo lightbox ---------- */
body.photo-lightbox-open { overflow: hidden; }
/* display on the element beats the hidden attribute's own display:none, so
   without this the lightbox sits over the page from the first paint. */
body.theme-dark .photo-lightbox[hidden] { display: none !important; }
body.theme-dark .photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: rgba(8, 7, 6, 0.94);
}
body.theme-dark .pl-figure {
    margin: 0;
    max-width: min(1080px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.theme-dark .pl-figure img {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    height: auto;
    border: 3px solid var(--ink);
    display: block;
}
body.theme-dark .pl-cap { text-align: center; margin-top: 14px; }
body.theme-dark .pl-date {
    display: block;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink) !important;
}
body.theme-dark .pl-gig {
    display: block;
    font-family: var(--display);
    text-transform: uppercase;
    color: var(--red) !important;
    margin-top: 3px;
}
body.theme-dark .pl-link {
    display: inline-block;
    margin-top: 10px;
    min-height: 44px;
    line-height: 30px;
    padding: 7px 18px;
    color: var(--ink) !important;
    border: 2px solid var(--rule);
    text-decoration: none;
    font-size: 0.9rem;
}
body.theme-dark .pl-link:hover { background: var(--red); color: #fff !important; border-color: var(--red); }

body.theme-dark .pl-close, body.theme-dark .pl-nav {
    background: var(--paper-2);
    color: var(--ink);
    border: 2px solid var(--rule);
    cursor: pointer;
    /* tappable on a phone */
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
    line-height: 1;
}
body.theme-dark .pl-close { position: absolute; top: 16px; right: 16px; }
body.theme-dark .pl-close:hover, body.theme-dark .pl-nav:hover { background: var(--red); color: #fff; border-color: var(--red); }
body.theme-dark .pl-nav:disabled { opacity: 0.3; cursor: default; }
body.theme-dark .pl-close:focus-visible, body.theme-dark .pl-nav:focus-visible,
body.theme-dark .pl-link:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

@media (max-width: 640px) {
    body.theme-dark .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    body.theme-dark .photo-open { border-width: 2px; }
    body.theme-dark .photo-date { font-size: 0.68rem; }
    body.theme-dark .photo-gig { font-size: 0.7rem; }
    body.theme-dark .photo-lightbox { padding: 12px; gap: 4px; }
    body.theme-dark .pl-figure img { max-height: 60vh; }
    /* arrows sit under the picture where a thumb can reach them */
    body.theme-dark .photo-lightbox { flex-wrap: wrap; }
    body.theme-dark .pl-nav { order: 2; }
    body.theme-dark .pl-figure { order: 1; flex: 1 0 100%; }
}

/* ---------- Listen-on modal ---------- */
body.theme-dark .modal-overlay {
    background: rgba(8, 7, 6, 0.86) !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.theme-dark .modal-overlay .modal-content {
    background: var(--paper-2) !important;
    color: var(--ink) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0 var(--red) !important;
    width: min(440px, 100%);
    max-width: 440px !important;
    padding: 22px !important;
    position: relative;
}

body.theme-dark .modal-close-button {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--ink-soft) !important;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
body.theme-dark .modal-close-button:hover { color: var(--red) !important; }
body.theme-dark .modal-close-button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

body.theme-dark .modal-album {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--rule);
}
body.theme-dark .modal-album-cover {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 2px solid var(--ink);
    flex: 0 0 auto;
}
body.theme-dark .modal-eyebrow {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--red) !important;
    margin: 0 0 4px !important;
}
body.theme-dark .modal-album-title {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.2rem;
    line-height: 1.15;
    margin: 0 !important;
    color: var(--ink) !important;
}
body.theme-dark .modal-album-year { margin: 2px 0 0 !important; color: var(--ink-soft) !important; font-size: 0.9rem; }

body.theme-dark .platform-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* the old grid layout left 40px of air above the first row */
    padding: 0 !important;
    text-align: left;
}

body.theme-dark .platform-row {
    display: flex;
    align-items: center;
    gap: 12px;
    /* comfortably tappable on a phone */
    min-height: 52px;
    padding: 8px 14px;
    border: 2px solid var(--rule);
    background: var(--paper);
    color: var(--ink) !important;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.theme-dark .pf-mark { display: flex; flex: 0 0 auto; }
body.theme-dark .pf-icon { width: 24px; height: 24px; fill: currentColor; display: block; }
body.theme-dark .pf-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    /* .modal-content centres its text; a row reads better left-aligned */
    text-align: left;
}
body.theme-dark .pf-name {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
}
body.theme-dark .pf-note { font-size: 0.75rem; color: var(--ink-soft) !important; }
body.theme-dark .platform-row.is-fallback { border-style: dashed; }
body.theme-dark .pf-arrow { color: var(--ink-soft); flex: 0 0 auto; }

/* Brand colour on hover, with the text set against it rather than left to
   inherit - that is how the shop button ended up white on white. */
body.theme-dark .platform-row:hover,
body.theme-dark .platform-row:focus-visible {
    color: #ffffff !important;
    border-color: transparent;
}
body.theme-dark .platform-row:hover .pf-arrow,
body.theme-dark .platform-row:focus-visible .pf-arrow { color: #ffffff; }
body.theme-dark .platform-row:hover .pf-note,
body.theme-dark .platform-row:focus-visible .pf-note { color: rgba(255, 255, 255, 0.85) !important; }
body.theme-dark #pf-spotify:hover, body.theme-dark #pf-spotify:focus-visible { background: #1DB954; color: #08130c !important; }
body.theme-dark #pf-spotify:hover .pf-arrow, body.theme-dark #pf-spotify:focus-visible .pf-arrow { color: #08130c; }
body.theme-dark #pf-spotify:hover .pf-note, body.theme-dark #pf-spotify:focus-visible .pf-note { color: rgba(8, 19, 12, 0.8) !important; }
body.theme-dark #pf-applemusic:hover, body.theme-dark #pf-applemusic:focus-visible { background: #FA243C; }
body.theme-dark #pf-deezer:hover, body.theme-dark #pf-deezer:focus-visible { background: #A238FF; }
body.theme-dark #pf-youtubemusic:hover, body.theme-dark #pf-youtubemusic:focus-visible { background: #FF0000; }
body.theme-dark .platform-row:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

body.theme-dark .social-svg { width: 32px; height: 32px; fill: var(--ink); display: block; }
body.theme-dark .social-links a:hover .social-svg { fill: var(--red); }

/* On a phone the dialog is a sheet that comes up from the bottom. */
@media (max-width: 640px) {
    body.theme-dark .modal-overlay { align-items: flex-end; padding: 0; }
    body.theme-dark .modal-overlay .modal-content {
        width: 100%;
        max-width: none !important;
        border-width: 3px 0 0 0 !important;
        box-shadow: none !important;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
        transform: translateY(100%);
        transition: transform 0.28s ease;
    }
    body.theme-dark .modal-overlay.active .modal-content { transform: translateY(0); }
    body.theme-dark .platform-row { min-height: 56px; }
}

/* ---------- Booking: one card per territory ---------- */
/* styles.css gives these a glass panel with a blur, which reads as a smudge
   on the poster ground. Flat card, hard rule, hard shadow instead. */
.booking-info {
    gap: 24px !important;
    text-align: left !important;
    align-items: stretch !important;
}

.booking-info .contact {
    background: var(--paper-2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--red) !important;
    padding: 24px !important;
    max-width: 420px !important;
}

.booking-info .contact:hover {
    transform: none !important;
    box-shadow: 12px 12px 0 var(--red) !important;
}

.booking-info .contact h3 {
    font-family: var(--display) !important;
    color: var(--red) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.06rem !important;
    line-height: 1.25;
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--ink);
}

.booking-info .contact .contact-name {
    font-family: var(--display) !important;
    color: var(--ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.02rem !important;
    margin: 0 0 10px !important;
    text-shadow: none !important;
}

.booking-info .contact .contact-line {
    margin: 0 0 6px !important;
    text-shadow: none !important;
    font-size: 1rem !important;
}

/* Phone and mail are the point of the section, so they get the link
   treatment rather than looking like body copy. */
.booking-info .contact-line a {
    color: var(--ink) !important;
    text-decoration: none;
    border-bottom: 2px solid var(--red);
    /* wraps rather than pushing the card wider than the phone screen */
    overflow-wrap: anywhere;
    /* comfortably tappable without turning the card into a button stack */
    display: inline-block;
    padding: 6px 0;
}

.booking-info .contact-line a:hover,
.booking-info .contact-line a:focus-visible {
    background: var(--red) !important;
    color: var(--on-red) !important;
    border-bottom-color: var(--red);
}

@media (max-width: 760px) {
    .booking-info .contact {
        max-width: none !important;
        box-shadow: 6px 6px 0 var(--red) !important;
    }
}

footer {
    /* styles.css pins the footer to the viewport bottom, which worked while it
       was a translucent blurred strip. The poster footer is opaque and much
       taller, so fixed it became a 124px slab covering the foot of every page -
       the bottom of the hero collage, and the tour dates below it. */
    position: static !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-top: 3px solid var(--ink);
    padding: 36px 24px !important;
    font-family: var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
}
footer p { color: rgba(243, 236, 224, 0.8) !important; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
    .header-content { flex-wrap: wrap; gap: 8px; }
    .main-nav ul { flex-wrap: wrap; justify-content: flex-start !important; }
    section { padding: 40px 18px !important; }
    /* min-height removed: the hero's own aspect-ratio governs its height.
       62vh here was what letterboxed the collage on phones. */
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}

/* The home ambient particle canvas sat on top of the collage and washed it
   out. The carousel is the three.js piece worth keeping; this one is not. */
canvas.three-home-bg { display: none !important; }

/* The old design darkened every section with a translucent ::before layer.
   On paper it just muddied the colour. */
section::before,
#shop::before,
#discography::before { display: none !important; content: none !important; }

/* The product grid was inheriting a zero/narrow width from the legacy
   float-based shop layout, so everything stacked in one column. */
#shop [data-lang],
.product-category,
.shop-grid,
.products-grid {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}

.product-category h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    margin: 8px 0 24px !important;
    color: var(--ink) !important;
    text-align: left !important;
}


/* ==========================================================================
   DARK VARIANT - body.theme-dark
   The tokens are named by role, not by colour, so the whole poster system
   flips by swapping four values: --ink is the foreground/rule colour and
   --paper is the ground. Everything below that is a genuine exception.
   Toggle with:  document.body.classList.toggle('theme-dark')
   ========================================================================== */

body.theme-dark {
    --ink: #f0e9dd;        /* foreground, rules, borders */
    --ink-soft: #b3aa9d;   /* body copy on dark */
    --paper: #121110;      /* page ground */
    --paper-2: #1c1a18;    /* secondary ground */
    --rule: rgba(240, 233, 221, 0.18);
}

/* The logo and social glyphs ship light, so on dark they need no inverting. */
body.theme-dark .header-logo,
body.theme-dark .social-links img { filter: none !important; }

body.theme-dark .language-switcher img { border-color: var(--ink) !important; }

/* Product photography sits on its own light plate so the shirts read. */
body.theme-dark .product-card img { background: #2a2724 !important; }

/* Discography can no longer be an ink block on a dark page - it becomes a
   framed panel with the band red so it still steps forward. */
body.theme-dark #discography {
    background: var(--paper-2) !important;
    border-top: 3px solid var(--red);
    border-bottom: 3px solid var(--red);
}
body.theme-dark #discography h2 { color: var(--ink) !important; }
body.theme-dark #discography h2::after { background: var(--red); }
body.theme-dark #discography p { color: var(--ink-soft) !important; }
body.theme-dark .album-carousel-3d {
    border: 3px solid var(--red) !important;
    background: #0d0c0b !important;
}

/* Footer would otherwise invert to a light band; keep it grounded. */
body.theme-dark footer {
    background: #0b0a09 !important;
    border-top: 3px solid var(--red);
}
body.theme-dark footer p { color: var(--ink-soft) !important; }

/* Hard-shadow hovers read as light on dark. */
body.theme-dark .product-card:hover { box-shadow: 8px 8px 0 var(--red) !important; }
body.theme-dark .social-links a:hover { box-shadow: 6px 6px 0 var(--red) !important; }

/* The cream hero frame becomes a red hairline instead. */
body.theme-dark #home { border-bottom-color: var(--red); }

/* Section dividers: at full --ink the rule becomes a bright cream band on
   dark, which reads as a stray element rather than a divider. */
body.theme-dark section { border-bottom-color: var(--rule) !important; }
body.theme-dark #discography { border-top-color: var(--red) !important; border-bottom-color: var(--red) !important; }
body.theme-dark section h2 { margin-bottom: 18px !important; }

/* ---------- Model gallery ---------- */
.product-card img { cursor: zoom-in; }

#tshirt-modal.modal-overlay {
    background: rgba(8, 7, 6, 0.92) !important;
    backdrop-filter: blur(6px);
}

#tshirt-modal .modal-content {
    /* The legacy sheet fades this in via opacity; keep it solid so the cards
       behind cannot read through the gallery. */
    opacity: 1 !important;
    transform: none !important;
    background: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: 12px 12px 0 var(--red) !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 900px !important;
    padding: 28px !important;
}

#tshirt-modal h3#tshirt-modal-title {
    font-family: var(--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink) !important;
    font-size: clamp(1.3rem, 3vw, 2rem) !important;
    margin: 0 0 20px !important;
}

#tshirt-modal-images {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    align-items: start !important;
}

#tshirt-modal .model-shot { margin: 0; }

#tshirt-modal .model-shot img {
    width: 100%;
    height: auto;
    display: block;
    border: 3px solid var(--ink);
    background: var(--paper-2);
}

#tshirt-modal .model-shot figcaption {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--ink);
    padding-top: 10px;
}

#tshirt-modal .model-empty,
#tshirt-modal .modal-description {
    color: var(--ink-soft) !important;
    font-size: 0.95rem;
    padding-top: 18px;
}

#tshirt-modal .modal-close-button {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-radius: 0 !important;
}
#tshirt-modal .modal-close-button:hover { background: var(--red) !important; }

/* ==========================================================================
   CART PAGE - cart.html carries theme-dark and loads this file, so it picks
   up the same tokens. These rules replace the neon gradients it shipped with.
   ========================================================================== */

body.theme-dark .cart-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) 80px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.theme-dark .cart-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 3px solid var(--ink);
    padding-bottom: 18px;
    margin-bottom: 36px;
}

body.theme-dark .cart-header h1 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 5vw, 3.4rem) !important;
    line-height: 0.95;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 0;
}

body.theme-dark .back-link {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    color: var(--ink) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 18px;
    text-decoration: none;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
body.theme-dark .back-link:hover { background: var(--red) !important; border-color: var(--red) !important; }

/* ---- Item cards, same poster frame as the shop ---- */
body.theme-dark .cart-items { display: grid; gap: 20px; }

body.theme-dark .cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "info qty" "lines actions";
    gap: 12px 24px;
    align-items: center;
    background: var(--paper-2) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px 22px !important;
}

body.theme-dark .cart-item h3 {
    grid-area: info;
    font-family: var(--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1rem, 2vw, 1.35rem) !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 0 0 4px;
}

body.theme-dark .cart-item p { color: var(--ink-soft) !important; margin: 2px 0; font-size: 0.95rem; }

body.theme-dark .cart-line {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    max-width: 320px;
}
body.theme-dark .cart-line span { color: var(--ink-soft) !important; }
body.theme-dark .cart-line strong { color: var(--ink) !important; font-family: var(--display); letter-spacing: 0.03em; }

body.theme-dark .quantity-controls {
    grid-area: qty;
    display: flex;
    align-items: center;
    gap: 0;
    justify-self: end;
}

body.theme-dark .quantity-btn {
    width: 42px; height: 42px;
    font-family: var(--display);
    font-size: 1.2rem;
    background: var(--ink) !important;
    color: var(--paper) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s ease;
}
body.theme-dark .quantity-btn:hover { background: var(--red) !important; border-color: var(--red) !important; }

body.theme-dark .quantity-input {
    width: 62px; height: 42px;
    text-align: center;
    font-family: var(--display);
    font-size: 1rem;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 3px solid var(--ink) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

body.theme-dark .remove-btn {
    grid-area: actions;
    justify-self: end;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    background: transparent !important;
    color: var(--ink-soft) !important;
    border: 2px solid var(--ink-soft) !important;
    border-radius: 0 !important;
    padding: 9px 14px;
    cursor: pointer;
    box-shadow: none !important;
    transition: all 0.15s ease;
}
body.theme-dark .remove-btn:hover {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--on-red) !important;
}

/* ---- Summary ---- */
body.theme-dark .cart-summary {
    margin-top: 36px;
    background: var(--paper-2) !important;
    border: 3px solid var(--red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 28px !important;
    text-align: left !important;
}

body.theme-dark .cart-summary h2 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.3rem, 3vw, 2rem) !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 0 0 18px;
}

body.theme-dark .cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 3px solid var(--ink);
    padding-top: 16px;
    margin: 0 0 22px;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft) !important;
    font-size: 0.95rem;
}
body.theme-dark .cart-total strong {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--red) !important;
    letter-spacing: 0;
}

body.theme-dark .checkout-btn {
    display: block;
    width: 100%;
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1rem;
    background: var(--red) !important;
    color: var(--on-red) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 16px 20px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s ease;
}
body.theme-dark .checkout-btn:hover { background: var(--ink) !important; }

/* ---- Empty / error state ---- */
body.theme-dark .empty-cart {
    background: var(--paper-2) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: clamp(32px, 6vw, 64px) !important;
    text-align: center;
}
body.theme-dark .empty-cart h2 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    margin: 0 0 10px;
}
body.theme-dark .empty-cart p { color: var(--ink-soft) !important; margin: 0 0 24px; }

@media (max-width: 700px) {
    body.theme-dark .cart-item {
        grid-template-columns: 1fr;
        grid-template-areas: "info" "lines" "qty" "actions";
        justify-items: start;
    }
    body.theme-dark .quantity-controls,
    body.theme-dark .remove-btn { justify-self: stretch; }
    body.theme-dark .remove-btn { text-align: center; }
    body.theme-dark .cart-line { max-width: none; width: 100%; }
}

/* Leftover gradient underline from the old cart styling. */
body.theme-dark .cart-summary h2::after,
body.theme-dark .empty-cart h2::after,
body.theme-dark .cart-header h1::after { display: none !important; content: none !important; }
body.theme-dark .cart-summary h2 { text-align: left !important; }

/* ---- Checkout form and confirmation, same poster frame ---- */
body.theme-dark .checkout-form {
    margin-top: 28px;
    background: var(--paper-2) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 28px !important;
}

body.theme-dark .checkout-form h2 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
    margin: 0 0 22px !important;
}
body.theme-dark .checkout-form h2::after { display: none !important; content: none !important; }

body.theme-dark .co-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
}

body.theme-dark .co-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }

body.theme-dark .co-field label {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
    color: var(--ink-soft);
}

body.theme-dark .co-field input,
body.theme-dark .co-field textarea {
    font-family: var(--body);
    font-size: 0.98rem;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 3px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 11px 12px;
    width: 100%;
}
body.theme-dark .co-field input:focus,
body.theme-dark .co-field textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; }
body.theme-dark .co-field.invalid input,
body.theme-dark .co-field.invalid textarea { border-color: var(--red) !important; }

body.theme-dark .co-error { color: var(--red); font-size: 0.8rem; min-height: 1em; }
body.theme-dark .co-form-error { margin-top: 14px; font-size: 0.95rem; }

body.theme-dark .co-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    margin-top: 22px;
}
body.theme-dark .co-actions .checkout-btn { flex: 1 1 240px; width: auto; }
body.theme-dark .co-actions .remove-btn { flex: 0 0 auto; }

body.theme-dark .order-confirmation {
    background: var(--paper-2) !important;
    border: 3px solid var(--red) !important;
    padding: clamp(28px, 5vw, 56px) !important;
    text-align: left;
}
body.theme-dark .order-confirmation h2 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(1.5rem, 4vw, 2.6rem) !important;
    margin: 0 0 18px !important;
}
body.theme-dark .order-confirmation h2::after { display: none !important; content: none !important; }
body.theme-dark .order-confirmation p { color: var(--ink-soft) !important; margin: 0 0 10px; }
body.theme-dark .order-confirmation .order-number strong { font-family: var(--display); font-size: 1.6rem; color: var(--red) !important; }
body.theme-dark .order-confirmation .order-total strong { font-family: var(--display); color: var(--ink) !important; }
body.theme-dark .order-confirmation .back-link { display: inline-block; margin-top: 18px; }

/* ---- Upcoming shows, poster listing ---- */
body.theme-dark .tour-dates-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) 80px;
}

body.theme-dark .tour-dates-container h1,
body.theme-dark .upcoming h2 {
    font-family: var(--display) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
body.theme-dark .tour-dates-container h1 { font-size: clamp(2rem, 5vw, 3.4rem) !important; margin: 0 0 8px; }
body.theme-dark .upcoming h2 { font-size: clamp(1.2rem, 3vw, 1.8rem) !important; margin: 32px 0 16px; }
body.theme-dark .tour-dates-container h1::after,
body.theme-dark .upcoming h2::after { display: none !important; content: none !important; }

body.theme-dark .gig-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }

body.theme-dark .gig-list .gig {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 8px 22px;
    align-items: baseline;
    padding: 18px 4px;
    border-bottom: 3px solid var(--rule);
    transition: background 0.15s ease, padding-left 0.15s ease;
}
body.theme-dark .gig-list .gig:hover { background: var(--paper-2); padding-left: 14px; }

body.theme-dark .gig-date {
    font-family: var(--display);
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--red) !important;
}
body.theme-dark .gig-date b { font-size: 1.5rem; letter-spacing: 0.01em; }
body.theme-dark .gig-date i { font-style: normal; font-size: 0.85rem; color: var(--ink-soft) !important; }

body.theme-dark .gig-city {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.15rem;
    color: var(--ink) !important;
}
body.theme-dark .gig-city em { font-style: normal; font-size: 0.8rem; color: var(--ink-soft) !important; }

/* Country flag beside each date. Own SVGs rather than emoji flags, which
   Windows Chrome renders as the two letters of the country code. */
body.theme-dark .gig-city {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.theme-dark .gig-flag {
    width: 22px;
    height: 15px;
    flex: 0 0 auto;
    /* a hairline so pale stripes do not bleed into the dark ground */
    border: 1px solid var(--rule);
    display: block;
}
body.theme-dark .gig-place { min-width: 0; }

@media (max-width: 640px) {
    body.theme-dark .gig-flag { width: 20px; height: 14px; }
}

body.theme-dark .gig-venue { color: var(--ink-soft) !important; font-size: 0.95rem; text-align: right; }

@media (max-width: 640px) {
    body.theme-dark .gig-list .gig {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    body.theme-dark .gig-venue { text-align: left; }
}

/* ---------- Past dates: the same list, grouped by year ---------- */
/* The page ships its own dark styling inline; these rules come after it and
   pull it into the poster key rather than replacing the markup, which is 114
   hand-maintained entries. */
body.theme-dark .past-dates { max-width: 1100px; margin: 0 auto; padding: 0 20px 64px; }

body.theme-dark .past-dates h1 {
    font-family: var(--display) !important;
    color: var(--ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 6vw, 3.4rem) !important;
    margin: 0 0 8px !important;
    border-bottom: 5px solid var(--ink);
    padding-bottom: 10px;
}

body.theme-dark .year-section {
    margin: 36px 0 0 !important;
    /* the inline styles wrap each year in a rounded, lifted panel */
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.theme-dark .past-dates + *, body.theme-dark main { padding-top: 0 !important; }

/* The year is the anchor when scanning a list this long, so it gets the
   poster block treatment and sticks while its own dates scroll past. */
body.theme-dark .year-header {
    position: sticky;
    top: 0;
    z-index: 5;
    font-family: var(--display) !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.06em;
    color: var(--paper) !important;
    background: var(--ink) !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.theme-dark .year-header .arrow { color: var(--red) !important; font-size: 0.9rem; }

body.theme-dark .tour-dates-past {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 3px solid var(--ink);
}

body.theme-dark .tour-dates-past li {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: 8px 20px;
    align-items: center;
    padding: 13px 4px !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid var(--rule) !important;
    border-radius: 0 !important;
    transition: background 0.15s ease, padding-left 0.15s ease;
}
body.theme-dark .tour-dates-past li:hover { background: var(--paper-2); padding-left: 12px !important; }

body.theme-dark .tour-dates-past li strong {
    font-family: var(--display);
    font-size: 1.12rem;
    color: var(--red) !important;
    letter-spacing: 0.02em;
}

body.theme-dark .tour-dates-past .location {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1rem;
    color: var(--ink) !important;
}

/* The flag closes the row on the right, matching the venue column on the
   upcoming list. */
body.theme-dark .tour-dates-past .gig-flag {
    width: 22px;
    height: 15px;
    border: 1px solid var(--rule);
    display: block;
    justify-self: end;
}

@media (max-width: 640px) {
    body.theme-dark .tour-dates-past li {
        grid-template-columns: 84px 1fr auto;
        gap: 6px 12px;
        padding: 11px 2px !important;
    }
    body.theme-dark .tour-dates-past li strong { font-size: 0.98rem; }
    body.theme-dark .tour-dates-past .location { font-size: 0.86rem; }
    body.theme-dark .past-dates { padding: 0 14px 48px; }
}

/* Compact teaser on the home page */
body.theme-dark #performances .gig-list { margin-bottom: 24px; }
body.theme-dark #performances .gig-list .gig { padding: 14px 4px; }

/* ==========================================================================
   MOBILE
   Measured on an emulated iPhone 13 (390x844@3x). The header was wrapping to
   three rows, 283px tall, and .main-nav was being squeezed to 200px starting
   at left:-34px, which clipped "POČETNA" to "TNA". Below 760px the nav is
   behind a toggle and everything else is sized for a thumb.
   ========================================================================== */

.nav-toggle { display: none; }

@media (max-width: 760px) {
    body.theme-dark .header-content {
        /* Something upstream turns this column on narrow screens, which is why
           the logo, controls and toggle each took their own row. Force a row
           and let only the nav wrap onto a line of its own. */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 8px;
        padding: 8px 12px !important;
    }

    /* 3px narrower than the row can hold pushed the toggle to its own line. */
    body.theme-dark .header-logo { height: 32px; width: auto; }

    /* Toggle: three bars that become an X. 44px square touch target. */
    body.theme-dark .nav-toggle {
        display: flex !important;
        order: 3;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        padding: 0 10px;
        margin-left: auto;
        background: transparent;
        border: 3px solid var(--ink);
        border-radius: 0;
        cursor: pointer;
    }
    body.theme-dark .nav-toggle span {
        display: block;
        height: 3px;
        width: 100%;
        background: var(--ink);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    body.theme-dark .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    body.theme-dark .nav-toggle.open span:nth-child(2) { opacity: 0; }
    body.theme-dark .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    body.theme-dark .main-nav {
        order: 5;
        flex: 0 0 100%;
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    body.theme-dark .main-nav.open { max-height: 70vh; overflow-y: auto; }

    /* The desktop nav centres its list with absolute positioning, which put
       the links at left:-188px once the bar became a column - the same way
       the header used to clip "POČETNA" down to "TNA". */
    body.theme-dark .main-nav {
        display: block !important;
        position: static !important;
        transform: none !important;
    }

    body.theme-dark .main-nav ul {
        display: flex !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 10px 0 6px !important;
        padding: 0 !important;
    }
    body.theme-dark .main-nav ul li { width: 100%; }

    body.theme-dark .main-nav .nav-link {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 6px !important;
        font-size: 1rem !important;
        border-bottom: 2px solid var(--rule);
    }
    body.theme-dark .main-nav .nav-link::after { display: none; }

    body.theme-dark .header-right-controls { order: 2; gap: 6px; margin-left: auto; align-items: center; }
    body.theme-dark .language-switcher { display: flex; gap: 8px; }
    body.theme-dark .language-switcher img { width: 28px; height: 20px; }
    body.theme-dark .cart-indicator a { min-width: 44px; min-height: 44px; justify-content: center; }

    /* The dot rail sits over the content on a narrow screen and is redundant
       once the nav is a menu. */
    body.theme-dark .section-indicator { display: none !important; }

    /* Sections scroll under the sticky header; give anchors room to clear it. */
    body.theme-dark section { scroll-margin-top: 96px; }

    /* ---- Type and rhythm ---- */
    body.theme-dark section { padding: 34px 16px !important; }
    body.theme-dark section h2 { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
    body.theme-dark section h2::after { height: 4px; margin-top: 10px; }
    body.theme-dark section p, body.theme-dark section li { font-size: 0.98rem; }

    /* ---- Shop ---- */
    body.theme-dark .products-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
    body.theme-dark .product-card h3 { font-size: 1.05rem !important; }
    body.theme-dark .size-select { min-height: 48px; font-size: 1rem !important; }
    body.theme-dark .add-to-cart-btn, body.theme-dark .buy-button { min-height: 50px; }

    /* ---- Cart and checkout: comfortable fields ---- */
    body.theme-dark .cart-container { padding: 20px 14px 60px !important; }
    body.theme-dark .cart-header { gap: 12px; }
    body.theme-dark .quantity-btn { width: 48px; height: 48px; }
    body.theme-dark .quantity-input { height: 48px; width: 68px; }
    body.theme-dark .remove-btn { min-height: 46px; }
    body.theme-dark .checkout-btn { min-height: 54px; font-size: 1.05rem; }
    body.theme-dark .checkout-form { padding: 20px 16px !important; }
    body.theme-dark .co-grid { grid-template-columns: 1fr !important; gap: 14px; }
    /* 16px keeps iOS Safari from zooming the page when a field is focused. */
    body.theme-dark .co-field input,
    body.theme-dark .co-field textarea { font-size: 16px !important; min-height: 48px; }
    body.theme-dark .co-field textarea { min-height: 96px; }
    body.theme-dark .co-actions { flex-direction: column; }
    body.theme-dark .co-actions .checkout-btn,
    body.theme-dark .co-actions .remove-btn { width: 100%; flex: 1 1 auto; }

    /* ---- Tour dates ---- */
    body.theme-dark .tour-dates-container { padding: 20px 14px 60px !important; }
    body.theme-dark .gig-list .gig { padding: 14px 2px; }
    body.theme-dark .gig-date b { font-size: 1.25rem; }
    body.theme-dark .tour-nav { display: flex; flex-wrap: wrap; gap: 10px; }
    body.theme-dark .tour-button { min-height: 46px; display: inline-flex; align-items: center; }

    /* ---- Social and footer ---- */
    body.theme-dark .social-links { gap: 14px; }
    body.theme-dark .social-links a { width: 56px !important; height: 56px !important; }
    body.theme-dark footer { padding: 26px 16px !important; font-size: 0.74rem; }

    /* ---- Model gallery ---- */
    body.theme-dark #tshirt-modal .modal-content { padding: 18px !important; width: 94vw !important; }
    body.theme-dark #tshirt-modal-images { grid-template-columns: 1fr; gap: 16px; }
    body.theme-dark #tshirt-modal .modal-close-button { width: 46px; height: 46px; }
}