/* Theme layer over Bootstrap 5.
   Palette from an old barbershop: walnut ink, brass fittings, paper towels
   and a stone floor. The brass pole rule is the one decorative motif; every
   other surface stays quiet. */

:root {
    --ink: #2b241c;
    --ink-soft: #3d3426;
    --brass: #ab8a56;
    /* Brass as text or as a button fill behind white text: plain brass is
       only 3:1 against white, too faint to read. */
    --brass-deep: #8a6d3d;
    --brass-soft: #dcc59c;
    --paper: #fbf9f4;
    --stone: #f2ece0;
    --porcelain: var(--paper);
    --steel: #756b5c;
    --line: #e7e1d6;
    --line-strong: #d5cdbf;
    --mint: #1f7a5c;

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bs-primary: #2b241c;
    --bs-primary-rgb: 43, 36, 28;
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--line);
    --bs-border-radius: 0.625rem;
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: 43, 36, 28;
    --bs-link-hover-color: var(--brass-deep);
    --bs-link-hover-color-rgb: 138, 109, 61;
    --bs-secondary-color: var(--steel);
    --bs-focus-ring-color: rgba(171, 138, 86, 0.35);
}

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3, h4, .display-face {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-weight: 600;
}

time, .tabular, .price, .slot, .cal-time { font-variant-numeric: tabular-nums; }

/* iOS zooms into any field under 16px when it is focused. */
@media (max-width: 47.99em) {
    input, select, textarea, .form-control, .form-select { font-size: 16px; }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1100;
    background: var(--ink);
    color: var(--paper);
    padding: 0.7rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus { top: 1rem; color: var(--paper); }

/* Signature: the pole rule */
.pole-rule {
    height: 4px;
    width: 4.5rem;
    border-radius: 2px;
    background: repeating-linear-gradient(
        115deg,
        var(--brass) 0 6px,
        var(--ink) 6px 12px
    );
}

.pole-rule--wide { width: 100%; height: 3px; opacity: 0.35; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.site-header__row { min-height: 4.5rem; gap: 1rem; }

.brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.35rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover { color: var(--ink); }
.brand span { color: var(--brass); }

.main-nav { display: flex; gap: 1.75rem; }

.main-nav a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--steel);
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    text-decoration: none;
}

.main-nav a:hover, .main-nav a.current { color: var(--ink); border-color: var(--brass); }

.profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.25rem 0.85rem 0.25rem 0.25rem;
    background: transparent;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
}

.profile-pill:hover, .profile-pill[aria-expanded="true"] { border-color: var(--ink); }

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    overflow: hidden;
    margin: 0;
}

.lang-switch button {
    border: 0;
    background: none;
    color: var(--steel);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.7rem;
}

.lang-switch button.active { background: var(--ink); color: var(--paper); }

/* Narrow phones (up to 416px): the brand, menu, Log in and TR | EN did
   not fit in one row, so "Log in" wrapped and TR | EN ran off the screen.
   Was 24rem (384px), which missed the common 390 and 393px phones. */
@media (max-width: 26rem) {
    .site-header__row { gap: 0.5rem; }
    .site-header__row > .d-flex { gap: 0.4rem !important; }
    .brand { font-size: 1.15rem; }
    .lang-switch button { padding: 0.35rem 0.5rem; }
}
@media (max-width: 22.5rem) {
    .site-header__row { gap: 0.35rem; }
    .site-header__row > .d-flex { gap: 0.3rem !important; }
    .brand { font-size: 0.95rem; }
    .site-header .btn { --bs-btn-padding-x: 0.35rem; }
    .lang-switch button { padding: 0.3rem 0.35rem; }
}
@media (max-width: 30rem) {
    .site-header .btn { white-space: nowrap; }
}

/* Footer */
.site-footer { background: var(--stone); padding: 3rem 0 1.6rem; }

.site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line-strong);
}

.site-footer .brand { font-size: 1.15rem; }
.footer-nav { display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.footer-nav a { font-size: 0.9rem; color: var(--steel); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.site-footer__legal { margin-top: 1.4rem; font-size: 0.85rem; color: var(--steel); }

/* Cookie notice. Informational only: the site sets just the cookies it needs
   to work, which need no consent, so there is nothing to accept or refuse. */
.cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -14px 30px rgba(43, 36, 28, 0.12);
}

.cookie-notice__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    padding-block: 1rem;
}

.cookie-notice p { margin: 0; font-size: 0.86rem; color: var(--steel); max-width: 40rem; }

/* Shared bits */
.eyebrow-link { color: var(--brass-deep); font-weight: 600; text-decoration: none; }
.eyebrow-link:hover { text-decoration: underline; }

.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--steel);
    margin-bottom: 1rem;
}

.breadcrumb-trail a { color: var(--steel); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--ink); }
.breadcrumb-trail [aria-current] { color: var(--ink); font-weight: 600; }

.monogram {
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--brass);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--brass);
    background: var(--ink);
    flex: 0 0 auto;
}

