/*
 * Miss Lawh brand palette — customer-facing pages only.
 * ==================================================================
 * Taken from the printed Sweet Menu: a dusty-rose ground with deep
 * aubergine type and a muted rose for prices and figures.
 *
 * Loaded after theme/css/styles.rtl.css and overrides its semantic
 * colour variables rather than individual component rules, so every
 * button, link, border and background follows automatically.
 *
 * Deliberately NOT applied to the admin panel: that is a tool used all
 * day, and its dark Bootstrap theme is a separate visual system.
 *
 * Note on contrast: these are the printed values, matched exactly by
 * request. The rose reads around 3:1 on the rose ground — fine for the
 * large price numerals it was designed for, below the 4.5:1 web
 * minimum for small print such as the allergen line.
 */

:root {
    /* --- brand ---------------------------------------------------- */
    --brand-ground: #f5e6e4;      /* page background        */
    --brand-ground-deep: #efdcda;  /* cards, alternating bands */
    --brand-ink: #3d2b56;          /* headings, body type    */
    --brand-ink-soft: #5a4470;     /* secondary type         */
    --brand-rose: #c4737f;         /* prices, figures, accent */
    --brand-rose-deep: #a85a66;    /* accent hover           */
    --brand-rule: rgba(61, 43, 86, 0.14); /* hairline dividers */

    /* --- theme overrides ------------------------------------------ */
    /* color-1 is the theme's accent: links, primary buttons, marks. */
    --color-1: var(--brand-rose);
    --color-1-lightest: #e0aab2;
    --color-1-lighter: #d79aa3;
    --color-1-light: #d08e98;
    --color-1-dark: #a85a66;
    --color-1-darker: #8d4a54;
    --color-1-darkest: #6b3840;

    /* Grounds. The theme walks gray-1 (lightest) to gray-19 (darkest);
       remapping the ends is enough for backgrounds and rules. */
    --color-white: #ffffff;
    --color-gray-1: var(--brand-ground);
    --color-gray-2: var(--brand-ground);
    --color-gray-3: var(--brand-ground-deep);
    --color-gray-4: var(--brand-ground-deep);
    --color-gray-5: var(--brand-ground-deep);

    /* Type */
    --color-text: var(--brand-ink);
    --color-text-dark: var(--brand-ink);
    --color-text-light: var(--brand-ink-soft);
    --color-placeholder: rgba(61, 43, 86, 0.45);

    /* Links */
    --color-link: var(--brand-rose);
    --color-link-hover: var(--brand-ink);
    --color-link-active: var(--brand-ink);

    /* Buttons */
    --color-btn: var(--brand-ground-deep);
    --color-btn-text: var(--brand-ink);
    --color-btn-hover: #e7d0ce;
    --color-btn-hover-text: var(--brand-ink);
    --color-btn-primary: var(--brand-ink);
    --color-btn-primary-text: var(--brand-ground);
    --color-btn-primary-hover: var(--brand-rose);
    --color-btn-primary-hover-text: #ffffff;
    --color-btn-stroke: var(--brand-ink);
    --color-btn-stroke-text: var(--brand-ink);
    --color-btn-stroke-hover: var(--brand-ink);
    --color-btn-stroke-hover-text: var(--brand-ground);

    /* Page chrome */
    --color-body-bg: var(--brand-ground);
    --color-border: var(--brand-rule);
    --color-preloader-bg: var(--brand-ground);
    --color-loader: var(--brand-rose);
}

/* The theme paints several sections with explicit dark backgrounds that
   do not read from the variables above. */
body,
.s-pagewrap,
.s-content,
.s-pagecontent {
    background-color: var(--brand-ground);
    color: var(--brand-ink);
}

/* Headings carry the deep aubergine, as on the printed menu. */
h1, h2, h3, h4, h5, h6,
.text-display-title {
    color: var(--brand-ink);
}

/* Prices and numerals: the menu's signature rose. */
.menu-block__cat-price,
.menublock-item__price,
.price {
    color: var(--brand-rose);
}

/* Section dividers as hairlines rather than filled blocks. */
.content-block--grey {
    background-color: var(--brand-ground-deep);
}

/* The theme gives every textarea min-height: calc(8 * var(--space)) —
   about 272px, eight lines. That suits a contact form's "tell us about
   your project"; the one field using it here is an optional note on a
   booking ("window seat please"), and at that size it dominated the form
   and implied far more was expected.

   Three lines, and resize left on so anyone writing more can drag it. */
