/* =============================================================
   GALAXY HOSTEL — restyle for alfahfemmes.com
   Loaded after stylesheet.css (see header.php).

   Round 1: fonts, colour tokens, base type, navigation.

   To roll the whole restyle back, remove the galaxy.css <link>
   line from header.php. Nothing in stylesheet.css is edited,
   so the WooCommerce fixes in it stay exactly as they are.
   ============================================================= */


/* -------------------------------------------------------------
   1. Fonts — all self-hosted in /fonts, nothing from Google
   ------------------------------------------------------------- */

/* Gord — Typodermic web licence, order #FB307151, up to 10k
   pageviews/month. Licence owner: Lhaav LLC. */
@font-face {
    font-family: 'Gord';
    src: url('fonts/gord-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Karla — body, navigation, shop, anything long. SIL OFL. */
@font-face {
    font-family: 'Karla';
    src: url('fonts/karla-v33-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Karla';
    src: url('fonts/karla-v33-latin_latin-ext-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Karla';
    src: url('fonts/karla-v33-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Karla';
    src: url('fonts/karla-v33-latin_latin-ext-600italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Courier Prime — lyrics, notices, captions, form labels. SIL OFL. */
@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/courier-prime-v11-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/courier-prime-v11-latin_latin-ext-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/courier-prime-v11-latin_latin-ext-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('fonts/courier-prime-v11-latin_latin-ext-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* The old stylesheet asks for 'Public Sans' in about a dozen
   places, several with !important (cart, product buttons).
   Rather than override each one, the name 'Public Sans' now
   points at the Karla files, so every one of those rules
   switches to Karla at once. When a later round rewrites those
   rules, this block can go. */
@font-face {
    font-family: 'Public Sans';
    src: url('fonts/karla-v33-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Public Sans';
    src: url('fonts/karla-v33-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* -------------------------------------------------------------
   2. Tokens
   ------------------------------------------------------------- */

:root {
    --night-indigo:   #221B3F;  /* primary ground                     */
    --deep-ground:    #1A1533;  /* section alternation, header, cards */
    --greasepaint:    #F2EEE6;  /* primary text, frames, paper        */
    --nicotine:       #C9AE72;  /* labels, rules, nav                 */
    --corridor-mint:  #A9C2A3;  /* secondary text; Polish on dark     */
    --bottle-green:   #3F5A4C;  /* panels, borders; Polish on paper   */
    --dusty-purple:   #6E4F8A;  /* small accents only                 */
    --moon-lilac:     #CFC3E0;  /* newest notice, highlights          */
    --sodium:         #E8A33D;  /* the one light on: Listen, active   */
    --faded-rouge:    #C8698A;  /* no vacancy                         */

    --font-display:  'Gord', 'Trebuchet MS', sans-serif;
    --font-register: 'Courier Prime', 'Courier New', monospace;
    --font-ui:       'Karla', 'Helvetica Neue', Arial, sans-serif;
}


/* -------------------------------------------------------------
   3. Base
   ------------------------------------------------------------- */

html,
body {
    background: var(--night-indigo);
    color: var(--greasepaint);
    font-family: var(--font-ui);
    font-weight: 400;
}

::selection {
    background: var(--sodium);
    color: var(--night-indigo);
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 3px;
}


/* -------------------------------------------------------------
   4. Navigation — desktop
   ------------------------------------------------------------- */

#header {
    background: var(--deep-ground);
    border-bottom: 1px solid var(--bottle-green);
    padding: 0;
}

#header .box.flex {
    align-items: center;
    min-height: 76px;
}

/* "Directions" is a phone-only label */
#header .nav-label {
    display: none;
}

#menu {
    padding-top: 0;
    font-family: var(--font-ui);
}

#menu ul {
    font-size: 12px;
}

#menu ul li {
    padding: 0 13px;
}

#menu ul li a {
    display: inline-block;
    padding: 6px 0 5px;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nicotine);
    border-bottom: 2px solid transparent;
}

#menu ul li a.active {
    color: var(--sodium);
    opacity: 1;
    border-bottom-color: var(--sodium);
}
@media (hover: hover) {
    #menu ul li a:hover {
        color: var(--sodium);
        opacity: 1;
        border-bottom-color: var(--sodium);
    }
}

#logo img {
    display: block;
    width: 36px;
    height: 36px;
}

@media all and (max-width: 1400px) {
    #menu ul li {
        padding: 0 9px;
    }
}

@media all and (max-width: 1020px) {
    #menu ul li {
        padding: 0 6px;
    }
    #menu ul li a {
        letter-spacing: 0.1em;
    }
}


/* -------------------------------------------------------------
   5. Navigation — phones: "Directions" and a row of tags

   The header stays fixed at the top, so the tags sit in a
   single row that scrolls sideways instead of wrapping onto
   three rows. That keeps the header about 110px tall instead
   of about 200px on a phone.
   ------------------------------------------------------------- */

@media all and (max-width: 800px) {

    #header {
        padding: 12px 0 14px;
    }

    #header .box.flex {
        min-height: 0;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
    }

    #header .nav-label {
        display: flex;
        align-items: center;
        gap: 10px;
        order: 1;
        font-family: var(--font-register);
        font-size: 14px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--nicotine);
    }

    #header .nav-label svg {
        display: block;
        flex-shrink: 0;
    }

    #logo {
        order: 2;
    }

    #logo img {
        width: 28px;
        height: 28px;
    }

    #menu {
        order: 3;
        width: 100%;
        padding-top: 0;
    }

    #menu ul {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        font-size: 12px;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #menu ul::-webkit-scrollbar {
        display: none;
    }

    #menu ul li {
        flex-shrink: 0;
        padding: 0;
    }

    #menu ul li a {
        display: flex;
        align-items: center;
        height: 44px;
        box-sizing: border-box;
        padding: 0 14px;
        letter-spacing: 0.1em;
        white-space: nowrap;
        background: var(--night-indigo);
        border: 1px solid var(--bottle-green);
    }

    #menu ul li a.active {
        border-color: var(--sodium);
    }
}


/* =============================================================
   Round 2: Front Desk, buttons, Check In, contact form notes
   ============================================================= */

:root {
    --header-h: 77px;   /* fixed header height, desktop */
}

@media all and (max-width: 800px) {
    :root {
        --header-h: 112px;  /* Directions label + one row of tags */
    }
}


/* -------------------------------------------------------------
   6. Buttons — used on the Front Desk now, reused later
   ------------------------------------------------------------- */

.gh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 52px;
    padding: 0 30px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

/* The one light on */
.gh-button--primary {
    background: var(--sodium);
    color: var(--night-indigo);
}
@media (hover: hover) {
    .gh-button--primary:hover {
        background: var(--greasepaint);
        color: var(--night-indigo);
    }
}

.gh-button--secondary {
    background: transparent;
    border-color: var(--greasepaint);
    color: var(--greasepaint);
}
@media (hover: hover) {
    .gh-button--secondary:hover {
        background: var(--greasepaint);
        color: var(--night-indigo);
    }
}

/* Quieter still: Check In sits under the two main actions */
.gh-button--quiet {
    min-height: 48px;
    padding: 0 24px;
    background: transparent;
    border-color: var(--nicotine);
    color: var(--nicotine);
}
@media (hover: hover) {
    .gh-button--quiet:hover {
        background: var(--nicotine);
        color: var(--night-indigo);
    }
}

.front-desk__checkin .gh-button {
    flex: 0 0 auto;
}

/* No grey flash on tap */
.gh-button,
#menu ul li a,
.room__window,
.other-room,
.rooms__other-toggle {
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .gh-button { transition: none; }
}


/* -------------------------------------------------------------
   7. Front Desk (#home)
   ------------------------------------------------------------- */

#home.front-desk {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: calc(var(--header-h) + 48px) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--night-indigo);
    text-align: center;
}

.front-desk__main {
    --fd-gap: 22px;
    --fd-hang: 18px;               /* length of the vacancy plate's hangers */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fd-gap);
    padding: 0 20px 56px;
    /* Measured from a screen recording (Round 24): in Safari on a computer,
       while the stars are on, the planet and the sign sit exactly one pixel
       lower, because Safari moves them onto a separate layer whenever
       something animates behind them. So the Front Desk and its contents
       stay on fixed layers all the time, and switching the stars on changes
       nothing about how they're drawn. (Round 20 fixed only this inner
       layer, not #home around it, which is why everything jiggled then.) */
    will-change: transform;
}

.front-desk__planet img {
    display: block;
    width: 280px;
    max-width: 72vw;
    height: auto;
}

/* Top line of the sign: "Alfah Femmes present" */
.front-desk__presents {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nicotine);
}

/* The sign */
.front-desk__sign {
    box-sizing: border-box;
    max-width: 100%;
    padding: 32px 56px;
    border: 2px solid var(--nicotine);
    background: var(--deep-ground);
    /* the thin inner line, 6px inside the border */
    box-shadow: inset 0 0 0 6px var(--deep-ground), inset 0 0 0 7px var(--nicotine);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.front-desk__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 6.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--greasepaint);
}

/* The joke: HOSTEL reads as HOTEL. Only ever this one letter. */
.front-desk__title .dim {
    opacity: 0.18;
}

/* The vacancy plate: a separate small sign hanging under the main one,
   with two lamps. Exactly one is lit. */
.front-desk__vacancy {
    position: relative;
    margin-top: calc(var(--fd-hang) - var(--fd-gap));   /* gap above = hanger length exactly */
    padding: 12px 26px;
    border: 1px solid var(--nicotine);
    background: var(--deep-ground);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
}
/* two hangers from the sign above: short pieces of the pull cord's chain
   (the drawn bead chain here; your cord photo below, when there is one) */
.front-desk__vacancy::before,
.front-desk__vacancy::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--fd-hang) - 1px);   /* -1px: through the plate's own border */
    width: 2px;
    height: calc(var(--fd-hang) + 2px);     /* +2px: tucked into the sign's edge above */
    margin-top: -1px;
    background: repeating-linear-gradient(to bottom,
        var(--nicotine) 0, var(--nicotine) 3px,
        rgba(201, 174, 114, 0.3) 3px, rgba(201, 174, 114, 0.3) 5px);
}
/* with your cord photo: the top of the same chain, at the same size as the
   cord itself (72px tall on computers, 60px on phones), cut to length */
.front-desk__vacancy--photo-chain::before,
.front-desk__vacancy--photo-chain::after {
    width: 16px;
    margin-left: -7px;                      /* centred where the drawn chain was */
    background: var(--cord-img) center top / auto 72px no-repeat;
}
.front-desk__vacancy--photo-chain::after {
    margin-left: 0;
    margin-right: -7px;
}
.front-desk__vacancy::before { left: 22%; }
.front-desk__vacancy::after  { right: 22%; }

.front-desk__lamp {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-register);
    font-size: 15px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.front-desk__bulb {
    display: block;
    width: 22px;
    height: 22px;
}
.front-desk__lamp.is-on        { color: var(--sodium); }
.front-desk__lamp--no.is-on    { color: var(--faded-rouge); }   /* February: NO VACANCY lit in tired neon */
.front-desk__lamp.is-off       { color: var(--greasepaint); }
.front-desk__lamp.is-off span  { opacity: 0.28; }   /* the word dims; the unlit bulb picture shows as it is */
/* letter-spacing adds space after the last letter; trim it so the plate is truly centred */
.front-desk__lamp span         { margin-right: -0.22em; }

.front-desk__tagline {
    margin: 0;
    font-family: var(--font-register);
    font-size: 17px;
    line-height: 1.45;
    color: var(--corridor-mint);
}

.front-desk__tagline-line {
    white-space: nowrap;
}
.front-desk__tagline-line + .front-desk__tagline-line::before {
    content: "\00B7";               /* a middle dot between the parts */
    margin-right: 0.6em;
}

.front-desk__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
}

/* Check In — the mailing list */
.front-desk__checkin {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 520px);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.front-desk__field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}

.front-desk__field label {
    font-family: var(--font-register);
    font-size: 14px;
    color: var(--nicotine);
}

.front-desk__field input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--bottle-green);
    border-radius: 0;
    background: var(--deep-ground);
    color: var(--greasepaint);
    font-family: var(--font-ui);
    font-size: 16px;
}

.front-desk__field input[type="email"]::placeholder {
    color: var(--corridor-mint);
    opacity: 0.7;
}

/* Bottom rule with the two typewriter lines */
.front-desk__rule {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 0 20px;
    border-top: 1px solid var(--bottle-green);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-register);
    font-size: 14px;
    color: var(--corridor-mint);
}

@media all and (max-width: 800px) {

    #home.front-desk {
        padding-top: calc(var(--header-h) + 28px);
    }

    .front-desk__main {
        --fd-gap: 18px;
        --fd-hang: 16px;
        padding: 0 18px 40px;
    }

    .front-desk__planet img {
        width: 220px;
    }

    .front-desk__tagline-line {
        display: block;
    }
    .front-desk__tagline-line + .front-desk__tagline-line::before {
        content: none;
    }

    .front-desk__vacancy {
        padding: 11px 16px;        /* a smaller plate hanging under the sign, not a second full-width box */
        gap: 8px 18px;
    }
    .front-desk__lamp {
        font-size: 14px;
        letter-spacing: 0.16em;
    }
    .front-desk__lamp span {
        margin-right: -0.16em;
    }

    .front-desk__sign {
        width: 100%;
        padding: 20px 14px;
        box-shadow: inset 0 0 0 5px var(--deep-ground), inset 0 0 0 6px var(--nicotine);
    }

    .front-desk__tagline {
        font-size: 15px;
    }

    .front-desk__actions,
    .front-desk__checkin {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .front-desk__checkin {
        width: 100%;
    }

    .front-desk .gh-button {
        width: 100%;
    }

    .front-desk__rule {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
    }
}


/* -------------------------------------------------------------
   8. Contact form messages (replaces the old inline red/green)
   ------------------------------------------------------------- */

.af-form-note {
    margin: 12px 0 0;
    font-family: var(--font-register);
    font-size: 15px;
}
.af-form-note.is-ok {
    color: var(--greasepaint);
}
.af-form-note.is-error {
    color: var(--sodium);
}


/* =============================================================
   Round 3: section headings, Rooms, Other rooms, the open room
   ============================================================= */

/* -------------------------------------------------------------
   9. Section headings (Gord)
   ------------------------------------------------------------- */

.gh-heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--greasepaint);
}


/* -------------------------------------------------------------
   10. Rooms (#music) — the facade
   ------------------------------------------------------------- */

#music.rooms {
    margin: 0;
    padding: 96px 0 104px;
    background: var(--deep-ground);
}

.rooms__inner {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.rooms__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
}

.rooms__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    font-family: var(--font-register);
    font-size: 15px;
    color: var(--nicotine);
}
.rooms__meta a {
    color: var(--nicotine);
    text-underline-offset: 3px;
}
.rooms__other-toggle {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--nicotine);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.rooms__other-toggle[aria-expanded="true"] {
    color: var(--sodium);
}
@media (hover: hover) {
    #music .rooms__meta a:hover,
    .rooms__other-toggle:hover {
        color: var(--sodium);
    }
}
#other-rooms {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

/* The old stylesheet colours every link inside #music gold (#music a),
   and an id selector outranks our classes. Reset it, then give each
   Rooms link its intended colour at a matching strength. */
#music a {
    color: inherit;
}
#music .rooms__presave {
    color: var(--sodium);
}

/* Inside a room: a quiet link to the song in the visitor's music app */
.room-listen {
    margin: 0;
}
#music .room-link svg {
    flex-shrink: 0;
}
/* the outer frame line sits outside the box: leave room for it */
.room-listen {
    padding: 4px;
}
.rooms__meta .rooms__presave {
    color: var(--sodium);
}

/* The wall: fine, even render, lit from the top left. One small
   repeating tile (26 KB), drawn at 512 px and shown at 256 so it
   stays sharp on high-resolution screens. */
.facade {
    background-color: var(--bottle-green);
    background-image: url('images/plaster-wall.jpg');
    background-repeat: repeat;
    background-size: 256px 256px;
}
/* The cornice: a cream stepped moulding like on the building photo,
   casting a soft shadow down onto the plaster */
.facade__cornice {
    height: 40px;
    background: linear-gradient(to bottom,
        #F2EEE6 0,  #F2EEE6 7px,             /* top cap */
        #CFC8B8 7px, #CFC8B8 9px,             /* shadow line under the cap */
        #E9E4DA 9px, #E9E4DA 22px,            /* main band */
        #C9C2B2 22px, #C9C2B2 24px,
        #E2DCD0 24px, #E2DCD0 30px,           /* lower lip */
        rgba(26, 21, 51, 0.42) 30px,          /* its shadow on the wall */
        rgba(26, 21, 51, 0) 40px);
}
/* The base: a cream band, then a darker plinth down to the street */
.facade__pavement {
    height: 46px;
    background: linear-gradient(to bottom,
        #E2DCD0 0, #E2DCD0 8px,
        #C9C2B2 8px, #C9C2B2 10px,
        #2E4238 10px, #2E4238 46px);
}

.facade__windows {
    list-style: none;
    margin: 0;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 34px;
}

.room {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* One window: the room picture (or boards) with the frame on top */
.room__window {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--deep-ground);
    overflow: hidden;
    font: inherit;
    color: inherit;
}
button.room__window {
    cursor: pointer;
}
.room__picture,
.room__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}
.room__picture {
    object-fit: cover;
    transition: transform 0.4s ease;
}
.room__frame {
    object-fit: fill;
    pointer-events: none;
}
@media (hover: hover) {
    button.room__window:hover .room__picture {
        transform: scale(1.04);
    }
}
button.room__window:focus-visible {
    outline: 3px solid var(--sodium);
    outline-offset: 4px;
}

.room__number {
    position: absolute;
    left: 9%;
    top: 7%;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 13px;
}
/* Occupied: an indigo plate with a cream ring and a lit number (the same
   lit number as on the door once you're inside). The thin dark edge
   outside the ring keeps it readable on light photos too. */
.room.is-open .room__number {
    background: var(--night-indigo);
    color: var(--sodium);
    box-shadow: 0 0 0 2px var(--greasepaint),
                0 0 0 3px rgba(26, 21, 51, 0.6);
}
.room.is-vacant .room__number {
    background: var(--deep-ground);
    color: var(--corridor-mint);
    border: 1px solid var(--corridor-mint);
    box-sizing: border-box;
}

/* Nameplate under each window. Dark, so the gold and mint text
   read clearly: on the green wall itself they don't pass contrast. */
.room__plate {
    flex-grow: 1;              /* every plate on a floor is as tall as the tallest */
    margin-top: 12px;
    padding: 10px 12px 11px;
    background: var(--night-indigo);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.room__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.25;
    text-wrap: balance;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.room__status {
    margin: 0;
    font-family: var(--font-register);
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sodium);
}
.room.is-vacant .room__title,
.room.is-vacant .room__status {
    color: var(--corridor-mint);
}

@media (prefers-reduced-motion: reduce) {
    .room__picture { transition: none; }
    button.room__window:hover .room__picture { transform: none; }
}

@media all and (max-width: 1020px) {
    .facade__windows {
        padding: 28px;
        gap: 28px 20px;
    }
}