.shop-logo {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.5rem;
    object-fit: cover;
    background: var(--ink);
    color: var(--brass-soft);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.stars { color: var(--brass); letter-spacing: 0.1em; }

/* A review's stars to the half (templates/_stars.html): filled stars over
   outline ones, cut to the average. */
.star-meter { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.star-meter__track { position: relative; display: inline-block; }
.star-meter__fill { position: absolute; left: 0; top: 0; overflow: hidden; }
.star-meter__value { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9em; }

/* Booking picker */
.daystrip { display: flex; gap: 0.4rem; align-items: center; overflow-x: auto; padding-bottom: 0.35rem; }

.daycard {
    flex: 1 0 3.5rem;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.daycard small { color: var(--steel); font-size: 0.7rem; }
.daycard b { font-size: 1.05rem; }
.daycard .dot { width: 1.1rem; height: 3px; border-radius: 2px; background: transparent; }
.daycard .dot.free { background: var(--mint); }
.daycard.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.daycard.active small { color: rgba(255, 255, 255, 0.7); }
.daycard.active .dot.free { background: var(--brass); }
.daycard.empty { opacity: 0.45; }

.slot {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 0.5rem;
    padding: 0.45rem 0.2rem;
    text-align: center;
    text-decoration: none;
    font-size: 0.92rem;
}

.slot:hover { border-color: var(--ink); }
.slot.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.checkout-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding-top: 0.85rem;
    margin-top: 0.5rem;
}

/* Calendars */
.cal-month { table-layout: fixed; background: #fff; }
.cal-month td { height: 6.5rem; vertical-align: top; }
.cal-month .daynum { font-size: 0.78rem; color: var(--steel); }
.cal-month td.outside { background: var(--porcelain); }
.cal-month td.outside .daynum { opacity: 0.5; }

.cal-month td.today .daynum {
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
}

.cal-month td.dayoff {
    background: repeating-linear-gradient(45deg, #eceae5 0 6px, #e3e0d9 6px 12px);
}

.event {
    display: block;
    font-size: 0.74rem;
    padding: 0.1rem 0.3rem;
    margin-bottom: 0.12rem;
    border-radius: 0.3rem;
    background: #dce8f2;
    color: #16374f;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tag {
    display: block;
    font-size: 0.72rem;
    padding: 0.1rem 0.3rem;
    margin-bottom: 0.12rem;
    border-radius: 0.3rem;
    background: #dff0e6;
    color: var(--mint);
}

.tag--override { background: #fbeed2; color: #7a5a12; }
.tag--off { background: #e6e3dd; color: var(--steel); }

/* Tells you which page you are on, above the page's own heading */
.page-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass);
}

/* Small month calendar beside the diary, for jumping to a week */
.mini__grid { width: 100%; table-layout: fixed; border-collapse: collapse; }

.mini__grid th {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--steel);
    text-align: center;
    padding: 0.15rem 0;
}

.mini__grid td { text-align: center; padding: 0; }

.mini__grid td a {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 0.25rem;
}

.mini__grid td a:hover { background: #eef4f9; }
.mini--outside a { color: var(--steel); opacity: 0.45; }
.mini--onview a { background: #dce8f2; font-weight: 600; }
.mini--today a { box-shadow: inset 0 0 0 2px var(--brass); font-weight: 700; }

/* Week grid */

/* Seven columns will not fit a phone at a readable width, so the grid keeps a
   floor of 7rem per day and the wrapper scrolls sideways. Narrower than this
   and an event's text is sliced mid-word at the column edge, which reads as
   the booking spilling into the next day. */
.week__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.week {
    display: grid;
    grid-template-columns: 3.6rem repeat(7, minmax(7rem, 1fr));
    min-width: 52.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

@media (min-width: 62em) {
    .week { grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); min-width: 0; }
}

.week__head {
    padding: 0.5rem 0.25rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: 0.75rem;
    color: var(--steel);
}

.week__head b { display: block; font-size: 1.05rem; color: var(--ink); }
.week__head.today { background: #eef4f9; }

.week__gutter { border-right: 1px solid var(--line); }

/* One value drives the gutter and the grid. They were set separately and
   drifted apart, which put a 14:00 booking beside the 17:00 label. */
.week__gutter div {
    height: var(--row-height, 56px);
    font-size: 0.7rem;
    color: var(--steel);
    text-align: right;
    padding-right: 0.35rem;
    transform: translateY(-0.4em);
}

.week__col { position: relative; border-right: 1px solid var(--line); cursor: cell; }
.week__col:last-child { border-right: 0; }
.week__col.today { background: #f7fafd; }
.week__line { height: var(--row-height, 56px); border-bottom: 1px solid var(--line); }

.week__event {
    position: absolute;
    background: #dce8f2;
    border-left: 3px solid #2b6d99;
    border-radius: 0.3rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.7rem;
    line-height: 1.25;
    color: #16374f;
    text-decoration: none;
    overflow: hidden;
}

/* Cut with an ellipsis rather than at the column edge, so a long name ends
   visibly instead of looking like it carries on into the next day. */
.week__event b,
.week__who,
.week__what {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week__who { font-weight: 600; }
.week__what { opacity: 0.75; }

.week__event--block {
    background: repeating-linear-gradient(45deg, #ece9e3, #ece9e3 6px, #e2ded6 6px, #e2ded6 12px);
    border-left-color: var(--steel);
    color: #3d4a58;
}

.event--block {
    background: #ece9e3;
    border-left: 3px solid var(--steel);
    color: #3d4a58;
}

/* Small helpers */
.muted { color: var(--steel); }

.drag-handle {
    cursor: grab;
    touch-action: none;
    color: var(--steel);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem 0.2rem;
    user-select: none;
}

.is-dragging { opacity: 0.55; background: #eef4f9; }
.section-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.section-title h2 { margin: 0; font-size: 1.15rem; }

/* A cut-short service description. A button so it is reachable by keyboard,
   styled as the text it replaces rather than as a control. */
.service-blurb {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.service-blurb:hover { text-decoration: underline; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bs-border-radius); }
.thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--bs-border-radius); }

/* The badge marking which photo leads the shop page sits on the picture, so
   the tile has to be the thing it is positioned against. */
.photo-tile { position: relative; }
.photo-tile__badge { position: absolute; left: 0.4rem; top: 0.4rem; }
.photo-tile__pending {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--bs-border-radius);
    background: var(--stone);
    color: var(--steel);
    font-size: 0.85rem;
}

/* Shop photos (owner, 3 Oct: like Planity). Every tile is filled and
   cropped: no blurred bars. The full photo is one tap away in the viewer.

   Phones: the photos come first, edge to edge under the header, as a row to
   swipe through with a "1 / 8" count (Planity, Booksy). */
.shop-top { display: flex; flex-direction: column; }

.gallery {
    position: relative;
    /* Out to the screen edges and up to the header: cancels the container's
       side padding and main's top padding (py-4). */
    margin: -1.5rem calc(var(--bs-gutter-x, 1.5rem) * -0.5) 1.25rem;
}

.gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__tile {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 0;
    background: var(--stone);
    overflow: hidden;
    cursor: zoom-in;
    scroll-snap-align: start;
}

.gallery__tile picture,
.gallery__tile img { width: 100%; height: 100%; display: block; }
.gallery__tile img { object-fit: cover; }

/* A tall photo is shown whole, over a blurred copy of itself (owner, 3 Oct:
   cut to the wide tile, half of it was lost). Phones: every tile. Wide
   screens: the big tile only; the small squares stay filled. */
.gallery__fill {
    position: absolute;
    inset: 0;
    filter: blur(18px) brightness(0.75);
    transform: scale(1.15);
}
.gallery__tile.is-tall img:not(.gallery__fill) { position: relative; object-fit: contain; }

.gallery__count {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(43, 36, 28, 0.7);
    color: #fff;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* "+N" over the fourth tile: wide screens only, since phones swipe through
   every photo anyway. */
.gallery__more { display: none; }

/* Wide screens (owner, 3 Oct: like Booksy): one big photo, and beside it a
   column of up to three small squares for close-ups of cuts. The last says
   "+N" when there are more. The big tile stays near Booksy's 1.6:1.

   Sizes come from the gallery's own width (cqi), so the shape holds at every
   screen size: with s the square's side and g the gap, the column is 3s + 2g
   tall and the big tile (width - s - g) wide; width = 5.8s + 4.2g makes that
   1.6:1. Fewer photos: nothing beside one photo, a tall tile beside two,
   two bigger squares beside three. */
@media (min-width: 48em) {
    .shop-top > .breadcrumb-trail { order: 1; }
    .shop-top > .shop-hero { order: 2; }
    .shop-top > .gallery { order: 3; }

    .gallery { margin: 0 0 2rem; container-type: inline-size; }

    .gallery__track {
        --g: 0.5rem;
        --s: calc((100cqi - 4.2 * var(--g)) / 5.8);
        --h: calc(3 * var(--s) + 2 * var(--g));
        --side: var(--s);
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--side);
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: var(--g);
        height: var(--h);
        overflow: visible;
    }

    /* Without min-height the rows grow to the files' natural height. */
    .gallery__tile {
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 0.75rem;
    }
    .gallery__tile:first-child { grid-row: 1 / -1; }
    .gallery__tile:not(:first-child) .gallery__fill { display: none; }
    .gallery__tile.is-tall:not(:first-child) img:not(.gallery__fill) { object-fit: cover; }
    .gallery__tile:nth-child(n + 5) { display: none; }
    .gallery__tile:hover img { opacity: 0.92; }

    /* One photo: the big tile alone, same size, nothing beside it. */
    .gallery--n1 .gallery__track { grid-template-columns: minmax(0, calc(100cqi - var(--s) - var(--g))); }
    .gallery--n1 .gallery__track,
    .gallery--n2 .gallery__track { grid-template-rows: minmax(0, 1fr); }
    /* Two photos: the second as a tall 3:5 tile, the shape of a phone shot of a cut. */
    .gallery--n2 .gallery__track { --side: calc(var(--h) * 0.6); }
    .gallery--n3 .gallery__track { --side: calc((var(--h) - var(--g)) / 2); grid-template-rows: repeat(2, minmax(0, 1fr)); }

    .gallery__count { display: none; }

    .gallery__more {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        background: rgba(43, 36, 28, 0.55);
        color: #fff;
        font-size: 1.15rem;
        font-weight: 700;
        cursor: pointer;
    }
}

/* Two-column page: the photos end where the services column ends, beside
   the hours card (owner, 2 Oct; Booksy does the same). 21rem + 2.5rem is
   the hours column and gap of .shop-layout below. */
@media (min-width: 992px) {
    .gallery { max-width: calc(100% - 23.5rem); }
}

.lightbox__image { max-width: 100%; max-height: 78vh; object-fit: contain; }

/* Full-screen photo browser */
#photo-modal .modal-body { overflow: hidden; }

/* A finger-sized close button (44px); Bootstrap's is about 24px. */
#photo-modal [data-photo-close] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    margin: 0 0 0 auto;
    background-size: 1.1rem;
}

/* Both panes are pinned to the body box rather than sized at 100%. A tall
   upload then has the screen as its ceiling instead of setting the height
   itself, which is what left a portrait photo mostly below the fold. */
.photo-grid,
.photo-single { position: absolute; inset: 0; }

.photo-grid {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
}

/* Even tiles, sized by how many fit rather than by breakpoint, so the wall
   survives whatever shape and resolution a shop uploads. */
.photo-grid__wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 0.5rem;
    align-content: start;
}

.photo-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.4rem;
    cursor: pointer;
}

/* Swipes belong to gallery.js (next photo, swipe down to close), not to the
   browser: no scrolling and no pull-to-refresh. Pinch zoom stays. */
.photo-single {
    display: grid;
    place-items: center;
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
}

/* The photo fills the pane and object-fit shrinks it to taste. `max-height:
   100%` did not work: as a grid item, a 4000px-tall photo sized the row
   itself, so "100%" meant its own height and it ran off the screen. */
.photo-single img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0.5rem 0.5rem 2rem;
    object-fit: contain;
}

.photo-single__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    text-align: center;
    opacity: 0.85;
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.85);
}

.lightbox__nav--prev { left: 0.75rem; }
.lightbox__nav--next { right: 0.75rem; }

/* Map picker on the owner's details page */
.shop-map {
    height: 16rem;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    z-index: 0;
}

.map-attribution { font-size: 0.7rem; margin: 0.25rem 0 0.5rem; }

.map-results {
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    max-height: 11rem;
    overflow-y: auto;
}

.map-results__item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--line);
}

