/**
 * The public pages' own styles (docs/PUBLIC_SITE_PLAN.md): the sign-in pages, the website's frame, booking,
 * «my account», the shop and home. Loaded ONLY by the public pages, after admin/admin.css (whose tokens and
 * components they reuse): nothing here can reach the admin or the staff app (owner 02/10, after a public rule
 * named .a-slot squeezed the admin's cards). Tokens only (--a-*), as admin.css; `raw-ok:` for a reviewed exception.
 */

/* The sign-in pages (login.html for the team, customer-login.html for customers; frontend/site/): one card in the
   middle, the store on top, the language and the way back to the website under it. */
.a-signin { flex-direction: column; gap: 14px; }
/* A computer (owner 07/10): the page in two halves — the store's side in its own colour (its logo, its name, a welcome
   and what this sign-in opens), the form on the other side, so the card no longer floats in an empty page. A phone and
   a narrow window keep the one card in the middle. The side only repeats what the card says (aria-hidden). */
.a-signin-split { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
/* the form itself takes the room the screen gives it (owner 07/10: «the middle needs more height — by the height
   available»): its padding, the air between its parts, the fields and the button grow with the window's height and
   shrink on a short one, each between fixed limits; a phone and a computer alike */
.a-signin-split .a-signin-card { max-width: 460px; padding: clamp(20px, 3.6dvh, 40px) clamp(18px, 3dvh, 32px); gap: clamp(14px, 2.6dvh, 28px); }
.a-signin-split .a-signin-foot { max-width: 460px; }
.a-signin-split .a-signin-part { gap: clamp(10px, 2dvh, 20px); }
.a-signin-split .a-signin-part h2 { font-size: clamp(1rem, 2.2dvh, 1.25rem); }
.a-signin-split .a-signin-part h2 svg { width: 20px; height: 20px; }
.a-signin-split .a-signin-part .a-form { gap: clamp(10px, 2dvh, 20px); }
.a-signin-split .a-signin-part .a-form :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: clamp(44px, 6dvh, 58px); font-size: 1rem; }
.a-signin-split .a-signin-part .a-btn.a-wide { min-height: clamp(46px, 6.4dvh, 60px); font-size: 1rem; }
/* A phone / a narrow window (owner 07/10: «it does not fill the space above and below»): the store's side becomes a
   band in its colour over the top of the page (logo, name, welcome), the card overlaps its lower edge, and the language
   and the way back sit at the bottom of the screen — the height is used, nothing floats in an empty page. */
@media (max-width: 959.98px) {
    .a-signin-split { display: flex; flex-direction: column; }
    .a-signin-side {
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
        flex: 1 1 auto; min-height: 30vh; min-height: 30dvh; padding: 32px 24px 80px; box-sizing: border-box;
        background-color: var(--a-accent); color: var(--a-accent-ink);
        background-image: radial-gradient(circle at 92% 8%, color-mix(in oklab, var(--a-accent-ink) 12%, transparent) 0 22%, transparent 22.5%),
            radial-gradient(circle at 4% 100%, color-mix(in oklab, var(--a-accent-ink) 9%, transparent) 0 26%, transparent 26.5%);
    }
    .a-signin-side-in { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 440px; }
    .a-signin-side-mark { width: 72px; height: 72px; border-radius: var(--a-radius); background: var(--a-surface); display: flex;
        align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; box-shadow: var(--a-shadow); }
    .a-signin-side-mark img { width: 100%; height: 100%; object-fit: contain; }
    .a-signin-side-mark svg { width: 36px; height: 36px; color: var(--a-accent); }
    .a-signin-side-name { margin: 6px 0 0; font-size: 1.5rem; line-height: 1.2; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
    .a-signin-side h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
    .a-signin-side-line { margin: 4px 0 0; max-width: 340px; font-size: 0.9375rem; line-height: 1.55; }
    /* the band takes the height left over; the card and the footer stay in the lower part (under the thumb) */
    .a-signin-split > .a-center { flex: 0 0 auto; min-height: 0; justify-content: flex-start; padding-top: 0; }
    .a-signin-split .a-signin-card { margin-top: -56px; position: relative; box-shadow: var(--a-shadow-lg, var(--a-shadow)); }
    .a-signin-split .a-signin-brand { display: none; }
    .a-signin-split .a-signin-foot { padding-top: 6px; }
}
@media (min-width: 960px) {
    .a-signin-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .a-signin-side {
        display: flex; align-items: center; justify-content: center; padding: 48px; box-sizing: border-box;
        background-color: var(--a-accent); color: var(--a-accent-ink);
        background-image:
            radial-gradient(circle at 88% 12%, color-mix(in oklab, var(--a-accent-ink) 12%, transparent) 0 18%, transparent 18.5%),
            radial-gradient(circle at 8% 92%, color-mix(in oklab, var(--a-accent-ink) 9%, transparent) 0 24%, transparent 24.5%);
    }
    .a-signin-side-in { max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
    .a-signin-side-mark { width: 96px; height: 96px; border-radius: calc(var(--a-radius) * 1.5); background: var(--a-surface);
        display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; box-shadow: var(--a-shadow); }
    .a-signin-side-mark img { width: 100%; height: 100%; object-fit: contain; }
    .a-signin-side-mark svg { width: 48px; height: 48px; color: var(--a-accent); }
    .a-signin-side-name { margin: 8px 0 0; font-size: 2rem; line-height: 1.2; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
    .a-signin-side h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
    .a-signin-side-line { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
    /* the card: the side already shows the store, so only the form stays */
    .a-signin-split .a-signin-brand { display: none; }
}
.a-signin-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.a-signin-brand { display: flex; align-items: center; gap: 12px; }
.a-signin-brand img { width: 52px; height: 52px; border-radius: var(--a-radius); object-fit: contain; flex: none; }
.a-signin-brand > svg { width: 40px; height: 40px; color: var(--a-accent); flex: none; }
.a-signin-brand h1 { margin: 0; font-size: 1.25rem; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
.a-signin-part { display: flex; flex-direction: column; gap: 10px; }
.a-signin-part h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: var(--a-head-weight); font-family: var(--a-font-head); }
.a-signin-part h2 svg { color: var(--a-accent); width: 18px; height: 18px; }
.a-signin-part .a-form { grid-template-columns: 1fr; }
.a-signin-part .a-btn.a-wide { min-height: 46px; }
.a-signin-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 440px; }
.a-signin-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--a-accent); font-weight: 600; text-decoration: none; }
.a-signin-foot a svg { width: 16px; height: 16px; }
html[dir="rtl"] .a-signin-foot a svg { transform: scaleX(-1); }

/* The store's website on the engine (frontend/site/shell.js; docs/PUBLIC_SITE_PLAN.md): the store on top, the
   tabs (under it on a wide screen, at the bottom on a phone), the page, the footer with the legal links. */
.a-site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.a-site-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; background: var(--a-surface); border-bottom: var(--a-bw) solid var(--a-border); }
.a-site-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--a-text); text-decoration: none; font-weight: 700;
    font-family: var(--a-font-head); }
.a-site-brand img { width: 40px; height: 40px; border-radius: var(--a-radius-sm); object-fit: contain; flex: none; }
.a-site-brand > svg { width: 28px; height: 28px; color: var(--a-accent); flex: none; }
.a-site-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-site-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.a-site-me { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border-radius: var(--a-radius-pill);
    border: var(--a-bw) solid var(--a-control); color: var(--a-text); text-decoration: none; font-weight: 600; }
.a-site-me img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.a-site-me svg { width: 18px; height: 18px; margin-inline-start: 6px; }
/* the customer's notices (site/notices.js): the bell beside his account, its unread count on its corner */
.a-site-account { display: flex; align-items: center; gap: 8px; }
.a-site-bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
    border: var(--a-bw) solid var(--a-control); color: var(--a-text); }
.a-site-bell svg { width: 20px; height: 20px; }
.a-site-bell:hover { background: var(--a-surface-2); }
.a-notices-head { display: flex; justify-content: flex-end; }
.a-notices-head:has(> [hidden]:only-child) { display: none; }
.a-site-tabs { display: flex; justify-content: center; gap: 4px; padding: 6px 12px; background: var(--a-surface); border-bottom: var(--a-bw) solid var(--a-border); }
.a-site-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--a-radius-btn); color: var(--a-text);
    text-decoration: none; font-weight: 600; }