/* Phones: a narrow building, two windows per floor */
@media all and (max-width: 800px) {
    #music.rooms {
        padding: 64px 0 72px;
    }
    .rooms__inner {
        padding: 0 14px;
    }
    .facade__windows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px;
        gap: 20px 14px;
    }
    .facade__cornice {
        height: 30px;
        background: linear-gradient(to bottom,
            #F2EEE6 0, #F2EEE6 5px, #CFC8B8 5px, #CFC8B8 7px,
            #E9E4DA 7px, #E9E4DA 16px, #C9C2B2 16px, #C9C2B2 18px,
            #E2DCD0 18px, #E2DCD0 22px,
            rgba(26, 21, 51, 0.42) 22px, rgba(26, 21, 51, 0) 30px);
    }
    .facade__pavement {
        height: 32px;
        background: linear-gradient(to bottom,
            #E2DCD0 0, #E2DCD0 6px, #C9C2B2 6px, #C9C2B2 8px, #2E4238 8px, #2E4238 32px);
    }
    .room__number {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
    .room__title { font-size: 13px; }
    .room__plate { padding: 9px 10px 10px; }
}


/* -------------------------------------------------------------
   11. Other rooms — the older songs
   ------------------------------------------------------------- */

.other-rooms[hidden] {
    display: none;
}
.other-rooms {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.other-rooms__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.other-rooms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 22px;
}
.other-rooms__list li {
    margin: 0;
}
.other-room {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--greasepaint);
    font-family: var(--font-ui);
}
.other-room__picture {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--bottle-green);
    box-sizing: border-box;
}
.other-room__title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (hover: hover) {
    .other-room:hover .other-room__title {
        color: var(--sodium);
    }
}
.other-room:focus-visible {
    outline: 3px solid var(--sodium);
    outline-offset: 4px;
}

@media all and (max-width: 800px) {
    .other-rooms__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
}


/* -------------------------------------------------------------
   12. The open room (dialog)
   ------------------------------------------------------------- */

html.room-is-open {
    overflow: hidden;
}

.room-dialog {
    box-sizing: border-box;
    width: min(1080px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 0;
    border: 3px solid var(--greasepaint);
    border-radius: 0;
    background: var(--night-indigo);
    color: var(--greasepaint);
    overflow: hidden;
}
.room-dialog[open] {
    display: flex;
    flex-direction: column;
}
.room-dialog::backdrop {
    background: rgba(26, 21, 51, 0.88);
}

/* Old-hotel door plates: two thin gold lines with a gap between them,
   lettered like the menu. Used for "Leave the room" and the music-app link. */
.room-dialog__close,
#music .room-link,
.other-rooms__hide-btn {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--night-indigo);
    border: 1px solid var(--nicotine);
    border-radius: 0;
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine);
    color: var(--nicotine);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.room-dialog__close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 3;
}
@media (hover: hover) {
    .room-dialog__close:hover,
    #music .room-link:hover {
        color: var(--sodium);
        border-color: var(--sodium);
        box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium);
    }
    .other-rooms__hide-btn:hover {
        color: var(--sodium);
        border-color: var(--sodium);
        box-shadow: 0 0 0 3px var(--deep-ground), 0 0 0 4px var(--sodium);
    }
}

/* Hide other rooms: same door plate, on the Rooms section's darker ground */
.other-rooms__hide {
    margin: 18px 0 0;
    padding: 4px;
    display: flex;
    justify-content: center;
}
.other-rooms__hide-btn {
    background: var(--deep-ground);
    box-shadow: 0 0 0 3px var(--deep-ground), 0 0 0 4px var(--nicotine);
}
.other-rooms__hide-btn:focus-visible {
    outline-offset: 7px;
}
.rooms__head {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.room-dialog__content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* door header */
.room-door {
    box-sizing: border-box;
    min-height: 76px;
    padding: 16px 250px 16px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--bottle-green);
}
.room-door__number {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--sodium);
    color: var(--sodium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
}
.room-door__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--greasepaint);
}

/* inside: video and listen on the left, lyrics on the right */
.room-inside {
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 32px;
}
.room-inside__watch {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.room-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--deep-ground);
}
.room-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.room-listen {
    margin: 0;
}
.room-lyrics {
    border-left: 1px solid var(--bottle-green);
    padding-left: 28px;
}
.room-lyrics__label {
    margin: 0 0 14px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nicotine);
}
.room-lyrics__text {
    font-family: var(--font-register);
    font-size: 16px;
    line-height: 1.55;
    color: var(--greasepaint);
}

/* corridor: walk to the next open room */
.room-dialog__corridor {
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 60px;
    padding: 8px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--bottle-green);
}
.room-dialog__corridor[hidden] {
    display: none;
}
.room-dialog__step {
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--nicotine);
    font-family: var(--font-register);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.room-dialog__step--next {
    margin-left: auto;
    text-align: right;
}
@media (hover: hover) {
    .room-dialog__step:hover {
        color: var(--sodium);
    }
}

/* Phones: the room fills the screen, lyrics under the video */
@media all and (max-width: 800px) {
    .room-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
    }
    .room-dialog__close {
        top: 11px;
        right: 12px;
        width: 44px;
        padding: 0;
        justify-content: center;
    }
    .room-dialog__close-text {
        display: none;
    }
    .room-door {
        min-height: 66px;
        padding: 12px 70px 12px 14px;
        gap: 12px;
    }
    .room-door__number {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    .room-inside {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 0 20px;
        gap: 18px;
    }
    .room-inside__watch {
        gap: 14px;
    }
    .room-listen {
        padding: 0 16px;
    }
    .room-lyrics {
        border-left: 0;
        padding: 0 16px;
    }
    .room-dialog__corridor {
        padding: 6px 16px;
    }
}

/* The room's title receives focus when a room opens (for screen readers);
   it isn't a control, so no focus ring. */
.room-door__title:focus {
    outline: none;
}

/* keyboard focus ring outside the door plate's double frame */
.room-dialog__close:focus-visible,
#music .room-link:focus-visible {
    outline-offset: 7px;
}


/* =============================================================
   Round 8: the rest of the house
   History, Staff, Gift Shop, Notice Board, Tour Desk,
   Reception, footer — and window variants for Rooms.
   ============================================================= */

/* -------------------------------------------------------------
   13. Shared section frame
   ------------------------------------------------------------- */

.gh-wrap {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
.gh-wrap > .gh-heading {
    margin-bottom: 30px;
}

/* the old stylesheet pads sections by 100px and forces Staff to zero
   (with !important): one consistent rhythm for all of them */
#story.history,
#members.staff,
#merch.gift-shop,
#whatisupnow.notices,
#events.tour-desk,
#contact.reception {
    margin: 0 !important;
    padding: 96px 0 104px !important;
    font-size: 17px;
    line-height: 1.6;
    color: var(--greasepaint);
}
#story.history {
    background-color: var(--night-indigo);
    background-image: url('images/plaster-lobby.jpg');   /* the lobby wall */
    background-size: 256px 256px;
}
#members.staff      { background: var(--deep-ground); background-image: none; }
#merch.gift-shop    { background: var(--night-indigo); }
#whatisupnow.notices { background: var(--deep-ground); }
#events.tour-desk   { background: var(--night-indigo); }
#contact.reception  { background: var(--deep-ground); }

/* old gold for every link in these sections: reset, each link sets its own */
#whatisupnow a,
#merch a,
#events a,
#contact a {
    color: inherit;
}

@media all and (max-width: 800px) {
    #story.history,
    #members.staff,
    #merch.gift-shop,
    #whatisupnow.notices,
    #events.tour-desk,
    #contact.reception {
        padding: 64px 0 72px !important;
    }
    .gh-wrap {
        padding: 0 14px;
    }
    .gh-wrap > .gh-heading {
        margin-bottom: 22px;
    }
}


/* -------------------------------------------------------------
   14. History — the plaque
   ------------------------------------------------------------- */

.history__body {
    display: flex;
    gap: 0;
    align-items: flex-end;
    justify-content: center;
}
.history__portrait {
    position: relative;
    z-index: 2;
    flex: 0 0 310px;
    margin: 0 -85px -14px 0;   /* leans onto the plaque's left edge */
}
.history__portrait img {
    display: block;
    width: 100%;
    height: auto;
}
.plaque {
    position: relative;
    z-index: 1;
    flex: 0 1 1000px;
    min-width: 0;
    box-sizing: border-box;
    padding: 48px 46px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    border: 6px solid var(--nicotine);
}
.plaque__screw {
    position: absolute;
    width: 20px;
    height: 20px;
}
/* one screw image, turned differently in each corner so they don't look copied */
.plaque__screw--tl { left: 10px;  top: 10px;    transform: rotate(12deg); }
.plaque__screw--tr { right: 10px; top: 10px;    transform: rotate(-38deg); }
.plaque__screw--bl { left: 10px;  bottom: 10px; transform: rotate(71deg); }
.plaque__screw--br { right: 10px; bottom: 10px; transform: rotate(-9deg); }

.plaque__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    column-gap: 26px;
    row-gap: 14px;
    align-items: start;
}
.plaque__row {
    display: contents;      /* rows share the plaque's three columns */
}
.plaque__lang {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: right;
    color: var(--night-indigo);
}
.plaque__lang--pl {
    text-align: left;
    color: var(--bottle-green);
}
.plaque__intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    text-align: right;
    color: var(--night-indigo);
}
.plaque__rule {
    grid-column: 1 / -1;
    height: 1px;
    margin: 10px 0 6px;
    background: var(--night-indigo);
}
.plaque__line {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: right;
    color: var(--night-indigo);
}
/* Polish: always the green voice (bottle green on paper, mint on dark) */
.plaque__intro--pl,
.plaque__line--pl {
    text-align: left;
    color: var(--bottle-green);
}
.plaque__year {
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.5;
    color: var(--night-indigo);
}

@media all and (max-width: 800px) {
    .history__body {
        flex-direction: column;
        gap: 0;
    }
    .history__portrait {
        order: 2;                 /* below the plaque on phones */
        flex: none;
        align-self: flex-end;
        width: 165px;
        margin: -34px 6px 0 0;    /* leaning on its bottom corner */
    }
    .plaque {
        width: 100%;
        padding: 36px 22px;
        border-width: 4px;
    }
    .plaque__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }
    .plaque__row {
        display: flex;          /* each year becomes: year, English, Polish */
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
    }
    .plaque__row--labels {
        display: none;
    }
    .plaque__year {
        order: -1;
        text-align: left;
    }
    .plaque__intro,
    .plaque__line {
        text-align: left;
    }
}


/* -------------------------------------------------------------
   15. Staff — the register
   ------------------------------------------------------------- */

.staff__group {
    margin-bottom: 34px;
}
.staff__group img {
    display: block;
    width: 100%;
    height: clamp(220px, 28vw, 380px);
    object-fit: cover;
}
.register__head,
.register__row {
    display: grid;
    grid-template-columns: 110px 220px minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
}
.register__head {
    padding-bottom: 12px;
    border-bottom: 2px solid var(--nicotine);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nicotine);
}
.register__row {
    padding: 24px 0;
    border-bottom: 1px solid var(--bottle-green);
}
.register__photo img {
    display: block;
    width: 110px;
    height: 138px;
    object-fit: cover;
}
.register__name {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.register__fullname {
    margin: 0 0 10px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.register__instruments {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-register);
    font-size: 14px;
    line-height: 1.5;
    color: var(--corridor-mint);
}
.register__instruments li {
    margin: 0;
}
.register__position {
    margin: 8px 0 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nicotine);
}
.register__bio {
    font-size: 15px;
    line-height: 1.6;
    color: var(--greasepaint);
}
.register__bio p {
    margin: 0 0 0.6em;
}
.register__bio p:last-child {
    margin-bottom: 0;
}
.register__bio--pl {
    color: var(--corridor-mint);
}

@media all and (max-width: 800px) {
    .register__head {
        display: none;
    }
    .register__row {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 14px 16px;
    }
    .register__photo img {
        width: 84px;
        height: 105px;
    }
    .register__bio {
        grid-column: 1 / -1;
    }
}


/* -------------------------------------------------------------
   16. Section heads with a link on the right (Gift Shop, Notice Board)
   The Gift Shop itself is styled in Round 14, sections 28-29.
   ------------------------------------------------------------- */

.gift-shop__head,
.notices__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    margin-bottom: 30px;
}


/* -------------------------------------------------------------
   17. Notice Board — pinned notes
   ------------------------------------------------------------- */

#whatisupnow .notices__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-register);
    font-size: 15px;
    color: var(--nicotine);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* the board: soft green felt (not the facade's plaster) */
.board {
    box-sizing: border-box;
    padding: 52px 48px;
    background-color: #385144;
    background-image: url('images/felt.jpg');
    background-size: 256px 256px;
    border: 1px solid var(--nicotine);
    display: flex;
    gap: 44px;
    align-items: flex-start;
}
.note {
    position: relative;
    box-sizing: border-box;
    color: var(--night-indigo);
    box-shadow: 0 1px 2px rgba(26, 21, 51, 0.5);
}
.note--new {
    flex: 0 1 560px;
    min-width: 0;
    padding: 36px 30px 28px;
    background: var(--moon-lilac);
    transform: rotate(-1.2deg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.board__older {
    flex: 1 1 240px;            /* a fair share of the width, not just what's left over */
    min-width: 0;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 44px;
    container-type: inline-size;
}
/* When that column is narrow (a computer with a smaller window), each note
   puts its picture above its text instead of squeezing the text to a word
   a line. */
@container (max-width: 420px) {
    .note--old {
        flex-direction: column;
    }
    .note--old .note__img {
        flex: none;
        width: 100%;
        max-width: 280px;
    }
}
.note--old {
    padding: 28px 22px 22px;
    background: var(--nicotine);
    display: flex;
    gap: 18px;
}
.note--old:nth-child(1) { transform: rotate(1.3deg); }
.note--old:nth-child(2) { transform: rotate(-0.8deg); }
.note__pin {
    position: absolute;
    left: 50%;
    top: -13px;
    width: 26px;
    height: 26px;
    margin-left: -13px;
}
.note--old .note__pin {
    top: -11px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
}
.note__img img {
    display: block;
    width: 100%;
    height: auto;          /* posters keep their shape; nothing is cropped */
}
.note--old .note__img {
    flex: 0 0 140px;
}
.note__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-wrap: break-word;  /* a long word never runs off the note */
}
.note__date {
    margin: 0;
    font-family: var(--font-register);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.note__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
}
.note__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}
.note--new .note__excerpt {
    font-size: 16px;
}
#whatisupnow .note__more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--night-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    #whatisupnow .notices__all:hover { color: var(--sodium); }
    #whatisupnow .note__more:hover { color: var(--dusty-purple); }
}
@media all and (max-width: 800px) {
    .board {
        flex-direction: column;
        padding: 36px 16px;
        gap: 36px;
    }
    .note--new {
        flex: none;
        width: 100%;
        padding: 30px 20px 22px;
        transform: rotate(-0.6deg);
    }
    .board__older {
        width: 100%;
        padding-top: 0;
        gap: 36px;
    }
    .note--old {
        flex-direction: column;
    }
    .note--old .note__img {
        flex: none;
    }
    .note--old:nth-child(1) { transform: rotate(0.7deg); }
    .note--old:nth-child(2) { transform: rotate(-0.5deg); }
}


/* -------------------------------------------------------------
   18. Tour Desk — the station board
   ------------------------------------------------------------- */

.station {
    border-top: 2px solid var(--nicotine);
}
.station__head,
.station__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}
.station__head {
    padding: 12px 0;
    border-bottom: 1px solid var(--bottle-green);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nicotine);
}
.station__head span:last-child,
.station__status {
    text-align: right;
}
.station__row {
    padding: 18px 0;
    border-bottom: 1px solid var(--bottle-green);
}
.station__date {
    font-family: var(--font-register);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--sodium);
}
.station__city {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.station__status {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--corridor-mint);
}
#events .station__status a {
    color: var(--nicotine);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.station__status.is-sold {
    color: var(--faded-rouge);
}
.station__row.is-empty .station__date,
.station__row.is-empty .station__city {
    color: var(--bottle-green);
}
@media (hover: hover) {
    #events .station__status a:hover { color: var(--sodium); }
}
@media all and (max-width: 800px) {
    .station__head {
        display: none;
    }
    .station__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 14px;
    }
    .station__date,
    .station__city {
        grid-column: 1;
    }
    .station__status {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    .station__date { font-size: 15px; }
    .station__city { font-size: 17px; }
}


/* -------------------------------------------------------------
   19. Reception — the registration card
   (the old stylesheet styles #contact inputs and buttons by id,
    so these rules carry #contact to outrank it)
   ------------------------------------------------------------- */

.reception__body {
    display: flex;
    gap: 48px;
    align-items: stretch;
}
.reception__photo {
    flex: 0 0 42%;
    min-height: 520px;
}
.reception__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#contact .reg-card {
    position: relative;         /* the stamps land on it */
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 36px 40px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    border: 1px solid var(--nicotine);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.reg-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--night-indigo);
}
.reg-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}
.reg-card__name .dim {
    opacity: 0.18;
}
.reg-card__kind {
    margin: 6px 0 0;
    font-family: var(--font-register);
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reg-card__no {
    margin: 0;
    font-family: var(--font-register);
    font-size: 15px;
}
.reg-card__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reg-card__field--grow {
    flex-grow: 1;
}
#contact .reg-card label {
    font-family: var(--font-register);
    font-size: 15px;
    color: var(--night-indigo);
}
.reg-card__req {
    font-size: 14px;
}
#contact .reg-card input[type="text"],
#contact .reg-card input[type="email"],
#contact .reg-card textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 8px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--night-indigo);
    border-radius: 0;
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-size: 17px;
}
#contact .reg-card textarea {
    min-height: 120px;
    line-height: 1.6;
    resize: vertical;
}
#contact .reg-card input:focus-visible,
#contact .reg-card textarea:focus-visible {
    outline: 2px solid var(--dusty-purple);
    outline-offset: 3px;
}
/* Leave a Note, and under it "Or write to…", both to the right: the
   bell stands on the card's bottom-left corner */
.reg-card__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.reg-card__alt {
    margin: 0;
    font-size: 15px;
    text-align: right;
}
@media all and (min-width: 801px) {
    .reg-card__alt {
        max-width: calc(100% - 120px);      /* wraps before it reaches the bell */
    }
}
#contact .reg-card__submit {
    min-height: 50px;
    padding: 0 30px;
    background: var(--night-indigo);
    color: var(--greasepaint);
    border: 0;
    border-radius: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 1;
}
@media (hover: hover) {
    #contact .reg-card__submit:hover {
        background: var(--dusty-purple);
        opacity: 1;
    }
}
/* messages on the paper card need dark colours */
.reg-card .af-form-note {
    margin: 0;
    padding-top: 4px;
    border-top: 1px dotted rgba(34, 27, 63, 0.4);
}
.reg-card .af-form-note.is-ok    { color: var(--bottle-green); }
.reg-card .af-form-note.is-error { color: var(--dusty-purple); }


/* -------------------------------------------------------------
   47. The stamp on the registration card (js/hotel.js)
   The desk stamps the card when a note goes in: a rubber stamp in
   rouge ink, printed over whatever is underneath, one per note.
   ------------------------------------------------------------- */