.map-results li:last-child .map-results__item { border-bottom: 0; }
.map-results__item:hover { background: #eef4f9; }

.map-pin__dot {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brass);
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(20, 32, 46, 0.5);
}

/* Logo crop preview */

.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 8px; }
.btn-primary { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink-soft); --bs-btn-hover-border-color: var(--ink-soft); --bs-btn-active-bg: var(--ink-soft); --bs-btn-active-border-color: var(--ink-soft); --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink); }
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); }
/* Deep brass behind white text: plain brass would fail contrast. */
.btn-brass { --bs-btn-bg: var(--brass-deep); --bs-btn-border-color: var(--brass-deep); --bs-btn-color: #fff; --bs-btn-hover-bg: #735a31; --bs-btn-hover-border-color: #735a31; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #735a31; --bs-btn-active-color: #fff; }

.form-control, .form-select { border-color: var(--line-strong); }
.form-control:focus, .form-select:focus { border-color: var(--brass); box-shadow: 0 0 0 0.2rem rgba(171, 138, 86, 0.25); }
.card { --bs-card-border-color: var(--line); --bs-card-bg: #fff; }

/* Profile menu */
.avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    object-fit: cover;
    flex: 0 0 auto;
}

.avatar--large { width: 6rem; height: 6rem; font-size: 2rem; }

.dropdown-menu { min-width: 14rem; border-color: var(--line); }
.dropdown-item { font-size: 0.92rem; }

/* Staff photos */
.staff-photo {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    object-fit: cover;
    background: var(--ink);
    color: var(--brass-soft);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.staff-photo--large { width: 6rem; height: 6rem; border-radius: 1rem; }
.staff-photo--empty { font-size: 0.95rem; }

/* Log in / sign up */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 60rem;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: hidden;
}

@media (min-width: 62em) {
    .auth-shell { grid-template-columns: 0.85fr 1fr; }
}

.auth-aside {
    display: none;
    padding: 2.5rem;
    color: #fff;
    background: radial-gradient(130% 130% at 0% 0%, var(--ink-soft) 0%, var(--ink) 65%);
    position: relative;
}

@media (min-width: 62em) { .auth-aside { display: block; } }

.auth-aside::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: repeating-linear-gradient(115deg, var(--brass) 0 10px, transparent 10px 20px);
    opacity: 0.7;
}

.auth-aside__quote {
    font-size: 1.6rem;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.75rem;
}

.auth-aside__note { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }

.auth-aside__list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.auth-aside__list li {
    padding: 0.5rem 0 0.5rem 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.auth-aside__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brass-soft);
}

.auth-form { padding: clamp(1.75rem, 4vw, 2.75rem); }

.pole-rule--light {
    background: repeating-linear-gradient(115deg, var(--brass) 0 6px, rgba(255, 255, 255, 0.25) 6px 12px);
}

.rule-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--steel);
    font-size: 0.82rem;
}

.rule-text::before, .rule-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Landing page ---------- */
/* Plain and calm (owner, 2 Oct: the stripes looked busy): warm stone at the
   top, fading into the page's paper colour, no pattern. */
.home-hero {
    position: relative;
    background: linear-gradient(180deg, var(--stone) 0%, #f6f1e7 55%, var(--paper) 100%);
    overflow: hidden;
    padding-bottom: 3.5rem;
}

.home-hero__inner { position: relative; padding-block: clamp(3.5rem, 9vw, 5.5rem) 2.5rem; text-align: center; }

.home-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    margin: 0;
    animation: rise-in 0.7s ease both;
}

.home-hero__sub {
    margin: 1.1rem auto 0;
    max-width: 32rem;
    color: var(--steel);
    font-size: 1.05rem;
    animation: rise-in 0.7s ease 0.1s both;
}

.home-search-wrap { position: relative; max-width: 58rem; }

.home-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 60px -28px rgba(43, 36, 28, 0.35);
    padding: 1.25rem;
    animation: rise-in 0.7s ease 0.2s both;
}

.home-search__field {
    position: relative;
    flex: 1 1 14rem;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
}