.a-site-tabs a svg { width: 18px; height: 18px; }
.a-site-tabs a:hover { background: var(--a-surface-2); }
.a-site-tabs a.is-active { background: var(--a-accent-soft); color: var(--a-accent); }
.a-site-main { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 16px 28px; box-sizing: border-box; }
.a-site-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.a-site-page > .a-seg { margin: 0; }
/* The footer: the store and its contact (buttons), then the legal links on one line and the rights. */
.a-site-foot { margin-top: 12px; background: var(--a-surface); border-top: var(--a-bw) solid var(--a-border); }
.a-site-foot-in { max-width: 1120px; margin: 0 auto; padding: 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
/* a large screen: the store, contact and location as three columns of plain rows (owner 02/10) */
.a-site-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.a-site-foot-top .a-site-brand img { width: 34px; height: 34px; }
.a-foot-brand { display: flex; flex-direction: column; gap: 6px; }
.a-foot-brand p { margin: 0; }
.a-foot-col h2 { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); }
.a-site-contact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a-contact { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; max-width: 100%; color: var(--a-text); text-decoration: none; font-size: 0.875rem; line-height: 1.45; }
.a-contact:hover span { text-decoration: underline; }
.a-contact svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--a-accent); }
.a-contact span { overflow-wrap: anywhere; }
.a-site-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap;
    padding-top: 12px; border-top: var(--a-bw) dashed var(--a-border); }
.a-site-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.a-site-legal a { color: var(--a-accent); font-weight: 600; font-size: 0.8125rem; text-decoration: underline; }
.a-site-foot-bottom p { margin: 0; color: var(--a-muted); font-size: 0.8125rem; }
@media (max-width: 719px) {
    /* a phone: the contact as round icons, everything centred */
    .a-site-foot-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .a-site-foot-bottom { flex-direction: column; text-align: center; }
    .a-foot-brand { align-items: center; }
    .a-foot-col { display: contents; }
    .a-foot-col h2 { display: none; }
    .a-site-contact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .a-site-foot-top { gap: 10px; }
    .a-contact { width: 44px; height: 44px; min-height: 0; padding: 0; align-items: center; justify-content: center; border-radius: 50%;
        border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
    .a-contact svg { margin-top: 0; }
    .a-contact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .a-site-legal { justify-content: center; }
    /* the steps: a number each, the current one with its name — all on the screen, nothing to scroll */
    .a-stepper { overflow: visible; justify-content: space-between; gap: 4px; }
    .a-stepper li { padding: 4px; }
    .a-stepper li:not(.is-active) > span:last-child { display: none; }
    .a-stepper li.is-active { flex: 1 1 auto; min-width: 0; padding-inline-end: 12px; }
    .a-stepper li.is-active > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* the page's tabs: equal columns across the width */
    .a-site-page > .a-seg { width: 100%; box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .a-site-page > .a-seg button { justify-content: center; padding: 8px 6px; display: flex; align-items: center; gap: 6px; min-width: 0; }
    .a-site-page > .a-seg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .a-site-me > span:not(.a-avatar) { display: none; }   /* the name hides, the picture stays */
    .a-site-me { padding: 0 6px; }
    .a-site-tabs { position: fixed; inset: auto 0 0 0; z-index: 30; justify-content: space-around; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        border-top: var(--a-bw) solid var(--a-border); border-bottom: 0; }
    .a-site-tabs a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 0.75rem; flex: 1; justify-content: center; }
    .a-site { padding-bottom: 66px; }
}

/* Booking (frontend/site/booking/): the steps, the calendar and the times, the summary, the rewards. */
.a-stepper { list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.a-stepper::-webkit-scrollbar { display: none; }
.a-stepper li { display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px 6px 6px; border-radius: var(--a-radius-pill);
    background: var(--a-surface-2); color: var(--a-text); font-size: 0.8125rem; font-weight: 600; }
.a-step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
.a-step-n svg { width: 14px; height: 14px; }
.a-stepper li.is-active { background: var(--a-accent); color: var(--a-accent-ink); }
.a-stepper li.is-active .a-step-n { background: var(--a-accent-ink); color: var(--a-accent); border-color: var(--a-accent-ink); }
.a-stepper li.is-done .a-step-n { background: var(--a-good); color: var(--a-on-color); border-color: var(--a-good); }
.a-book-body { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 960px) { .a-book-body { grid-template-columns: minmax(0, 1fr) 300px; } .a-book-summary { position: sticky; top: 80px; } }
@media (max-width: 959px) { .a-book-summary { order: -1; } }
.a-book-step .a-card-head h2 { font-size: 1.125rem; }
.a-book-services { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.a-choice.is-active { border-color: var(--a-accent); background: var(--a-accent-soft); }
.a-service > .a-reward-progress { grid-column: 1 / -1; }
.a-book-summary h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.a-book-summary h3 svg { color: var(--a-accent); }
.a-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: var(--a-bw) dashed var(--a-border); }
.a-sum-row span { color: var(--a-muted); }
.a-sum-row strong { text-align: end; }
.a-sum-row.is-total { border-bottom: 0; font-size: 1.0625rem; }
.a-sum-row.is-total strong { color: var(--a-accent); }
.a-book-when { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .a-book-when { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; } }
.a-cal-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.a-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.a-cal-head { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--a-muted); padding: 4px 0; }
.a-cal-day { aspect-ratio: 1; min-height: 38px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface);
    color: var(--a-text); font: inherit; font-weight: 600; cursor: pointer; }
.a-cal-day:hover:not(:disabled) { border-color: var(--a-accent); }
.a-cal-day.is-today { border-width: 2px; border-color: var(--a-accent); }
.a-cal-day.is-active { background: var(--a-accent); color: var(--a-accent-ink); border-color: var(--a-accent); }
.a-cal-day:disabled { cursor: default; color: var(--a-muted); border-style: dashed; background: var(--a-surface-2); }
.a-book-times h3 { margin: 0 0 10px; font-size: 1rem; }
.a-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.a-time { height: 42px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text);
    font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.a-time:hover:not(:disabled) { border-color: var(--a-accent); }
.a-time.is-active { background: var(--a-accent); color: var(--a-accent-ink); border-color: var(--a-accent); }
.a-time:disabled { cursor: default; color: var(--a-muted); background: var(--a-surface-2); border-style: dashed; text-decoration: line-through; }
.a-book-signin, .a-book-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 520px; margin: 0 auto; }
.a-book-signin h3, .a-book-done h3 { margin: 0; font-size: 1.25rem; }
.a-book-signin p, .a-book-done p { margin: 0; }
/* online booking closed by the admin (owner 02/10): the notice instead of the steps */
.a-book-closed { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 560px; margin: 0 auto; }
.a-book-closed h2, .a-book-closed p { margin: 0; }
.a-book-closed .a-toolbar { justify-content: center; }
.a-book-signin svg.a-book-big, .a-book-done svg.a-book-big, .a-book-closed svg.a-book-big { width: 48px; height: 48px; color: var(--a-accent); }
.a-book-done svg.a-book-big { color: var(--a-good); }
.a-book-number { font-size: 2rem; font-variant-numeric: tabular-nums; color: var(--a-accent); }
.a-book-done .a-toolbar { justify-content: center; }
.a-book-form { grid-template-columns: 1fr; }
.a-site .a-check small { grid-column: 2; color: var(--a-muted); font-size: 0.8125rem; }
.a-arrival { align-items: flex-start; font-weight: 400; }
.a-arrival svg { flex: none; margin-top: 2px; }
.a-arrival ul { margin: 4px 0 0; padding-inline-start: 18px; }
.a-arrival li { margin: 2px 0; }
.a-reward-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--a-radius-sm);
    background: var(--a-surface-2); color: var(--a-text); text-align: start; }