textarea {
    min-height: calc(3 * var(--space));
    resize: vertical;
}

/* --- Page banner ----------------------------------------------------
   Every inner page opens with .s-pageheader: a stock coffee photograph
   over a near-black ground (--color-gray-19: #151312), with the title
   reversed out in white. The transparent site header sits on top of it,
   which is why its chrome is drawn white by the theme.

   That band is the dark block at the top of the reservation and website
   pages. The photograph is theme filler and the near-black belongs to
   the theme's palette rather than this brand, so the band is brought
   onto the brand ground and the type flipped to ink.

   The photograph itself is set inline on each page, so it is chosen
   there rather than here. This only supplies the ground beneath it —
   which is what shows while the image loads, and if it ever 404s.

   To drop the photograph altogether and keep a plain band, add
   `background-image: none !important;` below and delete the ::before
   scrim. */
.s-pageheader {
    background-color: var(--brand-ground-deep);
    border-bottom: 1px solid var(--brand-rule);
}

/* The theme darkens this band with TWO stacked overlays, both set to
   mix-blend-mode: multiply so they only ever subtract light:

     ::before  flat near-black at 0.3
     ::after   a black gradient at 0.5, fading in from one edge — the
               shadow that was still weighing down one side of the band

   Both are neutralised here. ::before is reused as a wash of the brand
   ground, which needs the blend mode returned to `normal`: under
   multiply a light colour cannot lift anything, so the wash would
   darken rather than brighten. ::after is switched off outright.

   Painted as a ::before rather than a layer inside background-image,
   because that property is set inline on each page and a second layer
   there would be dropped along with the first.

   0.82 keeps the band bright: the beans read as a soft texture behind
   the title rather than competing with it. Lower it to let more of the
   photograph through; raise it towards 1 for an almost plain band. */
.s-pageheader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(245, 230, 228, 0.82);
    mix-blend-mode: normal;
    opacity: 1;
    pointer-events: none;
}

/* The theme's edge gradient. Nothing here needs a vignette, and it was
   the last thing still shading one side of the band. */
.s-pageheader::after {
    display: none;
}

/* The title is positioned, so it already sits above the scrim; this
   keeps the rest of the banner's content there too. */
.s-pageheader__content {
    position: relative;
    z-index: 1;
}

/* Ink on what is now a light band, in place of the theme's white.

   Also smaller than the theme's clamp(xxxl, 10vw, huge-1). That 10vw
   was sized for a one-word English title over a photograph; an Arabic
   page title set that large outweighs the wordmark above it, which is
   the thing that should carry the page. The floor and ceiling come down
   a step each and the viewport term with them. */
.s-pageheader .page-title {
    color: var(--brand-ink);
    font-size: clamp(var(--text-xl), 6vw, var(--text-xxxl));
}

/* The rule above the title is drawn in --color-1, already the brand
   rose, so it is left alone. */

/* --- Logo size -------------------------------------------------------
   The theme sizes the wordmark at 15rem for a logo that was name-only.
   This one carries ATELIER on a second line, so the name itself renders
   smaller within the same width — and it is the brand, so it should
   outweigh the page title beneath it rather than the other way round.

   Set on --logo-width rather than the img, so the theme's own
   breakpoints keep working; only the values change.

   --header-height tracks it. The theme's 72px was cut for a name-only
   wordmark about 70px tall; this two-line mark is far deeper at the
   same width, and the header row is what aligns the burger and the
   booking button against it. A short row would not clip the logo — the
   header is transparent and overhangs the banner — but it would leave
   those controls off its centre line.

   Each height below is the logo's rendered height at that width (the
   mark is 800x233, so height is width x 0.291) with a little room. */
.s-header {
    --logo-width: 25rem;      /* 400px wide -> ~117px tall */
    --header-height: 124px;
}

@media screen and (max-width: 900px) {
    .s-header {
        --logo-width: 16rem;  /* 256px wide -> ~75px tall */
        --header-height: 84px;
    }
}

@media screen and (max-width: 500px) {
    .s-header {
        /* Held back on phones: the burger and booking button share this
           row, and a wider mark would crowd them. */
        --logo-width: 13rem;
    }
}