.home-search__field::after {
    content: "";
    position: absolute;
    right: 0.95rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.75px solid var(--steel);
    border-bottom: 1.75px solid var(--steel);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.home-search select {
    appearance: none;
    width: 100%;
    border: 0;
    background: none;
    padding: 0.75rem 2.25rem 0.75rem 0.95rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

.home-search__go { padding-inline: 2rem; }

@media (max-width: 575.98px) {
    .home-search { flex-direction: column; }
    .home-search__field { flex: 0 0 auto; }
    .home-search__go { width: 100%; padding-block: 0.8rem; }
}

.home-faq { max-width: 58rem; padding-block: 3.5rem 4.5rem; }
.home-faq h2 { font-size: 2rem; margin-bottom: 2rem; }

.faq-list details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.75px solid var(--steel);
    border-bottom: 1.75px solid var(--steel);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list details p { margin: 0.7rem 0 0; color: var(--steel); max-width: 65ch; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

/* ---------- About ---------- */
.prose-page { max-width: 46rem; padding-bottom: 3rem; }
.prose-page h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.lead-text { font-size: 1.1rem; color: var(--steel); }
.prose-section { margin-top: 2.75rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose-section h2 { font-size: 1.5rem; margin-bottom: 1rem; }

.prose-section--panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.75rem;
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }

.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: 1rem;
}

.steps li::before {
    content: counter(step);
    grid-row: span 2;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--brass);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--brass-deep);
}

.steps span { color: var(--steel); }
.ticks { padding-left: 1.2rem; margin-bottom: 1.25rem; }
.ticks li::marker { color: var(--brass-deep); }

/* ---------- Shop list with map ---------- */
.list-page { display: flex; flex-direction: column; }
.list-page__gutter { padding-inline: clamp(1rem, 3vw, 2rem); }

/* The list scrolls with the page and the map stays in view beside it, the
   way property sites do it. Below the lg breakpoint there is room for one or
   the other, and the floating button swaps between them. */
.list-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 0 auto; }

@media (min-width: 992px) {
    .list-map { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

@media (min-width: 1400px) {
    .list-map { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.list-map__list { padding-bottom: 5rem; min-width: 0; }

.list-map__map {
    display: none;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    border-left: 1px solid var(--line);
    background: var(--stone);
}

@media (min-width: 992px) {
    .list-map__map { display: flex; flex-direction: column; }
    .map-switch { display: none; }
}

/* Phone and tablet: the map takes the screen under the header. */
.list-map.is-map .list-map__list { display: none; }

.list-map.is-map .list-map__map {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    height: auto;
    z-index: 5;
    border-left: 0;
}

.list-map__canvas { flex: 1; min-height: 0; }

.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
}

.map-toolbar__follow { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; cursor: pointer; }
.map-toolbar__follow input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.map-toolbar__note { color: var(--brass-deep); }

.map-switch {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1030;
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    box-shadow: 0 10px 24px rgba(43, 36, 28, 0.35);
}

.list-title { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: 0.25rem 0 1rem; }
.list-title span { color: var(--steel); font-weight: 400; }

.sort-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
}

.sort-chips::-webkit-scrollbar { display: none; }

.sort-chip {
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.sort-chip:hover { border-color: var(--ink); color: var(--ink); }
.sort-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.result-count { font-size: 0.9rem; color: var(--steel); margin-bottom: 1rem; }
.results-section + .results-section { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.results-section__title { font-size: 1.3rem; margin-bottom: 1rem; }

[data-results].is-loading, #results.is-loading { opacity: 0.5; transition: opacity 0.15s ease; }

/* ---------- Shop cards ---------- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
    gap: 1.25rem;
}

.shop-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shop-card:hover,
.shop-card.is-highlighted {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -22px rgba(43, 36, 28, 0.35);
    border-color: var(--brass-soft);
}

/* 16:10, the shape of Booksy's and Planity's cards: room for a photo. */
.shop-card__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: var(--ink);
    border-bottom: 1px solid var(--brass);
    overflow: hidden;
}

/* The shop's first photo fills the card; a tall one is shown whole over a
   blurred copy of itself, as on the shop page. */
.shop-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-card__photo.is-tall { object-fit: contain; }
.shop-card__fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(0.92);
    transform: scale(1.5);
}
.shop-card__monogram { width: 3.75rem; height: 3.75rem; font-size: 1.55rem; }

.featured-badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    background: var(--brass-deep);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
}

.rating-badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: rgba(43, 36, 28, 0.78);
    color: var(--paper);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rating-badge small { font-weight: 400; opacity: 0.8; }
.rating-badge--new { background: rgba(31, 122, 92, 0.92); }

.shop-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.shop-card__category { font-size: 0.76rem; color: var(--brass-deep); font-weight: 600; margin-bottom: 0.25rem; }
.shop-card__name { font-size: 1.05rem; margin-bottom: 0.25rem; }
.shop-card__name a { text-decoration: none; }
.shop-card__place { color: var(--steel); font-size: 0.83rem; margin-bottom: 0.75rem; }
.shop-card .service-lines { margin-bottom: 1rem; }
.shop-card__body > .btn { margin-top: auto !important; }

/* Menu-board price lines: name, dotted leader, price. */
.service-lines { list-style: none; padding: 0; margin: 0; }
.service-lines li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.85rem; }
.service-lines span { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.service-lines i { flex: 1; min-width: 1rem; border-bottom: 1px dotted var(--line-strong); }
.service-lines b { font-weight: 600; white-space: nowrap; }

.empty-state {
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 30rem;
    margin: 1rem auto;
}

.empty-state h3 { font-size: 1.15rem; }
.empty-state p { color: var(--steel); font-size: 0.92rem; }

/* ---------- Map pins ---------- */
/* Round markers, as on Planity: white with an ink location mark, filled
   ink while the shop is hovered or its card is open. */
.shop-pin {
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(43, 36, 28, 0.3);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.shop-pin svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-pin--featured { border: 2px solid var(--brass); }
.shop-pin:hover, .shop-pin.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: scale(1.15); }
.shop-pin.is-active { z-index: 1000 !important; }

.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 0; width: 15rem !important; }
.leaflet-container a.pin-card { color: var(--ink); }

.pin-card { display: flex; gap: 0.75rem; padding: 0.8rem; text-decoration: none; }
.pin-card__photo { width: 3rem; height: 3rem; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.pin-card .monogram { width: 3rem; height: 3rem; border-radius: 8px; font-size: 1.2rem; }
.pin-card__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.pin-card__meta { display: block; font-size: 0.78rem; color: var(--steel); margin-top: 0.15rem; }
.pin-card__cta { display: block; font-size: 0.8rem; font-weight: 600; color: var(--brass-deep); margin-top: 0.3rem; }

/* ---------- Contact ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}

.contact-form,
.contact-aside {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.contact-form .form-control,
.contact-form .form-select { background-color: var(--paper); }
.contact-form textarea { min-height: 8rem; }

/* ---------- Site feedback ---------- */
/* The way in: a slim tab on the right edge, half way down, turned on its
   side. Small enough to ignore, always in the same place. */
.feedback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 1010;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    padding: 0.7rem 0.35rem;
    border-radius: 0 6px 6px 0;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(43, 36, 28, 0.2);
}
.feedback-tab:hover, .feedback-tab:focus-visible { opacity: 1; color: var(--paper); }