.a-reward-head { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
.a-reward-head svg { width: 16px; height: 16px; color: var(--a-accent); }
.a-reward-head strong { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.a-reward-progress .a-bar { height: 8px; background: var(--a-surface); box-shadow: inset 0 0 0 var(--a-bw) var(--a-control); }
.a-stamps { display: flex; flex-wrap: wrap; gap: 4px; }
.a-stamp { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: var(--a-bw) dashed var(--a-control);
    font-size: 0.6875rem; font-weight: 700; color: var(--a-text); background: var(--a-surface); }
.a-stamp svg { width: 13px; height: 13px; }
.a-stamp.is-done { border-style: solid; border-color: var(--a-good); background: var(--a-good); color: var(--a-on-color); }
.a-stamp.is-next { border-style: solid; border-color: var(--a-warn); color: var(--a-warn); }
.a-reward-line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; color: var(--a-text); }
.a-reward-line.is-ready { color: var(--a-good); font-weight: 700; }
.a-reward-line svg { width: 16px; height: 16px; }

/* My bookings, my account */
.a-bk-list, .a-free-list, .a-inv-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.a-bk { display: flex; flex-direction: column; gap: 6px; }
/* orders: one full-width list (the shop's window and my-orders), never cards squeezed into columns (owner 03/10) */
.a-orders-list { grid-template-columns: 1fr; }
.a-bk.is-live { border-inline-start: 4px solid var(--a-accent); }
.a-bk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.a-bk-row { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 8px; padding: 4px 0; border-bottom: var(--a-bw) dashed var(--a-border); }
.a-bk-row svg { width: 16px; height: 16px; color: var(--a-accent); }
.a-bk-row strong { text-align: end; }
.a-bk-notes { display: flex; gap: 6px; margin: 4px 0 0; color: var(--a-text); }
.a-bk-notes svg { width: 16px; height: 16px; flex: none; color: var(--a-muted); }
.a-bk .a-toolbar { margin-top: 6px; }
.a-me { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.a-me-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.a-me-who h2 { margin: 0; font-size: 1.25rem; font-family: var(--a-font-head); }
.a-account-grid { grid-template-columns: 1fr; }
@media (min-width: 960px) { .a-account-grid { grid-template-columns: 1fr 1fr; } .a-account-grid > .a-card:first-child { grid-column: auto; } }
/* The loyalty card (owner 02/10): a bank-card shape in the brand colour (the engine's accent; tokens only), depth and
   a soft shine laid over it, the logo badge, the barcode on white (to scan), the name and the customer number (nothing that changes). */
.a-loyalty { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto;
    box-sizing: border-box; min-height: 240px; padding: 18px 20px; border-radius: 18px; color: var(--a-accent-ink);
    /* the engine's fills, fitted for their ink in every style and mode (as the directory's banner): never a shade
       toward the ink, which in dark mode is dark and lost contrast */
    background: linear-gradient(135deg, var(--a-accent-fill, var(--a-accent)), var(--a-accent-fill-2, var(--a-accent)));
    box-shadow: var(--a-shadow-lg); isolation: isolate; }
.a-loyalty::after { content: ""; position: absolute; inset: auto -30% -55% auto; width: 75%; aspect-ratio: 1; border-radius: 50%; z-index: -1;
    border: 26px solid color-mix(in srgb, var(--a-accent-ink) 9%, transparent); }
.a-loyalty-top { display: flex; align-items: center; gap: 12px; }
.a-loyalty-logo { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
    background: #ffffff; color: var(--a-accent); font-weight: 800; font-size: 1.25rem; box-shadow: var(--a-shadow); }   /* raw-ok: the logo's white badge, as printed cards */
.a-loyalty-logo img { width: 100%; height: 100%; object-fit: cover; }
.a-loyalty-brand { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.a-loyalty-brand strong { font-size: 1.0625rem; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-loyalty-brand small { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
.a-loyalty-mark { width: 22px; height: 22px; transform: rotate(90deg); flex: none; }
.a-loyalty-code { flex: 1; display: grid; place-items: center; min-height: 0; box-sizing: border-box; padding: 6px 10px; border-radius: 12px; background: #ffffff; }   /* raw-ok: a barcode is printed on white to scan */
.a-loyalty-code svg { display: block; width: 100%; height: auto; max-height: 150px; }   /* the full width: readable on a phone */
.a-loyalty-who { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.a-loyalty-name { font-size: 1rem; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-loyalty-no { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.2; }
.a-loyalty-no small { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.a-loyalty-no bdi { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.a-free { display: flex; flex-direction: column; gap: 6px; }
.a-inv { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: var(--a-radius-sm);
    border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-inv .a-btn { grid-column: 1 / -1; justify-self: start; }
.a-danger-zone { padding: 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) dashed var(--a-bad); }
.a-danger-zone h3, .a-account h3 { margin: 0 0 6px; font-size: 0.9688rem; }

/* The shop (frontend/site/shop/): the bar, the categories, the products, the cart, the options, the checkout. */
.a-page-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.375rem; font-family: var(--a-font-head); }
.a-page-title svg { color: var(--a-accent); }
.a-shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.a-shop-search { flex: 1 1 260px; position: relative; display: flex; }
.a-shop-search svg { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--a-muted); pointer-events: none; }
.a-shop-search input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; padding-inline-start: 38px; border-radius: var(--a-radius-btn);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-shop-bar select { height: 44px; padding: 0 10px; border-radius: var(--a-radius-btn); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-cart-btn { height: 44px; }
.a-shop-act { height: 44px; }
/* «My orders»: its counter in the accent's colours (the cart's sits on the filled button) */
.a-orders-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--a-radius-pill);
    background: var(--a-accent); color: var(--a-accent-ink); font-size: 0.75rem; font-weight: 700; box-sizing: border-box; }
.a-orders-count[hidden] { display: none; }
/* an order's chips (payment, its state, pickup / delivery): the icon apart from its text */
.a-orders-list .a-pill { display: inline-flex; align-items: center; gap: 6px; }
/* On a phone (owner 03/10): the search on its own row; the sort, «My orders» and the cart on the next, the two as icons
   with their counters; the shop's windows (my orders, the cart) open full height from the top, not as a low sheet. */
@media (max-width: 719px) {
    .a-shop-search { flex: 1 1 100%; }
    .a-shop-bar select { flex: 1 1 0; min-width: 0; }
    .a-shop-bar .a-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .a-shop-act { flex: none; padding-inline: 12px; }
    .a-overlay:has(.a-myorders, .a-cart) { align-items: stretch; }
    .a-modal:has(.a-myorders, .a-cart) { max-height: none; height: 100vh; height: 100dvh; border-radius: 0; animation: none; }
}
.a-cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--a-radius-pill);
    background: var(--a-accent-ink); color: var(--a-accent); font-size: 0.75rem; font-weight: 700; box-sizing: border-box; }
/* the filter button's count, and the active filters under the bar as small chips that remove them (owner 11/10) */
.a-filter-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--a-radius-pill); background: var(--a-accent); color: var(--a-accent-ink); font-size: 0.75rem; font-weight: 700; box-sizing: border-box; }
.a-filter-count[hidden] { display: none; }
.a-shop-active:empty { display: none; }
.a-shop-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.a-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-text); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.a-active-chip svg { width: 15px; height: 15px; color: var(--a-accent); }
.a-modal .a-prange { max-width: none; padding: 0; border: 0; background: none; }
.a-prange-count { margin: 0; color: var(--a-muted); font-weight: 600; text-align: center; }
.a-shop-cats { margin: 0; }
.a-shop-cats .a-chip { padding: 8px 14px; border-color: var(--a-control); color: var(--a-text); font: inherit; font-weight: 600; cursor: pointer; }
.a-shop-cats .a-chip.is-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
/* The price filter (owner 11/10): one bar, two handles, the chosen part filled; two amount boxes under it. The two
   range inputs lie on the same bar; only their handles take the pointer. */
.a-prange { display: grid; gap: 12px; max-width: 460px; padding: 14px 16px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-border); background: var(--a-surface); }
.a-prange-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a-prange-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.a-prange-title svg { width: 18px; height: 18px; color: var(--a-accent); }
.a-prange-reset { font-size: 0.875rem; }
.a-prange-slider { position: relative; height: 32px; margin-inline: 11px; }
.a-prange-track, .a-prange-fill { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--a-radius-pill); }
.a-prange-track { inset-inline: -11px; background: var(--a-surface-2); box-shadow: inset 0 0 0 var(--a-bw) var(--a-control); }
.a-prange-fill { background: var(--a-accent); }
.a-prange-slider input[type=range] { position: absolute; inset-block: 0; inset-inline: -11px; width: calc(100% + 22px); height: 32px; margin: 0; padding: 0;
    background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.a-prange-slider input[type=range].is-top { z-index: 2; }
.a-prange-slider input[type=range]::-webkit-slider-runnable-track { background: none; border: 0; height: 32px; }
.a-prange-slider input[type=range]::-moz-range-track { background: none; border: 0; }
.a-prange-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 5px;
    border-radius: 50%; background: var(--a-surface); border: 3px solid var(--a-accent); box-shadow: var(--a-shadow); cursor: grab; }
.a-prange-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--a-surface);
    border: 3px solid var(--a-accent); box-shadow: var(--a-shadow); cursor: grab; }