.card-stamp {
    position: absolute;
    z-index: 2;
    width: 168px;
    box-sizing: border-box;
    padding: 9px 10px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border: 2.5px solid currentColor;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px var(--greasepaint), inset 0 0 0 3.5px currentColor;
    color: var(--faded-rouge);
    text-align: center;
    transform: translate(-50%, -50%) rotate(var(--rot, -8deg));
    transform-origin: 50% 50%;
    mix-blend-mode: multiply;   /* the card's lines show through the ink */
    pointer-events: none;       /* it never gets in the way of the fields */
    -webkit-mask-image: var(--stamp-grit);
            mask-image: var(--stamp-grit);
    -webkit-mask-size: 112px 112px;
            mask-size: 112px 112px;
}
.card-stamp__hotel {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.card-stamp__word {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.card-stamp__date {
    font-family: var(--font-register);
    font-size: 11px;
    letter-spacing: 0.06em;
}
/* the one just printed lands with a press */
.card-stamp.is-fresh {
    animation: gh-stamp-down 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) 1 both;
}
@keyframes gh-stamp-down {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, -8deg)) scale(1.5); }
    60%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, -8deg)) scale(0.96); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, -8deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .card-stamp.is-fresh { animation: none; }
}
@media all and (max-width: 800px) {
    .card-stamp {
        width: 142px;
        padding: 7px 8px 6px;
    }
    .card-stamp__word { font-size: 21px; }
    .card-stamp__date { font-size: 10px; }
}

@media all and (max-width: 800px) {
    .reception__body {
        flex-direction: column;
        gap: 24px;
    }
    .reception__photo {
        display: none;
    }
    #contact .reg-card {
        padding: 26px 20px;
    }
    .reg-card__foot {
        flex-direction: column;
        align-items: stretch;
    }
    .reg-card__alt {
        text-align: center;
    }
}


/* -------------------------------------------------------------
   20. Footer — plain and quiet on purpose
   ------------------------------------------------------------- */

.site-foot {
    box-sizing: border-box;
    padding: 40px 20px 44px;
    background: var(--night-indigo);
    border-top: 1px solid var(--bottle-green);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.site-foot__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.site-foot__social li {
    margin: 0;
}
.site-foot__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--greasepaint);
}
.site-foot__line {
    margin: 0;
    font-size: 15px;
    color: var(--corridor-mint);
}
.site-foot__small {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--corridor-mint);
}
.site-foot a {
    color: inherit;
}
.site-foot__small a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (hover: hover) {
    .site-foot__social a:hover,
    .site-foot__small a:hover { color: var(--sodium); }
}


/* =============================================================
   Round 9
   ============================================================= */

/* The old theme fills every icon, which turns outline drawings into
   blobs (the footer icons). Outline icons stay outlines. */
svg[fill="none"] {
    fill: none;
}

/* Hidden lists stay hidden */
.gh-wrap [hidden] {
    display: none !important;
}

/* -------------------------------------------------------------
   21. Rooms: the windows
   The frame image decides the window's shape (crop it however you
   like, all three on the same canvas). The room picture sits in the
   "glass" behind it; the site draws the shadow under the frame.
   ------------------------------------------------------------- */

.facade {
    --glass-top: 0%;        /* where the glass is inside the frame image, from each edge. */
    --glass-right: 0%;      /* 0% = the whole window (right for the stand-in frame);    */
    --glass-bottom: 0%;     /* set to match your frames once they're in.                */
    --glass-left: 0%;
}
.room__window {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.room__glass {
    position: absolute;
    top: var(--glass-top);
    right: var(--glass-right);
    bottom: var(--glass-bottom);
    left: var(--glass-left);
    z-index: 0;
    overflow: hidden;
    /* The lamp's yellow is multiplied over the room's photograph. Isolating
       the glass keeps that blend to these two layers alone. Without it,
       Safari on a computer re-works the blend against the whole page when
       the photo scales on hover, and the yellow washes out for a moment. */
    isolation: isolate;
}
.room.is-open .room__glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--sodium);
    mix-blend-mode: multiply;   /* as if the glass itself were yellow */
    opacity: var(--glass-yellow, 0.6);
    pointer-events: none;
}
.room.is-open .room__picture {
    filter: brightness(1.06);   /* the lamp inside is on */
}
.room.is-vacant .room__picture {
    filter: saturate(0.75) brightness(0.9);
}
.room__glass .room__picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    /* the photo keeps to one layer whether it is scaled or not, so the
       lamp's yellow above it never has to be re-worked */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.room__window .room__frame {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
.room__number {
    z-index: 2;
}

/* -------------------------------------------------------------
   22. A notice, opened: a sheet of lilac paper
   (same dialog as the rooms, with class is-notice)
   ------------------------------------------------------------- */

.room-dialog.is-notice {
    background: var(--moon-lilac);
    color: var(--night-indigo);
}
.room-dialog.is-notice .room-door {
    border-bottom-color: rgba(34, 27, 63, 0.25);
}
.room-dialog.is-notice .room-door__title {
    color: var(--night-indigo);
}
.notice-door__date {
    flex-shrink: 0;
    font-family: var(--font-register);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.notice-inside {
    box-sizing: border-box;
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 40px 40px;
}
.notice-inside__img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 62vh;      /* whole picture, tall or wide */
    margin: 0 auto 26px;
}
.notice-inside__text {
    font-size: 17px;
    line-height: 1.65;
}
.notice-inside__text p {
    margin: 0 0 1em;
}
.notice-inside__text img,
.notice-inside__text iframe {
    max-width: 100%;
}
/* Polish: the green voice, on paper */
.notice-inside__text--pl {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(34, 27, 63, 0.25);
    color: var(--bottle-green);
}
#music .notice-inside a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* the door plate and corridor, in ink on paper */
.room-dialog.is-notice .room-dialog__close {
    background: var(--moon-lilac);
    color: var(--night-indigo);
    border-color: var(--night-indigo);
    box-shadow: 0 0 0 3px var(--moon-lilac), 0 0 0 4px var(--night-indigo);
}
.room-dialog.is-notice .room-dialog__corridor {
    border-top-color: rgba(34, 27, 63, 0.25);
}
.room-dialog.is-notice .room-dialog__step {
    color: var(--night-indigo);
}
@media (hover: hover) {
    .room-dialog.is-notice .room-dialog__close:hover {
        color: var(--dusty-purple);
        border-color: var(--dusty-purple);
        box-shadow: 0 0 0 3px var(--moon-lilac), 0 0 0 4px var(--dusty-purple);
    }
    .room-dialog.is-notice .room-dialog__step:hover {
        color: var(--dusty-purple);
    }
}
@media all and (max-width: 800px) {
    .notice-door__date {
        font-size: 12px;
    }
    .notice-inside {
        padding: 20px 16px 28px;
    }
    .notice-inside__text {
        font-size: 16px;
    }
}

/* -------------------------------------------------------------
   23. Older notices: an index under the board
   ------------------------------------------------------------- */

.older-notices {
    padding-top: 30px;
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.older-notices__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bottle-green);
}
.older-notices__list li {
    margin: 0;
    border-bottom: 1px solid var(--bottle-green);
}
#whatisupnow .older-notice {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 44px;
    padding: 14px 0;
    color: var(--greasepaint);
    text-decoration: none;
}
.older-notice__date {
    font-family: var(--font-register);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nicotine);
}
.older-notice__title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}
@media (hover: hover) {
    #whatisupnow .older-notice:hover { color: var(--sodium); }
}
@media all and (max-width: 800px) {
    #whatisupnow .older-notice {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }
    .older-notice__date,
    .older-notice__title {
        grid-column: 1;
    }
    #whatisupnow .older-notice svg {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}


/* =============================================================
   Round 10
   ============================================================= */

/* -------------------------------------------------------------
   24. The sign as neon, and the S that gives up
   ------------------------------------------------------------- */

.front-desk__title {
    text-shadow:
        0 0 5px rgba(242, 238, 230, 0.55),
        0 0 16px rgba(207, 195, 224, 0.45),
        0 0 42px rgba(110, 79, 138, 0.45);
}
/* the dim S: unlit tube. Its glow fades with it, since opacity takes the shadow too */
.front-desk__title .dim {
    opacity: 0.18;
}
@keyframes gh-sign-s {
    0%   { opacity: 1; }
    7%   { opacity: 0.18; }
    11%  { opacity: 1; }
    19%  { opacity: 0.18; }
    24%  { opacity: 1; }
    30%  { opacity: 0.18; }
    36%  { opacity: 1; }
    47%  { opacity: 0.18; }
    53%  { opacity: 1; }
    100% { opacity: 0.18; }   /* and out */
}
.sign-blink .front-desk__title .dim {
    animation: gh-sign-s 1.5s steps(1, end) 1 both;
}
@media (prefers-reduced-motion: reduce) {
    .sign-blink .front-desk__title .dim { animation: none; }
}

/* the sign panel gets a faint bloom of its own */
.front-desk__sign {
    box-shadow:
        inset 0 0 0 6px var(--deep-ground),
        inset 0 0 0 7px var(--nicotine),
        inset 0 0 60px rgba(207, 195, 224, 0.10);
}

/* -------------------------------------------------------------
   25. A notice opens on the paper it was pinned on
   ------------------------------------------------------------- */

.room-dialog.is-notice.is-paper-gold {
    background: var(--nicotine);
}
.room-dialog.is-notice.is-paper-gold .room-dialog__close {
    background: var(--nicotine);
    box-shadow: 0 0 0 3px var(--nicotine), 0 0 0 4px var(--night-indigo);
}
/* on gold, the Polish half keeps the rule but not the green: green on gold
   is too close in value to read comfortably */
.room-dialog.is-notice.is-paper-gold .notice-inside__text--pl {
    color: var(--night-indigo);
}
@media (hover: hover) {
    .room-dialog.is-notice.is-paper-gold .room-dialog__close:hover {
        box-shadow: 0 0 0 3px var(--nicotine), 0 0 0 4px var(--dusty-purple);
    }
}

/* -------------------------------------------------------------
   26. Tour Desk: the line under an empty board
   ------------------------------------------------------------- */

.station__note {
    margin: 22px 0 0;
    font-family: var(--font-register);
    font-size: 16px;
    color: var(--corridor-mint);
}

/* -------------------------------------------------------------
   27. The card number on the registration card
   ------------------------------------------------------------- */

.reg-card__no {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
#contact .reg-card .reg-card__no label {
    font-family: var(--font-register);
    font-size: 15px;
}
#contact .reg-card input#cf_no {
    width: 5em;
    padding: 2px 4px;
    font-family: var(--font-register);
    font-size: 16px;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
}


/* =============================================================
   Round 11
   ============================================================= */

/* The planet is lit too: a soft glow drawn behind it. (It used to be a
   filter on the picture, which phones redraw coarsely while it loads.) */
.front-desk__planet {
    position: relative;
}
.front-desk__planet::before {
    content: "";
    position: absolute;
    inset: -14% -6%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side,
        rgba(242, 238, 230, 0.20) 0%,
        rgba(207, 195, 224, 0.16) 45%,
        rgba(110, 79, 138, 0.10) 70%,
        rgba(110, 79, 138, 0) 100%);
}

/* (the roofline over the Front Desk was tried and removed in Round 15) */

/* (the moulding under the menu was tried and dropped: the plain line reads better) */

/* (Windows 3 and 6 used to have their frame mirrored, back when every
   window was the same stand-in. With eight real photographs it is not
   needed, and the mirroring — being a transform — made Safari re-work the
   lamp's yellow over those two windows whenever they were pointed at.) */


/* =============================================================
   Round 12
   ============================================================= */

/* The green voice needs to go darker on gold paper: bottle green and
   nicotine are too close in value to read comfortably. */
:root {
    --deep-green: #24382E;
}
.room-dialog.is-notice.is-paper-gold .notice-inside__text--pl {
    color: var(--deep-green);
}



/* =============================================================
   Round 14 — The Gift Shop, and the shop pages behind it
   (replaces Round 13's shop styling)

   The shop pages (product, category, cart, checkout) get the body
   class "gh-shop" from inc/gift-shop.php, and most rules here start
   with it. That's deliberate: the old stylesheet styles the product
   page and the cart with many !important rules, and these rules have
   to outrank them without anyone editing stylesheet.css.
   Nothing here changes WooCommerce's forms, only how they look, so
   paying keeps working exactly as before.
   ============================================================= */

:root {
    --case-milk: #DCD0EC;   /* the glass the goods stand behind: moon lilac, so white photo backgrounds read as glass */
    /* the grit of a rubber stamp, embedded so it never needs another request;
       used by the receipt stamps and the Reception card's stamp */
    --stamp-grit: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAQAAABs6TzAAAAOQklEQVR42q1cW3akMA6VObOvmJUhVoayMs8H2NbbTs9UTiddFAV+yFdXVzIFGgAAlO+vfPlH5QsBnfPfowUedmYF+v5H6hoEFW642JnvP35dYt/Un0Pc9r90bNVd3lXZ/OgYJc2s4q8emnUXv9Yeqonvy+9IW85lCZpaAeAUDXqP8QG5g2Ehdv7792adRtMG1do5K978FNEt/H762WWj0/p6lzPuJzNOPasVAIg1G82nmaUVaIfqMQExk2psTc1//RLtT91DAGiAUKFCFfN5iRn8BYCbzd+pZqm6Rl+MpeEc0/6GxGU6TLTNuWnbnyPggI0TnmCVvp1+3HmidAbF/Q4BDaex5mbGp7+T43p9n6AzsmjOf29/Qv1Qtn6r611p95jRy3TCb6uHF28rSxmmCQaGd2avfBdrm3OKqqOPMj9SK60Gs9RRGFcWdHzrDthfacslXFF9lXIzl9+2c4fOHeb8TXSd85k5nhoiPM4OEhCcQEAGqOVXi/gysmMN0IF5YB0srllHfpJ3rAaOoE9GUcfLePfCJRUB0T6TKNBCJ86Nbg+Q5vmk7rhr6PT9m620revnwBHMm29sRcCGns8rMeU55rWP7XBKvTFt4WTmDFF4F9U9gMNtloeC3RhbYGqofGUHehydI/FzsmZS2Nymjj3MU5Pbknc5EOcWKxON2WbMZaRpkekEp9Y3XAmgzLuicfJ+Ows83x1/4fI6SIoQeY2fAF+Xrp0SV74aUn4leR1/WPCDF+EmIh4fod4DCNeHvJQ4EI+ZeBi6GoBJvchQi4zw3wBwHwFol3QBzxtUFUOU7z0635hmeS8JMzgRIyTuxIt5LgDfRPuXyxg7FFyeUgQDd02sjNSyTlQYzO//+0UlVTiy2zPluIN2bL2G1u0ZoG8GaURzVV3pXPjBiQynGA7rK1+zv+Hy12DeTNo+WwfAP06kzqPCZ4HRlaEAiKBuemh+7jVB5g5hBpiDfz7ziCGjqA42MdO5MT9Lc+9xZA1YbfPaf4SIdApEnPToEouYUp9Y2HqS9PkODR2Hs27OwDVxfkkHg7hTvFXsxdcDfbLCbaSFCUU6oM3oAbH1d37+9GSRIahVFwdu9t4Gu62wp5e69lJS3qsLRa3AZVZWC8Slyjraj1BCAVbkngCgHsN0ejzWWBRH3+z53YucheSSuNDm5p2lTHiqrmGgm3UoK76fzEeBQmXzHp5IX2EnkrdGdrmzdI6FUwP/SitHdTg9X7vuCUu9gTxowsUM2/F+PvPUessjFDY9+J1S46ABIXFu6TiTWica/coXQuE/6m4U6GQIv2Mg7TxJj8wDBHGnQ8RcmCjTFuP68ZbOe1no4hLE3hjv/BTSS+EAhjLHLzvWPLbgdY6LEdcy1l7pZ5HsgYZUV1fDJkXgyeWzdd9wivCEFLLVGY7iElYi1hjzKGJwtvM9GeUL6R6YGDQlhvc0G6x0BJ1qDTqxX1m4iOh1svtYAlASkm84zn8cQW4iWNYsgso+aW5c1ozLLyIfSa6aAB/8T3ZThT00Y8CdRtIImfrvUlQCVDMbj4vkeT2LzbAFL3z9kbtaZUtIyReBv5TpM/x8CrmnF4dM70hOMYUgwY0kVpcRCLVAVSUDMEUQdJYARaZ+9nTVadCuGUrWUhVFq5k++78YXeM0/GLGhkwQ8aHmMgulxbjWZ/DcSllbqnaJ4x4N6DEMCJE+m3+N1VM8IZbTCKgaJiEoLNXm5sbgc3Yv4+1m915SfbK1iCY6lVmNW6g1dS1aSWwDyJKL8cpCkfldOf2umPyMBHV18GB3DUOOF1k9xT6o+F3hOX2Jr9dC8J0KWRRD8rw+iYIGxZn2U88OQrH6lapWSRznE4MSSrOAK/dCY3BqHBIfw84xxUOLUAQAD1Nd0FmZzRHVKVHWSqK09EUwUys1yJ8IPDg2KRQ6798unkwqskrcbDJ9ibMoGEM2LHHg1Rj03U5o3iN8VoSQRwUYaJx1zMll8ntTo2yjyeQS5DtR4bTntKHSFYiXPclXoAAe2zPXkjiRHBbqWcWv6twlokDt1OddSxgH0ncNcgbuggZYthm+zviRq9BEZ8ugtoZDtQqu/BxH4g+P1EDy4+QKUxgqL5FuXheEb08lgjWTaQNPiyMwNZMSq6N52tQ8FPX1OghrBMqmDHY7xltGohwP+BHoNnEsyhBiOOpn0EhyNRRS+lxG2Au7Q3X1vTcdWxTJPKGWT9jBJd21FM/Gh9VI7+jmFPk6vJkmWpc6KsHJmGz//j26RBr4Csu6PgDbrCJLnE4ew9M24OrjOieyvj99c/OTQAtbAIeYaj/nXhzDa0GeSHrEZuD7VmZ5mageFv64fgRjFsamAvUhlmll66iEYW3r9h2uoRJAzI9wzp1w/bKCIEhLG/ALl147aWpJnJmp3YwCrcaF13vSwiNRMC/rau3dxcJJWo394DUUZBLsMDKXJlxFbmYey6hfTOg3mcZMFlbKF1Hqc0Qo9nqqjIRUlqdAlkVFVr5agxoY210uMV2hX+uD/ABCc87jvvtJhvM6nMOnQLgrxdI6Ln+FJnk77+7E5d9qJnM059+4hOlTX4NkrL6m0bqO2mcIW4We2oL84r0oAJTrdF4XHRLZDGGs8h5lVCztsMOIEJOCjeosevpu/AMIBDf8bN8nBx0ydtBt6fetk9GiAVf3dTSIiXesBqpRVQZWqCP/c20ULHfjIzeNgwFych9LcBdGct7LNSUBchk+JlDkGjgl4BSbq3esDt1Hq7E41AVS36zdRGtgnJjE+VImJId4P4u5oaWByvVUF/UAxO7MhvCA3RRmBNIce1GJxrPg/f3fep0TM82+yeASHKq4EWNfAqSdRnG5vJ0/LQejiQ5pjPU9uhdFcJd494gaGQ4XP6JwD/+kOIwOPl8Agu6sTQvXtUhzjebd4bhWzXyhGTQy0HEPpM8DOnSqVKmYDKpXmzStmv8uo4PvEGlwuE35lxdcYVYzHyo3Voa2UnOBB+gwIlIzLoBrXdzrNBFb+DLelYiEYLpXWNmeXZmVOajGov0WaKrfDtCfcagGsFJMXKddAW2hImxraaa0/HPcu2kGZuyH2FmLRkTvY1PF7iIdhd0uKt7wL69uL5Xt83yv/yzUW0+Fq4cwUDLFNCgCk7dEp6iwtnr1KQuaruevuES+VxteC9UtcWWHq2/2mLANd9HztE0IEpJn1CRmsO6mmnkrYi22b9HUAHIuQ9tc+ymW3Ijm3LBb3UIubbO8hFT5JCT8BJlPrSk5j6qo6rFgjRAUR3r8subZ8nejhupeWSjaTWgG9AcT/SbsRdGTFfxXOAey1mCk9JjzlfosNLJ/S3iCA4Rb3y1ftbsXC+yIT5DIs9MsT1fS4uqpt4nZM/8aBr9ezQ8A9cs/QZi50rn98gPaDJ+jIh/9iReu4RD1U4w4xB4xT2NEl/VlcUWkyJVF/TYqlmvPw8T3pY61fb8veD6dqm39APvNfx544Aee78f/lv651Kew2Yb8qu1QqKX1D1wOjlfqY99zbTPfGMcLiQrs5wavuJF8/PyRuDZG8FIz+MAFF1xqDkGcD2beH3bWtX3PeNYdAMF0I8feg1gIoiqkuNByF5hyNDfoOiWL4ix1CJa7BYuiXDAq6sfBozkGDAs6gSFjzR5EAHG51t52j8w1k9HEvPtM4hAHZJCEubCSqA8zMn6VWgTUmEi1ntMBVREww9dqQm9w27bjIKaeG1Q6xZX4yCLpO4n5ZNTIxSQ0LipaizbL6D0Vpaj3SlM60q6guF0R89hRqyTkm3e0OgTBEgZiha7NIf6obABXFKNslHqcAfIhe/pBxCLR8Y+Y3A+FiFkX39h4RfuO8FMqf+DX3bqor1EARilzvJL/Bk19J8vOlhNL9ttbJ5ONt91iMGfpLxUZGefntlBNuZeMHcoCWNBZx3Vv/+DEwgbec3wybctrSEQXbO1N/YcoHsc2EYB6OCVTaJpe4QT6YMVuZixiINqyARAwmXjYMGWv9vrkhUteB/uu3imoFmjGNTzuTYorBpUNe5GpbAS9vbU43rk4COKiqHwwXHOsf5ZnaWfeTJyOSn/GtHPnSLaAGmLcAqg588xE/4p0kdZyBojnm+peJejMC/rfI3Zvq7w5zzbEBPkkd3g3c5wMfB6IntDjXakpqmwdRI/weN0TDhvp7uj99BplEKdxXeneiJI8mpOUQexqlpYYTKm5bmngnLFG+xpZcm8n2vs3b3exFYhL9x6n2bw9VKT2rUXDgauabVKQXdLHrfr6ab5HmyBLneo6VhihVTwkFXqerMx9Ex5d5dZfhv/y6ghLeI0Gqz3a8atvw6pBpPOzGOCRH/R3YVMwh9WY4F9FYZ9ge6usQvRssJrMupLN/KeI+KCdk25vK1bsGkg4mPe6BZ7uvf5Iy8PuvVX3RZAcXpx6p3zFxvaYcJWHGTSP2h/oxbVNsM8iWJFcEFXg9yyvvc3DRdJnB3JTgVHoUTfMD5W0gSOE8XjHSs3zn3n4GHN2Z76kooEOQPvDovouwL9ABw3K1VMzEfuJc1e2vavw+hPsp/DaRonpA9cQY6cU/8r6VyqhX4GMDuM+EMj6sCfHG/kXRIvEt/4D/qNPm7D0c2Thn887RQaEyQ76+cmzOevNeSKGN8ctuI/gokU8E0+GTI/Rzxr4tfUItqJMPieElMjkNTTaddN96pXJTFIK45k3D6Dt407JuIOytUepCv5/uYLwbM39/yKNL1TgEAgrrLXvXdZKxkOR023aHiyJmKCizAD0juG/SIm7maY9k1UYRvNxXCC3JlcXIdGhgmTK1JuI7j1ML50O/2+5CN8X3o4qR2ZuK+MzNb03QfSUjUgGLTMBuiveeyDkP4EZ2Sa3mE73bR0XK0B6EiJf0wIU/SiyBvBfc1WZedx1+pMAAAAASUVORK5CYII=');
}