.feedback-page { max-width: 36rem; margin: 0 auto; padding-bottom: 3rem; }
.feedback-form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.feedback-form fieldset legend { font-size: 1rem; }
.feedback-form textarea { background-color: var(--paper); min-height: 7rem; }

/* Radios stay real inputs (keyboard and screen readers), drawn as buttons. */
.rating-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.rating-scale__option,
.topic-chips__option { position: relative; margin: 0; cursor: pointer; }
.rating-scale__option input,
.topic-chips__option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rating-scale__option span,
.topic-chips__option span {
    display: block;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    text-align: center;
}
.rating-scale__option span { padding: 0.65rem 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-scale__ends { display: flex; justify-content: space-between; margin-top: 0.35rem; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-chips__option span { border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.rating-scale__option:hover span,
.topic-chips__option:hover span { border-color: var(--ink); }
.rating-scale__option input:checked + span,
.topic-chips__option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rating-scale__option input:focus-visible + span,
.topic-chips__option input:focus-visible + span { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

/* Keeps the floating map button clear of the cookie notice until it is read. */
.has-cookie-notice .map-switch { bottom: 9rem; }
@media (min-width: 576px) { .has-cookie-notice .map-switch { bottom: 5.5rem; } }

/* ---------- Shop page ---------- */
.shop-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.75rem; }

.shop-hero__info { flex: 1 1 18rem; min-width: 0; }
.shop-hero__info h1 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: 0; overflow-wrap: anywhere; }
.shop-hero__meta { color: var(--steel); margin: 0.35rem 0 0; font-size: 0.92rem; }
.shop-hero__meta a { color: var(--steel); }
.shop-hero__meta a:hover { color: var(--ink); }
.shop-hero__rating { margin: 0.4rem 0 0; font-size: 0.92rem; }
.shop-hero__rating a { color: var(--steel); }

.shop-hero__actions { display: flex; align-items: center; gap: 0.6rem; }
.shop-hero__actions form { margin: 0; }
.share-note { color: var(--mint); }

.icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--ink);
    cursor: pointer;
}

.icon-btn:hover { border-color: var(--ink); color: var(--ink); }

.icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn.is-saved { color: #b3261e; border-color: #e6b8b3; }
.icon-btn.is-saved svg { fill: currentColor; }

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    .shop-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
    .shop-layout__side { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* Phones: hours and location are what people look for first, but the
   services are the reason they came, so those stay on top. */
.shop-layout__main { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.shop-section h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.shop-section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.shop-about { color: var(--ink-soft); max-width: 65ch; }

.service-rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }

.service-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
}

.service-rows__info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.service-rows__name { font-weight: 600; }
.service-rows__book { display: flex; align-items: center; gap: 0.9rem; flex: 0 0 auto; }

@media (max-width: 420px) {
    .service-rows__book { flex-direction: column; align-items: flex-end; gap: 0.35rem; }
}

.reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.reviews-head h2 { margin: 0; }
.review-sort { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.review-sort select { width: auto; }

.review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.review-summary__score { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; }

.review-list { display: flex; flex-direction: column; gap: 0.85rem; }
.review-card { border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; background: #fff; }
.review-card__head { display: flex; align-items: center; gap: 0.75rem; }
.review-card__text { margin: 0.75rem 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }

/* What was done and by whom, then each service's stars. */
/* Shop page review: who and when, the stars, then what was done and by whom. */
.review-card__head .avatar { width: 3rem; height: 3rem; font-size: 1.05rem; }
.review-card__who { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.review-card__who strong { font-size: 1rem; }
.review-card__verified { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--mint); }
.review-card__verified svg { width: 1rem; height: 1rem; fill: currentColor; flex: 0 0 auto; }
.review-card__verified svg .tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.review-card__date { margin-left: auto; align-self: flex-start; font-size: 0.85rem; color: var(--steel); white-space: nowrap; }
.review-card__stars { margin-top: 0.75rem; font-size: 1.2rem; letter-spacing: 0.05em; }
.review-card__facts { margin: 0.5rem 0 0; font-size: 0.92rem; }
.review-card__facts > div { display: flex; flex-wrap: wrap; gap: 0 0.35rem; margin-top: 0.3rem; }
.review-card__facts dt { font-weight: 700; }
.review-card__facts dd { margin: 0; overflow-wrap: anywhere; }
.review-card__breakdown { margin-top: 0.75rem; }
.review-card__breakdown > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem; }
.review-card__breakdown > summary::-webkit-details-marker { display: none; }
.review-card__breakdown > summary .review-card__stars { margin-top: 0; }
.review-card__breakdown-label { font-size: 0.8rem; color: var(--brass-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.review-card__breakdown-label::after { content: " ▾"; }
.review-card__breakdown[open] .review-card__breakdown-label::after { content: " ▴"; }
.review-card__breakdown ul { list-style: none; margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; max-width: 22rem; }
.review-card__breakdown li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.9rem; }
.review-card__breakdown-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.review-card__breakdown li .stars { font-size: 0.85rem; }
.review-card__breakdown li strong { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: right; }
.review-card__sep { margin: 0 0.4rem; color: var(--steel); }
.review-card__services { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.88rem; }
.review-card__services .stars { font-size: 0.8rem; margin-left: 0.3rem; }
.review-photos { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.review-photos a { display: block; width: 5.5rem; height: 5.5rem; border-radius: 8px; overflow: hidden; background: var(--stone); }
.review-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-photo { display: flex; flex-direction: column; gap: 0.25rem; }
.review-photo__report > summary { font-size: 0.78rem; color: var(--steel); cursor: pointer; list-style: none; }
.review-photo__report > summary::-webkit-details-marker { display: none; }
.review-photo__report > summary:hover { color: var(--ink); text-decoration: underline; }
.review-photo__report form { margin: 0.25rem 0 0; }
.review-photo__report .btn { font-size: 0.75rem; padding: 0.15rem 0.4rem; white-space: nowrap; }

/* Per-service averages, under the shop's score. */
.score-breakdown { list-style: none; padding: 0; margin: 0; min-width: 14rem; }
.score-breakdown li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; }
.score-breakdown li + li { border-top: 1px solid var(--line); }
.score-breakdown__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.score-breakdown__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.score-breakdown__count { color: var(--steel); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* The hero's score opens the breakdown (details/summary: no JS). */
.score-toggle { position: relative; display: inline-block; }
.score-toggle > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
.score-toggle > summary::-webkit-details-marker { display: none; }
.score-toggle > summary::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); transform: translateY(-25%) rotate(45deg); }
.score-toggle[open] > summary::after { transform: translateY(15%) rotate(-135deg); }
.score-toggle__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    left: 0;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(43, 36, 28, 0.16);
    padding: 0.6rem 0.9rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
}
.review-summary .score-breakdown-wrap { flex: 1 1 16rem; max-width: 24rem; }
.score-breakdown__more > summary { list-style: none; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--brass-deep); padding-top: 0.35rem; }
.score-breakdown__more > summary::-webkit-details-marker { display: none; }
.score-breakdown__more > summary::after { content: " ▾"; }
.score-breakdown__more[open] > summary::after { content: " ▴"; }
/* The label says what a click will do: show more, or show less. */
.score-breakdown__more .when-open,
.score-breakdown__more[open] .when-closed { display: none; }
.score-breakdown__more[open] .when-open { display: inline; }
.score-breakdown__more .score-breakdown { border-top: 1px solid var(--line); margin-top: 0.35rem; }