.a-prange-slider input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.a-prange-slider input[type=range]:focus-visible { outline: none; }
.a-prange-slider input[type=range]:focus-visible::-webkit-slider-thumb { outline: var(--a-focus-w, 2px) solid var(--a-accent); outline-offset: 2px; }
.a-prange-slider input[type=range]:focus-visible::-moz-range-thumb { outline: var(--a-focus-w, 2px) solid var(--a-accent); outline-offset: 2px; }
.a-prange-boxes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.a-prange-field { display: grid; gap: 4px; min-width: 0; }
/* each amount box wears the field look itself (its own visible edge: readable for low vision), the currency inside it */
.a-prange-money { position: relative; display: block; }
.a-prange-money input { width: 100%; box-sizing: border-box; padding-inline-end: 30px; font-variant-numeric: tabular-nums; font-weight: 600; }
.a-prange-money > span { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--a-muted); font-weight: 600; pointer-events: none; }
.a-prange-dash { padding-block-end: 10px; color: var(--a-muted); }
.a-products { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.a-products-count { grid-column: 1 / -1; margin: 0; }
.a-products-more { grid-column: 1 / -1; height: 1px; }
/* The shop's card (owner 08/10, «it must catch the eye»): the picture first and large, the second one on hover, the
   badges on it, then the name, the colours, the price and «add»; the whole picture / name opens the product's page. */
.a-product { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; transition: box-shadow .2s ease, border-color .2s ease; }
/* the card never moves under the pointer (owner 11/10: lifting it made its edge slip in and out of the pointer, the
   picture flipping very fast): its shadow and edge say it is under the mouse */
@media (hover: hover) { .a-product:hover { box-shadow: var(--a-shadow-lg, var(--a-shadow)); border-color: var(--a-control); } }
.a-product h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.a-product-img { position: relative; aspect-ratio: 4 / 5; width: 100%; padding: 0; border: 0; border-radius: var(--a-radius); overflow: hidden;
    background: var(--a-surface-2); display: grid; place-items: center; color: var(--a-muted); cursor: zoom-in; }
.a-product-img > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
/* under the mouse the card keeps its MAIN picture (owner 11/10: «why the second picture and not the first?»): a slight
   zoom only; every picture is in the product's page */
@media (hover: hover) { .a-product:hover .a-product-img > img { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .a-product-img > img, .a-product:hover .a-product-img > img { transition: none; transform: none; } }
.a-product-img > svg { width: 52px; height: 52px; }
/* no picture yet: the item's own icon on a soft wash of the shop's colour (never a bare grey box) */
.a-product-img.is-icon { background: linear-gradient(160deg, var(--a-accent-soft), var(--a-surface-2)); color: var(--a-accent); cursor: pointer; }
.a-product-img:focus-visible { outline: var(--a-focus-w) solid var(--a-accent); outline-offset: 2px; }
.a-product-count { position: absolute; bottom: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    border-radius: var(--a-radius-pill); background: var(--a-surface); color: var(--a-text); font-size: 0.75rem; font-weight: 700; box-shadow: var(--a-shadow); }
.a-product-count svg { width: 13px; height: 13px; }
.a-product-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.a-product-name { padding: 0; border: 0; background: none; color: var(--a-text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.a-product-name:hover { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; }
.a-swatches { display: flex; align-items: center; gap: 6px; }
.a-swatch-dot { width: 18px; height: 18px; border-radius: 50%; border: var(--a-bw) solid var(--a-control); background-size: cover; background-position: center;
    box-shadow: 0 0 0 2px var(--a-surface) inset; }
/* the categories, each with a picture of its own products */
.a-shop-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block-end: 4px; }
.a-cat-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 14px 5px 5px !important; }
[dir="rtl"] .a-cat-chip { padding: 5px 5px 5px 14px !important; }
.a-cat-pic { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--a-surface-2); color: var(--a-muted); }
.a-cat-pic svg { width: 16px; height: 16px; }
.a-shop-cats .a-chip.is-active .a-cat-pic { box-shadow: 0 0 0 2px var(--a-accent-ink); }

/* The product window's styles (the page, gallery, full screen, details) are in admin/admin.css (13/10). */
@media (max-width: 759px) {
    .a-prange { max-width: none; }
}
@media (max-width: 759px) {
    .a-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .a-product { padding: 6px 6px 10px; gap: 8px; }
    .a-product-foot .a-btn { width: 100%; justify-content: center; padding-inline: 8px; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.a-product-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A product's / service's description (owner 07/10, core/item-text.js): two lines at most on a card */
.a-item-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--a-muted); font-size: 0.8125rem; font-weight: 400; }
.a-book-services .a-service:has(> .a-item-desc) { grid-template-rows: auto auto 1fr; }
.a-book-services .a-service > .a-item-desc { grid-column: 1 / -1; grid-row: 2; }
.a-book-services .a-service:has(> .a-item-desc) > .a-choice-foot { grid-row: 3; }
/* The services the shop sells online (owner 07/10): their own section above the products */
.a-shop-services { display: flex; flex-direction: column; gap: 8px; margin-block-end: 16px; }
.a-shop-services > h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1.125rem; }
.a-shop-svc-head { display: flex; align-items: center; gap: 10px; }
.a-shop-svc-head h3 { margin: 0; }
.a-shop-svc-time { display: inline-flex; align-items: center; gap: 4px; }
.a-shop-svc-time svg { width: 14px; height: 14px; }
.a-product-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.a-product-foot .a-choice-price { font-size: 1.125rem; }
.a-cart-lines { display: flex; flex-direction: column; gap: 8px; }
.a-cart-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: var(--a-bw) dashed var(--a-border); }
.a-cart-img { width: 44px; height: 44px; border-radius: var(--a-radius-sm); object-fit: cover; }
.a-cart-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-cart-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-qty { display: inline-flex; align-items: center; gap: 6px; }
.a-qty span { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-cart { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 559px) {
    .a-cart-line { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .a-cart-line .a-qty { grid-column: 2; }
    .a-cart-line .a-cart-sum { grid-column: 3; grid-row: 2; }
}
.a-opt-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.a-opt-group legend { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; }
.a-opt-group input { height: 42px; padding: 0 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-opt-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.a-pay-methods { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.a-choice.a-paymethod { min-height: 0; }
.a-card-field { padding: 12px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); }
.a-checkout .a-toolbar.is-full { grid-column: 1 / -1; justify-content: space-between; }
.a-order-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none;
    color: var(--a-text); font: inherit; text-align: start; cursor: pointer; }
.a-order-head > div { display: flex; flex-direction: column; gap: 2px; }
.a-order-side { align-items: flex-end; }
.a-book-done .a-chips { justify-content: center; }
.a-book-done .a-cart-lines { width: 100%; text-align: start; }
.a-book-done .a-sum-row { width: 100%; }
.a-book-done .a-book-number { font-size: 1.25rem; }

/* Home (frontend/site/home/): the hero beside the store's card, then the sections in the admin's order. */
/* the same two columns as the sections under it: the pictures over the main column, the card over the side one */
.a-home-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 859px) { .a-home-hero { grid-template-columns: 1fr; } }
.a-hero-media { position: relative; min-height: 260px; border-radius: var(--a-radius); overflow: hidden; background: var(--a-surface-2); }
.a-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.a-hero-media.is-colour { display: grid; place-items: center; padding: 24px; text-align: center;
    background: linear-gradient(135deg, var(--a-accent-fill), var(--a-accent-fill-2, var(--a-accent))); color: var(--a-accent-ink); }
.a-hero-media.is-colour strong { font-size: clamp(1.5rem, 4vw, 2.5rem); font-family: var(--a-font-head); }
/* the hero slider's arrows and dots (site/home/index.js): removed with the old shop gallery on 08/10 while home still
   used them — the dots were invisible and the arrows sat under the picture (found 14/10) */
.a-gal-prev, .a-gal-next { position: absolute; top: 50%; transform: translateY(-50%); background: var(--a-surface); }
.a-gal-prev { inset-inline-start: 6px; }
.a-gal-next { inset-inline-end: 6px; }
.a-gal-dots { position: absolute; bottom: 8px; inset-inline: 0; display: flex; justify-content: center; gap: 5px; }
.a-gal-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--a-surface); border: var(--a-bw) solid var(--a-control); }
.a-gal-dots span.is-on { background: var(--a-accent); border-color: var(--a-accent); }
.a-home-card { display: flex; flex-direction: column; gap: 12px; }
.a-home-card h1 { margin: 0; font-size: 1.5rem; font-family: var(--a-font-head); }
.a-home-card > .a-muted { margin-top: -6px; }
.a-home-rating { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.a-home-rating > * { display: inline-flex; align-items: center; gap: 5px; color: var(--a-text); text-decoration: none; }
.a-home-rating svg { width: 16px; height: 16px; color: var(--a-warn); }
.a-home-rating a { color: var(--a-accent); }
.a-home-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.a-home-info li { display: flex; align-items: flex-start; gap: 8px; }
.a-home-info svg { width: 18px; height: 18px; flex: none; color: var(--a-accent); margin-top: 2px; }
.is-open { color: var(--a-good); }
.is-closed { color: var(--a-bad); }
.a-home-jump { margin: 0; }
.a-home-jump .a-chip { text-decoration: none; color: var(--a-text); border-color: var(--a-control); }
.a-home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 859px) { .a-home-grid { grid-template-columns: 1fr; } }
.a-home-main, .a-home-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.a-home-sec { scroll-margin-top: 80px; }
.a-home-services { display: flex; flex-direction: column; }
.a-home-service { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 4px;
    border-bottom: var(--a-bw) dashed var(--a-border); color: var(--a-text); text-decoration: none; }