/* The header overlays that band, and the theme paints its burger white
   for the dark photograph that used to be there. On the light ground it
   would be invisible, so it flips to ink — but only on inner pages: the
   home page keeps its dark hero and its white chrome.

   The burger is three painted spans rather than text, so it does not
   follow `color`; ::before and ::after inherit from the span. */
.ss-inner .s-header__menu-toggle span,
.ss-inner .s-header__menu-toggle span::before,
.ss-inner .s-header__menu-toggle span::after {
    background-color: var(--brand-ink);
}

/* While the panel is open the burger becomes an X over the panel's own
   ground, so it follows the panel rather than the page behind it. */
.ss-inner .s-header__menu-toggle.is-clicked span {
    background-color: transparent;
}

/* --- Dark sections -------------------------------------------------
   The mobile nav panel and the footer paint their own near-black
   backgrounds, which the variables above do not reach. Both carry the
   logo, so they are brought onto the brand ground — that way a single
   aubergine wordmark works in all three placements. */
.s-header__nav {
    --nav-text-color: var(--brand-ink);
    background: var(--brand-ground-deep);
    color: var(--brand-ink);
}

/* The theme hardcodes `color: white` on .s-header__nav-links li a, so these
   selectors have to match its specificity to win — a plain
   `.s-header__nav a` loses and the links stay white on the rose ground. */
.s-header__nav a,
.s-header__nav h6,
.s-header__nav-links li a,
.s-header__nav-links li a::before,
.s-header__nav .s-header__nav-links li ul li a {
    color: var(--brand-ink);
}

.s-header__nav a:hover,
.s-header__nav-links li a:hover,
.s-header__nav-links li a:focus {
    color: var(--brand-rose);
}

/* The theme numbers each link (.01, .02 ...) with a CSS counter — an
   editorial flourish that reads as clutter on a booking site. */
.s-header__nav-links li a::before {
    display: none;
}

/* The close button is two white bars crossed into an X, with a white
   ring at 10% opacity around them — drawn for the panel's original
   near-black. On the blush ground above, both were white on almost
   white and the control was invisible.

   The bars are painted spans rather than text, so they do not follow
   `color`; the X and its ring are set separately. */
.s-header__nav-close-btn {
    border-color: var(--brand-rule);
}

.s-header__nav-close-btn span::before,
.s-header__nav-close-btn span::after {
    background-color: var(--brand-ink);
}

.s-header__nav-close-btn:hover span::before,
.s-header__nav-close-btn:hover span::after {
    background-color: var(--brand-rose);
}

.s-footer {
    background-color: var(--brand-ground-deep);
    color: var(--brand-ink-soft);
}

.s-footer a,
.s-footer h4,
.s-footer h5,
.s-footer h6 {
    color: var(--brand-ink);
}

.s-footer a:hover {
    color: var(--brand-rose);
}

/* The theme fills its social and arrow icons via SVG fill, which does
   not follow the colour properties above. */
.s-header__nav svg,
.s-footer svg {
    fill: var(--brand-ink);
}

/* Back-to-top button. The theme draws a white ring with a white arrow for
   its dark footer; on the rose ground both were nearly invisible. */
.ss-go-top a {
    border: 2px solid var(--brand-ink);
    transition: background 0.15s, border-color 0.15s;
}

.ss-go-top svg path {
    fill: var(--brand-ink);
}

.ss-go-top a:hover {
    border-color: var(--brand-rose);
    background: var(--brand-rose);
}

.ss-go-top a:hover svg path {
    fill: #fff;
}

.ss-go-top .ss-go-top-label {
    color: var(--brand-ink);
}

/* Scroll-down cue on the hero.
   The theme gives .scroll-icon no border at all — it is only a flex box for
   centring the glyph — so the ring is drawn here, matching the back-to-top
   button in the footer. Light, because the hero keeps its dark ground
   (gray-19 plus a photo) rather than the rose used elsewhere. */
.s-intro__scroll-down .scroll-icon {
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: background 0.15s, border-color 0.15s;
    /* Matches the back-to-top button in the footer. */
    block-size: var(--vspace-1_75);
    inline-size: var(--vspace-1_75);
}

/* The theme sizes this glyph at two-thirds of its ring, where the footer
   arrow sits at about a third. Matching the smaller proportion so the two
   controls read as the same component. */