/* Review form: one row of stars per service. */
.service-stars { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.service-stars__name { float: none; width: auto; margin: 0; font-size: 0.95rem; font-weight: 600; }
.star-input { display: inline-flex; flex-direction: row-reverse; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 1.7rem; line-height: 1; padding: 0 0.1rem; color: var(--line-strong); cursor: pointer; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--brass); }
.star-input input:focus-visible + label { outline: 2px solid var(--brass-deep); outline-offset: 1px; border-radius: 4px; }

.side-panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    background: #fff;
}

.side-panel + .side-panel { margin-top: 1.25rem; }
.side-panel h2 { font-size: 1.05rem; margin-bottom: 1rem; }

.hours-list, .team-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.9rem; }
.hours-list b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hours-list .is-closed { color: var(--steel); }

.team-list li { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0; }
.avatar--team { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }


/* ---------- Booking picker, new look ---------- */
.modal-content { --bs-modal-bg: #fff; border-radius: 14px; border-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 600; }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ink);
    --bs-nav-pills-link-active-color: var(--paper);
    --bs-nav-link-color: var(--ink-soft);
    --bs-nav-link-hover-color: var(--ink);
    --bs-nav-pills-border-radius: 999px;
    gap: 0.35rem;
}

.nav-pills .nav-link { font-weight: 600; font-size: 0.9rem; }
.slot:hover { border-color: var(--brass); }
.slot.active { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }

.picker-summary { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; background: var(--paper); }
.picker-summary__title { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }

.chosen-services { list-style: none; padding: 0; margin: 0 0 0.75rem; }

.chosen-services li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.chosen-services li:last-child { border-bottom: 0; }
.chosen-services__remove { font-size: 0.8rem; color: var(--steel); }
.chosen-services__remove:hover { color: var(--ink); }

.add-service > summary { list-style: none; }
.add-service > summary::-webkit-details-marker { display: none; }

.add-service__list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.add-service__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.88rem;
}

.add-service__list li:last-child { border-bottom: 0; }
.add-service__add { font-size: 0.8rem; font-weight: 700; color: var(--brass-deep); text-decoration: none; white-space: nowrap; }
.add-service__add:hover { text-decoration: underline; }
.min-w-0 { min-width: 0; }

/* ---------- Reservation page (after Planity) ---------- */
.reserve { max-width: 62rem; margin-inline: auto; padding-bottom: 3rem; }
.reserve-head { margin-bottom: 2rem; }
.reserve-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin-bottom: 0.3rem; }
.reserve-head__address { color: var(--steel); font-size: 0.92rem; }

.reserve-step { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.reserve-step h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.reserve-step__num { color: var(--brass-deep); font-style: italic; }

.reserve-step__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.reserve-step__head h2 { margin: 0; }

.reserve-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 6px 18px -14px rgba(43, 36, 28, 0.35);
}

.reserve-services, .reserve-menu { list-style: none; margin: 0; padding: 0.25rem 1.4rem; }

.reserve-services li, .reserve-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.reserve-services li:last-child, .reserve-menu li:last-child { border-bottom: 0; }
.reserve-services__name { font-weight: 600; }
.reserve-services__meta { color: var(--steel); font-size: 0.88rem; margin-top: 0.15rem; }
.reserve-services__meta b { color: var(--ink); font-weight: 600; }
.reserve-services__total { font-weight: 600; }

.reserve-link { color: var(--brass-deep); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.reserve-link:hover { color: var(--ink); }

.reserve-add { margin-top: 1rem; }

.reserve-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.reserve-staff__label { font-weight: 600; font-size: 0.9rem; margin-right: 0.25rem; }

.reserve-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}

.reserve-chip .avatar { width: 1.4rem; height: 1.4rem; font-size: 0.65rem; margin-left: -0.45rem; }
.reserve-chip:hover { border-color: var(--ink); color: var(--ink); }
.reserve-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.reserve-menu__pick { display: flex; align-items: center; gap: 0.9rem; flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .reserve-services, .reserve-menu { padding-inline: 1rem; }
    .reserve-menu li { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .reserve-menu__pick { justify-content: flex-end; }
}

.reserve-jump { display: flex; gap: 0.5rem; margin: 0; }
.reserve-jump input { width: auto; }

/* Date and time, after Booksy: a strip of days, a segmented control for the
   part of the day, and one sideways row of times. */
.time-picker { padding: 1.25rem; }

.time-picker__month { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.time-picker__month b { font-size: 1.05rem; text-transform: capitalize; }
.time-picker__arrows { display: flex; gap: 0.4rem; margin-left: auto; }

.round-arrow {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(43, 36, 28, 0.08);
}

.round-arrow:hover { border-color: var(--ink); color: var(--ink); }
.round-arrow.is-disabled { color: var(--line-strong); box-shadow: none; }

.day-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(2.9rem, 1fr));
    gap: 0.35rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.day-strip__day { display: grid; justify-items: center; gap: 0.3rem; text-decoration: none; color: var(--ink); }

.day-strip__circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--stone);
    font-weight: 600;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

/* The green line: this day still has free times. */
.day-strip__circle i {
    position: absolute;
    bottom: 0.55rem;
    left: 50%;
    width: 1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--mint);
    transform: translateX(-50%);
}

.day-strip__day.is-full .day-strip__circle { color: var(--steel); background: transparent; border: 1px solid var(--line); }
.day-strip__day.is-full .day-strip__circle i { display: none; }
.day-strip__day.active .day-strip__circle { background: var(--ink); color: var(--paper); }
.day-strip__day.active .day-strip__circle i { background: var(--brass-soft); }
.day-strip__day:hover .day-strip__circle { box-shadow: 0 0 0 2px var(--brass-soft); }
.day-strip__name { font-size: 0.8rem; color: var(--steel); }

.period-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    max-width: 30rem;
    margin: 0 auto 1rem;
    padding: 0.3rem;
    border-radius: 10px;
    background: var(--stone);
}

.period-tabs__tab {
    text-align: center;
    padding: 0.55rem 0.4rem;
    border-radius: 8px;
    color: var(--steel);
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}

.period-tabs__tab span { font-size: 0.8rem; }
.period-tabs__tab:hover { color: var(--ink); }
.period-tabs__tab.active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(43, 36, 28, 0.12); }

.time-row { position: relative; display: flex; align-items: center; gap: 0.5rem; }

.time-row__track {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 0.2rem;
    flex: 1;
    min-width: 0;
}

.time-row__track::-webkit-scrollbar { display: none; }

.time-row__slot {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding: 0.7rem 0.9rem;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    scroll-snap-align: start;
}

.time-row__slot:hover { border-color: var(--ink); color: var(--ink); }
.time-row__slot.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.time-row .round-arrow { flex: 0 0 auto; }

/* Total and Continue: always in reach on a phone. */
.checkout-bar-new {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 -8px 24px -16px rgba(43, 36, 28, 0.35);
}

.checkout-bar-new .price { font-size: 1.15rem; }

.reserve-chosen-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
}