/* -------------------------------------------------------------
   28. The glass case
   One per item: on the homepage, in every product grid, and the
   big one on the product page. The photo is multiplied onto the
   milk, so a white photo background simply becomes the glass;
   the goods keep their colours. Frost, a milky wash, two streaks
   of light and the shadow of the case's lid go on top.
   ------------------------------------------------------------- */

.gh-case {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-width: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    isolation: isolate;          /* the blend stays inside the case */
    background: var(--case-milk);
    border: 1px solid rgba(201, 174, 114, 0.7);               /* brass trim */
    box-shadow: 0 0 0 6px var(--deep-ground),                   /* the case  */
                0 0 0 7px rgba(201, 174, 114, 0.28);
    margin: 7px;                 /* room for the case around the glass */
    transition: background-color 0.35s ease;
}
/* the photo is placed in the case, not sized by it: an even 7% mat on all
   four sides, the photo filling the square opening */
.gh-case img,
body.gh-shop .woocommerce ul.products li.product .gh-case img {
    position: absolute;
    top: 7%;
    left: 7%;
    display: block;
    width: 86%;
    max-width: none;
    min-width: 0;
    height: 86%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    box-shadow: none;
    transition: transform 0.45s ease;
}
/* the glass itself */
.gh-case::after,
body.gh-shop--product .woocommerce-product-gallery__image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: rgba(207, 195, 224, 0.08);
    background-image:
        linear-gradient(115deg,
            rgba(255, 255, 255, 0) 26%,
            rgba(255, 255, 255, 0.22) 34%,
            rgba(255, 255, 255, 0) 42%,
            rgba(255, 255, 255, 0) 57%,
            rgba(255, 255, 255, 0.12) 61%,
            rgba(255, 255, 255, 0) 66%),
        url('images/frost.png');
    background-size: 100% 100%, 128px 128px;
    background-repeat: no-repeat, repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
                inset 0 16px 22px -14px rgba(26, 21, 51, 0.55);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
/* Pointing at an item is like leaning in to the glass: the lilac almost
   goes, the frost clears, and the goods come closer. */
@media (hover: hover) {
    #merch .shop-item__link:hover .gh-case,
    body.gh-shop .woocommerce ul.products li.product a:hover .gh-case {
        background-color: #F1ECF6;
    }
    #merch .shop-item__link:hover .gh-case img,
    body.gh-shop .woocommerce ul.products li.product a:hover .gh-case img {
        transform: scale(1.07);
    }
    #merch .shop-item__link:hover .gh-case::after,
    body.gh-shop .woocommerce ul.products li.product a:hover .gh-case::after,
    body.gh-shop--product .woocommerce-product-gallery__image:hover::after {
        opacity: 0.1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gh-case,
    .gh-case img,
    .gh-case::after,
    body.gh-shop--product .woocommerce-product-gallery__image::after {
        transition: none;
    }
    #merch .shop-item__link:hover .gh-case img,
    body.gh-shop .woocommerce ul.products li.product a:hover .gh-case img {
        transform: none;
    }
}
/* sold out: still there to look at, just a little further back */
.shop-item.is-sold-out .gh-case img,
body.gh-shop .woocommerce ul.products li.product.outofstock .gh-case img {
    filter: saturate(0.5);
    opacity: 0.6;
}

/* Supermarket stickers, stuck on the glass */
.gh-sticker,
body.gh-shop--product .woocommerce span.onsale {
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 9px;
    left: auto;
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23C8698A' points='50.0,0.0 55.2,4.3 61.1,1.3 65.2,6.6 71.7,5.0 74.5,11.1 81.2,10.9 82.5,17.5 89.1,18.8 88.9,25.5 95.0,28.3 93.4,34.8 98.7,38.9 95.7,44.8 100.0,50.0 95.7,55.2 98.7,61.1 93.4,65.2 95.0,71.7 88.9,74.5 89.1,81.2 82.5,82.5 81.2,89.1 74.5,88.9 71.7,95.0 65.2,93.4 61.1,98.7 55.2,95.7 50.0,100.0 44.8,95.7 38.9,98.7 34.8,93.4 28.3,95.0 25.5,88.9 18.8,89.1 17.5,82.5 10.9,81.2 11.1,74.5 5.0,71.7 6.6,65.2 1.3,61.1 4.3,55.2 0.0,50.0 4.3,44.8 1.3,38.9 6.6,34.8 5.0,28.3 11.1,25.5 10.9,18.8 17.5,17.5 18.8,10.9 25.5,11.1 28.3,5.0 34.8,6.6 38.9,1.3 44.8,4.3'/%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 1.5px rgba(26, 21, 51, 0.5));
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(-12deg);
    pointer-events: none;
}
.gh-sticker--sale,
body.gh-shop--product .woocommerce span.onsale {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23E8A33D' points='50.0,0.0 55.2,4.3 61.1,1.3 65.2,6.6 71.7,5.0 74.5,11.1 81.2,10.9 82.5,17.5 89.1,18.8 88.9,25.5 95.0,28.3 93.4,34.8 98.7,38.9 95.7,44.8 100.0,50.0 95.7,55.2 98.7,61.1 93.4,65.2 95.0,71.7 88.9,74.5 89.1,81.2 82.5,82.5 81.2,89.1 74.5,88.9 71.7,95.0 65.2,93.4 61.1,98.7 55.2,95.7 50.0,100.0 44.8,95.7 38.9,98.7 34.8,93.4 28.3,95.0 25.5,88.9 18.8,89.1 17.5,82.5 10.9,81.2 11.1,74.5 5.0,71.7 6.6,65.2 1.3,61.1 4.3,55.2 0.0,50.0 4.3,44.8 1.3,38.9 6.6,34.8 5.0,28.3 11.1,25.5 10.9,18.8 17.5,17.5 18.8,10.9 25.5,11.1 28.3,5.0 34.8,6.6 38.9,1.3 44.8,4.3'/%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23FFFFFF' stroke-opacity='.45' stroke-width='1.2'/%3E%3C/svg%3E");
    transform: rotate(9deg);
}


/* -------------------------------------------------------------
   29. An item: case, name, then price tag and button
   The homepage and every WooCommerce grid (related products,
   categories, cross-sells) share the same card.
   ------------------------------------------------------------- */

.shop-grid,
body.gh-shop .woocommerce ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px 30px;
}
body.gh-shop .woocommerce ul.products::before,
body.gh-shop .woocommerce ul.products::after {
    display: none;
}
.shop-item,
body.gh-shop .woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left;
}
#merch .shop-item__link,
body.gh-shop .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--greasepaint);
    text-decoration: none;
    opacity: 1;
}
.shop-item__title,
body.gh-shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 0 !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--greasepaint);
}
@media (hover: hover) {
    #merch .shop-item__link:hover .shop-item__title,
    body.gh-shop .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
        color: var(--sodium);
    }
}

.gh-foot {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 10px;
}

/* the price on a little paper tag, with a punched hole */
#merch .gh-foot .price,
body.gh-shop .woocommerce ul.products li.product .gh-foot .price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
    padding: 5px 12px 5px 10px;
    background: var(--nicotine);
    color: var(--night-indigo);
    font-family: var(--font-register);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    transform: rotate(-1.4deg);
}
#merch .gh-foot .price::before,
body.gh-shop .woocommerce ul.products li.product .gh-foot .price::before,
body.gh-shop--product .woocommerce div.product .summary .price::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--night-indigo);
    opacity: 0.55;
}
#merch .gh-foot .price *,
body.gh-shop .woocommerce ul.products li.product .gh-foot .price * {
    color: var(--night-indigo);
    font-size: inherit;
}
#merch .gh-foot .price del,
body.gh-shop .woocommerce ul.products li.product .gh-foot .price del {
    opacity: 0.6;
}
#merch .gh-foot .price ins,
body.gh-shop .woocommerce ul.products li.product .gh-foot .price ins {
    background: none;
    text-decoration: none;
    font-weight: 700;
}

/* Add to cart: a small door plate */
#merch .gh-foot .shop-item__add,
body.gh-shop .woocommerce ul.products li.product .gh-foot .button {
    position: relative;
    box-sizing: border-box;
    min-height: 38px;
    margin: 4px;
    padding: 0 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--night-indigo) !important;
    border: 1px solid var(--nicotine) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine) !important;
    color: var(--nicotine) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1 !important;
    cursor: pointer;
}
@media (hover: hover) {
    #merch .gh-foot .shop-item__add:hover,
    body.gh-shop .woocommerce ul.products li.product .gh-foot .button:hover {
        background: var(--nicotine) !important;
        color: var(--night-indigo) !important;
        opacity: 1 !important;
    }
}
#merch .gh-foot .shop-item__add:focus-visible,
body.gh-shop .woocommerce ul.products li.product .gh-foot .button:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 7px;
}
/* while it's being added */
#merch .gh-foot .shop-item__add.loading,
body.gh-shop .woocommerce ul.products li.product .gh-foot .button.loading {
    opacity: 0.5 !important;
    cursor: progress;
}
/* added: a drawn tick (WooCommerce's icon font is not used here) */
#merch .gh-foot .shop-item__add::after,
body.gh-shop .woocommerce ul.products li.product .gh-foot .button::after {
    content: none !important;
}
#merch .gh-foot .shop-item__add.added::after,
body.gh-shop .woocommerce ul.products li.product .gh-foot .button.added::after {
    content: "" !important;
    position: static !important;
    display: block;
    width: 5px;
    height: 9px;
    margin: -3px 0 0 !important;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    animation: none !important;
    font-family: inherit !important;
}
/* "View cart", which WooCommerce adds under the button once something is in */
#merch .gh-foot .added_to_cart,
body.gh-shop .woocommerce ul.products li.product .gh-foot .added_to_cart {
    flex-basis: 100%;
    padding: 0;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sodium);
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 1;
}
/* sold-out items keep their tag but lose the button */
body.gh-shop .woocommerce ul.products li.product.outofstock .gh-foot .button {
    display: none !important;
}

/* the homepage head: "Cart (n)" */
#merch .gift-shop__cart {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nicotine);
}
@media (hover: hover) {
    #merch .gift-shop__cart:hover {
        color: var(--sodium);
        opacity: 1;
    }
}


/* -------------------------------------------------------------
   30. Shop pages: the frame, the title, the bar at the top
   ------------------------------------------------------------- */

body.gh-shop #primary.content-area {
    margin: 0;
    padding: calc(var(--header-h) + 36px) 0 104px;
    min-height: 60vh;
}
body.gh-shop #primary > .box {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
/* the old stylesheet pads every <section> by 200px, WooCommerce's too */
body.gh-shop .woocommerce section {
    margin: 0;
    padding: 0;
}
/* the old stylesheet fades every link to half on hover */
body.gh-shop .woocommerce a:hover,
body.gh-shop .gh-shop-bar a:hover {
    opacity: 1;
}

body.gh-shop #primary .entry-header {
    margin: 0 0 32px !important;
}
body.gh-shop #primary .entry-header h1,
body.gh-shop .woocommerce h2,
body.gh-shop .woocommerce h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--greasepaint);
}
body.gh-shop #primary .entry-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}
body.gh-shop .woocommerce h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
body.gh-shop .woocommerce h3 { font-size: 1.15rem; }
body.gh-shop--checkout .woocommerce .woocommerce-billing-fields > h3,
body.gh-shop--checkout .woocommerce .woocommerce-shipping-fields > h3,
body.gh-shop--checkout .woocommerce .woocommerce-additional-fields > h3 {
    margin: 0 0 18px;
}

/* Back to the Gift Shop (a door plate) · Cart (n) */
.gh-shop-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0 0 40px;
    padding: 4px;
}
body.gh-shop .gh-shop-bar__back {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    background: var(--night-indigo);
    border: 1px solid var(--nicotine);
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine);
    color: var(--nicotine);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}
body.gh-shop .gh-shop-bar__back:focus-visible {
    outline-offset: 7px;
}
body.gh-shop .gh-shop-bar__cart {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nicotine);
}
@media (hover: hover) {
    body.gh-shop .gh-shop-bar__back:hover {
        color: var(--sodium);
        border-color: var(--sodium);
        box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium);
    }
    body.gh-shop .gh-shop-bar__cart:hover {
        color: var(--sodium);
    }
}


/* -------------------------------------------------------------
   31. Shared shop pieces: buttons, fields, ticks, notices
   ------------------------------------------------------------- */

/* buttons: the door plates again */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--night-indigo) !important;
    border: 1px solid var(--nicotine);
    border-radius: 0;
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine);
    color: var(--nicotine) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    font-size: 12px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    opacity: 1;
    cursor: pointer;
}
/* the ones that move you forward are lit */
.woocommerce .checkout-button,
.woocommerce #place_order {
    background: var(--sodium) !important;
    border-color: var(--sodium);
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium);
    color: var(--night-indigo) !important;
}
@media (hover: hover) {
    .woocommerce a.button:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover {
        background: var(--nicotine) !important;
        color: var(--night-indigo) !important;
        opacity: 1;
    }
}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 7px;
}
.woocommerce a.button::after,
.woocommerce button.button::after {
    font-family: inherit;
}

/* type-in fields on the dark pages: visible, never black */
body.gh-shop .woocommerce input.input-text,
body.gh-shop .woocommerce textarea,
body.gh-shop .woocommerce select,
body.gh-shop .select2-container--default .select2-selection--single {
    box-sizing: border-box;
    min-height: 48px;
    padding: 10px 14px !important;
    background: rgba(242, 238, 230, 0.06) !important;
    border: 1px solid rgba(201, 174, 114, 0.55) !important;
    border-radius: 0 !important;
    box-shadow: none;
    color: var(--greasepaint) !important;
    font-family: var(--font-ui) !important;
    font-size: 16px !important;
    line-height: 1.4;
}
body.gh-shop .woocommerce input.input-text::placeholder,
body.gh-shop .woocommerce textarea::placeholder {
    color: rgba(242, 238, 230, 0.45);
}
body.gh-shop .woocommerce input.input-text:focus,
body.gh-shop .woocommerce textarea:focus,
body.gh-shop .woocommerce select:focus {
    border-color: var(--sodium) !important;
    outline: 2px solid var(--sodium);
    outline-offset: 2px;
}
/* the browser's autofill colours, which would otherwise paint fields pale blue or yellow */
body.gh-shop .woocommerce input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #2B2449 inset !important;
    -webkit-text-fill-color: var(--greasepaint) !important;
    caret-color: var(--greasepaint);
}
body.gh-shop .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--greasepaint);
    line-height: 26px;
}
body.gh-shop .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    right: 8px;
}
body.gh-shop .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--nicotine);
}
body.gh-shop .select2-dropdown {
    background: var(--deep-ground);
    border: 1px solid rgba(201, 174, 114, 0.55);
    border-radius: 0;
    color: var(--greasepaint);
}
body.gh-shop .select2-container--default .select2-search--dropdown .select2-search__field {
    background: rgba(242, 238, 230, 0.06);
    border: 1px solid rgba(201, 174, 114, 0.55);
    color: var(--greasepaint);
}
body.gh-shop .select2-container--default .select2-results__option[aria-selected=true],
body.gh-shop .select2-container--default .select2-results__option[data-selected=true] {
    background: rgba(242, 238, 230, 0.08);
    color: var(--greasepaint);
}
body.gh-shop .select2-container--default .select2-results__option--highlighted[aria-selected],
body.gh-shop .select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--bottle-green);
    color: var(--greasepaint);
}
body.gh-shop .woocommerce form .form-row label,
body.gh-shop .woocommerce table.variations label {
    font-family: var(--font-register);
    font-size: 15px;
    color: var(--nicotine);
}
body.gh-shop .woocommerce form .form-row .required {
    color: var(--faded-rouge);
    text-decoration: none;
    border: 0;
}