.s-intro__scroll-down svg {
    block-size: var(--vspace-0_625);
    inline-size: var(--vspace-0_625);
}

/* The theme shrinks this on small screens; keep that, scaled to the new
   proportion rather than leaving the desktop size to override it. */
@media screen and (max-width: 800px) {
    .s-intro__scroll-down .scroll-icon {
        block-size: var(--vspace-1_25);
        inline-size: var(--vspace-1_25);
    }

    .s-intro__scroll-down svg {
        block-size: var(--vspace-0_5);
        inline-size: var(--vspace-0_5);
    }
}

.s-intro__scroll-down svg path {
    fill: #fff;
}

.s-intro__scroll-down a:hover .scroll-icon {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* --- Empty states ---------------------------------------------------
   Shown where a list has nothing in it. Says what is missing and offers
   the action that fixes it, rather than only reporting the absence. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--vspace-1_25) var(--vspace-0_75);
    border: 1px dashed var(--brand-rule);
    border-radius: 4px;
}

.empty-state__icon {
    inline-size: 4.8rem;
    block-size: 4.8rem;
    margin-bottom: var(--vspace-0_5);
    color: var(--brand-rose);
    opacity: 0.7;
}

.empty-state__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-2);
    font-size: var(--text-md);
    color: var(--brand-ink);
}

.empty-state__text {
    margin: 0 0 var(--vspace-0_625);
    font-size: var(--text-xs);
    opacity: 0.75;
}

/* --- Profile --------------------------------------------------------
   Three separate concerns — details, password, delete — so each sits in
   its own card rather than running together as one long form. */
.profile-card {
    /* Full height so the two side-by-side cards align at the bottom even
       though the password form is taller than the details form. */
    height: 100%;
    padding: var(--vspace-0_75);
    margin-bottom: var(--vspace-0_75);
    background: var(--brand-ground-deep);
    border: 1px solid var(--brand-rule);
    border-radius: 4px;
}

/* Account deletion is destructive, so it reads as a warning rather than
   a third ordinary section. */
.profile-card--danger {
    background: transparent;
    border-color: var(--brand-rose);
}

.profile-card header {
    margin-bottom: var(--vspace-0_5);
    padding-bottom: var(--vspace-0_375);
    border-bottom: 1px solid var(--brand-rule);
}

.profile-card header h2 {
    margin: 0 0 0.4rem;
    font-size: var(--text-md);
    line-height: 1.3;
}

.profile-card header p {
    margin: 0;
    font-size: var(--text-xs);
    opacity: 0.75;
}

/* The form fields inside share the theme's own spacing rhythm. */
.profile-card .mb-3 {
    margin-bottom: var(--vspace-0_5);
}

.profile-card label {
    font-family: var(--font-3);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* --- Home page categories ------------------------------------------
   Optional section, toggled from the settings screen. Laid out as a
   grid so a short list stays balanced rather than orphaning one item. */
.home-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rendered as a <div> instead of an <a> when the menu page is hidden, so
   both need the same treatment. */
.home-categories a,
.home-categories div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    padding: var(--vspace-0_5) var(--vspace-0_5);
    border: 1px solid var(--brand-rule);
    border-radius: 4px;
    color: var(--brand-ink);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.home-categories a:hover {
    border-color: var(--brand-rose);
    background: var(--brand-ground-deep);
}

.home-categories__name {
    font-family: var(--font-2);
    font-size: var(--text-md);
}

.home-categories__count {
    font-family: var(--font-3);
    font-size: var(--text-xs);
    color: var(--brand-rose);
    white-space: nowrap;
}

/* --- Sign in and registration ---------------------------------------
   These pages are customer-facing but reuse the admin layout, which loads
   the panel's dark Bootstrap build — a near-black card on a black page.
   The rules below bring them onto the brand palette without touching the
   admin panel itself, which keeps its dark theme deliberately.

   Bootstrap utility classes are targeted directly because the admin build
   does not read the theme variables the rest of this file overrides. */
body:has(.auth-card) {
    background: var(--brand-ground);
    color: var(--brand-ink);
}

.auth-card {
    background: #fff !important;
    border: 1px solid var(--brand-rule);
    box-shadow: 0 18px 40px -28px rgba(61, 43, 86, 0.45);
}

.auth-card h3 {
    color: var(--brand-ink) !important;
}

/* The card carries the same wordmark as the site header in place of a
   text title. It is centred so the card reads as a single column, and
   the width is capped so the mark (800x233) stays around 65px tall and
   does not dwarf the form beneath it. */
.auth-card__brand {
    text-align: center;
}

.auth-card__logo {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    height: auto;
}

/* The admin build styles inputs for a dark surface. */
.auth-card .form-control {
    background: var(--brand-ground);
    border: 1px solid var(--brand-rule);
    color: var(--brand-ink);
}

.auth-card .form-control:focus {
    background: #fff;
    border-color: var(--brand-rose);
    box-shadow: 0 0 0 0.2rem rgba(196, 115, 127, 0.18);
    color: var(--brand-ink);
}

.auth-card .form-floating > label {
    color: rgba(61, 43, 86, 0.6);
}

.auth-card .btn-primary {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: #fff;
}

.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus {
    background: var(--brand-rose);
    border-color: var(--brand-rose);
}

.auth-card a {
    color: var(--brand-rose);
}

.auth-card a:hover {
    color: var(--brand-ink);
}

.auth-card .text-muted {
    color: rgba(61, 43, 86, 0.65) !important;
}

/* The layout's full-screen loader flashes black before the page paints. */
#spinner.bg-dark {
    background: var(--brand-ground) !important;
}