.reserve-confirm { padding: 1.4rem; }

.reserve-confirm__total {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.05rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.reserve-empty { padding: 1.4rem; }

/* ---------- Kinds of shop in the header ---------- */
/* One header row; sticky offsets use its height. */
:root { --header-h: 4.5rem; }

.menu-button { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; }

.menu-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.dropdown-menu { --bs-dropdown-link-active-bg: var(--ink); --bs-dropdown-link-active-color: var(--paper); }

/* ---------- Category page ---------- */
.category-head { margin-bottom: 2.5rem; }
.category-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

.city-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem;
}

.city-grid a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
}

.city-grid a:hover { border-color: var(--brass); }
.city-grid__name { font-weight: 600; }
.city-grid__count { font-size: 0.85rem; color: var(--steel); }

/* ---------- Search bar on the list page (after Planity) ---------- */
.filter-strip { background: #fff; border-bottom: 1px solid var(--line); padding-block: 0.85rem; }
.filter-strip > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

.filter-bar {
    display: flex;
    align-items: stretch;
    flex: 0 1 44rem;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(43, 36, 28, 0.06);
}

.filter-bar__field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.4rem 2rem 0.4rem 1rem;
    cursor: pointer;
}

.filter-bar__field + .filter-bar__field { border-left: 1px solid var(--line); }
.filter-bar__field:focus-within { background: var(--paper); }

.filter-bar__field::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1.75px solid var(--steel);
    border-bottom: 1.75px solid var(--steel);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.filter-bar__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--steel); }

.filter-bar select {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--ink);
    width: 100%;
    text-overflow: ellipsis;
    cursor: pointer;
}

.filter-bar select:focus { outline: none; }
.filter-bar__field:focus-within { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: 10px; }

.filter-bar__go {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.35rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 9px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}

.filter-bar__go:hover { background: var(--ink-soft); }

.filter-bar__go svg, .near-me-link svg, .view-toggle svg, .map-toolbar__locate svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.near-me-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brass-deep);
    text-decoration: none;
}

.near-me-link:hover { color: var(--ink); text-decoration: underline; }
.near-me-link[aria-busy="true"] { opacity: 0.6; }