/* ticks and dots: native, in the site's colours */
body.gh-shop .woocommerce input[type="checkbox"],
body.gh-shop .woocommerce input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sodium);
    cursor: pointer;
}
/* a tick box sits in front of its sentence, and the sentence wraps beside it */
body.gh-shop .woocommerce label.woocommerce-form__label-for-checkbox {
    position: relative;
    display: block;
    padding-left: 30px;
    line-height: 1.5;
    cursor: pointer;
}
body.gh-shop .woocommerce label.woocommerce-form__label-for-checkbox > input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.15em;
    margin: 0;
}

/* notices: a slip of paper slid under the door */
body.gh-shop .woocommerce-message,
body.gh-shop .woocommerce-info,
body.gh-shop .woocommerce-error {
    box-sizing: border-box;
    margin: 0 0 28px;
    padding: 16px 20px !important;
    list-style: none;
    background: var(--deep-ground) !important;
    border: 0 !important;
    border-left: 3px solid var(--nicotine) !important;
    border-radius: 0;
    color: var(--greasepaint) !important;
    font-family: var(--font-register);
    font-size: 15px;
    line-height: 1.5;
}
body.gh-shop .woocommerce-message,
body.gh-shop .woocommerce-info {
    display: flow-root;
}
/* a notice with a button ("View cart"): the sentence, then the button on the right */
body.gh-shop .woocommerce-message:has(> .button),
body.gh-shop .woocommerce-info:has(> .button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
body.gh-shop .woocommerce-error {
    border-left-color: var(--faded-rouge) !important;
}
/* WooCommerce moves focus onto a new notice so screen readers read it out;
   the notice isn't something to click, so it gets no focus ring */
body.gh-shop .woocommerce-message:focus,
body.gh-shop .woocommerce-info:focus,
body.gh-shop .woocommerce-error:focus,
body.gh-shop .woocommerce-notices-wrapper:focus,
body.gh-shop .woocommerce-NoticeGroup:focus {
    outline: none;
}
body.gh-shop .woocommerce-error li {
    margin: 0;
}
body.gh-shop .woocommerce-message::before,
body.gh-shop .woocommerce-info::before,
body.gh-shop .woocommerce-error::before,
body.gh-shop .woocommerce-message::after,
body.gh-shop .woocommerce-info::after {
    content: none !important;
    display: none !important;
}
body.gh-shop .woocommerce-message .button,
body.gh-shop .woocommerce-info .button {
    order: 2;
    float: right;
    margin: 4px 4px 4px 20px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 11px !important;
    background: var(--deep-ground) !important;
    box-shadow: 0 0 0 3px var(--deep-ground), 0 0 0 4px var(--nicotine);
}
body.gh-shop .woocommerce-message a:not(.button),
body.gh-shop .woocommerce-info a:not(.button),
body.gh-shop .woocommerce-error a:not(.button) {
    color: var(--nicotine) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* tables: no letters broken mid-word (Twenty Nineteen breaks them) */
body.gh-shop .woocommerce table th,
body.gh-shop .woocommerce table td {
    word-break: normal;
    overflow-wrap: break-word;
}


/* -------------------------------------------------------------
   32. A product: picture on the left, everything else on the right,
       the rest of the shop underneath
   ------------------------------------------------------------- */

body.gh-shop--product .woocommerce div.product {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
    margin: 0 !important;
}
/* anything WooCommerce or a plugin adds runs full width underneath */
body.gh-shop--product .woocommerce div.product > * {
    grid-column: 1 / -1;
}
body.gh-shop--product .woocommerce div.product > .woocommerce-product-gallery {
    grid-column: 1;
    float: none;
    width: auto;
    margin: 0;
}
body.gh-shop--product .woocommerce div.product > .summary {
    grid-column: 2;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* the big glass case: the frame goes on the window that shows the pictures
   (WooCommerce's slider adds .flex-viewport; with one picture it doesn't) */
body.gh-shop--product .woocommerce-product-gallery > .flex-viewport,
body.gh-shop--product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    margin: 8px;
    box-shadow: 0 0 0 1px rgba(201, 174, 114, 0.7),     /* brass trim */
                0 0 0 7px var(--deep-ground),              /* the case  */
                0 0 0 8px rgba(201, 174, 114, 0.28);
}
/* No padding or border on the pictures themselves: WooCommerce's slider
   sets their widths and reads percentages against the whole strip of
   pictures, which shrank them to nothing. */
body.gh-shop--product .woocommerce-product-gallery__image {
    position: relative;
    background: var(--case-milk);
    isolation: isolate;
}
body.gh-shop--product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    margin: 0;
    mix-blend-mode: multiply;
    border: 0;
}
/* The enlarged photo that follows the pointer (WooCommerce's zoom) sits on
   top of the small one. Blended, the two showed through each other; drawn
   normally it covers it, and you see the photo itself, clear of the glass. */
body.gh-shop--product .woocommerce-product-gallery__image img.zoomImg {
    mix-blend-mode: normal;
}
body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
}
body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs li {
    float: none;
    width: calc(25% - 7.5px);
    margin: 0;
    background: var(--case-milk);
    isolation: isolate;
}
body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs li img {
    mix-blend-mode: multiply;
    border: 1px solid rgba(201, 174, 114, 0.35);
    opacity: 0.6;
}
body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--nicotine);
}
/* the magnifier: a small brass knob on the glass */
body.gh-shop--product .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    z-index: 3;
    background: var(--greasepaint);
    box-shadow: 0 1px 3px rgba(26, 21, 51, 0.4);
}
body.gh-shop--product .woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    border-color: var(--night-indigo);
}
body.gh-shop--product .woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
    background: var(--night-indigo);
}
/* the sale sticker sits on the big glass too */
body.gh-shop--product .woocommerce span.onsale {
    top: 14px;
    left: 14px;
    right: auto;
    z-index: 4;
    width: 76px;
    height: 76px;
    font-size: 12px;
    line-height: 1.05;
}

/* the name */
body.gh-shop--product .woocommerce div.product .product_title {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--greasepaint) !important;
}
body.gh-shop--product .woocommerce div.product .product_title::before {
    content: none;
    display: none;
}

/* the price: the same paper tag, bigger */
body.gh-shop--product .woocommerce div.product .summary p.price,
body.gh-shop--product .woocommerce div.product .summary span.price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0 0 26px;
    padding: 8px 16px 8px 12px;
    background: var(--nicotine);
    color: var(--night-indigo) !important;
    font-family: var(--font-register);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    transform: rotate(-1.2deg);
}
body.gh-shop--product .woocommerce div.product .summary .price::before {
    width: 9px;
    height: 9px;
}
body.gh-shop--product .woocommerce div.product .summary .price *,
body.gh-shop--product .woocommerce div.product .summary .price .amount {
    color: var(--night-indigo) !important;
    font-size: inherit;
}
body.gh-shop--product .woocommerce div.product .summary .price del {
    opacity: 0.6;
}
body.gh-shop--product .woocommerce div.product .summary .price ins {
    background: none;
    text-decoration: none;
    font-weight: 700;
}

body.gh-shop--product .woocommerce div.product .woocommerce-product-details__short-description {
    max-width: 60ch;
    margin: 0 0 26px;
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.65;
    color: var(--greasepaint);
}
body.gh-shop--product .woocommerce div.product .woocommerce-product-details__short-description p {
    margin: 0 0 1em;
}
body.gh-shop--product .woocommerce div.product p.stock {
    margin: 0 0 16px;
    font-family: var(--font-register);
    font-size: 15px;
    color: var(--corridor-mint) !important;
}
body.gh-shop--product .woocommerce div.product p.stock.out-of-stock {
    color: var(--faded-rouge) !important;
}

/* quantity + Add to cart */
body.gh-shop--product .woocommerce div.product form.cart {
    margin: 0 0 30px !important;
    padding: 4px;
    gap: 16px !important;
}
body.gh-shop--product .woocommerce div.product form.cart .quantity input.qty {
    box-sizing: border-box;
    width: 76px !important;
    height: 50px !important;
    min-height: 0;
    padding: 0 8px !important;
    background: rgba(242, 238, 230, 0.06) !important;
    border: 1px solid rgba(201, 174, 114, 0.6) !important;
    border-radius: 0 !important;
    color: var(--greasepaint) !important;
    font-family: var(--font-register) !important;
    font-size: 17px !important;
    text-align: center;
}
body.gh-shop--product .woocommerce div.product form.cart .single_add_to_cart_button.button {
    box-sizing: border-box;
    min-height: 50px !important;
    margin: 0;
    padding: 0 30px !important;
    float: none !important;
    background: var(--sodium) !important;
    border: 1px solid var(--sodium) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium) !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1 !important;
}
@media (hover: hover) {
    body.gh-shop--product .woocommerce div.product form.cart .single_add_to_cart_button.button:hover {
        background: var(--greasepaint) !important;
        border-color: var(--greasepaint) !important;
        box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--greasepaint) !important;
        color: var(--night-indigo) !important;
        opacity: 1 !important;
    }
}
/* a size or colour still has to be chosen */
body.gh-shop--product .woocommerce div.product form.cart .single_add_to_cart_button.button.disabled,
body.gh-shop--product .woocommerce div.product form.cart .single_add_to_cart_button.button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed;
}

/* sizes and colours (variable products) */
body.gh-shop--product .woocommerce div.product form.cart table.variations {
    margin: 0 0 18px;
    border: 0;
}
body.gh-shop--product .woocommerce div.product form.cart table.variations th,
body.gh-shop--product .woocommerce div.product form.cart table.variations td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
body.gh-shop--product .woocommerce div.product form.cart table.variations td.value {
    padding: 6px 0 16px;
}
body.gh-shop--product .woocommerce div.product form.cart table.variations select {
    min-width: 220px;
    max-width: 100%;
    margin: 0;
}
body.gh-shop--product .woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin: 10px 0 0 18px;
    font-family: var(--font-register);
    font-size: 14px;
    color: var(--nicotine);
}
body.gh-shop--product .woocommerce div.product .woocommerce-variation {
    margin: 0 0 12px;
}

/* the category line */
body.gh-shop--product .woocommerce div.product .product_meta {
    margin: 0 0 30px;
    padding-top: 16px;
    border-top: 1px solid rgba(169, 194, 163, 0.28);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--corridor-mint);
}
body.gh-shop--product .woocommerce div.product .product_meta a {
    color: var(--nicotine);
}

/* the sheets (what used to be tabs) */
body.gh-shop--product .gh-sheets {
    display: grid;
    gap: 26px;
}
body.gh-shop--product .woocommerce .gh-sheet--description {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.7;
    color: var(--greasepaint);
}
body.gh-shop--product .woocommerce .gh-sheet--description h2 {
    margin: 0 0 10px;
    font-family: var(--font-register);
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--nicotine);
}
body.gh-shop--product .woocommerce .gh-sheet--description p {
    margin: 0 0 1em;
}
/* Additional information: the printed spec sheet, on paper */
body.gh-shop--product .woocommerce .gh-sheet--additional_information {
    padding: 24px 26px 20px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    box-shadow: 0 2px 0 rgba(26, 21, 51, 0.35);
}
body.gh-shop--product .woocommerce .gh-sheet--additional_information h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--night-indigo);
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-family: var(--font-ui);
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes tr {
    background: none !important;
}
/* rows read like a bill: label, dotted line, value */
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes th,
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes td {
    padding: 9px 0 !important;
    border: 0;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45);
    background: none !important;
    color: var(--night-indigo);
    font-style: normal;
    vertical-align: top;
    text-align: left;
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes th {
    width: 42%;
    padding-right: 14px !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes td {
    font-family: var(--font-register);
    font-size: 15px;
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes td p {
    margin: 0;
    padding: 0;
}
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes tr:last-child th,
body.gh-shop--product .woocommerce .gh-sheet table.shop_attributes tr:last-child td {
    border-bottom: 0;
}

/* Also in the gift shop: full width, under a line */
body.gh-shop--product .woocommerce div.product > .related,
body.gh-shop--product .woocommerce div.product > .upsells {
    margin-top: 96px;
    padding-top: 44px;
    border-top: 1px solid var(--bottle-green);
}
body.gh-shop .woocommerce .related > h2,
body.gh-shop .woocommerce .upsells > h2,
body.gh-shop .woocommerce .cross-sells > h2 {
    margin: 0 0 34px;
}


/* -------------------------------------------------------------
   33. Category pages
   ------------------------------------------------------------- */

body.gh-shop--list .woocommerce nav.woocommerce-pagination {
    margin-top: 56px;
    text-align: left;
}
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    border: 0;
}
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li {
    float: none;
    border: 0;
    overflow: visible;
}
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li a,
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li span {
    min-width: 42px;
    padding: 12px 10px;
    box-sizing: border-box;
    border: 1px solid rgba(201, 174, 114, 0.55);
    font-family: var(--font-register);
    font-size: 15px;
    line-height: 1;
    color: var(--nicotine);
}
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li span.current,
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li a:hover,
body.gh-shop--list .woocommerce nav.woocommerce-pagination ul li a:focus {
    background: var(--nicotine);
    color: var(--night-indigo);
}


/* -------------------------------------------------------------
   34. The cart: your bill
   The items and the total are two sheets of paper side by side
   (one above the other on phones). The old stylesheet coloured the
   cart for a dark page, with !important; these rules outrank it.
   ------------------------------------------------------------- */

@media all and (min-width: 1021px) {
    body.gh-shop--cart #primary .woocommerce {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
        column-gap: 40px;
        align-items: start;
    }
    body.gh-shop--cart #primary .woocommerce > * {
        grid-column: 1 / -1;
    }
    body.gh-shop--cart #primary .woocommerce > .woocommerce-cart-form {
        grid-column: 1;
    }
    body.gh-shop--cart #primary .woocommerce > .cart-collaterals {
        grid-column: 2;
    }
}
body.gh-shop--cart .woocommerce .cart-collaterals {
    width: auto;
}
body.gh-shop--cart .woocommerce .cart-collaterals .cart_totals,
body.gh-shop--cart .woocommerce .cart-collaterals .cross-sells {
    float: none;
    width: auto;
}
body.gh-shop--cart .woocommerce .cart-collaterals .cross-sells {
    margin-top: 48px;
}
body.gh-shop--cart .woocommerce .cart-collaterals .cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* the two sheets */
body.gh-shop--cart .woocommerce form.woocommerce-cart-form,
body.gh-shop--cart .woocommerce .cart_totals {
    box-sizing: border-box;
    margin: 0 0 34px;
    padding: 26px 30px 24px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    box-shadow: 0 2px 0 rgba(26, 21, 51, 0.35);
}
body.gh-shop--cart .woocommerce .cart_totals h2 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    color: var(--night-indigo);
}
body.gh-shop--cart .woocommerce table.shop_table {
    width: 100%;
    margin: 0;
    background: none;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--night-indigo);
    font-family: var(--font-ui);
}

/* the items */
body.gh-shop--cart .woocommerce table.shop_table.cart thead th {
    padding: 0 10px 12px !important;
    border: 0 !important;
    border-bottom: 2px solid var(--night-indigo) !important;
    background: none;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
}
body.gh-shop--cart .woocommerce table.shop_table.cart tbody td,
body.gh-shop--cart .woocommerce table.shop_table.cart tbody th {
    padding: 16px 10px !important;
    border: 0 !important;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45) !important;
    background: none !important;
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 15px;
    vertical-align: middle !important;
    text-align: left;
}
body.gh-shop--cart .woocommerce table.shop_table.cart .product-name a {
    color: var(--night-indigo) !important;
    font-weight: 600;
    text-decoration: none;
}
@media (hover: hover) {
    body.gh-shop--cart .woocommerce table.shop_table.cart .product-name a:hover {
        color: var(--dusty-purple) !important;
    }
}
body.gh-shop--cart .woocommerce table.shop_table.cart .product-name dl.variation {
    margin: 6px 0 0;
    font-family: var(--font-register);
    font-size: 14px;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-price,
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-subtotal {
    font-family: var(--font-register);
    color: var(--night-indigo);
    white-space: nowrap;
}
body.gh-shop--cart .woocommerce table.shop_table .amount {
    color: var(--night-indigo);
}
/* the small picture: the same milky glass */
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-thumbnail {
    width: 84px;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-thumbnail a {
    display: block;
    width: 64px;
    background: var(--case-milk);
    isolation: isolate;
    border: 1px solid rgba(34, 27, 63, 0.25);
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-thumbnail img {
    display: block;
    mix-blend-mode: multiply;
}
/* remove: a small ring with a cross */
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-remove {
    width: 44px;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.product-remove a.remove {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: 1px solid rgba(34, 27, 63, 0.4);
    border-radius: 50%;
    color: var(--night-indigo) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1;
    opacity: 1;
}
@media (hover: hover) {
    body.gh-shop--cart .woocommerce table.shop_table.cart td.product-remove a.remove:hover {
        background: var(--night-indigo) !important;
        color: var(--greasepaint) !important;
        opacity: 1;
    }
}
/* how many: written on a line, like the Reception card */
body.gh-shop--cart .woocommerce table.shop_table.cart .quantity input.qty {
    width: 64px !important;
    min-height: 40px;
    padding: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--night-indigo) !important;
    border-radius: 0 !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-register) !important;
    font-size: 16px !important;
    text-align: center;
}

/* coupon and Update cart */
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions {
    padding: 22px 4px 4px !important;
    border-bottom: 0 !important;
    text-align: right;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon {
    align-items: center;
    gap: 16px !important;
    padding: 4px 0;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text {
    width: 190px !important;
    height: 42px !important;
    min-height: 0;
    padding: 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--night-indigo) !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui) !important;
    font-size: 15px !important;
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text::placeholder {
    color: rgba(34, 27, 63, 0.55);
}
/* the buttons on the bill are ink, not gold */
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon button.button,
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"],
body.gh-shop--cart .woocommerce .cart_totals button.button {
    min-height: 42px !important;
    margin: 4px;
    padding: 0 18px !important;
    background: var(--greasepaint) !important;
    border: 1px solid var(--night-indigo) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--night-indigo) !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1 !important;
}
@media (hover: hover) {
    body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon button.button:hover,
    body.gh-shop--cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"]:not(:disabled):hover,
    body.gh-shop--cart .woocommerce .cart_totals button.button:hover {
        background: var(--night-indigo) !important;
        color: var(--greasepaint) !important;
        opacity: 1 !important;
    }
}
body.gh-shop--cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"]:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed;
}

/* the total */
body.gh-shop--cart .woocommerce .cart_totals table.shop_table th,
body.gh-shop--cart .woocommerce .cart_totals table.shop_table td {
    padding: 13px 0 !important;
    border: 0 !important;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45) !important;
    background: none !important;
    color: var(--night-indigo);
    vertical-align: top;
    text-align: left;
}
body.gh-shop--cart .woocommerce .cart_totals table.shop_table th {
    width: 38%;
    padding-right: 12px !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.gh-shop--cart .woocommerce .cart_totals table.shop_table td {
    font-family: var(--font-register);
    font-size: 15px;
}
body.gh-shop--cart .woocommerce .cart_totals tr.order-total th,
body.gh-shop--cart .woocommerce .cart_totals tr.order-total td {
    border-top: 2px solid var(--night-indigo) !important;
    border-bottom: 0 !important;
    font-size: 18px;
}
body.gh-shop--cart .woocommerce .cart_totals tr.order-total th {
    font-size: 12px;
}
body.gh-shop--cart .woocommerce .cart_totals .includes_tax {
    display: block;
    font-size: 13px;
    opacity: 0.8;
}
/* delivery choices on the bill */
body.gh-shop--cart .woocommerce .cart_totals ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.gh-shop--cart .woocommerce .cart_totals ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    text-indent: 0;
}
body.gh-shop--cart .woocommerce .cart_totals ul#shipping_method li input {
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: var(--night-indigo);
}
body.gh-shop--cart .woocommerce .cart_totals ul#shipping_method li label {
    font-family: var(--font-ui);
    color: var(--night-indigo);
}
body.gh-shop--cart .woocommerce .cart_totals .woocommerce-shipping-destination {
    margin: 8px 0 4px;
    font-size: 14px;
}
body.gh-shop--cart .woocommerce .cart_totals a:not(.button) {
    color: var(--night-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* the delivery calculator's fields, on paper */
body.gh-shop--cart .woocommerce .cart_totals .shipping-calculator-form {
    padding-top: 12px !important;
}
body.gh-shop--cart .woocommerce .cart_totals input.input-text,
body.gh-shop--cart .woocommerce .cart_totals select,
body.gh-shop--cart .cart_totals .select2-container--default .select2-selection--single {
    min-height: 40px;
    padding: 6px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1.5px solid var(--night-indigo) !important;
    color: var(--night-indigo) !important;
}
body.gh-shop--cart .cart_totals .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--night-indigo);
}
body.gh-shop--cart .woocommerce .cart_totals input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--greasepaint) inset !important;
    -webkit-text-fill-color: var(--night-indigo) !important;
}
/* Proceed to checkout: lit */
body.gh-shop--cart .woocommerce .wc-proceed-to-checkout {
    padding: 24px 4px 4px;
}
body.gh-shop--cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0 20px !important;
    background: var(--sodium) !important;
    border: 1px solid var(--sodium) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--sodium) !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1 !important;
}
@media (hover: hover) {
    body.gh-shop--cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
        background: var(--night-indigo) !important;
        border-color: var(--night-indigo) !important;
        box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--night-indigo) !important;
        color: var(--sodium) !important;
        opacity: 1 !important;
    }
}