.a-home-service:last-child { border-bottom: 0; }
.a-home-service:hover { background: var(--a-surface-2); }
/* a price set by its rule («25,00 €/h · min. 60 min», PRICING_MODES_PLAN §4) wraps in its own column, never over the name */
.a-home-service > .a-choice-price { max-width: min(14rem, 42vw); text-align: end; line-height: 1.35; }
.a-home-service-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-home-service-name small { display: inline-flex; align-items: center; gap: 4px; }
.a-home-service-name small svg { width: 13px; height: 13px; }
.a-home-service > svg { width: 18px; height: 18px; color: var(--a-muted); }
.a-home-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a-home-pic { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--a-radius-sm); overflow: hidden; background: var(--a-surface-2);
    cursor: zoom-in; display: grid; place-items: center; color: var(--a-muted); }
.a-home-pic img, .a-home-pic video { width: 100%; height: 100%; object-fit: cover; }
.a-home-pic > svg { position: absolute; width: 36px; height: 36px; color: var(--a-accent-ink); filter: drop-shadow(0 1px 3px var(--a-text)); }
.a-review { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: var(--a-bw) dashed var(--a-border); }
.a-review header { display: flex; justify-content: space-between; gap: 10px; }
.a-review-verified { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: auto; font-size: 0.8rem; font-weight: 600; color: var(--a-good); }
.a-review-verified svg { width: 14px; height: 14px; }
.a-review p { margin: 0; line-height: 1.5; }
.a-stars { display: flex; gap: 2px; }
.a-stars svg { width: 16px; height: 16px; color: var(--a-control); }
.a-stars svg.is-on, .a-stars .is-on svg { color: var(--a-warn); fill: currentColor; }
.a-stars.is-input button { padding: 2px; border: 0; background: none; cursor: pointer; }
.a-stars.is-input svg { width: 28px; height: 28px; }
.a-review-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-width: 360px; }
.a-pages { justify-content: center; align-items: center; }
.a-review-write { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.a-review-write h3 { margin: 0; font-size: 1rem; }
.a-review-form { grid-template-columns: 1fr; }
.a-home-about { margin: 0; line-height: 1.6; white-space: pre-line; }
.a-hours { width: 100%; border-collapse: collapse; }
.a-hours th, .a-hours td { padding: 7px 4px; border-bottom: var(--a-bw) dashed var(--a-border); text-align: start; font-weight: 400; }
.a-hours td { text-align: end; font-variant-numeric: tabular-nums; }
.a-hours tr.is-today th, .a-hours tr.is-today td { font-weight: 700; color: var(--a-accent); }
.a-map-consent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; min-height: 160px; justify-content: center;
    border-radius: var(--a-radius-sm); background: var(--a-surface-2); }
.a-map-consent iframe { width: 100%; height: 320px; border: 0; border-radius: var(--a-radius-sm); }
.a-viewer { display: flex; flex-direction: column; gap: 10px; }
.a-viewer-stage { display: grid; place-items: center; min-height: 50vh; max-height: 72vh; background: var(--a-surface-2); border-radius: var(--a-radius-sm); overflow: hidden; }
.a-viewer-stage img, .a-viewer-stage video { max-width: 100%; max-height: 72vh; object-fit: contain; }
.a-viewer-bar { display: flex; align-items: center; justify-content: center; gap: 14px; }
@media (max-width: 719px) {
    .a-contact.is-named { width: auto; height: 44px; padding: 0 14px; border-radius: var(--a-radius-pill); }
    .a-contact.is-named span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* The platform's directory (frontend/site/platform/): the search, the kinds, the cards, the tabs Questions / Articles. */
.a-plat-join span { white-space: nowrap; }
@media (max-width: 719px) { .a-plat-join span { display: none; } }
.a-dir-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; border-radius: var(--a-radius-lg);
    background: linear-gradient(135deg, var(--a-accent-fill), var(--a-accent-fill-2, var(--a-accent))); color: var(--a-accent-ink); }
.a-dir-hero h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-family: var(--a-font-head); }
.a-dir-hero p { margin: 0; max-width: 640px; }
.a-dir-search { display: flex; gap: 8px; width: 100%; max-width: 680px; }
.a-dir-input { position: relative; flex: 1; }
.a-dir-input > svg { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--a-muted); pointer-events: none; }
.a-dir-input input { width: 100%; height: 46px; box-sizing: border-box; padding: 0 12px; padding-inline-start: 38px; border-radius: var(--a-radius-btn);
    border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; }
.a-dir-search > .a-btn { height: 46px; background: var(--a-surface); color: var(--a-accent); border-color: var(--a-surface); }
/* the platform's own font (owner 03/10: the system's Arabic face looked uneven): IBM Plex Sans Arabic, self-hosted
   (vendor/ibm-plex-sans-arabic-5.3.0, loaded by the platform's shells only); Chinese and the rest fall back */
html[data-platform] { --a-font: 'IBM Plex Sans Arabic', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif; }
html[data-platform] .a-dir-hero h1 { letter-spacing: 0; }
.a-suggest[hidden] { display: none; }   /* closed = gone (its display: flex hid the attribute: an empty bar under the search) */
.a-suggest { position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 40; display: flex; flex-direction: column; padding: 6px; max-height: 60vh; overflow: auto;
    border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); box-shadow: var(--a-shadow-lg); text-align: start; }
.a-suggest-head { padding: 6px 10px 2px; color: var(--a-muted); font-weight: 700; }
.a-suggest-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: var(--a-radius-sm); background: none; color: var(--a-text);
    font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.a-suggest-item:hover, .a-suggest-item:focus-visible { background: var(--a-surface-2); }