/* "When": a details/summary panel, so it opens without JS. */
.when { position: static; }
.when > summary { list-style: none; display: flex; flex-direction: column; cursor: pointer; }
.when > summary::-webkit-details-marker { display: none; }
.when > summary:focus-visible { outline: none; }
.when__value { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.when__panel {
    position: absolute;
    z-index: 1030;
    top: calc(100% + 0.5rem);
    left: 0;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(32rem, 75vh);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(43, 36, 28, 0.18);
    padding: 1rem;
    cursor: default;
}
.when__months { margin-top: 1rem; }
.when__month + .when__month { margin-top: 1rem; }
.when__month-name { font-family: var(--font-display); font-weight: 600; margin-bottom: 0.4rem; }
.when__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; text-align: center; }
.when__dow { font-size: 0.7rem; font-weight: 700; color: var(--steel); text-transform: uppercase; padding-bottom: 0.2rem; }
.when__day { position: relative; margin: 0; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.when__day input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.when__day span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; }
.when__day:hover span { border-color: var(--ink); }
.when__day input:checked + span { background: var(--ink); color: var(--paper); }
.when__day input:focus-visible + span { outline: 2px solid var(--brass-deep); outline-offset: 1px; }
.when__day.is-off { display: grid; place-items: center; aspect-ratio: 1; color: var(--line-strong); }
.when__periods { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.when__periods legend { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.when__period { position: relative; margin: 0; }
.when__period input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.when__period span { display: block; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.88rem; }
.when__period:hover span { border-color: var(--ink); }
.when__period input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.when__period input:focus-visible + span { outline: 2px solid var(--brass-deep); outline-offset: 2px; }
.when__note { font-size: 0.8rem; color: var(--steel); margin: 0.75rem 0 0; }
.when__actions {
    position: sticky;
    bottom: -1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.75rem -1rem -1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-top: 1px solid var(--line);
}
.when__actions .btn-link { color: var(--steel); padding-left: 0; }

@media (max-width: 575.98px) {
    .filter-bar { flex-wrap: wrap; }
    .when-field { order: 3; flex: 1 1 100%; border-top: 1px solid var(--line); }
    .filter-bar__field.when-field { border-left: 0; }
    .when__panel { width: 100%; }
}

@media (max-width: 575.98px) {
    .filter-bar { flex: 1 1 100%; }
    .filter-bar__field { padding-right: 1.6rem; padding-left: 0.75rem; }
    .filter-bar__go span { display: none; }
    .filter-bar__go { padding: 0 0.85rem; }
}

.list-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.list-head__sub { color: var(--steel); margin: 0; }
.view-toggle { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.results-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.results-section__head .result-count { margin: 0 0 1rem; }
.shop-grid--featured { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.map-toolbar__locate { display: inline-flex; align-items: center; gap: 0.4rem; }

/* The map view has no footer and the header is sticky, so the list column
   starts right under the search bar. */
.page-list--map .list-map__map { top: var(--header-h); }

/* ---------- Booking summary: labelled rows, services listed ---------- */
.booking-summary { margin: 0 0 1rem; }

.booking-summary > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line);
}

.booking-summary dt { font-weight: 500; color: var(--steel); }
.booking-summary dd { margin: 0; font-weight: 600; }

.booking-summary__services ul { list-style: none; padding: 0; margin: 0; }

.booking-summary__services li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    padding: 0.15rem 0;
}

.booking-summary__services li .muted { font-weight: 400; }
.booking-summary__total { border-bottom: 0 !important; font-size: 1.05rem; }

@media (max-width: 420px) {
    .booking-summary > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

.booking-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.booking-summary .reserve-link { font-weight: 600; }
#step-services { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* File inputs: the real input lies invisibly over the drawn button, so a
   click opens the browser picker directly (see file-input.js). */
.file-field { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.file-field__button { position: relative; overflow: hidden; margin: 0; }
.file-field__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-field__input::-webkit-file-upload-button { cursor: pointer; }
.file-field__button:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }

/* Phones: all seven days and all three tabs fit without scrolling. */
.day-strip { scrollbar-width: none; }
.day-strip::-webkit-scrollbar { display: none; }

@media (max-width: 575.98px) {
    .time-picker { padding: 1rem 0.75rem; }
    .day-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
    .day-strip__circle { width: 2.55rem; height: 2.55rem; font-size: 0.95rem; }
    .day-strip__circle i { bottom: 0.4rem; }
    .period-tabs__tab { font-size: 0.82rem; padding: 0.5rem 0.2rem; }
    .period-tabs__tab span { font-size: 0.72rem; }
    .time-row__slot { min-width: 4.6rem; padding: 0.65rem 0.6rem; }
}

/* While the next choice loads in place (booking-page.js). */
[data-reserve] { transition: opacity 0.12s ease; }
[data-reserve].is-loading { opacity: 0.6; }

/* Mapbox map view */
.mapboxgl-popup-content { padding: 0; border-radius: 10px; box-shadow: 0 10px 28px rgba(43, 36, 28, 0.25); font-family: var(--font-body); }
.mapboxgl-popup-content a.pin-card { color: var(--ink); }
/* Phones: the tapped shop under the map, after Planity. It sits above the
   floating List button, which stays in its place. */
.pin-sheet {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4.5rem;
    z-index: 3;
    max-width: 26rem;
    margin-inline: auto;
}

.has-cookie-notice .pin-sheet { bottom: 12.25rem; }
@media (min-width: 576px) { .has-cookie-notice .pin-sheet { bottom: 8.75rem; } }

@media (prefers-reduced-motion: no-preference) {
    .pin-sheet:not([hidden]) { animation: pin-sheet-in 0.18s ease-out; }
}

@keyframes pin-sheet-in {
    from { transform: translateY(0.75rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.pin-sheet__card {
    display: block;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(43, 36, 28, 0.3);
}

.pin-sheet__card:hover { color: var(--ink); }
.pin-sheet__card:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

.pin-sheet__photo { position: relative; display: grid; place-items: center; height: 8.5rem; overflow: hidden; background: var(--stone); }
.pin-sheet__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pin-sheet__photo .monogram { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
/* A tall photo whole, over a blurred copy, as on the shop cards. */
.pin-sheet__photo.is-tall img { object-fit: contain; }
.pin-sheet__photo.is-tall .pin-sheet__fill { object-fit: cover; filter: blur(18px) brightness(0.92); transform: scale(1.5); }

.pin-sheet__text { display: block; padding: 0.75rem 0.95rem 0.85rem; }
.pin-sheet__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.pin-sheet__address { display: block; font-size: 0.85rem; color: var(--steel); margin-top: 0.2rem; }
.pin-sheet__rating { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

.pin-sheet__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(43, 36, 28, 0.25);
}

.pin-sheet__close:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 2px; }

.you-are-here { width: 18px; height: 18px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.2), 0 1px 6px rgba(0, 0, 0, 0.3); }

/* ---------- Owner: shop details (Bilgiler) ---------- */
.edit-page { max-width: 48rem; margin-inline: auto; padding-bottom: 2rem; }
.edit-page__title { font-size: clamp(1.6rem, 3.4vw, 2rem); margin-bottom: 1.5rem; }

.edit-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    margin-bottom: 1.25rem;
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

.edit-card h2 { font-size: 1.2rem; margin-bottom: 1rem; }

.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0 1rem; }
.edit-field { margin-bottom: 1rem; }
.edit-field--wide { grid-column: 1 / -1; }
.edit-field .form-label { font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem; }

.location-search { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.location-search .form-control { flex: 1; min-width: 0; }

.location-results {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.location-results button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
    font-size: 0.9rem;
}

.location-results li:last-child button { border-bottom: 0; }
.location-results button:hover, .location-results button:focus-visible { background: var(--stone); }

.location-status { min-height: 1.3em; margin: 0 0 0.5rem; color: var(--brass-deep); }

.owner-map {
    height: clamp(16rem, 42vw, 22rem);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.owner-pin { cursor: grab; line-height: 0; }
.owner-pin:active { cursor: grabbing; }

.location-actions { margin: 0.75rem 0; }

.address-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: var(--stone);
}

.address-line__label { display: block; font-size: 0.78rem; color: var(--steel); }
.address-line strong { display: block; overflow-wrap: anywhere; }
.address-line .btn-link { color: var(--brass-deep); font-weight: 600; flex: 0 0 auto; }
.address-fields { margin-top: 1rem; }

.save-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 -8px 24px -16px rgba(43, 36, 28, 0.35);
}

.location-results__heading { padding: 0.5rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--steel); background: var(--paper); border-bottom: 1px solid var(--line); }

/* ---------- Owner: application state and launch checklist ---------- */
.shop-state { background: var(--stone); color: var(--ink); font-weight: 600; }
.shop-state--live { background: var(--mint); color: #fff; }
.shop-state--rejected { background: #f8d7da; color: #842029; }

.launch {
    border: 1px solid var(--line);
    border-left: 4px solid var(--brass);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.launch__title { font-size: 1rem; margin-bottom: 0.6rem; }
.launch__list { list-style: none; padding: 0; margin: 0 0 1rem; }
.launch__step { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; }
.launch__mark {
    flex: 0 0 1.35rem;
    height: 1.35rem;
    border: 2px solid var(--line);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
}
.launch__step--done .launch__mark { background: var(--mint); border-color: var(--mint); color: #fff; }
.launch__step--done a { color: var(--steel); }
.launch__step a { color: var(--ink); }
.launch__need { margin-left: auto; color: var(--steel); }
.launch__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0; }

.privacy-notice summary { cursor: pointer; color: var(--brass-deep); font-weight: 600; }

/* ---------- Diary: day view (one column per barber) ---------- */
.daystrip {
    display: grid;
    grid-template-columns: 2rem repeat(7, minmax(0, 1fr)) 2rem;
    align-items: center;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.75rem;
}
.daystrip__move {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--steel);
    text-decoration: none;
    padding: 0.4rem 0;
}
.daystrip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0;
    color: var(--ink);
    text-decoration: none;
    border-radius: 0.5rem;
}
.daystrip__day span { font-size: 0.72rem; color: var(--steel); text-transform: uppercase; letter-spacing: 0.04em; }
.daystrip__day b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.daystrip__day:hover b { background: var(--stone); }
.daystrip__day.is-today b { color: var(--brass-deep); box-shadow: inset 0 0 0 2px var(--brass-soft); }
.daystrip__day.is-selected b { background: var(--ink); color: #fff; box-shadow: none; }

.dayboard__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dayboard {
    display: grid;
    grid-template-columns: 3.6rem repeat(var(--cols, 1), minmax(9.5rem, 1fr));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    width: max-content;
    min-width: 100%;
}
.dayboard__corner { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.dayboard__who {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.6rem;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 0.85rem;
}
.dayboard__who strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dayboard__who .cal-time { display: block; font-size: 0.75rem; color: var(--steel); }
.dayboard__who.is-me strong { color: var(--brass-deep); }
.dayboard__face {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}
.dayboard__face--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--stone);
    color: var(--brass-deep);
    font-weight: 700;
}
.dayboard__col { position: relative; border-right: 1px solid var(--line); }
.dayboard__col:last-child { border-right: 0; }
/* Hours a barber does not work, hatched like a crossed-out page. */
.dayboard__off {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(117, 107, 92, 0.12) 6px, rgba(117, 107, 92, 0.12) 7px);
    pointer-events: none;
}
.dayboard .week__event { font-size: 0.78rem; padding: 0.25rem 0.45rem; }
.dayboard .week__event:has(.stretched-link):hover { filter: brightness(0.96); }

/* ---------- Front desk ---------- */
.desk-bar { background: var(--ink); color: #fff; padding: 0.75rem 0; }
.desk-bar__shop { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.desk-bar__label { font-size: 0.8rem; color: var(--brass-soft); }
.desk-bar__menu { position: relative; }
.desk-bar__menu summary { cursor: pointer; color: var(--brass-soft); font-size: 0.85rem; }
.desk-bar__menu form {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    width: 16rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.85rem;
    box-shadow: 0 12px 30px -12px rgba(43, 36, 28, 0.4);
}

.desk-address__url { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95rem; overflow-wrap: anywhere; }
.desk-address__url a { color: var(--brass-deep); font-weight: 600; }