/* --- Inner-page headers ---------------------------------------------
   The banner's colours are set further up, under "Page banner". This
   only sizes it. */
.s-pageheader {
    /* Shallower than the theme's showcase height: these are utility pages. */
    padding-top: var(--vspace-5_5);
    padding-bottom: var(--vspace-2);
}

/* The theme opens page content with --vspace-4 of padding — about 136px.
   That is room for the `pageintro` paragraph these pages are designed
   around, and it reads as dead space on ours, which go straight from the
   banner to a heading with no intro between them. Halved.

   Repeated under the theme's own 800px query, which otherwise resets
   this to --vspace-3 and brings the gap back on phones. */
.s-pagecontent {
    padding-top: var(--vspace-2);
}

@media screen and (max-width: 800px) {
    .s-pagecontent {
        padding-top: var(--vspace-1_5);
    }
}

/* Headings carry margin-top: var(--vspace-2) — another ~68px — which on
   the first one in a block stacks under the padding above and doubles
   the gap instead of separating anything.

   The theme already zeroes this, but only for a heading that is itself
   the block's first child: `.content-block .column:first-child >
   *:first-child`. Ours sit one level down, inside a wrapper such as
   .booking-intro, so that rule never reaches them. This matches the
   same intent one level deeper. */
.content-block .column:first-child > *:first-child > h1:first-child,
.content-block .column:first-child > *:first-child > h2:first-child,
.content-block .column:first-child > *:first-child > h3:first-child {
    margin-top: 0;
}

/* The hero background is an absolutely positioned element covering the whole
   section. Its two overlays opt out of pointer events but the element itself
   does not, and it carries no z-index — so it sits above the hero buttons and
   swallows their clicks. It is decoration, so nothing on it needs to be
   clickable. */
.s-intro__bg {
    pointer-events: none;
}

/* Opening hours: the opening time sits on the right, closing on the left, so
   the range reads the same direction as the page.

   The page reads right to left, so the opening time comes first — meaning
   rightmost — and the closing time follows to its left.

   The times are written opening-first in the markup and the flex row is
   reversed, which places them without depending on the bidi algorithm: the "-"
   between two Latin-digit runs is a neutral character that would otherwise
   resolve left to right and pin the whole range, whatever direction the
   container declares.

   Each time still carries <bdi class="ltr"> so "8:00 AM" does not reverse
   internally. The "(next day)" note sits outside .opening-range and keeps its
   place after the pair. */