.a-suggest-item svg { width: 16px; height: 16px; color: var(--a-accent); flex: none; }
/* the filters (owner 11/10: «the filters need improving»): ONE compact panel under the search — the view and «Filtrar»
   on one row (the way in person / online is inside the window, the sort beside the results), the kinds in one row below,
   then only what is chosen, each a chip that removes itself */
.a-dir-bar { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; margin: 0; }
.a-dir-bar .a-seg { margin: 0; }
.a-dir-bar .a-dir-row { flex-wrap: nowrap; }
.a-dir-filter { flex: none; gap: 8px; }
.a-dir-types { margin: 0; flex-wrap: wrap; padding-top: 10px; border-top: var(--a-bw) solid var(--a-border); }
.a-dir-active { margin: 0; align-items: center; gap: 8px; }
.a-dir-active .a-active-chip svg:last-child { color: var(--a-muted); }
.a-dir-clear { margin-inline-start: 4px; }
.a-dir-head-tools { display: flex; align-items: center; gap: 8px; }
.a-dir-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--a-muted); }
.a-dir-sort svg { width: 16px; height: 16px; flex: none; }
.a-dir-sort select { min-width: 0; width: auto; max-width: 13rem; }
.a-dir-sort select { color: var(--a-text); }
/* the window's short choices: pills, one tap (the long lists stay drop-downs) */
.a-dir-pick { margin: 0; gap: 8px; }
.a-dir-pick .a-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-color: var(--a-control); background: var(--a-surface); color: var(--a-text); font: inherit; font-weight: 600; cursor: pointer; }
.a-dir-pick .a-chip svg { width: 15px; height: 15px; }
.a-dir-pick .a-chip.is-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
.a-spot-kind { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (max-width: 759px) {
    /* a phone: the view fills the row beside the button; the kinds and the chosen filters slide sideways, no scrollbar */
    .a-dir-bar .a-dir-row > .a-seg { display: flex; flex: 1; min-width: 0; }
    .a-dir-bar .a-dir-row > .a-seg > button { flex: 1; justify-content: center; padding-inline: 8px; }
    .a-dir-types, .a-dir-active { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .a-dir-types::-webkit-scrollbar, .a-dir-active::-webkit-scrollbar { display: none; }
    .a-dir-active > * { flex: none; }
    .a-dir-head-tools { flex: 1; justify-content: flex-end; }
}
@media (max-width: 400px) {
    /* the narrowest phones: «Filtrar» keeps its icon and count only (its name stays its label) */
    .a-dir-filter > span:not(.a-filter-count) { display: none; }
}
.a-dir-types .a-chip, .a-dir-day .a-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 12px; border-color: var(--a-control); background: var(--a-surface);
    color: var(--a-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.a-dir-types .a-dir-more { border-style: dashed; color: var(--a-accent); }
.a-dir-types .a-chip.is-active { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-ink); }
.a-dir-types .a-chip svg { width: 15px; height: 15px; }
.a-dir-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.a-dir-title, .a-dir-head h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.125rem; }
.a-dir-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.a-dir-head h2 { margin: 0; }
.a-dir-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
/* The featured businesses (owner 11/10: «they look like all the others», then «smaller, in the page's colours»): the
   SECTION stands out — a soft accent panel — and its cards are compact: a round picture beside the name, the rating and
   price, two specialties, the actions on one line, a small crown; a row to swipe on a phone */
.a-dir-spot { padding: 16px; border-radius: var(--a-radius-lg); background: var(--a-accent-soft); }
.a-dir-spot > .a-dir-title { margin-top: 0; }
.a-dir-spots { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.a-spot { position: relative; padding: 0; border: var(--a-bw) solid var(--a-border); box-shadow: var(--a-shadow); background: var(--a-surface); }
.a-spot:hover { border-color: var(--a-accent); }
.a-spot-badge { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    border-radius: var(--a-radius-pill); background: var(--a-accent-soft); color: var(--a-accent); font-weight: 800; font-size: 0.75rem; }
.a-spot-badge svg { width: 13px; height: 13px; }
.a-spot-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-width: 0; height: 100%; box-sizing: border-box; }
.a-spot-top { display: flex; align-items: center; gap: 12px; color: var(--a-text); text-decoration: none; padding-inline-end: 64px; }
.a-spot-avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
    background: var(--a-accent); color: var(--a-on-color, var(--a-surface)); font-family: var(--a-font-head); font-size: 1.375rem; font-weight: 800;
    box-shadow: 0 0 0 3px var(--a-surface), 0 0 0 5px var(--a-accent-soft); }
.a-spot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.a-spot-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-spot-id h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-spot-top:hover h3 { color: var(--a-accent); }
.a-spot-id small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.a-spot-id small svg { width: 14px; height: 14px; }
.a-spot-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.a-spot-actions .a-btn.a-primary { flex: 1; justify-content: center; min-height: 40px; }
@media (max-width: 719px) {
    .a-dir-spot { margin-inline: -16px; border-radius: 0; padding-inline: 16px; }
    .a-dir-spots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-block-end: 4px; scrollbar-width: none; }
    .a-spot { flex: 0 0 82%; scroll-snap-align: start; }
}
.a-dir-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0; overflow: hidden; }
.a-dir-link { display: block; color: var(--a-text); text-decoration: none; }
.a-dir-cover { position: relative; height: 110px; background: var(--a-surface-2); }
/* no cover picture: a soft band of the brand's colour, lower (never an empty grey block) */
.a-dir-cover:not(:has(> img:not(.a-dir-logo))) { height: 84px; background: linear-gradient(135deg, color-mix(in oklab, var(--a-accent) 22%, var(--a-surface)), color-mix(in oklab, var(--a-accent) 6%, var(--a-surface))); }
.a-dir-cover > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.a-dir-logo { position: absolute; bottom: -22px; inset-inline-start: 14px; width: 52px; height: 52px; border-radius: var(--a-radius-sm); object-fit: cover;
    display: grid; place-items: center; background: var(--a-accent); color: var(--a-accent-ink); font-weight: 800; font-size: 1.25rem; border: 3px solid var(--a-surface); }
.a-dir-tier { position: absolute; top: 10px; inset-inline-end: 10px; }
.a-dir-body { display: flex; flex-direction: column; gap: 6px; padding: 28px 14px 6px; }
.a-dir-body.a-dir-pro { flex-direction: row; gap: 12px; padding-top: 14px; padding-inline-end: 60px; }
.a-dir-body h3 { margin: 0; font-size: 1.0625rem; }
.a-dir-body p { margin: 0; display: flex; align-items: center; gap: 4px; }
.a-dir-body p svg { width: 14px; height: 14px; flex: none; }
.a-dir-body .a-chips { margin: 0; }
.a-dir-body > .a-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; }
.a-dir-body > .a-chip svg { width: 13px; height: 13px; }
.a-dir-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
    background: var(--a-accent-soft); color: var(--a-accent); font-weight: 800; font-size: 1.25rem; }