/* an empty cart: say so, and show the way back once. The bar at the top
   is left out when the page loads empty; when the last item is removed
   without a reload, this hides it too. */
body.gh-shop--cart:has(.wc-empty-cart-message) .gh-shop-bar {
    display: none;
}
body.gh-shop--cart .woocommerce .wc-empty-cart-message {
    max-width: 640px;
}
body.gh-shop--cart .woocommerce .return-to-shop {
    margin: 8px 0 0;
    padding: 4px;
}


/* -------------------------------------------------------------
   35. Checking out
   Details on the left; the order, delivery, payment and the terms
   on one sheet of paper on the right.
   ------------------------------------------------------------- */

/* rows: 1 = error notices (WooCommerce adds them at the top of the form),
   2 = "Your order" heading, 3 = the order sheet. The details on the left
   span rows 2-3, and the last row takes any extra height, so a long
   address form never pushes the order sheet down. */
body.gh-shop--checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 44px;
    align-items: start;
}
body.gh-shop--checkout .woocommerce form.checkout > * {
    grid-column: 1 / -1;
}
body.gh-shop--checkout .woocommerce form.checkout > .woocommerce-NoticeGroup {
    grid-row: 1;
}
body.gh-shop--checkout .woocommerce form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
}
body.gh-shop--checkout .woocommerce form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 2;
}
body.gh-shop--checkout .woocommerce form.checkout > #order_review {
    grid-column: 2;
    grid-row: 3;
}
body.gh-shop--checkout .woocommerce form.checkout > #order_review_heading {
    margin: 0 0 16px;
}
body.gh-shop--checkout .woocommerce .col2-set .col-1,
body.gh-shop--checkout .woocommerce .col2-set .col-2 {
    float: none;
    width: 100%;
}
body.gh-shop--checkout .woocommerce .col2-set .col-2 {
    margin-top: 28px;
}
body.gh-shop--checkout .woocommerce form .form-row {
    margin: 0 0 16px;
    padding: 0;
}

/* the coupon slip at the top */
body.gh-shop--checkout .woocommerce form.checkout_coupon {
    margin: 0 0 30px;
    padding: 20px 20px 8px;
    border: 1px dashed rgba(201, 174, 114, 0.55);
    border-radius: 0;
}
body.gh-shop--checkout .woocommerce form.woocommerce-form-coupon button.button {
    min-height: 48px;
    margin: 4px;
    background: var(--night-indigo) !important;
    border: 1px solid var(--nicotine) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine) !important;
    color: var(--nicotine) !important;
}

/* the sheet on the right */
body.gh-shop--checkout .woocommerce #order_review {
    box-sizing: border-box;
    padding: 26px 28px 28px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    box-shadow: 0 2px 0 rgba(26, 21, 51, 0.35);
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table {
    width: 100%;
    margin: 0 0 22px;
    background: none;
    border: 0;
    border-collapse: collapse;
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table th,
body.gh-shop--checkout .woocommerce #order_review table.shop_table td {
    padding: 12px 0 !important;
    border: 0;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45);
    background: none !important;
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-size: 15px;
    vertical-align: top;
    text-align: left;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table thead th {
    border-bottom: 2px solid var(--night-indigo);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table td.product-total,
body.gh-shop--checkout .woocommerce #order_review table.shop_table tfoot td {
    font-family: var(--font-register);
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table .product-quantity {
    font-weight: 600;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table tfoot th {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-right: 12px !important;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table tfoot .order-total th,
body.gh-shop--checkout .woocommerce #order_review table.shop_table tfoot .order-total td {
    border-top: 2px solid var(--night-indigo);
    border-bottom: 0;
    font-size: 18px;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table tfoot .order-total th {
    font-size: 12px;
}
body.gh-shop--checkout .woocommerce #order_review .amount {
    color: var(--night-indigo);
}
/* The old Additional CSS (Appearance > Customize) paints this table in the
   old gold (#D5B75D) with !important. Once that CSS is deleted this rule
   does nothing; until then (and on production before launch day), ink wins: */
body.gh-shop--checkout .woocommerce #order_review table.shop_table th,
body.gh-shop--checkout .woocommerce #order_review table.shop_table td,
body.gh-shop--checkout .woocommerce #order_review table.shop_table td * {
    color: var(--night-indigo) !important;
}
body.gh-shop--checkout .woocommerce #order_review table.shop_table td.product-name {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.gh-shop--checkout .woocommerce #order_review ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.gh-shop--checkout .woocommerce #order_review ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    text-indent: 0;
}
body.gh-shop--checkout .woocommerce #order_review ul#shipping_method li input {
    flex: 0 0 auto;
    margin: 2px 0 0;
}
/* everything on the paper is ink */
body.gh-shop--checkout .woocommerce #order_review label,
body.gh-shop--checkout .woocommerce #order_review .form-row label {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce #order_review input[type="checkbox"],
body.gh-shop--checkout .woocommerce #order_review input[type="radio"] {
    accent-color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce #order_review a {
    color: var(--night-indigo);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* the parcel-locker button (InPost) and any other button in the order table */
body.gh-shop--checkout #order_review .woocommerce-checkout-review-order-table a[class*="button"],
body.gh-shop--checkout #order_review .woocommerce-checkout-review-order-table button,
body.gh-shop--checkout #order_review .woocommerce-checkout-review-order-table input[type="button"],
body.gh-shop--checkout #order_review #geowidget_show_map {
    box-sizing: border-box;
    min-width: 0;            /* the old stylesheet asks for 220px, too wide on a phone */
    max-width: calc(100% - 8px);
    min-height: 42px;
    margin: 8px 4px 4px;
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--greasepaint) !important;
    border: 1px solid var(--night-indigo) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--night-indigo) !important;
    color: var(--night-indigo) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
}

/* payment */
body.gh-shop--checkout .woocommerce #payment {
    margin: 0;
    padding: 0;
    background: none !important;
    border-radius: 0;
}
body.gh-shop--checkout .woocommerce #payment ul.payment_methods {
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45);
    list-style: none;
}
body.gh-shop--checkout .woocommerce #payment ul.payment_methods li {
    margin: 0 0 8px;
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
}
body.gh-shop--checkout .woocommerce #payment ul.payment_methods li input {
    margin: 0 8px 0 0;
    vertical-align: -3px;
}
body.gh-shop--checkout .woocommerce #payment div.payment_box {
    margin: 10px 0 4px;
    padding: 12px 14px;
    background: rgba(34, 27, 63, 0.06) !important;
    color: var(--night-indigo);
    font-family: var(--font-register);
    font-size: 14px;
    line-height: 1.5;
}
body.gh-shop--checkout .woocommerce #payment div.payment_box::before {
    display: none;
}
body.gh-shop--checkout .woocommerce #payment .form-row.place-order {
    margin: 0;
    padding: 0;
}
/* the terms: one short paragraph, then the tick box with its sentence */
body.gh-shop--checkout .woocommerce .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 22px;
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce .woocommerce-privacy-policy-text {
    margin: 0 0 14px;
    font-family: var(--font-register);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce .woocommerce-privacy-policy-text p {
    margin: 0;
}
body.gh-shop--checkout .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 0;
}
body.gh-shop--checkout .woocommerce .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce .woocommerce-terms-and-conditions {
    margin: 0 0 14px;
    padding: 14px 16px;
    max-height: 220px;
    overflow: auto;
    border: 1px dotted rgba(34, 27, 63, 0.45);
    background: rgba(34, 27, 63, 0.04);
    font-family: var(--font-register);
    font-size: 13.5px;
    line-height: 1.5;
}
/* Place order: lit, full width */
body.gh-shop--checkout .woocommerce #payment #place_order {
    width: calc(100% - 8px);
    min-height: 54px;
    margin: 4px;
    padding: 0 20px !important;
    float: none;
    background: var(--sodium) !important;
    border: 1px solid var(--sodium) !important;
    box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--sodium) !important;
    color: var(--night-indigo) !important;
    font-size: 13px !important;
}
@media (hover: hover) {
    body.gh-shop--checkout .woocommerce #payment #place_order:hover {
        background: var(--night-indigo) !important;
        border-color: var(--night-indigo) !important;
        box-shadow: 0 0 0 3px var(--greasepaint), 0 0 0 4px var(--night-indigo) !important;
        color: var(--sodium) !important;
    }
}

/* after paying: the order, on paper too */
body.gh-shop--checkout .woocommerce ul.woocommerce-order-overview {
    margin: 0 0 34px;
    padding: 22px 26px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    border: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 22px 40px;
}
body.gh-shop--checkout .woocommerce ul.woocommerce-order-overview li {
    margin: 0;
    padding: 0;
    border: 0 !important;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.gh-shop--checkout .woocommerce ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-family: var(--font-register);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
body.gh-shop--checkout .woocommerce .woocommerce-order-details,
body.gh-shop--checkout .woocommerce .woocommerce-customer-details {
    margin: 0 0 40px;
}
body.gh-shop--checkout .woocommerce .woocommerce-order-details h2,
body.gh-shop--checkout .woocommerce .woocommerce-customer-details h2 {
    margin: 0 0 16px;
}
body.gh-shop--checkout .woocommerce table.order_details {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--greasepaint);
    color: var(--night-indigo);
    border: 0;
}
body.gh-shop--checkout .woocommerce table.order_details th,
body.gh-shop--checkout .woocommerce table.order_details td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px dotted rgba(34, 27, 63, 0.45);
    color: var(--night-indigo);
    text-align: left;
}
body.gh-shop--checkout .woocommerce table.order_details a,
body.gh-shop--checkout .woocommerce table.order_details .amount {
    color: var(--night-indigo);
}
body.gh-shop--checkout .woocommerce .woocommerce-customer-details address {
    padding: 18px 20px;
    border: 1px solid var(--bottle-green);
    border-radius: 0;
    font-family: var(--font-register);
    font-style: normal;
    font-size: 15px;
    line-height: 1.6;
}


/* -------------------------------------------------------------
   36. Shop pages on phones
   ------------------------------------------------------------- */

@media all and (max-width: 1020px) {
    .shop-grid,
    body.gh-shop .woocommerce ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.gh-shop--product .woocommerce div.product {
        column-gap: 32px;
    }
}

@media all and (max-width: 800px) {
    .shop-grid,
    body.gh-shop .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 16px;
    }
    .gh-case {
        margin: 5px;
        box-shadow: 0 0 0 4px var(--deep-ground),
                    0 0 0 5px rgba(201, 174, 114, 0.28);
    }
    .gh-sticker {
        top: 6px;
        right: 6px;
        width: 58px;
        height: 58px;
        padding: 0 11px;
        font-size: 10px;
    }
    .gh-foot {
        justify-content: flex-start;
    }
    .shop-item__title,
    body.gh-shop .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }

    body.gh-shop #primary.content-area {
        padding: calc(var(--header-h) + 24px) 0 72px;
    }
    body.gh-shop #primary > .box {
        padding: 0 14px;
    }
    .gh-shop-bar {
        margin-bottom: 28px;
    }

    /* product: picture on top, the rest underneath */
    body.gh-shop--product .woocommerce div.product {
        grid-template-columns: minmax(0, 1fr);
    }
    body.gh-shop--product .woocommerce div.product > .woocommerce-product-gallery,
    body.gh-shop--product .woocommerce div.product > .summary {
        grid-column: 1;
    }
    body.gh-shop--product .woocommerce div.product > .woocommerce-product-gallery {
        margin-bottom: 30px;
    }
    body.gh-shop--product .woocommerce div.product form.cart:not(.variations_form),
    body.gh-shop--product .woocommerce div.product .woocommerce-variation-add-to-cart {
        flex-wrap: wrap;
    }
    body.gh-shop--product .woocommerce .gh-sheet--additional_information {
        padding: 20px 18px 16px;
    }
    body.gh-shop--product .woocommerce div.product > .related,
    body.gh-shop--product .woocommerce div.product > .upsells {
        margin-top: 64px;
        padding-top: 34px;
    }

    body.gh-shop--cart .woocommerce form.woocommerce-cart-form,
    body.gh-shop--cart .woocommerce .cart_totals,
    body.gh-shop--checkout .woocommerce #order_review {
        padding: 18px 16px 18px;
    }

    body.gh-shop--checkout .woocommerce form.checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    body.gh-shop--checkout .woocommerce form.checkout > .woocommerce-NoticeGroup,
    body.gh-shop--checkout .woocommerce form.checkout > #customer_details,
    body.gh-shop--checkout .woocommerce form.checkout > #order_review_heading,
    body.gh-shop--checkout .woocommerce form.checkout > #order_review {
        grid-column: 1;
        grid-row: auto;
    }
    body.gh-shop--checkout .woocommerce form.checkout > #order_review_heading {
        margin-top: 34px;
    }
}