.opening-range {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    /* The li is a flex row and the footer column is narrow, so without this the
       range is squeezed to nothing and each time wraps onto its own line. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* The theme puts the gap after the label, which was right while the label came
   first. The time leads now, so the space belongs between the two. */
.s-footer .opening-hours__days {
    margin-left: 0;
    margin-inline-start: 1.6rem;
}

.s-footer .opening-hours__time {
    flex-shrink: 0;
}

/* Breathing room between the hero subtitle and the buttons below it, which
   sit side by side and centred. They wrap onto separate lines on a narrow
   screen rather than shrinking past their labels. */
.s-intro__cta {
    margin-top: var(--vspace-1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vspace-0_5);
    position: relative;
    z-index: 3;
}

.s-intro__cta .btn {
    margin: 0;
}

/* --- About page values ----------------------------------------------
   Two columns: title, one-line lead and a captioned photo on the start
   side; a 2x2 grid of values on the other, each led by a small round
   photo over a bold title — start-aligned, airy. */
.about-story {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--vspace-1_5) var(--vspace-2);
    align-items: start;
}

@media screen and (max-width: 900px) {
    .about-story {
        grid-template-columns: 1fr;
    }
}

.about-story__lead {
    font-size: var(--text-md);
    color: var(--brand-ink-soft);
    margin-bottom: var(--vspace-0_75);
}

.about-story__media {
    margin: 0;
}

.about-story__media img {
    inline-size: 100%;
    max-block-size: 34rem;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.about-story__media figcaption {
    margin-top: var(--vspace-0_375);
    font-size: var(--text-sm);
    color: var(--brand-ink-soft);
}

.about-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vspace-1_25) var(--vspace-1_25);
    text-align: start;
}

@media screen and (max-width: 600px) {
    .about-values {
        grid-template-columns: 1fr;
    }
}

.about-values__photo {
    inline-size: var(--vspace-3);
    block-size: var(--vspace-3);
    margin-bottom: var(--vspace-0_5);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px -8px rgba(61, 43, 86, 0.5);
}

.about-values__title {
    margin: 0 0 var(--vspace-0_25);
    font-size: var(--text-lg);
    color: var(--brand-ink);
}

.about-values__item p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--brand-ink-soft);
}

/* --- Slide-out nav panel ---------------------------------------------
   The theme sizes these links at display scale with white hairlines for
   its dark panel. On the rose panel: body-adjacent type, brand hairlines,
   tighter rhythm. */
.s-header__nav-links {
    margin-top: var(--vspace-1);
    margin-bottom: var(--vspace-1_5);
    font-size: var(--text-md);
    line-height: 1.4;
}

.s-header__nav-links li {
    border-top: 1px solid var(--brand-rule);
}

.s-header__nav-links li:last-child {
    border-bottom: 1px solid var(--brand-rule);
}

.s-header__nav-links li a {
    padding: var(--vspace-0_375) 0;
}

/* Submenu entries (booking / my reservations, profile...) one step
   smaller and indented under their parent. */
.s-header__nav-links li ul {
    margin: 0 var(--vspace-0_5) var(--vspace-0_25) 0;
    font-size: var(--text-sm);
}

.s-header__nav-links li ul li,
/* :last-child needed explicitly: the theme's own
   ".s-header__nav-links li:last-child" is a descendant selector, so it
   also draws a bottom border on the last entry INSIDE a submenu — which,
   stacked with the next parent's top border, showed as a double line. */
.s-header__nav-links li ul li:last-child {
    border: 0;
}

.s-header__nav-links li ul li a {
    padding: var(--vspace-0_125) 0;
    color: var(--brand-ink-soft);
}

/* Dropdown carets in the accent rather than inherited ink. */
.s-header__nav-links .dropdown-toggle::after,
.s-header__nav-links .fa-caret-down,
.s-header__nav-links .bi-caret-down-fill {
    color: var(--brand-rose);
}

/* --- Detail panel ----------------------------------------------------
   Used by the customer's reservation page. Replaces Bootstrap card and
   grid classes, which this theme does not ship — they rendered as an
   unstyled white slab with the columns collapsed. */
.detail-panel {
    max-inline-size: 62rem;
    /* Clear of the page header above it, which otherwise sits flush
       against the panel's top edge. */
    margin-block-start: var(--vspace-2);
    margin-inline: auto;
    padding: var(--vspace-1) var(--vspace-0_875);
    background: var(--brand-ground-deep);
    border: 1px solid var(--brand-rule);
    border-radius: 4px;
}

.detail-panel__title {
    margin: 0 0 var(--vspace-0_75);
    padding-bottom: var(--vspace-0_5);
    border-bottom: 1px solid var(--brand-rule);
    font-size: var(--text-lg);
    text-align: center;
}