.a-dir-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.a-dir-rating { display: inline-flex; align-items: center; gap: 4px; }
.a-dir-rating svg { width: 15px; height: 15px; color: var(--a-warn); fill: currentColor; }
.a-dir-actions { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; gap: 6px; }
.a-dir-pro ~ .a-dir-actions, .a-dir-link:has(.a-dir-pro) + .a-dir-actions { inset-inline-start: auto; inset-inline-end: 8px; }
.a-dir-actions .a-icon-btn { background: var(--a-surface); }
.a-fav.is-on svg { color: var(--a-bad); fill: currentColor; }
.a-dir-slots { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 14px; border-top: var(--a-bw) dashed var(--a-border); }
.a-dir-day { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-dir-day > span { min-width: 76px; font-size: 0.8125rem; color: var(--a-muted); }
.a-dir-day .a-chip { padding: 4px 10px; font-variant-numeric: tabular-nums; }
.a-dir-day .a-chip:hover { border-color: var(--a-accent); color: var(--a-accent); }
.a-dir-noslots { padding: 0 14px 14px; margin: 0; }
.a-dir-card > .a-state { margin: 0 14px 14px; }
.a-dir-map { min-height: 340px; margin-bottom: 14px; border-radius: var(--a-radius); overflow: hidden; }
.a-dir-map .leaflet-container { height: 380px; }
.a-dir-filters { grid-template-columns: 1fr 1fr; }
@media (max-width: 559px) { .a-dir-filters { grid-template-columns: 1fr; } }
.a-dir-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.a-dir-cta h2, .a-dir-cta p { margin: 0; }
.a-qa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: start; font: inherit; color: var(--a-text); cursor: pointer; }
.a-qa:hover { border-color: var(--a-accent); }
.a-qa span { display: inline-flex; align-items: center; gap: 5px; }
.a-art { text-decoration: none; color: var(--a-text); }
.a-art-cover { height: 140px; width: 100%; object-fit: cover; display: grid; place-items: center; background: var(--a-surface-2); color: var(--a-muted); }
.a-art-cover svg { width: 36px; height: 36px; }
.a-article { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; }
.a-article h1 { margin: 0; font-family: var(--a-font-head); }
.a-article-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--a-radius-sm); }
.a-article-body p { line-height: 1.7; margin: 0 0 12px; }

/* «My account»: the parts spaced like every page (owner 02/10); the customer's picture and its window. */
.a-account { display: flex; flex-direction: column; gap: 16px; }
.a-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--a-accent); color: var(--a-accent-ink);
    font-weight: 700; font-size: 1rem; }
.a-avatar img { width: 100%; height: 100%; object-fit: cover; }
.a-avatar.is-preset { background: linear-gradient(135deg, var(--k-fill), var(--k-fill-2, var(--k-fill))); color: var(--k-on); }
.a-avatar svg { width: 55%; height: 55%; }
.a-me-pic { position: relative; flex: none; }
.a-me-edit { position: absolute; bottom: -4px; inset-inline-end: -6px; width: 30px; height: 30px; border-radius: 50%; background: var(--a-surface); }
.a-me-edit svg { width: 15px; height: 15px; }
.a-avatar-pick { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.a-avatar-preview { flex: none; }
.a-avatar-pick > .a-stack { flex: 1 1 260px; }
.a-avatar-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.a-avatar-icons button { height: 42px; border-radius: var(--a-radius-sm); border: var(--a-bw) solid var(--a-control); background: var(--a-surface); color: var(--a-text); cursor: pointer; }
.a-avatar-icons button.is-active { border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); }
.a-avatar-icons svg { width: 20px; height: 20px; }
.a-avatar-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.a-avatar-colours button { width: 36px; height: 36px; border-radius: 50%; border: var(--a-bw) solid var(--a-control); cursor: pointer;
    background: linear-gradient(135deg, var(--k-fill), var(--k-fill-2, var(--k-fill))); }
.a-avatar-colours button.is-active { outline: 3px solid var(--a-accent); outline-offset: 2px; }
.a-hr { border: 0; border-top: var(--a-bw) solid var(--a-border); margin: 4px 0; width: 100%; }
.a-site-me .a-avatar { font-size: 0.75rem; }

/* A store's page and a professional's in the platform's directory (frontend/site/platform/business.js; tokens only). */
.a-biz { display: flex; flex-direction: column; gap: 14px; }
.a-biz-back { align-self: flex-start; }
.a-biz-head { padding: 0; overflow: hidden; }
.a-biz-cover { height: 150px; }
.a-biz-pro .a-biz-head-body { padding-top: 18px; }
.a-biz-head-body { display: flex; flex-direction: column; gap: 10px; padding: 30px 18px 18px; }
.a-biz-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.a-biz-title h1 { margin: 6px 0 2px; font-family: var(--a-font-head); font-size: clamp(1.375rem, 3vw, 1.875rem); }
.a-biz-title p { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.a-biz-title p svg { width: 14px; height: 14px; }
.a-biz-title .a-dir-meta { justify-content: flex-start; margin-top: 6px; }
.a-biz-title .a-dir-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.a-biz-who { display: flex; align-items: center; gap: 14px; }
.a-biz-who .a-dir-avatar { width: 72px; height: 72px; font-size: 1.75rem; }
.a-biz-head-body > p { margin: 0; line-height: 1.6; }
.a-biz-services { display: flex; flex-direction: column; }
.a-biz-service { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 2px; color: var(--a-text); text-decoration: none;
    border-bottom: var(--a-bw) dashed var(--a-border); }
.a-biz-service:last-child { border-bottom: 0; }
.a-biz-service > small { grid-column: 1; display: inline-flex; align-items: center; gap: 4px; }
.a-biz-service > small svg { width: 13px; height: 13px; }
.a-biz-service > strong:last-child, .a-biz-tiers { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: end; }
a.a-biz-service:hover strong:first-child { color: var(--a-accent); }
.a-biz-tiers { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.a-biz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.a-biz-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--a-radius-sm); }
.a-biz-reply { margin: 4px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--a-accent); background: var(--a-surface-2); border-radius: var(--a-radius-sm); }
.a-biz-contact, .a-biz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.a-biz-contact li { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
.a-biz-contact li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--a-accent); }
.a-biz-contact a, .a-biz-list a { color: var(--a-text); }
.a-biz-list p { margin: 2px 0 0; }
.a-biz-cal { display: flex; flex-direction: column; gap: 8px; }
.a-biz-dims { display: flex; flex-direction: column; gap: 6px; }
.a-biz-dims > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 8px; }
.a-biz-bar { height: 8px; border-radius: 4px; background: var(--a-surface-2); overflow: hidden; }
.a-biz-bar span { display: block; height: 100%; background: var(--a-accent); }
.a-biz-faq summary { cursor: pointer; font-weight: 600; }
.a-biz-faq p { margin: 6px 0 0; }
@media (max-width: 719px) {
    .a-biz-title { flex-direction: row; }
    .a-biz-dims > div { grid-template-columns: 7rem minmax(0, 1fr) 2.5rem; }
}

/* The platform's sign-in (site/platform/signin.js): the other way in, and the choice of one of the owner's stores. */
.a-signin-alt { margin: 0; text-align: center; }
.a-plat-stores { display: flex; flex-direction: column; gap: 8px; }
.a-plat-store { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-control);
    background: var(--a-surface); color: var(--a-text); text-decoration: none; }
.a-plat-store:hover, .a-plat-store:focus-visible { border-color: var(--a-accent); }
.a-plat-store > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.a-plat-store svg { width: 18px; height: 18px; flex: none; color: var(--a-accent); }

/* The platform's landing and plans (site/platform/plans.js). */
.a-plat-page { display: flex; flex-direction: column; gap: 18px; }
.a-plat-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; text-align: center; border-radius: var(--a-radius-lg);
    background: linear-gradient(135deg, var(--a-accent-fill, var(--a-accent)), var(--a-accent-fill-2, var(--a-accent))); color: var(--a-accent-ink); }
.a-plat-hero h1 { margin: 0; font-family: var(--a-font-head); font-size: clamp(1.5rem, 4vw, 2.375rem); max-width: 820px; }
.a-plat-hero p { margin: 0; max-width: 680px; }
.a-plat-hero .a-toolbar { justify-content: center; }
.a-plat-hero .a-btn:not(.a-primary) { background: transparent; color: var(--a-accent-ink); border-color: var(--a-accent-ink); }
/* the hero's main action stands out (owner 11/10: dark on dark it was hard to see): a white fill, the accent's text */
.a-plat-hero .a-btn.a-primary { background: var(--a-surface); color: var(--a-accent); border-color: var(--a-surface); font-weight: 800; box-shadow: var(--a-shadow); }
/* «Find a business» right under the hero: a real search and every kind of business (owner 11/10) */
.a-plat-find { display: grid; gap: 14px; border-top: 4px solid var(--a-accent); }
.a-plat-find h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.a-plat-find-row { display: flex; gap: 10px; }
/* the input itself carries the edge (the contrast rule measures the field), the icon sits over it */
.a-plat-find-input { position: relative; flex: 1; display: block; }
.a-plat-find-input > svg { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); width: 20px; height: 20px; color: var(--a-muted); pointer-events: none; }
.a-plat-find-input input { width: 100%; height: 52px; box-sizing: border-box; padding: 0 14px; padding-inline-start: 44px; border-radius: var(--a-radius); border: var(--a-bw) solid var(--a-control);
    background: var(--a-surface); color: var(--a-text); font: inherit; font-size: 1.0625rem; }