/* WooCommerce turns its tables into blocks at 768px; match it exactly */
@media all and (max-width: 768px) {
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart thead {
        display: none;
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item {
        display: block;
        padding: 6px 0 10px;
        border-bottom: 1px dotted rgba(34, 27, 63, 0.45);
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td,
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item th {
        display: block;
        padding: 7px 0 !important;
        border-bottom: 0 !important;
        text-align: right !important;
        width: auto;
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td::before,
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item th::before {
        content: attr(data-title);
        float: left;
        font-family: var(--font-ui);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 2;
        color: var(--night-indigo);
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-remove::before {
        content: none;
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart td.product-remove a.remove {
        margin-left: auto;
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart td.product-thumbnail {
        display: none !important;
    }
    body.gh-shop--cart .woocommerce table.shop_table_responsive.cart td.actions {
        display: block;
        padding: 18px 0 4px !important;
    }
    body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon {
        flex-wrap: wrap;
        margin-bottom: 18px;
    }
    body.gh-shop--cart .woocommerce table.shop_table.cart td.actions .coupon input.input-text {
        flex: 1 1 140px;
        width: auto !important;
    }
    body.gh-shop--cart .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
        float: none;
        width: calc(100% - 8px);
    }
    body.gh-shop--cart .woocommerce .cart_totals table.shop_table tr {
        display: block;
    }
    body.gh-shop--cart .woocommerce .cart_totals table.shop_table th {
        display: none;
    }
    body.gh-shop--cart .woocommerce .cart_totals table.shop_table td {
        display: block;
        width: auto;
        text-align: right !important;
    }
    body.gh-shop--cart .woocommerce .cart_totals table.shop_table td::before {
        content: attr(data-title);
        float: left;
        font-family: var(--font-ui);
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 2;
    }
    body.gh-shop--cart .woocommerce .cart_totals ul#shipping_method li {
        justify-content: flex-end;
        text-align: left;
    }
}


/* =============================================================
   Round 15 — the hotel's knick-knacks
   ============================================================= */


/* -------------------------------------------------------------
   37. The vacancy plate: bulbs that glow when they're on
   ------------------------------------------------------------- */

.front-desk__bulb {
    width: 26px;
    height: 26px;
}
.front-desk__lamp.is-on .front-desk__bulb {
    filter: drop-shadow(0 0 3px rgba(232, 163, 61, 0.95))
            drop-shadow(0 0 10px rgba(232, 163, 61, 0.55));
}
.front-desk__lamp--no.is-on .front-desk__bulb {
    filter: drop-shadow(0 0 3px rgba(200, 105, 138, 0.95))
            drop-shadow(0 0 10px rgba(200, 105, 138, 0.55));
}
.front-desk__lamp.is-on span {
    text-shadow: 0 0 8px rgba(232, 163, 61, 0.45);
}
.front-desk__lamp--no.is-on span {
    text-shadow: 0 0 8px rgba(200, 105, 138, 0.45);
}
@media all and (max-width: 800px) {
    .front-desk__bulb {
        width: 22px;
        height: 22px;
    }
}


/* -------------------------------------------------------------
   38. The planet: shows only once it has fully loaded, then lights up.
   (If the page's script never runs, it appears after 4 seconds anyway.)
   ------------------------------------------------------------- */

.front-desk__planet img {
    transition: opacity 0.7s ease;
}
.front-desk__planet img.is-waiting {
    opacity: 0;
    animation: gh-planet-failsafe 0s 4s forwards;
}
@keyframes gh-planet-failsafe {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .front-desk__planet img { transition: none; }
}


/* -------------------------------------------------------------
   39. The pull cord under the sign, and the stars it switches on
   ------------------------------------------------------------- */

/* The cord belongs to the sign: whatever happens to the sign happens to
   the cord, so it can never be left sticking out. */
.front-desk__sign {
    position: relative;
    isolation: isolate;
    z-index: 2;                 /* the cord hangs in front of the plate below it */
    /* where the cord hangs. The fitting is placed from the same number, so
       the two can never drift apart. */
    --cord-right: 10px;
}
.pull-cord {
    position: absolute;
    top: 100%;                  /* hangs from the bottom edge of the sign */
    /* Close to the sign's right corner. Further in, the vacancy plate
       hanging below reaches under it at middling window widths, and the
       cord disappears behind it. */
    right: var(--cord-right);
    z-index: 2;
    width: 44px;                /* a finger-sized target around a thin cord */
    height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transform-origin: 50% 0;
    transition: transform 0.4s ease;
}
.pull-cord__string {
    flex: 0 0 40px;
    width: 2px;
    /* a bead chain */
    background: repeating-linear-gradient(to bottom,
        var(--nicotine) 0, var(--nicotine) 3px,
        rgba(201, 174, 114, 0.3) 3px, rgba(201, 174, 114, 0.3) 5px);
    transform-origin: 50% 0;
}
.pull-cord__knob {
    flex: 0 0 auto;
    width: 13px;
    height: 18px;
    margin-top: -1px;
    border-radius: 6px 6px 8px 8px;
    background: radial-gradient(circle at 35% 28%, #F3DFA6 0, var(--nicotine) 45%, #5E4822 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
@media (hover: hover) {
    .pull-cord:hover {
        transform: rotate(4deg);
    }
}
.pull-cord:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 2px;
}
/* a gentle sway when you arrive at the Front Desk (js/hotel.js) */
.pull-cord.is-swaying {
    animation: gh-cord-sway 3.4s ease-out;
}
@keyframes gh-cord-sway {
    0%   { transform: rotate(0); }
    12%  { transform: rotate(3deg); }
    30%  { transform: rotate(-2.2deg); }
    48%  { transform: rotate(1.4deg); }
    66%  { transform: rotate(-0.8deg); }
    83%  { transform: rotate(0.35deg); }
    100% { transform: rotate(0); }
}
/* the tug: the chain stretches from where it's fixed, so its top never
   leaves the sign; the knob comes down and springs back */
.pull-cord.is-pulled .pull-cord__string {
    animation: gh-cord-string 0.45s ease-out;
}
.pull-cord.is-pulled .pull-cord__knob {
    animation: gh-cord-knob 0.45s ease-out;
}
@keyframes gh-cord-string {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(1.22); }
    65%  { transform: scaleY(0.97); }
    100% { transform: scaleY(1); }
}
@keyframes gh-cord-knob {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(9px); }
    65%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}
/* with your photo: it stretches from the top too (it used to slide down
   whole, and its top came away from the sign) */
.pull-cord--photo {
    width: 44px;                /* fixed, so the fitting is always centred over it */
    height: auto;
    padding: 0;
}
/* the brass fitting the cord hangs from, on the sign's bottom edge. It sits
   over the top of the cord: when the cord swings or is hovered, Safari may
   draw its top a pixel or two higher, and this keeps that out of sight. */
.pull-cord__mount {
    position: absolute;
    z-index: 3;                 /* over the cord (2) */
    top: calc(100% - 2px);
    right: calc(var(--cord-right) + 22px - 11px);   /* centred on the cord */
    width: 22px;
    height: 12px;
    border-radius: 1px 1px 7px 7px;
    background: radial-gradient(circle at 40% 25%, #F3DFA6 0, var(--nicotine) 50%, #5E4822 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
/* your photo of a real fitting (Main page → Front Desk → Pull cord —
   fitting): shown 20px wide, its top flush with the sign's bottom edge,
   the cord hanging from the middle of its bottom edge */
.pull-cord__mount--photo {
    top: 100%;                  /* over the sign's 2px gold edge, like it's screwed to the frame */
    right: calc(var(--cord-right) + 22px - 13px);   /* centred on the cord */
    width: 26px;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;           /* (no shadow effects on photos: Safari) */
}
.pull-cord__mount--photo img {
    display: block;
    width: 100%;
    height: auto;
}
.pull-cord__img {
    display: block;
    width: auto;
    height: 72px;
    max-width: none;
    transform-origin: 50% 0;
}
.pull-cord.is-pulled .pull-cord__img {
    animation: gh-cord-photo 0.45s ease-out;
}
@keyframes gh-cord-photo {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(1.12); }
    65%  { transform: scaleY(0.98); }
    100% { transform: scaleY(1); }
}

/* The stars. js/hotel.js scatters them over the Front Desk, above the sign
   and around the planet, only when the cord is pulled (nothing is loaded
   before that). #home is isolated so they sit behind the planet and the
   sign but in front of the page's own background. */
#home.front-desk {
    position: relative;
    isolation: isolate;
    will-change: transform;     /* a fixed layer, see .front-desk__main */
    overflow-x: hidden;         /* older browsers */
    overflow-x: clip;           /* nothing may widen the page sideways */
}
.front-desk__stars {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;                  /* until the cord is pulled */
    z-index: -1;
    pointer-events: none;
    contain: strict;            /* nothing inside can change the layout outside */
}
.gh-star {
    position: absolute;
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border-radius: 50%;
    background: var(--c, #F2EEE6);
    box-shadow: 0 0 calc(var(--s) * 2) rgba(242, 238, 230, 0.7),
                0 0 calc(var(--s) * 5) rgba(207, 195, 224, 0.35);
    opacity: 0;
    animation: gh-star-in 0.7s ease-out var(--d) forwards;
}
.gh-star--twinkle {
    animation: gh-star-in 0.7s ease-out var(--d) forwards,
               gh-star-twinkle var(--t) ease-in-out calc(var(--d) + 0.7s) infinite alternate;
}
/* a few big ones with a glint across them */
.gh-star--glint::before,
.gh-star--glint::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--s) * 7);
    height: 1px;
    margin: -0.5px 0 0 calc(var(--s) * -3.5);
    background: linear-gradient(to right, rgba(242, 238, 230, 0), rgba(242, 238, 230, 0.9), rgba(242, 238, 230, 0));
}
.gh-star--glint::after {
    transform: rotate(90deg);
}
@keyframes gh-star-in {
    from { opacity: 0; transform: scale(0.2); }
    to   { opacity: var(--o, 1); transform: scale(1); }
}
@keyframes gh-star-twinkle {
    from { opacity: var(--o, 1); }
    to   { opacity: calc(var(--o, 1) * 0.35); }
}
/* pulled again: they go out, not all at once */
.front-desk__stars.is-going .gh-star {
    animation: gh-star-out 0.45s ease-in var(--dout, 0s) forwards;
}
@keyframes gh-star-out {
    from { opacity: var(--o, 1); transform: scale(1); }
    to   { opacity: 0; transform: scale(0.4); }
}
/* and one shooting star, once, when they come on */
.gh-shooting {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 130px;
    height: 1.5px;
    border-radius: 1px;
    background: linear-gradient(to right, rgba(242, 238, 230, 0.95), rgba(242, 238, 230, 0));
    opacity: 0;
    transform: rotate(-24deg);
    animation: gh-shoot 1s ease-out 1.4s forwards;
}
@keyframes gh-shoot {
    0%   { opacity: 0; transform: rotate(-24deg) translateX(0); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(-24deg) translateX(-280px); }
}
.front-desk__stars.is-going .gh-shooting {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .pull-cord,
    .pull-cord.is-swaying,
    .pull-cord.is-pulled .pull-cord__string,
    .pull-cord.is-pulled .pull-cord__knob,
    .pull-cord.is-pulled .pull-cord__img {
        animation: none;
        transition: none;
    }
    .gh-star,
    .gh-star--twinkle,
    .front-desk__stars.is-going .gh-star {
        animation: none;
        opacity: var(--o, 1);
    }
    .gh-shooting {
        display: none;
    }
}
@media all and (max-width: 800px) {
    .front-desk__sign {
        --cord-right: -12px;    /* clear of the vacancy plate, near the sign's corner */
    }
    .pull-cord {
        height: 52px;
    }
    .front-desk__vacancy--photo-chain::before,
    .front-desk__vacancy--photo-chain::after {
        background-size: auto 60px;         /* the cord photo's size on phones */
    }
    .pull-cord__string {
        flex-basis: 32px;
    }
    .pull-cord__img {
        height: 60px;
    }
    .gh-shooting {
        width: 90px;
    }
}


/* -------------------------------------------------------------
   40. The lift dial in the header (desktop)
   ------------------------------------------------------------- */

.lift-dial {
    display: none;
}
@media all and (min-width: 1100px) {
    .lift-dial {
        display: block;
        margin: 0 22px 0 auto;
        line-height: 0;
    }
    .lift-dial {
        margin-right: 0;
    }
    .lift-dial svg {
        display: block;
        width: 104px;
        height: auto;
        overflow: visible;
    }
}
.lift-dial__face {
    fill: var(--night-indigo);
    stroke: var(--nicotine);
    stroke-width: 1.2;
}
.lift-dial__ticks {
    fill: none;
    stroke: var(--nicotine);
    stroke-width: 1.2;
}
.lift-dial__no {
    font-family: var(--font-register);
    font-size: 10px;
    text-anchor: middle;
    fill: rgba(201, 174, 114, 0.7);
    transition: fill 0.2s ease;
}
.lift-dial__no.is-lit {
    fill: var(--sodium);
    font-weight: 700;
}

.lift-dial__needle path {
    fill: none;
    stroke: var(--sodium);
    stroke-width: 1.6;
    stroke-linecap: round;
}
.lift-dial__needle .lift-dial__tip {
    fill: var(--sodium);
    stroke: none;
}
.lift-dial__hub {
    fill: var(--night-indigo);
    stroke: var(--nicotine);
    stroke-width: 0.8;
}
.lift-dial__mark path {
    fill: var(--nicotine);
}
@media (prefers-reduced-motion: reduce) {
    .lift-dial__no { transition: none; }
}
/* where the dial shows, the band's mark is its hub: no second logo beside it */
@media all and (min-width: 1100px) {
    #header .lift-dial + #logo {
        display: none;
    }
}


/* -------------------------------------------------------------
   41. Door hangers on the boarded windows
   (Music → Door hanger; vacant album rooms only)
   Each hangs on a string tied to the room number. The string, the card
   and the swing all pivot on the number. Your own string picture:
   Main page → Rooms → Hanger string.
   ------------------------------------------------------------- */

.room__hanger {
    --hang: -3deg;
    --num: 38px;                        /* the room number's size */
    position: absolute;
    z-index: 1;                         /* above the frame, under the number: the string starts behind it */
    left: calc(9% + var(--num) / 2);
    top: calc(7% + var(--num) / 2);
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%) rotate(var(--hang));
    transform-origin: 50% 0;
    pointer-events: none;
}
.room:nth-child(even) .room__hanger {
    --hang: 2.5deg;
}
/* the string: drawn twine, or your picture repeated down its length */
.room__hanger-string {
    position: relative;
    z-index: 2;                 /* over the top of the card: it goes into the hole */
    flex: 0 0 auto;
    width: 2px;
    height: clamp(34px, 3.6vw, 48px);
    background-image: repeating-linear-gradient(165deg,
        #E3CF9C 0, #E3CF9C 2px, #8C6E3A 2px, #8C6E3A 4px);
}
.room__hanger--texture .room__hanger-string {
    width: 6px;
    background-image: var(--hanger-string);
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
}
/* the card, with its shadow (the shadow sits on this wrapper so the
   punched hole doesn't cut it off) */
.room__hanger-body {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    /* The hole's centre is 15% of the card's width below its top edge, and
       the hole is 15% of the width across: its upper rim is 7.5% down. Pull
       the card up so the string ends just inside that rim, as if the
       string carries the card by its opening. */
    margin-top: calc(-8% - 3px);        /* the string reaches a few pixels into the hole */
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}
.room__hanger-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    aspect-ratio: 1 / 2.15;
    padding: 34% 8% 10%;
    border-radius: 7px 7px 9px 9px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    text-align: center;
    /* the punched hole the string goes through: small and round (7.5% of
       the width across each way; the card is 2.15 times as tall as wide) */
    -webkit-mask-image: radial-gradient(ellipse 7.5% 3.49% at 50% 7%, transparent 92%, #000 100%);
            mask-image: radial-gradient(ellipse 7.5% 3.49% at 50% 7%, transparent 92%, #000 100%);
}
.room:nth-child(3n+2) .room__hanger-card { background: var(--moon-lilac); }
.room:nth-child(3n) .room__hanger-card   { background: var(--nicotine); }
.room__hanger-en {
    display: block;
    width: 100%;                /* the line keeps to the card, so a long word
                                   is carried rather than running off it */
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(8px, 0.95vw, 12px);
    line-height: 1.08;
    text-transform: uppercase;
    overflow-wrap: break-word;
    /* Carry a word over only when it is genuinely too long for the line:
       at least ten letters, five before the break and three after. So
       DISTURB stays whole and PRZESZKADZAĆ is carried. */
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 10 5 3;
}
/* a short printed rule under the English line */
.room__hanger-en::after {
    content: "";
    display: block;
    width: 36%;
    height: 1px;
    margin: 0.8em auto 0;
    background: currentColor;
    opacity: 0.5;
}
.room__hanger-pl {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: auto;           /* Polish at the foot of the card */
    padding-top: 0.6em;
    font-family: var(--font-register);
    font-size: clamp(6.5px, 0.7vw, 9px);
    line-height: 1.2;
    color: var(--bottle-green);
    overflow-wrap: break-word;
    /* Carry a word over only when it is genuinely too long for the line:
       at least ten letters, five before the break and three after. So
       DISTURB stays whole and PRZESZKADZAĆ is carried. */
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 10 5 3;
}
/* (the lettering used to step down a size for a long word; now long words
   are simply carried over the line, which reads better) */
.room:nth-child(3n) .room__hanger-pl { color: var(--deep-green); }
/* pointing at the window sets it swinging on its string */
@keyframes gh-hanger-swing {
    0%   { transform: translateX(-50%) rotate(var(--hang)); }
    25%  { transform: translateX(-50%) rotate(calc(var(--hang) + 5deg)); }
    50%  { transform: translateX(-50%) rotate(calc(var(--hang) - 3deg)); }
    75%  { transform: translateX(-50%) rotate(calc(var(--hang) + 1.5deg)); }
    100% { transform: translateX(-50%) rotate(var(--hang)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .room:hover .room__hanger {
        animation: gh-hanger-swing 1.8s ease-out;
    }
}
@media all and (max-width: 800px) {
    .room__hanger {
        --num: 30px;            /* the smaller room number on phones */
    }
}


/* -------------------------------------------------------------
   42. The bell on the Reception counter
   ------------------------------------------------------------- */

.reception__body {
    position: relative;
}
/* (#contact: the old stylesheet paints every button in #contact pale grey) */
#contact .desk-bell {
    position: absolute;
    z-index: 3;
    left: calc(42% + 122px);    /* in front of the card's bottom-left corner, all of it on the white */
    bottom: -12px;              /* sits a little below the line, so a rounded base doesn't look like it floats */
    width: 136px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    line-height: 0;
    opacity: 1;
    cursor: pointer;
    transform: translateX(-50%);
}
/* No shadow effect on the picture itself: Safari draws it from the
   picture's rectangle (a grey square) while it loads and on hover. The
   shadow is a separate soft patch on the counter underneath instead. */
.desk-bell__img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 100%;     /* it rocks on its base */
}
#contact .desk-bell::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6%;
    right: 6%;
    bottom: -5px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(10, 8, 22, 0.6), rgba(10, 8, 22, 0));
    pointer-events: none;
}
#contact .desk-bell:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 2px;
}
/* The old stylesheet fades every Reception button to 70% on :hover, and
   phones switch :hover on when you tap. The bell and the card's button
   stay fully opaque whatever state they're in. */
#contact .desk-bell,
#contact .desk-bell:hover,
#contact .desk-bell:active,
#contact .desk-bell:focus,
#contact .reg-card__submit,
#contact .reg-card__submit:hover,
#contact .reg-card__submit:active,
#contact .reg-card__submit:focus {
    opacity: 1 !important;
}
#contact .desk-bell {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
            appearance: none;
}
.desk-bell.is-ringing .desk-bell__img {
    animation: gh-bell-ring 0.7s ease-out;
}
.desk-bell.is-ringing .desk-bell__plunger {
    animation: gh-bell-plunger 0.25s ease-out;
    transform-box: fill-box;
}
/* struck: it gives a little downwards, then trembles on its base */
@keyframes gh-bell-ring {
    0%   { transform: scaleY(1); }
    12%  { transform: scaleY(0.95); }
    26%  { transform: scaleY(1) rotate(-1.4deg); }
    42%  { transform: rotate(1.1deg); }
    58%  { transform: rotate(-0.7deg); }
    75%  { transform: rotate(0.35deg); }
    100% { transform: rotate(0); }
}
@keyframes gh-bell-plunger {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(4px); }
    100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .desk-bell.is-ringing .desk-bell__img,
    .desk-bell.is-ringing .desk-bell__plunger {
        animation: none;
    }
}
/* no door photo (and on phones, where the photo is hidden): the bell
   stands on the top edge of the card instead */
#contact .reception__body:not(:has(.reception__photo)) .desk-bell {
    position: relative;
    left: auto;
    bottom: auto;
    align-self: flex-end;
    margin: 0 18px -3px 0;
    transform: none;
}
@media all and (max-width: 800px) {
    #contact .desk-bell {
        position: relative;
        left: auto;
        bottom: auto;
        align-self: flex-end;
        width: 106px;
        margin: 0 14px -34px 0;     /* stands on the card's top edge, a little lower */
        transform: none;
    }
}


/* -------------------------------------------------------------
   43. Room 404
   ------------------------------------------------------------- */

#primary.room-404 {
    box-sizing: border-box;
    min-height: 72vh;
    margin: 0;
    padding: calc(var(--header-h) + 64px) 20px 104px;
    text-align: center;
}
.room-404__inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.room-404__tag {
    width: 108px;
    height: auto;
    margin-bottom: 28px;
    overflow: visible;
    transform: rotate(-8deg);
    transform-origin: 50% 11%;      /* swings from its ring */
    animation: gh-key-settle 2.6s ease-out 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}
@keyframes gh-key-settle {
    0%   { transform: rotate(-22deg); }
    25%  { transform: rotate(4deg); }
    45%  { transform: rotate(-14deg); }
    65%  { transform: rotate(-4deg); }
    82%  { transform: rotate(-10deg); }
    100% { transform: rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .room-404__tag { animation: none; }
}
.room-404__ring {
    fill: none;
    stroke: var(--nicotine);
    stroke-width: 4;
}
.room-404__fob  { fill: var(--nicotine); }
.room-404__hole { fill: var(--night-indigo); }
.room-404__no {
    font-family: var(--font-display);
    font-size: 34px;
    text-anchor: middle;
    fill: var(--night-indigo);
}
.room-404__name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 7.5px;
    letter-spacing: 0.18em;
    text-anchor: middle;
    fill: var(--night-indigo);
}
.room-404__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--greasepaint);
}
.room-404__pl {
    margin: 10px 0 24px;
    font-family: var(--font-register);
    font-size: 17px;
    color: var(--corridor-mint);
}
.room-404__text {
    max-width: 46ch;
    margin: 0 0 34px;
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.65;
    color: var(--greasepaint);
}
.room-404__ways {
    margin: 0;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 28px;
}
#primary.room-404 .room-404__plate {
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    background: var(--night-indigo);
    border: 1px solid var(--nicotine);
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--nicotine);
    color: var(--nicotine);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}