.detail-list {
    display: grid;
    /* Fixed two columns rather than auto-fit: with auto-fit the columns
       could differ in width, which is what left the label and value of
       each pair sitting at different offsets. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--vspace-0_75) var(--vspace-1_25);
    margin: 0;
}

@media screen and (max-width: 600px) {
    .detail-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Each pair is a label above its value, with the label row a fixed height
   so the values across a row start on the same line whatever the label
   wraps to. */
.detail-list__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-inline-size: 0;
}

.detail-list__row--full {
    grid-column: 1 / -1;
}

.detail-list dt {
    margin: 0;
    font-family: var(--font-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: var(--brand-ink-soft);
}

.detail-list dd {
    margin: 0;
    /* Values line up along the top of their row even when one of them runs
       to two lines. */
    align-self: start;
    font-size: var(--text-size);
    line-height: 1.5;
    color: var(--brand-ink);
    /* Long values wrap inside their own column instead of spilling into
       the next one. */
    overflow-wrap: anywhere;
}

.detail-list__hint {
    margin-inline-start: 0.6rem;
    font-family: var(--font-3);
    font-size: var(--text-xs);
    opacity: 0.7;
}

/* Status: a quiet pill, coloured by meaning rather than Bootstrap's
   saturated badges. */
.status-pill {
    display: inline-block;
    padding: 0.25em 0.9em;
    border-radius: 2em;
    font-family: var(--font-3);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status-pill--ongoing  { background: #dfeee4; color: #1d6b3f; }
.status-pill--seated   { background: #dde8f3; color: #23557f; }
.status-pill--done     { background: var(--brand-ground); color: var(--brand-ink-soft); }
.status-pill--canceled { background: #f6dfe1; color: #8f3a44; }
.status-pill--no_show  { background: #f7e8d6; color: #8a5a1c; }

/* The verification code reads as a tappable control, not body text. */
.code-reveal {
    padding: 0.2em 0.7em;
    border: 1px dashed var(--brand-rose);
    border-radius: 3px;
    background: transparent;
    color: var(--brand-rose);
    font-family: var(--font-3);
    font-size: var(--text-size);
    font-weight: 700;
    letter-spacing: 0.15em;
    height: auto;
    line-height: 1.4;
    cursor: pointer;
}

.code-reveal:hover {
    background: #fff;
}

/* "Copy" next to a revealed code: same dashed outline, quieter colour. */
.code-copy {
    margin-inline-start: 0.5em;
    padding: 0.2em 0.7em;
    border: 1px dashed var(--brand-rule);
    border-radius: 3px;
    background: transparent;
    color: var(--brand-ink);
    font-size: 0.85em;
    cursor: pointer;
}

.code-copy:hover {
    background: #fff;
}

/* The entry policy box on the booking form: the rules, then the tick. */
.booking-policy {
    padding: var(--vspace-0_75) var(--vspace-1);
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    background: var(--brand-ground);
}

.booking-policy__title {
    margin: 0 0 var(--vspace-0_5);
    font-size: var(--text-md);
}

.booking-policy__rules {
    margin: 0 0 var(--vspace-0_75);
    padding-inline-start: 1.4em;
}

.booking-policy__rules li {
    margin-bottom: 0.25em;
}

/* The "limit reached" line inside the upcoming-bookings box. */
.existing-reservation__limit {
    margin-top: var(--vspace-0_5);
    padding-top: var(--vspace-0_5);
    border-top: 1px solid var(--brand-rule);
    font-weight: 600;
}

.detail-panel__actions {
    margin-top: var(--vspace-1);
    padding-top: var(--vspace-0_75);
    border-top: 1px solid var(--brand-rule);
    text-align: center;
}

/* Footer call to action: the two buttons sit side by side, splitting the
   column evenly. Stacked below tablet, where half a phone width leaves too
   little room for the labels. */
.footer-cta {
    display: flex;
    flex-direction: column;
    gap: var(--vspace-0_5);
}

.footer-cta .btn {
    flex: 1;
    margin: 0;
}

@media screen and (min-width: 600px) {
    .footer-cta {
        flex-direction: row;
    }
}

/* --- Restaurant atmosphere -------------------------------------------
   A swipeable strip of photos on the home page, uploaded from Settings.
   Native scroll-snap does the swiping; the arrows in the header only
   nudge it, and the dots report where it is. Photos are 4:3 whatever
   was uploaded, cropped by object-fit, so the strip reads as one row.

   Section spacing mirrors the menu blocks above it, and the title reuses
   the theme's .section-header / .with-line treatment. */
.s-atmosphere {
    padding-top: 6rem;
    padding-bottom: 7rem;
    border-top: 1px solid var(--brand-rule);
}

.s-atmosphere__top {
    align-items: flex-end;
}

.s-atmosphere__content-header {
    margin-bottom: 2.4rem;
}

/* Two steps down the theme's type scale from the display size the other
   section titles use: this section is a strip of photos, and the heading
   is a label over it rather than the main event. */
.s-atmosphere .text-display-title {
    font-size: var(--text-display-1);
    margin-bottom: 0.8rem;
}

.s-atmosphere__nav {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}

.s-atmosphere__arrow {
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    border: 1px solid var(--brand-rule);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.s-atmosphere__arrow svg {
    width: 1.8rem;
    height: 1.8rem;
}

.s-atmosphere__arrow:hover,
.s-atmosphere__arrow:focus-visible {
    background: var(--brand-ground-deep);
    border-color: var(--brand-rose);
    outline: none;
}

.atmosphere-strip {
    position: relative;
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block: 0.4rem 1.2rem;
    /* Hidden scrollbar: the dots below stand in for it. */
    scrollbar-width: none;
}

.atmosphere-strip::-webkit-scrollbar {
    display: none;
}

.atmosphere-card {
    position: relative;
    flex: 0 0 auto;
    width: 68%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    border-radius: 2.2rem;
    overflow: hidden;
    border: 1px solid var(--brand-rule);
    background: var(--brand-ground-deep);
    box-shadow: 0 16px 34px -26px rgba(61, 43, 86, 0.55);
    cursor: zoom-in;
}

.atmosphere-card img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    vertical-align: bottom;
    transition: transform 0.5s ease;
}

.atmosphere-card:hover img,
.atmosphere-card:focus-visible img {
    transform: scale(1.04);
}

.atmosphere-card:focus-visible {
    outline: 2px solid var(--brand-rose);
    outline-offset: 3px;
}

.atmosphere-card__zoom {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(61, 43, 86, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.atmosphere-card__zoom svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Card counts per row: one and a bit on phones, three on tablets, four on
   desktop. Kept modest so the strip reads as a glimpse rather than a
   full-width gallery. */
@media screen and (min-width: 640px) {
    .atmosphere-card {
        width: calc((100% - 3.2rem) / 3);
        scroll-snap-align: start;
    }
}

@media screen and (min-width: 960px) {
    .atmosphere-card {
        width: calc((100% - 4.8rem) / 4);
    }
}

@media screen and (max-width: 1200px) {
    /* The theme stacks .lg-12 columns here, so the arrows drop under the
       title and line up with its start edge. */
    .s-atmosphere__nav {
        justify-content: flex-start;
        margin-top: -1.2rem;
    }
}

.atmosphere-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.atmosphere-dots i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--brand-rule);
    transition: width 0.2s, background-color 0.2s;
}

.atmosphere-dots i.is-on {
    width: 2rem;
    background: var(--brand-rose);
}

@media screen and (min-width: 960px) {
    /* With four cards in view and arrows to hand, the dots add nothing. */
    .atmosphere-dots {
        display: none;
    }
}

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

    .atmosphere-card img,
    .atmosphere-dots i,
    .s-atmosphere__arrow {
        transition: none;
    }
}

/* --- Hero wordmark ----------------------------------------------------
   The hero title is the logo rather than the name set in type. The mark
   is drawn in aubergine for the light header and footer; over the dark
   hero photograph it is rendered white with a filter, so one file serves
   every placement. Width is clamped like the text title was, so it fills
   the hero on a desktop and stays readable on a phone. */
.s-intro__title--logo {
    font-size: 0;           /* the h1's own type metrics must not add space */
    line-height: 0;
    margin: 0 0 var(--vspace-0_75, 2.4rem);
}

.s-intro__logo {
    display: inline-block;
    width: clamp(22rem, 60vw, 64rem);
    max-width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* The home page shows the wordmark in its hero, so the header's copy is
   hidden there. visibility, not display: the block keeps its width, and
   the header row keeps its layout. */
.s-header__logo--hidden {
    visibility: hidden;
}