.a-plat-find-input input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); }
.a-plat-find-row .a-btn { min-height: 52px; padding-inline: 22px; font-size: 1rem; }
.a-plat-kinds { gap: 8px; }
.a-plat-kinds .a-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--a-text); }
.a-plat-kinds .a-chip:hover { border-color: var(--a-accent); color: var(--a-accent); }
@media (max-width: 719px) {
    .a-plat-find-row { flex-direction: column; }
    .a-plat-find-row .a-btn { justify-content: center; }
    .a-plat-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
    .a-plat-kinds .a-chip { flex: none; }
}
.a-plat-hero .a-pill { background: var(--a-surface); color: var(--a-accent); }
.a-plat-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.a-plat-features li, .a-plan-list li { display: flex; align-items: flex-start; gap: 8px; }
.a-plat-features svg, .a-plan-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--a-good); }
.a-plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.a-plan { display: flex; flex-direction: column; gap: 12px; }
.a-plan.is-featured { border-color: var(--a-accent); box-shadow: var(--a-shadow-lg); }
.a-plan header h3 { margin: 0; font-size: 1.25rem; }
.a-plan header p { margin: 2px 0 0; }
.a-plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.a-plan-price strong { font-size: 2rem; font-variant-numeric: tabular-nums; }
.a-plan > .a-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; }
.a-plan > .a-pill svg { width: 14px; height: 14px; }
.a-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.a-plan-list li.is-off { color: var(--a-muted); }
.a-plan-list li.is-off svg { color: var(--a-muted); }
.a-plat-ready { align-items: center; text-align: center; }
.a-plat-ready h2, .a-plat-ready p { margin: 0; }
.a-plat-ready svg.a-book-big { width: 48px; height: 48px; color: var(--a-good); }

/* The setup wizard (site/platform/onboarding.js). */
.a-ob { display: flex; flex-direction: column; gap: 14px; max-width: 860px; margin: 0 auto; width: 100%; }
.a-ob-step { display: flex; flex-direction: column; gap: 12px; }
.a-ob-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.a-ob-row .a-field { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; }
.a-ob-row input { width: 100%; box-sizing: border-box; }
.a-ob-hours th { text-align: start; }
.a-ob-times { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-ob-review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.a-ob-review li { display: flex; align-items: center; gap: 8px; }
.a-ob-review svg { width: 18px; height: 18px; flex: none; color: var(--a-good); }


/* ── The legal pages and «contact», a store's and the platform's (docs/PUBLIC_SITE_PLAN.md §5d) ── */
.a-legal-page { max-width: 860px; margin-inline: auto; }
.a-legal { padding: clamp(18px, 4vw, 36px); line-height: 1.65; }
.a-legal > .a-state { margin: 0 0 18px; }
.a-legal h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3.5vw, 2rem); font-family: var(--a-font-head); font-weight: var(--a-head-weight); }
.a-legal h2 { margin: 28px 0 8px; padding-top: 18px; border-top: var(--a-bw) solid var(--a-border); font-size: 1.1875rem; font-family: var(--a-font-head); font-weight: var(--a-head-weight); }
.a-legal h3 { margin: 18px 0 6px; font-size: 1.0625rem; }
.a-legal p, .a-legal li { color: var(--a-text); }
.a-legal ul, .a-legal ol { padding-inline-start: 1.25em; }
.a-legal li + li { margin-top: 6px; }
.a-legal a { color: var(--a-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.a-legal em { color: var(--a-muted); }
.a-legal table { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: .9375rem; }
.a-legal th, .a-legal td { padding: 9px 10px; text-align: start; vertical-align: top; border-bottom: var(--a-bw) solid var(--a-border); }
.a-legal thead th { background: var(--a-surface-2); font-weight: 700; }
.a-legal code { font-family: ui-monospace, Consolas, monospace; font-size: .875em; padding: 1px 5px; border-radius: var(--a-radius-sm); background: var(--a-surface-2); overflow-wrap: anywhere; }
@media (max-width: 559px) {
    /* a phone: each table row becomes a block, its cells one under the other */
    .a-legal table, .a-legal tbody, .a-legal tr, .a-legal td { display: block; width: auto; }
    .a-legal thead { display: none; }
    .a-legal tr { padding: 8px 0; border-bottom: var(--a-bw) solid var(--a-border); }
    .a-legal td { padding: 2px 0; border: 0; }
    .a-legal td:first-child { font-weight: 600; }
}
.a-contact-page { display: flex; flex-direction: column; gap: 14px; }
.a-contact-page > h1, .a-contact-page > p { margin: 0; }
.a-contact-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.a-contact-grid .a-card { display: flex; flex-direction: column; gap: 10px; }
.a-contact-grid .a-card p { margin: 0; }
.a-contact-way { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--a-bw) solid var(--a-control); border-radius: var(--a-radius-btn); color: var(--a-text); text-decoration: none; }
.a-contact-way:hover, .a-contact-way:focus-visible { border-color: var(--a-accent); }
.a-contact-way > svg { width: 20px; height: 20px; flex: none; color: var(--a-accent); }
.a-contact-way > span { display: flex; flex-direction: column; min-width: 0; }
.a-contact-way small { color: var(--a-muted); overflow-wrap: anywhere; }
.a-contact-actions { justify-content: center; }
.a-contact-owner .a-dl { margin-top: 4px; }
.a-legal-box { margin: 14px 0; padding: 14px 16px; border: var(--a-bw) solid var(--a-border); border-radius: var(--a-radius); background: var(--a-surface-2); }
.a-legal-box h4 { margin: 0 0 6px; }
.a-legal-box p { margin: 0 0 10px; }

/* «Verify an invoice» (site/verify.js) */
.a-verify-page { display: flex; flex-direction: column; gap: 16px; }
.a-verify-code { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.a-verify-code .a-field { flex: 1 1 260px; max-width: 420px; }
.a-verify-code input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.a-verify-verdict { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--a-radius); border: var(--a-bw) solid currentColor; }
.a-verify-verdict.is-good { color: var(--a-good); background: var(--a-good-soft); }
.a-verify-verdict.is-bad { color: var(--a-bad); background: var(--a-bad-soft); }
.a-verify-verdict svg { flex: none; width: 34px; height: 34px; }
.a-verify-verdict strong { display: block; font-size: 1.125rem; }
.a-verify-verdict p { margin: 4px 0 0; color: var(--a-text); }
.a-verify-table { width: 100%; border-collapse: collapse; }
.a-verify-table th, .a-verify-table td { padding: 9px 4px; border-bottom: var(--a-bw) solid var(--a-border); text-align: start; vertical-align: top; }
.a-verify-table th { width: 38%; color: var(--a-muted); font-weight: 600; }
.a-verify-hash { font-size: .8125rem; word-break: break-all; }
.a-verify-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border: 2px dashed var(--a-control); border-radius: var(--a-radius);
    background: var(--a-surface-2); text-align: center; cursor: pointer; }
.a-verify-drop.is-over, .a-verify-drop:focus-within { border-color: var(--a-accent); background: var(--a-accent-soft); }
.a-verify-drop svg { width: 30px; height: 30px; color: var(--a-accent); }
.a-verify-drop small { color: var(--a-muted); }

/* The first visit's language chooser (owner 08/10, site/languages.js): the website's languages, each in its own name */
.a-lang-choose { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.a-lang-choice { justify-content: center; min-height: 52px; font-size: 1.05rem; }
.a-lang-choice.is-active { border-color: var(--a-accent); background: var(--a-accent-soft); color: var(--a-accent); font-weight: 600; }

/* «My account»: his account's deletion pending — the day and «cancel the deletion» (13/10); the button under the text on a phone */
.a-del-pending { flex-wrap: wrap; }
.a-del-pending > span { flex: 1 1 220px; min-width: 0; }