#primary.room-404 .room-404__link {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nicotine);
}
@media (hover: hover) {
    #primary.room-404 .room-404__plate:hover,
    #primary.room-404 .room-404__link:hover {
        color: var(--sodium);
        opacity: 1;
    }
    #primary.room-404 .room-404__plate:hover {
        border-color: var(--sodium);
        box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium);
    }
}


/* -------------------------------------------------------------
   44. The rubber stamp on the receipt ("order received" page)
   The class on <body> comes from inc/gift-shop.php.
   ------------------------------------------------------------- */

body.gh-order--paid     { --stamp-ink: var(--faded-rouge); }
body.gh-order--reserved { --stamp-ink: var(--dusty-purple); }
body.gh-order--received { --stamp-ink: var(--bottle-green); }

body.gh-order--paid .woocommerce ul.woocommerce-order-overview,
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview,
body.gh-order--received .woocommerce ul.woocommerce-order-overview {
    position: relative;
    min-height: 124px;
    padding-right: 260px;
}
/* the stamp is two layers drawn in the same place: the frame with the big
   word, and the small line at its foot */
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::before,
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::before,
body.gh-order--received .woocommerce ul.woocommerce-order-overview::before,
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::after,
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::after,
body.gh-order--received .woocommerce ul.woocommerce-order-overview::after {
    position: absolute;
    top: 50%;
    right: 32px;
    width: 216px;
    height: 92px;
    margin-top: -46px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    text-align: center;
    color: var(--stamp-ink);
    transform: rotate(-7deg);
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 1;
    /* the grit of a rubber stamp (--stamp-grit, set on :root) */
    -webkit-mask-image: var(--stamp-grit);
            mask-image: var(--stamp-grit);
    -webkit-mask-size: 112px 112px;
            mask-size: 112px 112px;
}
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::before,
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::before,
body.gh-order--received .woocommerce ul.woocommerce-order-overview::before {
    align-items: flex-start;
    padding-top: 12px;
    border: 3px solid currentColor;
    border-radius: 6px;
    box-shadow: inset 0 0 0 3px var(--greasepaint), inset 0 0 0 4.5px currentColor;
    font-family: var(--font-display);
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::after,
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::after,
body.gh-order--received .woocommerce ul.woocommerce-order-overview::after {
    align-items: flex-end;
    padding: 0 18px 14px;       /* clear of the frame on both sides */
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::before     { content: "Paid"; }
body.gh-order--paid .woocommerce ul.woocommerce-order-overview::after      { content: "Thank you for your stay"; }
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::before { content: "Reserved"; font-size: 26px; padding-top: 16px; }
body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::after  { content: "Awaiting your transfer"; }
body.gh-order--received .woocommerce ul.woocommerce-order-overview::before { content: "Received"; font-size: 26px; padding-top: 16px; }
body.gh-order--received .woocommerce ul.woocommerce-order-overview::after  { content: "Payment on its way"; }

@media all and (max-width: 800px) {
    body.gh-order--paid .woocommerce ul.woocommerce-order-overview,
    body.gh-order--reserved .woocommerce ul.woocommerce-order-overview,
    body.gh-order--received .woocommerce ul.woocommerce-order-overview {
        padding-right: 26px;
        padding-bottom: 136px;
    }
    body.gh-order--paid .woocommerce ul.woocommerce-order-overview::before,
    body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::before,
    body.gh-order--received .woocommerce ul.woocommerce-order-overview::before,
    body.gh-order--paid .woocommerce ul.woocommerce-order-overview::after,
    body.gh-order--reserved .woocommerce ul.woocommerce-order-overview::after,
    body.gh-order--received .woocommerce ul.woocommerce-order-overview::after {
        top: auto;
        bottom: 24px;
        right: auto;
        left: 50%;
        margin: 0 0 0 -108px;
    }
}


/* -------------------------------------------------------------
   45. The Gift Shop: price tags level across each row
   Name, then tag, then button, each on its own line, and every card
   in a row shares the same lines (like the nameplates under the
   windows), however long a name or a price is.
   ------------------------------------------------------------- */

.gh-foot {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
/* "View cart" (added under the button) takes its natural height in the column */
#merch .gh-foot .added_to_cart,
body.gh-shop .woocommerce ul.products li.product .gh-foot .added_to_cart {
    flex-basis: auto;
}
@supports (grid-template-rows: subgrid) {
    .shop-grid,
    body.gh-shop .woocommerce ul.products {
        row-gap: 14px;
    }
    .shop-item,
    body.gh-shop .woocommerce ul.products li.product {
        display: grid !important;
        grid-row: span 2;
        grid-template-rows: subgrid;
        /* One column, exactly as wide as the card. Without this Safari sized
           the card's column by the photo's full natural width and the cases
           spilled over each other. */
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        min-width: 0;
    }
    .shop-item > *,
    body.gh-shop .woocommerce ul.products li.product > * {
        min-width: 0;
        max-width: 100%;
    }
    .gh-foot {
        align-self: start;
        margin-top: 0;
        padding-bottom: 34px;           /* the space before the next row */
    }
}
@media all and (max-width: 800px) {
    @supports (grid-template-rows: subgrid) {
        .shop-grid,
        body.gh-shop .woocommerce ul.products {
            row-gap: 12px;
        }
        .gh-foot {
            padding-bottom: 22px;
        }
    }
}


/* -------------------------------------------------------------
   46. Product photos on phones: nearly clear glass
   Phones can't point at things, so the slideshow shows the goods the
   way a pointer would on a computer: tint almost gone, frost wiped.
   ------------------------------------------------------------- */

@media (hover: none) {
    body.gh-shop--product .woocommerce-product-gallery__image {
        background: #F1ECF6;
    }
    body.gh-shop--product .woocommerce-product-gallery__image::after {
        opacity: 0.1;
    }
    body.gh-shop--product .woocommerce div.product div.images .flex-control-thumbs li {
        background: #F1ECF6;
    }
}


/* =============================================================
   Round 32 — the February switch, and the album in the Gift Shop
   ============================================================= */

/* -------------------------------------------------------------
   48. The February hero: the album cover collage takes the
   planet's place (Main page → Front Desk → Grand opening)
   ------------------------------------------------------------- */

.front-desk__hero {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.front-desk__hero img {
    display: block;
    width: 100%;
    height: auto;
}


/* -------------------------------------------------------------
   49. The album at the head of the Gift Shop
   The sleeve in its own glass case on the left, the record's
   name, its line, the price and the button on the right.
   ------------------------------------------------------------- */

.shop-feature {
    --counter-h: 86px;          /* how deep the counter is */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    --sleeve-w: 300px;          /* how big the record is on the counter */
    grid-template-columns: minmax(0, var(--sleeve-w)) minmax(0, 480px);
    justify-content: start;
    align-items: end;           /* and stand on the counter, not float above it */
    gap: 10px 42px;
    margin: 0 0 54px;
    padding: 36px 40px 34px 7%;
    border: 1px solid var(--nicotine);
}
/* The counter it all stands on (Main page → Gift Shop → The counter).
   It is the lower part of the block, so the record and the things beside it
   stand on a surface, with the room behind them; and the writing keeps to
   the dark wall, where it reads whatever photo you choose. */
/* with a counter photo, the room is deeper: the counter takes the bottom of
   the block, and everything stands on it */
.shop-feature--counter {
    padding-bottom: calc(var(--counter-h) - 14px);
}
.shop-feature--cd { --sleeve-w: 230px; }
.shop-feature--lp { --sleeve-w: 350px; }

/* room at the ends for whatever stands there */
.shop-feature.has-prop-right { padding-right: 32%; }
.shop-feature.has-prop-left  { padding-left: 13%; }
.shop-feature__surface {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--counter-h);
    z-index: -1;
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat;
}
/* the edge of the counter, and the shadow it throws back at the wall */
.shop-feature__surface::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 26px;
    background: linear-gradient(to bottom, rgba(10, 8, 22, 0.65), rgba(10, 8, 22, 0));
}
.shop-feature__surface::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(201, 174, 114, 0.5);
}
/* things left on the counter: cut-out photos at the two bottom corners */
/* Things standing on the counter: a till at one end, a pencil pot at the
   other. Their feet are on the counter's surface, a little in from its edge,
   and they may stand as tall as they like against the wall behind. */
.shop-feature__prop {
    position: absolute;
    bottom: calc(var(--counter-h) - 44px);   /* their feet on the counter's surface */
    z-index: 0;
    width: auto;
    filter: drop-shadow(0 10px 14px rgba(10, 8, 22, 0.6));
    pointer-events: none;
}
/* the small one at the near end: coins, a pencil pot */
.shop-feature__prop--left {
    left: 0;
    transform: translateX(-42%);    /* a share of its own width, whatever size it is */
    max-width: 16%;
    max-height: 200px;
}
/* the big one at the far end: the till, standing tall and running off the
   edge of the picture, as it would at the end of a real counter */
.shop-feature__prop--right {
    right: 0;
    transform: translateX(38%);
    max-width: 42%;
    max-height: 440px;
}
.shop-feature__sleeve,
.shop-feature__text {
    position: relative;
    z-index: 1;                 /* the record and its details stand in front */
}
/* the record doesn't sit quite square on the counter, and its foot rests
   just over the counter's edge */
.shop-feature__sleeve {
    margin-bottom: -14px;
}
.shop-feature__text {
    margin-bottom: 34px;        /* the button sits above the counter's edge */
}
.shop-feature__sleeve .gh-case {
    transform: rotate(-2.2deg);
    box-shadow: 0 0 0 6px var(--deep-ground),
                0 0 0 7px rgba(201, 174, 114, 0.28),
                0 14px 24px -10px rgba(10, 8, 22, 0.75);
}
@media (hover: hover) {
    .shop-feature__sleeve .gh-case {
        transition: transform 0.4s ease;
    }
    .shop-feature__sleeve:hover .gh-case {
        transform: rotate(-0.6deg);     /* someone straightens it to look closer */
    }
}
.shop-feature__sleeve {
    display: block;
    min-width: 0;
    opacity: 1;
}
.shop-feature__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.shop-feature__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    text-transform: uppercase;
}
#merch .shop-feature__title a {
    color: var(--greasepaint);
    text-decoration: none;
    opacity: 1;
}
.shop-feature__line {
    margin: 0;
    font-family: var(--font-register);
    font-size: 16px;
    color: var(--corridor-mint);
}
/* the price on its paper tag, a size up from the grid's */
#merch .shop-feature .price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    margin: 0;
    padding: 7px 15px 7px 11px;
    background: var(--nicotine);
    color: var(--night-indigo);
    font-family: var(--font-register);
    font-size: 18px;
    line-height: 1.3;
    transform: rotate(-1.2deg);
}
#merch .shop-feature .price::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--night-indigo);
    opacity: 0.55;
}
#merch .shop-feature .price * {
    color: var(--night-indigo);
    font-size: inherit;
}
#merch .shop-feature .price del { opacity: 0.6; }
#merch .shop-feature .price ins { background: none; text-decoration: none; font-weight: 700; }
/* the button is lit: this is the one that moves you forward */
#merch .shop-feature__add {
    box-sizing: border-box;
    min-height: 50px;
    margin: 4px;
    padding: 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sodium);
    border: 1px solid var(--sodium);
    box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--sodium);
    color: var(--night-indigo);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
}
@media (hover: hover) {
    #merch .shop-feature__add:hover {
        background: var(--greasepaint);
        border-color: var(--greasepaint);
        box-shadow: 0 0 0 3px var(--night-indigo), 0 0 0 4px var(--greasepaint);
        color: var(--night-indigo);
        opacity: 1;
    }
}
#merch .shop-feature__add.loading { opacity: 0.5; cursor: progress; }
#merch .shop-feature__add::after { content: none; }
#merch .shop-feature__add.added::after {
    content: "";
    display: block;
    width: 5px;
    height: 9px;
    margin-top: -3px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
#merch .shop-feature .added_to_cart {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sodium);
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 1;
}
.shop-feature.is-sold-out .gh-case img {
    filter: saturate(0.5);
    opacity: 0.6;
}

@media all and (max-width: 800px) {
    .shop-feature,
    .shop-feature--cd,
    .shop-feature--lp {
        --sleeve-w: 320px;      /* on a phone it fills the width either way */
    }
    .shop-feature {
        --counter-h: 96px;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        align-items: stretch;
        gap: 20px;
        margin-bottom: 38px;
        padding: 18px;
    }
    .shop-feature__sleeve,
    .shop-feature__text {
        margin-bottom: 0;
    }
    .shop-feature__sleeve {
        max-width: 320px;
    }
    /* On a phone the record and its details fill the width, so the till is
       too wide to stand anywhere. The small prop moves to the right instead:
       something tall and narrow, a stack of coins say, standing on the
       counter and running off behind the frame. */
    .shop-feature__prop--right {
        display: none;
    }
    .shop-feature__prop--left {
        left: auto;
        right: 0;
        transform: translateX(52%);     /* only a sliver of it shows */
        bottom: calc(var(--counter-h) - 34px);
        max-width: 44%;
        max-height: 250px;              /* at its own size, not shrunk to fit */
    }
    .shop-feature.has-prop-left  { padding-left: 18px; }
    .shop-feature.has-prop-right { padding-right: 18px; }
}


/* -------------------------------------------------------------
   50. Payment logos on the shop pages
   The payment plugins put their own logos on the page. Most are dark
   pictures meant for a white page, so they get a light chip to sit on.
   ------------------------------------------------------------- */

body.gh-shop img[src*="payu" i],
body.gh-shop img[src*="przelewy" i],
body.gh-shop img[src*="paypo" i],
body.gh-shop img[src*="twisto" i],
body.gh-shop img[src*="blik" i],
body.gh-shop img[src*="inpost" i] {
    box-sizing: content-box;
    max-height: 26px;
    padding: 5px 9px;
    background: var(--greasepaint);
    border-radius: 3px;
    vertical-align: middle;
}
/* on the paper sheets (the cart's bill, the order sheet) they already sit
   on cream, so they need no chip */
body.gh-shop--cart .cart_totals img[src*="inpost" i],
body.gh-shop--checkout #order_review img[src*="payu" i],
body.gh-shop--checkout #order_review img[src*="przelewy" i],
body.gh-shop--checkout #order_review img[src*="paypo" i],
body.gh-shop--checkout #order_review img[src*="twisto" i],
body.gh-shop--checkout #order_review img[src*="blik" i],
body.gh-shop--checkout #order_review img[src*="inpost" i] {
    padding: 0;
    background: none;
    border-radius: 0;
}


/* -------------------------------------------------------------
   51. Before the opening (Round 47)
   Main page → Front Desk → The opening: Before the opening.
   Its wording and pictures: Main page → Before the opening.
   ------------------------------------------------------------- */

/* The album rooms' names, taped over on their nameplates. The name itself
   is never sent to the browser; each strip's length goes by the room, not
   by the name. Until a photo of a strip is added, a drawn strip of cream
   masking tape with torn ends stands in. */
.room__title--taped {
    display: block;
    padding: 2px 0 1px;
}
.room__tape {
    display: block;
    width: var(--tape-w, 80%);
    max-width: 100%;
    height: 1.2em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(26, 21, 51, 0.10)), var(--greasepaint);
    opacity: 0.92;
    clip-path: polygon(1.5% 0, 98.5% 0, 100% 18%, 97.5% 34%, 100% 50%, 97.8% 66%, 100% 82%, 98.5% 100%,
                       1.5% 100%, 0 82%, 2.2% 66%, 0 50%, 2.5% 34%, 0 18%);
}
.room:nth-child(odd) .room__tape  { transform: rotate(-1.2deg); }
.room:nth-child(even) .room__tape { transform: rotate(0.9deg); }
/* your own photo of a strip (transparent PNG, long and thin): stretched to
   each strip's length, torn ends and all */
.room__tape--photo {
    background: var(--tape-img) center / 100% 100% no-repeat;
    opacity: 1;
    clip-path: none;
}

/* Tape or a board over the Reception door. Made on top of the door photo,
   at exactly the same size, and saved as a transparent PNG: laid over the
   photo here and cropped exactly as the photo is cropped, so whatever is in
   it lands where it was put, at any screen width. (On phones the door photo
   isn't shown, so neither is this.) */
.reception__photo {
    position: relative;
}
.reception__photo .reception__cover {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* -------------------------------------------------------------
   52. Before the opening, round 48
   ------------------------------------------------------------- */

/* Door hangers. Safari can't be told "only words of ten letters or
   more" (it ignores hyphenate-limit-chars), so it split REMONCIE as
   remon-cie. Six letters before the break and four after add up to the
   same ten, so only the genuinely long words are carried. */
.room__hanger-en,
.room__hanger-pl {
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 4;
}
/* The Polish line was small print at the foot of the card (9px at most);
   it is now nearer the English line's size. The card stays the same width,
   so about seven letters fit on the Polish line on a laptop: a word of ten
   letters or more is carried with a hyphen, but one of eight or nine
   doesn't fit, so short words read best there. */
.room__hanger-pl {
    font-size: clamp(7.5px, 0.85vw, 11px);
    line-height: 1.15;
}

/* The Gift Shop before the opening: the counter, the till and the rest as
   they will be, and a notice standing where the album will. Its place is
   square like the record's, so the counter keeps its height and the till
   its size. (Main page → Before the opening → Gift Shop notice) */
.shop-notice {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
/* drawn: a card propped on the counter, a little askew, with a gold rule
   printed just inside its edge */
.shop-notice__card {
    box-sizing: border-box;
    width: 88%;
    padding: 30px 22px 26px;
    background: var(--greasepaint);
    color: var(--night-indigo);
    text-align: center;
    transform: rotate(-2.2deg);
    box-shadow: inset 0 0 0 6px var(--greasepaint),
                inset 0 0 0 7px var(--nicotine),
                0 14px 24px -10px rgba(10, 8, 22, 0.75);
}
.shop-notice__card p {
    margin: 0;
    padding: 0;
}
.shop-notice__en {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.shop-notice__en::after {          /* a short printed rule under it */
    content: "";
    display: block;
    width: 34%;
    height: 1px;
    margin: 0.55em auto 0;
    background: currentColor;
    opacity: 0.45;
}
#merch .shop-notice__pl {
    margin-top: 12px;
    font-family: var(--font-register);
    font-size: 16px;
    line-height: 1.3;
    color: var(--bottle-green);
}
#merch .shop-notice__small {
    margin-top: 10px;
    font-family: var(--font-register);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: var(--night-indigo);
}
/* your own photo of a notice: a cut-out, standing on the counter */
.shop-notice__photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
}
@media all and (max-width: 800px) {
    .shop-notice__card {
        padding: 26px 18px 22px;
    }
}


/* -------------------------------------------------------------
   53. A quiet currency choice beside Cart (Round 50)
   PLN · USD: the one in use in cream, the other a small gold link.
   ------------------------------------------------------------- */

.gift-shop__tools,
.gh-shop-bar__end {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px 26px;
}
.gh-currency {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--nicotine);
}
.gh-currency__sep {
    opacity: 0.5;
}
.gh-currency__now {
    color: var(--greasepaint);
}
#merch .gh-currency__other,
body.gh-shop .gh-currency__other {
    color: var(--nicotine);
    text-decoration: none;
    opacity: 0.8;
    padding: 6px 2px;           /* a bigger target than the letters */
    margin: -6px -2px;
}
@media (hover: hover) {
    #merch .gh-currency__other:hover,
    body.gh-shop .gh-currency__other:hover {
        color: var(--sodium);
        opacity: 1;
    }
}