/* RobyShop: mobile first. No CSS framework, to keep the download small. The brand colours (titles, text, links,
   accent) are set on the admin page and override the variables below from an inline style in the page head. */

:root {
    --brand: #00AEED;
    --brand-strong: #0077A6;      /* filled buttons with white text: #00AEED is too light (2.5:1) */
    --brand-soft: #E5F6FD;
    --ink: #464646;
    --ink-strong: #1F2427;
    --muted: #6B7378;
    --line: #E3E7EA;
    --surface: #FFFFFF;
    --page: #F5F7F8;
    --ok: #1E7B45;
    --ok-soft: #E3F4EA;
    --warn: #8A5A00;
    --warn-soft: #FFF3D6;
    --error: #B42318;
    --error-soft: #FDECEA;
    --radius: 12px;
    --shadow: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --title: var(--ink-strong);
    --link: var(--brand-strong);
    --on-accent: #FFFFFF;         /* text on accent-coloured buttons and badges */
    color-scheme: light;
}

/* Dark theme: follows the device unless the customer chose light or dark (data-theme on <html>, set by the server
   from the theme cookie and switched by js/theme.js). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand-strong: #3BC2F5;
        --brand-soft: #0E2F3D;
        --ink: #D7DCDF;
        --ink-strong: #F2F4F5;
        --muted: #9AA3A8;
        --line: #2C3438;
        --surface: #1A2023;
        --page: #121618;
        --ok: #6FD39A;
        --ok-soft: #12301F;
        --warn: #F5C46B;
        --warn-soft: #33270C;
        --error: #F59A92;
        --error-soft: #3A1714;
        --on-accent: #06212C;
        color-scheme: dark;
    }

    :root:not([data-theme="light"]) .show-in-light { display: none; }
    :root:not([data-theme="light"]) .show-in-dark { display: inline-flex; }
}

:root[data-theme="dark"] {
    --brand-strong: #3BC2F5;
    --brand-soft: #0E2F3D;
    --ink: #D7DCDF;
    --ink-strong: #F2F4F5;
    --muted: #9AA3A8;
    --line: #2C3438;
    --surface: #1A2023;
    --page: #121618;
    --ok: #6FD39A;
    --ok-soft: #12301F;
    --warn: #F5C46B;
    --warn-soft: #33270C;
    --error: #F59A92;
    --error-soft: #3A1714;
    --on-accent: #06212C;
    color-scheme: dark;
}

:root[data-theme="dark"] .show-in-light { display: none; }
:root[data-theme="dark"] .show-in-dark { display: inline-flex; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--page);
    /* Header, page, footer: the page fills the window so the footer sits at the bottom even on short pages. */
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}

h1, h2, h3 { color: var(--title); line-height: 1.2; }
/* Product names are headings too, but stay in the text colour: a grid of brand-coloured names is too loud. */
.card-title, .parcel-title, .cart-line h2, .dialog-body h2 { color: var(--ink-strong); }
h1:focus { outline: none; }  /* focused after navigation for screen readers, no visible ring needed */
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }

.muted { color: var(--muted); font-size: .9rem; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-strong); font-weight: 600; text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--brand); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 40px; }
.btn-delete { color: var(--muted); }
.btn-delete:not(.btn-icon) { color: var(--error); }
.pos-actions .btn-icon, .row-actions .btn-icon { width: 32px; padding: 0; }
.btn-delete:hover:not(:disabled) { color: var(--error); border-color: var(--error); background: var(--error-soft); }
.btn-link { background: none; border: 0; padding: 4px; color: var(--link); cursor: pointer; text-decoration: underline; }
.link { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font-weight: inherit; }
.link:hover { color: var(--brand-strong); text-decoration: underline; }

.badge {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--brand-strong); color: var(--on-accent); font-size: .75rem; font-weight: 700;
}

.alert { background: var(--error-soft); color: var(--error); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink-strong); text-decoration: none; font-size: 1.15rem; }
/* The logo sits on a white plate so logos made for white backgrounds also work in the dark theme. */
.brand-logo { display: block; height: 40px; width: auto; background: #FFFFFF; border-radius: 8px; padding: 0 2px; }
.topnav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.topnav-link, .cart-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-weight: 600;
}
.topnav-link.active, .cart-link.active { background: var(--brand-soft); color: var(--brand-strong); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.who { font-weight: 700; color: var(--ink-strong); }

/* Account menu (language, theme, sign out) */
.user-menu { position: relative; }
.user-menu summary {
    list-style: none; cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 6px;
    padding: 0 8px 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong);
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { border-color: var(--brand); }
.user-menu .chevron { color: var(--muted); transition: transform .15s ease; }
.user-menu[open] .chevron { transform: rotate(180deg); }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; padding: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgb(16 24 40 / .16), 0 2px 6px rgb(16 24 40 / .08);
    display: grid; gap: 4px; animation: menu-in .14s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-head { margin: 0 0 4px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line); display: grid; }
.menu-head strong { color: var(--ink-strong); }
.menu-head span { color: var(--muted); font-size: .85rem; }
.menu-label { margin: 4px 8px 2px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.menu-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 4px 6px; }
.menu-langs a {
    display: grid; place-items: center; min-height: 34px; border-radius: 8px; border: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: .85rem;
}
.menu-langs a:hover { border-color: var(--brand); }
.menu-langs a.current { background: var(--brand-soft); border-color: var(--brand-strong); color: var(--brand-strong); }
.menu-item {
    width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px;
    background: none; color: var(--ink-strong); font-weight: 600; text-align: left; cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--page); }
.menu-signout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-signout .menu-item { color: var(--error); }
/* Shown according to the current theme (the theme rules at the top swap them). */
.show-in-light, .show-in-dark { align-items: center; gap: 10px; }
.show-in-light { display: inline-flex; }
.show-in-dark { display: none; }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } .user-menu .chevron { transition: none; } }
main { flex: 1 0 auto; }
body:has(.site-footer) { --footer-height: 32px; }  /* room the sticky sidebar leaves for the footer */
.site-footer {
    position: sticky; bottom: 0; z-index: 20; border-top: 1px solid var(--line);
    padding: 6px 16px; padding-bottom: max(6px, env(safe-area-inset-bottom)); font-size: .8rem; text-align: center;
}
.demo-ribbon { background: var(--warn-soft); color: var(--warn); }

@media (max-width: 640px) {
    .cart-label, .who { display: none; }
    .brand span { display: none; }
    /* Logo and buttons share the first row (the logo shrinks, the buttons never wrap under it); the webshop groups
       get a row of their own below, scrolling sideways when they do not fit. */
    .topbar-inner { flex-wrap: wrap; gap: 4px 8px; padding-left: 12px; padding-right: 12px; }
    .brand { flex: 1 1 0; min-width: 0; }
    .brand-logo { height: 34px; max-width: 100%; object-fit: contain; object-position: left center; }
    .topbar-end { flex: none; gap: 4px; position: relative; }
    .topnav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
    .topnav-link { flex: none; min-height: 36px; padding: 0 10px; }
    .cart-link { padding: 0 8px; }
    .user-menu summary { padding: 0 8px; }
    .user-menu:not(.departure-menu) .chevron { display: none; }
    /* Drop-downs line up with the right edge of the buttons, so the departure days never open off the left edge. */
    .departure-menu { position: static; }
    .menu-panel { max-width: calc(100vw - 24px); }
}
@media (max-width: 380px) {
    .departure-menu summary svg:first-child { display: none; }  /* the date alone is enough on the smallest phones */
}
/* iPhones zoom the page in on a text field under 16px; keep fields at 16px on touch screens. */
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
}

/* Pages */
.page { padding: 16px; }
@media (min-width: 1024px) { .page { padding: 16px 20px; } }  /* same side margins as the stock page */
.page.narrow { max-width: 640px; margin: 0 auto; }  /* the shop itself uses the full width */
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 8px 0 16px; }
.spinner {
    width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* First load: placeholder tiles appear one by one (every .2 s, from --i), each filling its own progress bar. */
.skeleton-list { display: grid; gap: 10px; }
.sk-line, .sk-block {
    border-radius: 6px; background: linear-gradient(90deg, var(--line), var(--page), var(--line)); background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
.sk-line { height: 12px; }
.sk-block { height: 36px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-filters { display: grid; gap: 14px; align-content: start; }
@media (max-width: 1023px) { .skeleton-filters { display: none; } }
.sk-search { flex: 1; height: 44px; border-radius: 12px; }
.sk-card { animation: sk-in .25s ease-out both; animation-delay: calc(var(--i) * .2s); }
.sk-card.card { box-shadow: var(--shadow); }
.sk-row { display: flex; gap: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.sk-photo { aspect-ratio: 16 / 10; background: var(--brand-soft); }
.sk-row .sk-photo { flex: none; width: 72px; height: 72px; aspect-ratio: auto; border-radius: 10px; }
.sk-body { display: grid; gap: 10px; padding: 12px 14px 14px; flex: 1; min-width: 0; }
.sk-row .sk-body { padding: 4px 0; }
.sk-short { width: 40%; }
.sk-progress { height: 6px; margin: 6px 0; border-radius: 999px; background: var(--line); overflow: hidden; }
.sk-progress span {
    display: block; height: 100%; border-radius: inherit; background: var(--brand); transform-origin: left;
    animation: sk-fill .45s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * .2s + .1s);
}
.sk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-price { width: 35%; height: 18px; }
.sk-button { width: 44px; border-radius: 10px; }
@keyframes sk-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sk-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .spinner, .sk-line, .sk-block, .sk-card { animation: none; }
    .sk-progress span { animation: sk-fill 1s linear both; animation-delay: 0s; }
}

/* Login */
.login { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 24px 16px; }
.login-card {
    width: 100%; max-width: 400px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow);
    padding: 28px 24px; text-align: center;
}
.login-card h1 { font-size: 1.8rem; margin: 8px 0 4px; }
.login-logo { display: block; height: 96px; width: auto; max-width: 100%; margin: 0 auto; background: #FFFFFF; border-radius: 12px; padding: 4px 10px; }
.tagline { color: var(--muted); margin: 0 0 20px; }
.login-form { display: grid; gap: 6px; text-align: left; }
.login-form label { font-weight: 600; font-size: .9rem; margin-top: 8px; }
.login-form input {
    min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--page);
}
.login-form input:focus { border-color: var(--brand); }
.login-form .btn { margin-top: 16px; min-height: 48px; }
.demo-note { margin: 16px 0 0; background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 8px 10px; font-size: .85rem; }

/* Catalogue layout: filters slide in on phones, a sidebar from 1024 px. */
.shop { display: grid; grid-template-columns: 1fr; }
.results { padding: 12px 16px 96px; min-width: 0; }
.filters {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw); z-index: 40; background: var(--surface);
    padding: 16px 20px; overflow-y: auto; transform: translateX(105%); transition: transform .2s ease; box-shadow: var(--shadow);
}
.filters-open .filters { transform: none; }
.filters-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 30; cursor: pointer; }
.filters-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.filters-updated { margin: 8px 0 0; color: var(--muted); font-size: .8rem; }
.filters-head h2 { font-size: 1.05rem; margin: 0 auto 0 0; text-transform: uppercase; letter-spacing: .03em; }

@media (min-width: 1024px) {
    .shop { grid-template-columns: 290px 1fr; gap: 20px; padding: 16px 20px 0; }
    .filters {
        position: sticky; top: 73px; align-self: start; max-height: calc(100vh - 89px - var(--footer-height, 0px)); transform: none; transition: none;
        width: auto; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow);
        /* A brand-coloured strip on top (accent into title colour, so it follows the admin's colours). A background
           layer rather than a border, so the strip stays straight inside the rounded corners. */
        padding-top: 22px;
        background: linear-gradient(90deg, var(--brand-strong), var(--title)) top / 100% 6px no-repeat, var(--surface);
    }
    /* Slim scrollbar on a clear track that starts below the strip and ends above the bottom corner,
       so it doesn't paint over the rounded edges. */
    .filters::-webkit-scrollbar { width: 8px; }
    .filters::-webkit-scrollbar-track { background: transparent; margin: 14px 0 var(--radius); }
    .filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid var(--surface); }
    .filters::-webkit-scrollbar-thumb:hover { background: var(--muted); }
    .filters-backdrop, .filters-close, .filters-toggle { display: none !important; }
    .results { padding: 0 0 48px; }
}

/* Filter sections */
.facet-section { border-bottom: 1px solid var(--line); padding: 10px 0; }
.facet-section:last-child { border-bottom: 0; }
.facet-section summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; color: var(--ink-strong); padding: 4px 0; font-size: .95rem;
}
.facet-section summary::-webkit-details-marker { display: none; }
.facet-section summary::after {
    content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0;
    transform: rotate(-45deg); margin: 4px 4px 0 0; transition: transform .15s ease;
}
.facet-section:not([open]) summary::after { transform: rotate(135deg); margin-top: -4px; }
.facet-empty { margin: 4px 0; color: var(--muted); }
.check-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.check-list li { position: relative; min-width: 0; }
.check-list input { position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0; accent-color: var(--brand-strong); cursor: pointer; }
.check-list label {
    display: flex; min-width: 0; align-items: center; gap: 8px; min-height: 30px; padding: 3px 4px 3px 30px; border-radius: 6px;
    cursor: pointer; font-size: .9rem;
}
.check-list label:hover { background: var(--brand-soft); }
.check-list label.none { color: var(--muted); }
.check-list input:checked + label { color: var(--ink-strong); font-weight: 600; }
.check-list input:disabled + label { cursor: default; }
.check-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-count { font-size: .75rem; color: var(--muted); font-weight: 400; flex-shrink: 0; white-space: nowrap; }
.facet-more { font-size: .85rem; margin: 4px 0 0 26px; }
.facet-search {
    display: block; width: 100%; min-height: 32px; margin-top: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: .85rem;
}

.swatches { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { display: block; cursor: pointer; border-radius: 50%; padding: 3px; border: 2px solid transparent; }
.swatch { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.swatches label:hover { border-color: var(--line); }
.swatches input:checked + label { border-color: var(--brand-strong); }
.swatches input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 1px; }
.swatch-names { margin: 6px 0 0 4px; font-size: .8rem; color: var(--muted); }

.length-bands { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.length-bands label {
    display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 0 6px;
    border: 1px solid var(--line); border-radius: 6px; font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.length-bands label:hover { border-color: var(--brand); }
.length-bands input:checked + label { background: var(--brand-soft); border-color: var(--brand-strong); color: var(--brand-strong); font-weight: 700; }
.length-bands input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 1px; }
.length-range { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.length-range input {
    width: 0; flex: 1; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}

/* Results header and toolbar */
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 4px 0 10px; }
.results-head h1 { margin: 0; font-size: 1.35rem; }
.toolbar .loading-more {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px;
    border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: .85rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; position: relative;
}
/* A light sweep across the pill while the other suppliers load. */
.toolbar .loading-more::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent); animation: loading-sweep 1.8s ease-in-out infinite;
}
.loading-dots { display: inline-flex; gap: 4px; }
.loading-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: loading-dot 1.2s ease-in-out infinite; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes loading-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes loading-sweep { to { transform: translateX(100%); } }
/* With the filters as a sidebar the stock list loader there says it: the pill only shows on phones and tablets. */
@media (min-width: 1024px) { .toolbar .loading-more { display: none; } }
.stock-loading { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); }
.stock-loading-head .spinner { flex: none; width: 16px; height: 16px; border-width: 2px; }
.stock-loading-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .8rem; font-weight: 700; color: var(--brand-strong); }
.stock-loading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stock-load-row { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--ink-strong); }
.stock-load-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-load-count { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-load.is-done .stock-load-count { color: var(--ok); font-weight: 700; }
.stock-load.is-waiting .stock-load-name { color: var(--muted); }
.stock-load.is-failed .stock-load-count { color: var(--error); }
.stock-load-bar { position: relative; height: 6px; margin-top: 5px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.stock-load-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--brand); transition: width .2s ease-out; }
.stock-load.is-done .stock-load-bar > span { width: 100%; background: var(--ok); }
.stock-load.is-failed .stock-load-bar > span { width: 100%; background: var(--error); }
.stock-load-bar.indeterminate > span { width: 35%; animation: stock-load-slide 1.1s ease-in-out infinite; }
@keyframes stock-load-slide { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .stock-load-bar.indeterminate > span { animation: none; width: 100%; opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .loading-dots i, .toolbar .loading-more::after { animation: none; } .loading-dots i { opacity: .7; } }
:root[data-theme="dark"] .toolbar .loading-more::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toolbar .loading-more::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); } }
.source-first { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--ok-soft); color: var(--ok); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
@media (min-width: 1024px) { .results-head h1 { font-size: 1.75rem; } }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: 57px; z-index: 10; background: var(--page); padding: 4px 0 8px; }
/* Under the two-row phone header a sticky search bar would cover a quarter of the screen (and it slid under the header). */
@media (max-width: 640px) { .toolbar { position: static; } }
.search { flex: 1 1 260px; position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; color: var(--muted); }
.search input {
    width: 100%; min-height: 44px; padding: 0 12px 0 40px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search input:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
/* Thin brand border + soft halo instead of the global 3px focus outline. */
.search input:focus, .search input:focus-visible {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.sort { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); }
.sort select {
    min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
}
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.view-switch button { width: 42px; min-height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.view-switch button + button { border-left: 1px solid var(--line); }
.view-switch button.selected { background: var(--brand-soft); color: var(--brand-strong); }
.result-info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; margin: 0 0 8px; }
.empty { padding: 32px 0; text-align: center; color: var(--muted); }
.grid-end { display: flex; justify-content: center; padding: 16px 0; min-height: 1px; }

/* Product tiles */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.card {
    position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: 10px;
    box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.card-photo { position: relative; display: block; padding: 0; border: 0; background: var(--brand-soft); cursor: zoom-in; }
.card .photo-card { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
.card-flag {
    position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 6px; font-size: .8rem; font-weight: 700;
    background: rgb(31 36 39 / .78); color: #fff; letter-spacing: .02em;
}
.card-flag.sold-out { background: var(--error); }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; flex: 1; }
.card-title { margin: 0; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); min-width: 0; }
.country {
    flex: none; font-size: .65rem; font-weight: 800; letter-spacing: .03em; padding: 0 4px; border-radius: 3px;
    border: 1px solid var(--line); color: var(--ink);
}
.card-grower { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pack { flex: none; color: var(--ink-strong); font-weight: 600; }
.card-facts {
    list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; color: var(--muted);
}
.card-facts li { min-height: 24px; padding: 3px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-facts li + li { border-left: 1px solid var(--line); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.card-foot .price { font-size: 1.1rem; }
.card-add {
    min-width: 42px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--page); color: var(--ink-strong);
    font-size: 1.35rem; font-weight: 500; cursor: pointer; line-height: 1;
}
.card-add:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-strong); }
.card-add.has-line { background: var(--brand-strong); color: var(--on-accent); font-size: .9rem; font-weight: 700; }
.card-add:disabled { opacity: .4; cursor: not-allowed; }
.card-qty {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--surface); padding: 10px 12px 12px;
    border-top: 2px solid var(--brand); box-shadow: 0 -6px 16px rgb(16 24 40 / .12); display: grid; gap: 8px;
}
.card-qty-head { display: flex; align-items: center; justify-content: space-between; }
.card-qty .dialog-close { position: static; width: 32px; height: 32px; font-size: 1.1rem; }
.card-qty .qty { justify-content: flex-start; }
.card-qty .qty .btn-primary { flex: 1; }
.card-qty .qty-problem { text-align: left; }
/* "Tiles with quantity": the editor in the tile itself, below a dashed line. */
.card-order { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.card-order .qty { justify-content: flex-start; }
.card-order .qty-total { flex: 1 0 100%; }  /* own line, so the button and the bin share the next one */
.card-order .qty .btn-primary { flex: 1 1 0; }
.card-order .qty-problem { text-align: left; }
.card-order .muted { margin: 0; }
@media (max-width: 520px) {
    .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    /* Two narrow tiles side by side: the name gets two lines and the packing a line of its own, instead of being cut off. */
    .card-body { padding: 10px 10px 12px; }
    .card .card-title {
        font-size: .92rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        line-clamp: 2; overflow-wrap: anywhere;
    }
    .card-sub { flex-wrap: wrap; row-gap: 2px; }
    .card-pack { flex-basis: 100%; }
    .card-facts li { padding: 3px 4px; }
}

/* The list shows everything through Virtualize: no "show more". */
.view-list .grid-end { display: none; }

/* Parcel rows */
.parcel-list { display: block; }
.parcel {
    display: grid; grid-template-columns: 72px 1fr; gap: 10px 12px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 10px;
}
.parcel-thumb { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.photo { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--brand-soft); }
.photo-empty { display: grid; place-items: center; color: var(--brand); }
.photo-empty svg { width: 60%; height: 60%; }
.parcel-title { font-size: 1rem; margin: 0; }
.parcel-meta { margin: 2px 0 4px; color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 0 10px; }
.facts { list-style: none; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.facts li { font-size: .75rem; background: var(--page); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.availability { margin: 0; font-size: .85rem; color: var(--ok); }
.availability.sold-out { color: var(--error); }
.in-cart-tag { margin-left: 8px; color: var(--ok); font-weight: 700; }
/* Products in the cart: a green tick on the photo (top right), no outline. */
.parcel-thumb { position: relative; overflow: visible; }
.cart-check {
    position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--ok); color: #FFFFFF; box-shadow: 0 0 0 3px var(--surface), 0 2px 8px rgb(16 24 40 / .25);
    animation: cart-check-in .25s cubic-bezier(.2, .9, .3, 1.4);
}
.parcel-thumb .cart-check { top: -6px; right: -6px; width: 24px; height: 24px; }
.parcel-thumb .cart-check svg { width: 15px; height: 15px; }
@keyframes cart-check-in { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cart-check { animation: none; } }
.parcel-buy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.price { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink-strong); }
.price small { font-size: .75rem; font-weight: 500; color: var(--muted); }

@media (min-width: 720px) {
    .parcel { grid-template-columns: 88px 1fr auto; align-items: center; }
    .photo { width: 88px; height: 88px; }
    .parcel-buy { grid-column: auto; border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; min-width: 300px; }
}

/* Quantity editor */
.qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.unit-choice { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.unit { min-height: 40px; padding: 0 10px; border: 0; background: var(--surface); cursor: pointer; font-weight: 600; font-size: .85rem; }
.unit + .unit { border-left: 1px solid var(--line); }
.unit.selected { background: var(--brand-soft); color: var(--brand-strong); }
.unit-single { font-size: .85rem; color: var(--muted); font-weight: 600; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stepper button { width: 40px; min-height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; font-weight: 700; color: var(--brand-strong); }
.stepper button:disabled { color: var(--muted); opacity: .5; cursor: not-allowed; }
.stepper input { width: 52px; min-height: 40px; border: 0; text-align: center; background: transparent; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-total { font-size: .8rem; color: var(--muted); min-width: 64px; }
.qty-problem { margin: 4px 0 0; font-size: .8rem; color: var(--error); width: 100%; text-align: right; }
.qty-locked { margin: 0; color: var(--warn); font-weight: 600; }

/* Details dialog */
.dialog-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .45); display: grid; place-items: end center; }
.dialog {
    position: relative; width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto; background: var(--surface);
    border-radius: 18px 18px 0 0; padding: 16px; display: grid; gap: 16px;
}
.dialog-close {
    position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); font-size: 1.4rem; cursor: pointer; z-index: 1;
}
.photo-large { width: 100%; height: auto; max-height: 340px; aspect-ratio: 1; object-fit: cover; }
.dialog-body h2 { margin: 0 40px 6px 0; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 16px; font-size: .9rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; color: var(--ink-strong); }
@media (min-width: 720px) {
    .dialog-backdrop { place-items: center; padding: 24px; }
    .dialog { grid-template-columns: 300px 1fr; border-radius: 18px; padding: 24px; }
    .photo-large { max-height: none; }
}

/* Cart */
.note { background: var(--brand-soft); color: var(--ink-strong); border-radius: 10px; padding: 10px 12px; }
/* Cart page side panel (same panel as the stock filters) */
.side-facts { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 8px 4px 2px; font-size: .9rem; }
.side-facts dt { color: var(--muted); }
.side-facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink-strong); }
.side-facts .total { font-size: 1.05rem; font-weight: 800; }
.side-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; }
.side-list li { display: flex; justify-content: space-between; gap: 8px; padding: 4px; }
.side-notes { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: .85rem; color: var(--muted); }
.cart-page h1 { margin-top: 4px; }
.cart-layout { display: grid; gap: 16px; }
@media (min-width: 1024px) { .cart-layout { grid-template-columns: 1fr 320px; align-items: start; } }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-line {
    display: grid; grid-template-columns: 72px 1fr; gap: 12px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.cart-line h2 { font-size: 1rem; margin: 0 0 4px; }
.cart-line-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
.cart-line-total { grid-column: 2; margin: 0; font-weight: 800; color: var(--ink-strong); text-align: right; }
@media (min-width: 720px) {
    .cart-line { grid-template-columns: 72px 1fr auto; align-items: center; }
    .cart-line-total { grid-column: auto; }
}
.state-badge { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--ok-soft); color: var(--ok); }
.state-pending .state-badge, .state-unconfirmed .state-badge { background: var(--warn-soft); color: var(--warn); }
.state-uncertain { border-color: var(--error); }
.state-uncertain .state-badge { background: var(--error-soft); color: var(--error); }
.cart-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 72px; }
.cart-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0 0 12px; }
.cart-summary dd { margin: 0; text-align: right; }
.cart-summary .total { font-size: 1.2rem; font-weight: 800; color: var(--ink-strong); }
.empty-cart { text-align: center; padding: 40px 0; }
.cart-summary .btn-primary { margin-bottom: 8px; gap: 8px; }
.btn-primary .spinner { width: 14px; height: 14px; border-width: 2px; border-color: rgb(255 255 255 / .35); border-top-color: var(--on-accent); }

/* My orders: one card per confirmed order, the newest open; the side panel filters them. */
.results-head .filters-toggle { margin-left: auto; align-self: center; }
.side-search { margin-top: 8px; }
.side-search input { min-height: 38px; padding-left: 36px; border-radius: 10px; font-size: .9rem; }
.check-list .check-count { margin-left: auto; }
.order-lines tr.match td { background: var(--brand-soft); }
.order-lines tr.match .order-line-name { font-weight: 700; color: var(--ink-strong); }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.order-actions .btn { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.order-actions .spinner { width: 14px; height: 14px; border-width: 2px; }
.notice { background: var(--ok-soft); color: var(--ok); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.order-item { position: relative; }
.order-select { position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: pointer; z-index: 1; }
.order-item .order summary { padding-left: 48px; }
.order-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.order summary {
    list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 16px; padding: 14px 16px;
}
.order summary::-webkit-details-marker { display: none; }
.order[open] summary { border-bottom: 1px solid var(--line); }
.order summary:hover .order-title strong { color: var(--brand-strong); }
.order-title { display: grid; gap: 2px; }
.order-title strong { color: var(--ink-strong); font-size: 1.05rem; }
.order-title time, .order-sum span { color: var(--muted); font-size: .85rem; }
.order-sum { display: flex; align-items: baseline; gap: 12px; margin-left: auto; }
.order-sum strong { color: var(--ink-strong); font-size: 1.1rem; }
.order > .muted { margin: 10px 16px 0; }
.order-lines { width: 100%; border-collapse: collapse; font-size: .92rem; }
.order-lines td { padding: 8px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.order-lines tr:first-child td { border-top: 0; }
.order-line-qty { color: var(--muted); white-space: nowrap; text-align: right; }
.order-line-total { white-space: nowrap; text-align: right; font-weight: 700; color: var(--ink-strong); }
@media (max-width: 520px) {
    .order-lines td { padding: 8px 12px; }
    .order-line-qty { display: none; }
}

/* Rebuy: a button per order and per line; the offers open as a dialog (bottom sheet on phones), and from 1024 px as
   the right half of the page next to the orders (the overview panel steps aside). */
.order-rebuy { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.rebuy-order { min-height: 36px; padding: 0 14px; font-size: .9rem; gap: 6px; }
.rebuy-order.active { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }
.order-lines td.order-line-rebuy { width: 1%; padding: 4px 10px 4px 0; vertical-align: middle; }
.btn-icon-small {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--brand-strong); cursor: pointer;
}
.btn-icon-small:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.btn-icon-small:disabled { opacity: .4; cursor: not-allowed; }
.order-lines tr.rebuying td { background: var(--brand-soft); }
.order-lines tr.rebuying .order-line-name { font-weight: 700; color: var(--ink-strong); }

.rebuy-panel { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / .45); display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center; }
.rebuy-sheet {
    position: relative; width: 100%; min-width: 0; max-width: 760px; max-height: 92vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    background: var(--page); border-radius: 18px 18px 0 0; padding: 16px 16px 32px;
}
.rebuy-head { flex-wrap: nowrap; position: sticky; top: -16px; z-index: 2; margin: -16px -16px 0; padding: 16px 16px 10px; background: var(--page); }
.rebuy-head h1 { flex: none; margin-top: 4px; }  /* as .cart-page h1, so it lines up with "My orders" */
.rebuy-subtitle { min-width: 0; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rebuy-head .dialog-close { position: static; flex: none; margin-left: auto; align-self: center; }
.rebuy-intro { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.rebuy-note { margin: 0 0 10px; background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 8px 10px; font-size: .88rem; }
.rebuy-line { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 14px; }
.rebuy-line-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.rebuy-line-head h3 { margin: 0; font-size: 1.02rem; color: var(--ink-strong); }
.rebuy-line-head .muted { margin: 2px 0 6px; font-size: .85rem; }
.rebuy-empty { margin: 0; color: var(--muted); }
.rebuy-offer { margin-bottom: 10px; }
.rebuy-offer .parcel { margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.rebuy-criteria {
    list-style: none; margin: 0; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
    background: var(--page); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; font-size: .75rem;
}
.rebuy-criteria li { padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.rebuy-criteria .hit { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.rebuy-criteria .miss { color: var(--muted); text-decoration: line-through; }
.rebuy-criteria .rebuy-level { padding-left: 0; font-weight: 800; color: var(--ink-strong); }
.rebuy-criteria .rebuy-same-lot { background: var(--brand-strong); color: var(--on-accent); font-weight: 700; }
.rebuy-more { width: 100%; min-height: 38px; font-size: .9rem; margin-bottom: 10px; }
/* The offers are narrow (half a page, or a phone): the row always stacks the quantity editor under the product. */
.rebuy-panel .parcel { grid-template-columns: 72px 1fr; }
.rebuy-panel .parcel .photo { width: 72px; height: 72px; }
.rebuy-panel .parcel-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; min-width: 0; border-top: 1px dashed var(--line); padding-top: 8px; }

@media (min-width: 720px) {
    .rebuy-panel { place-items: center; padding: 24px; }
    .rebuy-sheet { border-radius: 18px; padding: 20px 20px 24px; }
    .rebuy-head { top: -20px; margin: -20px -20px 0; padding: 20px 20px 10px; }
}

@media (min-width: 1024px) {
    .shop.rebuy-open { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .shop.rebuy-open > .filters { display: none; }
    .rebuy-panel {
        position: sticky; top: 73px; inset: auto; z-index: 1; align-self: start; padding: 0; background: none; display: block;
        max-height: calc(100vh - 89px - var(--footer-height, 0px));
    }
    /* Side by side the right half is laid out like the left one: no frame, the same heading at the same height. */
    .rebuy-sheet { max-width: none; max-height: inherit; border-radius: 0; padding: 0 0 48px; background: var(--page); }
    .rebuy-head { top: 0; margin: 4px 0 10px; padding: 0; }
}

/* Toasts: white cards with the product photo, a status icon and a bar that shrinks until the card closes.
   Bottom centre on phones, bottom right on larger screens; newest at the bottom. */
.toasts {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
@media (min-width: 720px) { .toasts { left: auto; right: 24px; bottom: 24px; transform: none; } }
.toasts.above-footer { bottom: 52px; }  /* clear of the demo footer */
.toast {
    --toast-colour: var(--ok);
    position: relative; overflow: hidden; pointer-events: auto;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 10px 14px 12px;
    border-radius: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
    box-shadow: 0 12px 32px rgb(16 24 40 / .16), 0 2px 6px rgb(16 24 40 / .08);
    animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2);
}
.toast-warning { --toast-colour: var(--warn); }
.toast-error { --toast-colour: var(--error); }
.toast-media { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.toast-photo { width: 48px !important; height: 48px !important; border-radius: 10px; object-fit: cover; }
.toast-icon {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--toast-colour); color: var(--surface); box-shadow: 0 0 0 3px var(--surface);
}
/* With a photo the icon sits on its corner; without one it is the main symbol. */
.toast-photo + .toast-icon { position: absolute; right: -6px; bottom: -6px; }
.toast-media > .toast-icon:only-child { width: 40px; height: 40px; box-shadow: none; }
.toast-media > .toast-icon:only-child svg { width: 22px; height: 22px; }
.toast-body { display: grid; gap: 1px; min-width: 0; }
.toast-title { color: var(--ink-strong); font-size: .95rem; }
.toast-detail { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-close {
    align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: none; color: var(--muted); cursor: pointer;
}
.toast-close:hover { background: var(--page); color: var(--ink-strong); }
.toast-timer {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-colour);
    transform-origin: left; animation: toast-timer var(--toast-ms, 3500ms) linear forwards;
}
/* Admin snackbar (AdminToast): no Blazor circuit to close it, so it fades out by itself when the timer runs out. */
.toast-auto { animation: toast-in .28s cubic-bezier(.2, .9, .3, 1.2), toast-out .3s ease-in var(--toast-ms, 5000ms) forwards; }
.toast-detail-wrap { white-space: normal; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(16px); visibility: hidden; } }
@keyframes toast-timer { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; } .toast-timer { animation: none; display: none; }
    .toast-auto { animation: toast-out 0s var(--toast-ms, 5000ms) forwards; }
}

.error-page { max-width: 560px; margin: 64px auto; padding: 16px; text-align: center; }

#blazor-error-ui {
    background: var(--warn-soft); color: var(--warn); bottom: 0; box-shadow: 0 -1px 2px rgb(0 0 0 / .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-inline { display: inline-flex; align-items: center; gap: 8px; }
.loading-inline .spinner { width: 14px; height: 14px; border-width: 2px; }
/* Loading the stock: what it is doing and a bar with the real download progress (CatalogueLoading). */
.catalogue-loading { display: grid; gap: 6px; flex: 1 1 260px; max-width: 420px; color: var(--muted); font-size: .9rem; }
.catalogue-loading-head { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.catalogue-loading-head .spinner { width: 14px; height: 14px; border-width: 2px; flex: none; }
.catalogue-loading-head strong { margin-left: auto; color: var(--title); }
.catalogue-loading .sk-progress { margin: 0; }
.catalogue-loading .sk-progress span { animation: none; width: 0; transition: width .3s ease-out; }
.catalogue-loading .sk-progress.waiting span { width: 30%; animation: catalogue-wait 1.3s ease-in-out infinite; }
@keyframes catalogue-wait { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.facet-skeleton { display: grid; gap: 10px; padding: 4px 0 8px; }
@media (prefers-reduced-motion: reduce) { .catalogue-loading .sk-progress.waiting span { animation: none; width: 100%; opacity: .4; } }

/* Hidden admin page */
.admin { max-width: 900px; margin: 0 auto; }
/* Admin frame: the side panel of the stock and cart pages, with the admin pages as menu. */
.admin-page { max-width: 900px; }
.admin-page.admin-page-wide { max-width: none; }  /* tables with many columns (Labels) */
.admin-menu { display: grid; gap: 2px; padding: 10px 0; }
.admin-menu-item {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px;
    color: var(--ink-strong); text-decoration: none; font-weight: 600;
}
.admin-menu-item:hover { background: var(--page); }
.admin-menu-item.active { background: var(--brand-soft); color: var(--brand-strong); }
.admin-menu-item.open { color: var(--brand-strong); }
/* Sub page of a group (API): indented to line up with the group's label, under its icon. */
.admin-menu-sub { min-height: 34px; padding-left: 38px; font-weight: 500; font-size: .92rem; }
.admin-menu-sub2 { min-height: 30px; padding-left: 54px; font-size: .88rem; }
/* On phones the admin menu slides in from the left, opened by the menu button at the top left (js/theme.js). */
.admin-menu-toggle {
    display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -4px; padding: 0;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-strong); cursor: pointer;
}
.admin-menu-toggle:hover { border-color: var(--brand); }
@media (max-width: 1023px) {
    body:has(.admin-side) .admin-menu-toggle { display: inline-flex; }
    .admin-side {
        inset: 0 auto 0 0; width: min(320px, 86vw); transform: translateX(-105%);
        padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .admin-menu-open .admin-side { transform: none; }
    .admin-menu-open::before { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 30; }
    .admin-side .admin-menu-item { min-height: 44px; }
    .admin-side .admin-menu-sub { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .admin-side { transition: none; } }
/* The admin panel: the admin pages in a frame over the whole screen, the shop kept loaded behind it (AdminPanel.razor). */
.admin-frame {
    position: fixed; z-index: 50; border: 0; display: block; background: var(--page);
    top: env(safe-area-inset-top); right: env(safe-area-inset-right); bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left);
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
body:has(.admin-frame) { overflow: hidden; }
.admin-sub { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 6px; }

/* Admin: SOAP log */
.soap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.soap-stat {
    display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); border-top: 4px solid var(--ok);
}
.soap-stat.has-errors { border-top-color: var(--error); }
.soap-stat-op { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.soap-stat strong { font-size: 1.5rem; color: var(--ink-strong); }
.soap-stat-errors { color: var(--error); font-weight: 600; }
.soap-stat-warnings { color: var(--warn); font-weight: 600; }
.soap-filter {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0 12px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.soap-filter label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
/* Copy a customer group's settings (rules) to another group: the note sits beside the button, below it on a phone. */
.group-copy .muted { flex: 1 1 260px; align-self: center; font-size: .85rem; }
.soap-filter input:not([type=checkbox]), .soap-filter select {
    min-height: 38px; min-width: 160px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page);
}
.soap-filter .soap-errors-only { display: flex; align-items: center; gap: 6px; min-height: 38px; color: var(--ink); font-size: .9rem; }
.soap-filter .soap-errors-only input { accent-color: var(--brand-strong); width: 16px; height: 16px; }
.soap-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.soap-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.soap-table th {
    position: sticky; top: 0; background: var(--surface); text-align: left; padding: 10px 12px; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid var(--line);
}
.soap-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.soap-table tr:last-child td { border-bottom: 0; }
.soap-table tr:hover td { background: var(--page); }
.soap-table tr.failed td { background: var(--error-soft); }
.soap-table tr.warning td { background: var(--warn-soft); }
.soap-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.soap-table .slow { color: var(--warn); font-weight: 700; }
.soap-table .nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.soap-table a { font-weight: 600; }
.soap-result { word-break: break-word; }
.soap-op { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--page); border: 1px solid var(--line); white-space: nowrap; }
.op-setorder2 { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }
.op-login { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.soap-fail { display: inline-block; margin-left: 6px; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--error); color: #FFFFFF; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.soap-warn { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--warn); color: var(--warn-soft); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.soap-pager { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.admin-login { margin: 40px auto; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-head form { margin: 0; }
.admin-form { display: grid; gap: 16px; }
.admin-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px 16px; margin: 0; min-width: 0; }
.admin-form legend { font-weight: 800; color: var(--title); padding: 0 6px; }
.admin-form label { display: block; font-weight: 600; font-size: .9rem; margin: 8px 0 4px; }
.admin-form input:not([type]), .admin-form input[type=file] { width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.admin-form input[type=password], .admin-form input[type=url] { width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.admin-colours { border-collapse: collapse; }
.admin-colours th, .admin-colours td { padding: 6px 12px 6px 0; text-align: left; }
.admin-colours input[type=color] { width: 48px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); vertical-align: middle; cursor: pointer; }
.admin-colours code { font-size: .8rem; color: var(--muted); }
.admin-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.admin-preview { border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; border: 1px solid var(--line); }
.admin-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.admin-images p { margin: 4px 0 8px; }
.admin-logo { display: block; height: 80px; width: auto; max-width: 100%; background: #FFFFFF; border-radius: 10px; padding: 4px 8px; border: 1px solid var(--line); }
/* Ready-made themes: one card per theme, three on a row */
.theme-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .theme-presets { grid-template-columns: minmax(0, 1fr); } }
.theme-preset {
    display: grid; gap: 10px; min-width: 0; padding: 12px; text-align: left; font: inherit; color: var(--ink-strong); cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    transition: border-color .15s, transform .15s;
}
.theme-preset:hover, .theme-preset:focus-visible { border-color: var(--brand-strong); transform: translateY(-1px); }
.theme-preset-logo { display: flex; align-items: center; justify-content: center; height: 72px; padding: 8px; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--line); }
.theme-preset-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.theme-preset-name { font-weight: 700; }
.theme-preset-colours { display: flex; gap: 4px; }
.theme-preset-colours span { flex: 1; height: 18px; border-radius: 4px; border: 1px solid rgb(0 0 0 / .1); }
.admin-favicon { display: block; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #FFFFFF; }
.admin-check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.admin-form .label { display: block; font-weight: 600; font-size: .9rem; margin: 8px 0 4px; }
.weekday-checks { display: flex; flex-wrap: wrap; gap: 0 16px; }
.admin-form input[type=time], .admin-form textarea { width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: inherit; font: inherit; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.soap-test { align-items: center; margin-top: 12px; }
.update-actions { margin-top: 16px; }
.update-actions[hidden] { display: none; }
/* Admin: update progress card (js/admin-update.js) */
.update-progress { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px; margin: 0 0 16px; }
.update-progress-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.update-progress-head .spinner { flex: none; width: 18px; height: 18px; }
.update-progress-time { margin-left: auto; font-size: .875rem; font-variant-numeric: tabular-nums; }
.update-progress-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 12px 0 14px; }
.update-progress-bar span { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .8s ease; }
.update-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.update-steps li { position: relative; padding-left: 28px; color: var(--muted); }
.update-steps li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box;
    border-radius: 50%; border: 2px solid var(--line);
}
.update-steps li.active { color: inherit; font-weight: 600; }
.update-steps li.active::before { border-color: var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; }
.update-steps li.done { color: inherit; }
.update-steps li.done::before { border-color: var(--ok); background: var(--ok); }
.update-steps li.done::after {
    content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 8px; margin-top: -6px;
    border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.update-steps li.failed { color: var(--error); font-weight: 600; }
.update-steps li.failed::before { border-color: var(--error); background: var(--error); }
.update-progress-note { margin: 12px 0 0; }
.update-progress.update-ok, .update-progress.update-failed, .update-progress.update-none { animation: none; }
.update-progress.update-ok .spinner, .update-progress.update-failed .spinner, .update-progress.update-none .spinner { display: none; }
.update-progress.update-ok { border-color: var(--ok); background: var(--ok-soft); }
.update-progress.update-ok .update-progress-bar span { background: var(--ok); }
.update-progress.update-failed { border-color: var(--error); }
.update-progress.update-failed .update-progress-bar span { background: var(--error); }
.update-progress.update-failed [data-up-message] { color: var(--error); }
.update-success { background: var(--ok-soft); color: var(--ok); }
@media (prefers-reduced-motion: reduce) {
    .update-steps li.active::before { animation: none; border-color: var(--brand); }
    .update-progress-bar span { transition: none; }
}

/* Admin: SMTP (settings form and outbox) */
.admin-form input[type=email], .admin-form input[type=number], .admin-form select { width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: inherit; }
.soap-test input[type=email] { flex: 1 1 240px; max-width: 360px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: inherit; }
.smtp-retry { display: inline; margin: 0 0 0 6px; }
.smtp-retry .btn { min-height: 28px; padding: 0 8px; font-size: .8rem; }

/* Admin: stock (webshop groups and stock codes) */
.admin-page h2 { margin: 24px 0 4px; font-size: 1.15rem; }
/* A second h1 further down an admin page (e.g. "Stock refresh" on ERP · Connection) gets room above it. */
.admin-page * + h1 { margin-top: 32px; }
.stock-groups td, .stock-codes td, .stock-codes th { vertical-align: middle; }
.stock-groups input:not([type=file]), .stock-codes input, .stock-codes select {
    min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); max-width: 100%;
}
.stock-groups input[type=file] { font-size: .8rem; max-width: 220px; }
.stock-group-picture { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 6px; }
.stock-codes th[scope=row] { text-align: left; font-weight: 700; }
.stock-codes input[name^="name."], .stock-codes input[name=newName] { width: 100%; min-width: 180px; }
.stock-codes tr.stock-unassigned select { border-color: var(--warn); }
.stock-codes tr.stock-subcode th[scope=row] { padding-left: 28px; font-weight: 400; }
/* The group row's Save, ↑, ↓ and Delete: the same full-size buttons as the stock code table below (40 px, square icons),
   instead of the smaller ones .pos-actions gives elsewhere. */
.stock-groups .pos-actions { flex-wrap: nowrap; align-items: center; }
.stock-groups .pos-actions .btn { min-height: 40px; font-size: inherit; }
.stock-groups .pos-actions .btn:not(.btn-icon) { padding: 0 16px; }
.stock-groups .pos-actions .btn-icon { width: 40px; }
.stock-save { margin-top: 12px; }

/* Admin: POS terminals */
.pos-licences {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); border-top: 4px solid var(--ok);
}
.pos-licences.full { border-top-color: var(--warn); }
.pos-licences strong { font-size: 1.5rem; color: var(--ink-strong); }
.pos-licences p { margin: 4px 0 0; }
.pos-inline-form { display: flex; align-items: end; gap: 8px; }
.pos-inline-form label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.pos-inline-form input { width: 96px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); }
.pos-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; }
.pos-actions .btn { min-height: 32px; padding: 0 10px; font-size: .85rem; }
.pos-table td:last-child { width: 1%; white-space: nowrap; }
.pos-settings { margin-top: 24px; }
.pos-settings h2 { margin: 0; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.pos-settings select, .pos-settings input[inputmode] {
    width: 100%; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink);
}
.soap-terminal { margin-left: 6px; }
.op-pos { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }

/* Admin: supplier sources (Flower Booking prototype) */
.source-page { max-width: none; }
/* Sort order of the suppliers (compare table on /admin/sources): place number and up / down. */
.source-order-col { width: 1%; white-space: nowrap; }
.source-order { display: flex; align-items: center; gap: 4px; margin: 0; }
.source-order-n { min-width: 1.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.source-order .btn-small { min-width: 30px; padding-inline: 6px; }
.soap-table tr.source-moved td { background: var(--ok-soft); }
.source-head { display: flex; align-items: center; gap: 16px; min-height: 44px; margin: 24px 0 12px; }
.source-head:first-child { margin-top: 0; }
.source-head h1 { margin: 0; flex: none; }
.source-msg { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; }
.source-msg > span { display: block; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; padding: 8px 12px; }
@media (max-width: 700px) { .source-head { flex-wrap: wrap; } .source-msg { flex-basis: 100%; } }
/* Supplier cards: two columns side by side on a wide screen, one on a narrow one */
.source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .source-grid { grid-template-columns: minmax(0, 1fr); } }
.source-card {
    display: grid; gap: 12px; min-width: 0; padding: 14px 16px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.source-card.failed { border-color: var(--error); background: var(--error-soft); }
.source-card-head { display: flex; align-items: flex-start; gap: 12px; }
.source-card-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.source-card-name > strong { font-size: 1.05rem; color: var(--title); }
.source-card-parcels { flex: none; display: grid; justify-items: end; text-decoration: none; line-height: 1.15; }
.source-card-parcels strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.source-card-parcels .muted { font-size: .75rem; }
.source-card-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .9rem; }
.source-card-facts dt { color: var(--muted); font-weight: 600; }
.source-card-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.source-card-facts .source-group { margin: 0; }
/* A saved supplier password, shown on a click (js/admin-secret.js). */
.secret { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.secret-value { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.secret-value.shown { padding: 1px 6px; border-radius: 4px; background: var(--surface-2, rgba(127, 127, 127, .15)); }
.secret-value.failed { color: var(--danger, #c0392b); font-family: inherit; }
.secret-input { display: flex; gap: 6px; align-items: center; }
.secret-input input { flex: 1; min-width: 0; }
.btn.btn-small { padding: 2px 10px; min-height: 0; font-size: .8rem; line-height: 1.6; }
.source-card-actions { flex-wrap: wrap; justify-content: flex-start; margin: 0; }
.source-all { align-items: center; margin: 12px 0 0; }
.source-new { margin: 0 0 16px; }
/* Edit mode of /admin/sources: all suppliers as rows of fields, saved together. The table scrolls sideways on its own. */
.source-crud { gap: 12px; }
.source-crud-actions { align-items: center; margin: 0; }
.source-crud-table { min-width: 1060px; }
.source-crud-table th { padding: 8px 6px; line-height: 1.25; vertical-align: bottom; }
.source-crud-table td { padding: 6px 4px; vertical-align: middle; }
.source-crud-table tr { scroll-margin-top: 96px; }
.source-crud-table tr:hover td { background: transparent; }
.source-crud-table tr.failed td { background: var(--error-soft); }
.source-crud-table tr.source-crud-new td { background: var(--brand-soft); }
.admin-form .source-crud-table input:not([type=checkbox]), .admin-form .source-crud-table select { width: 100%; min-width: 0; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-size: .85rem; }
.source-crud-table input[type=checkbox] { width: 18px; height: 18px; }
.source-crud-table .c-check { width: 1%; text-align: center; }
.source-crud-table .c-name { min-width: 100px; }
.source-crud-table .c-group, .source-crud-table .c-kind { min-width: 95px; }
.source-crud-table .c-url { min-width: 160px; }
.source-crud-table .c-login { min-width: 80px; }
.source-crud-table .c-password { min-width: 100px; }
.source-crud-table .c-num { min-width: 72px; width: 72px; }
.source-crud-table .c-time { width: 96px; }
.admin-form .source-crud-small { margin: 4px 0 0; font-size: .8rem; }
.source-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.source-edit-grid .customer-source { width: 100%; min-width: 0; min-height: 42px; }
.erp-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.admin-form label.erp-model {
    display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--page); font-weight: 400; cursor: pointer;
}
.admin-form label.erp-model.active { border-color: var(--brand-strong); background: var(--brand-soft); }
.erp-model input { margin-top: 4px; accent-color: var(--brand-strong); width: 16px; height: 16px; flex: none; }
.erp-model > span { display: grid; gap: 4px; }
.erp-overview { margin: 0 0 16px; }
.erp-overview strong { font-size: 1.05rem; word-break: break-word; }
.customer-source { min-height: 38px; min-width: 240px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); }
.customer-sync { margin: 0; }
.customer-last { flex-basis: 100%; margin: 0; }
/* Customers table (admin page Customers, Flower Booking): create per company, import / export, set a password. */
.customer-table { display: block; }
.customer-table h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--ink-strong); }
.customer-table code { font-size: .85em; }
/* Customer edit page (customers table only). */
.customer-new { margin-left: auto; }
/* Back from a customer: the list scrolls to its row (#c-REF) and marks it once (js/admin-sync.js). */
.soap-table tr[id^="c-"] { scroll-margin-top: 96px; }
.soap-table tr.customer-back td { animation: customer-back 2.4s ease-out; }
@keyframes customer-back { from { background: var(--ok-soft); } to { background: transparent; } }
.customer-edit input[readonly] { background: var(--surface); color: var(--muted); }
.customer-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.customer-check input { width: 16px; height: 16px; accent-color: var(--brand-strong); flex: none; }
.customer-delete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.customer-table strong { font-size: inherit; color: inherit; }
.customer-table .customer-table-status { margin: 10px 0 0; font-weight: 600; color: var(--ink-strong); }
.customer-table-form { display: grid; gap: 14px; margin-top: 12px; }
.customer-table-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.customer-table-row label { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--muted); min-width: 0; }
.customer-table-row input:not([type=file]) { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); }
.customer-table-row input[type=file] { min-height: 38px; max-width: 100%; color: var(--ink); }
.customer-table .customer-table-help { margin: 0; font-size: .85rem; }
.ct-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ct-toggle > summary { list-style: none; cursor: pointer; }
.ct-toggle > summary::-webkit-details-marker { display: none; }
.ct-toggle > summary h2 { margin: 0; }
.ct-toggle .ct-intro { margin: 10px 0 0; }
.ct-chevron { width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.ct-toggle[open] .ct-chevron { transform: rotate(-135deg); }
.ct-toggle > summary:hover .ct-chevron { border-color: var(--brand); }
.ct-badges { display: inline-flex; align-items: center; gap: 8px; }
.ct-badges code { padding: 2px 8px; border-radius: 6px; background: var(--page); border: 1px solid var(--line); }
.ct-pill { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--page); color: var(--muted); border: 1px solid var(--line); }
.ct-pill-on { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ct-panels { margin-top: 14px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 12px; align-items: start; }
.ct-panel { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.ct-panel h3 { margin: 0; font-size: .9rem; color: var(--ink-strong); }
.ct-panel p { margin: 0; font-size: .85rem; }
.ct-panel > .btn { justify-self: start; }
.ct-panel input:not([type=file]) { min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); min-width: 0; }
.ct-actions { display: flex; gap: 8px; }
.ct-file { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--page); cursor: pointer; }
.ct-file:hover { border-color: var(--brand); }
.ct-file span { font-size: .8rem; }
.ct-file input[type=file] { max-width: 100%; color: var(--ink); font-size: .85rem; }
.ct-file input[type=file]::file-selector-button { margin-right: 10px; min-height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong); font: inherit; font-weight: 600; cursor: pointer; }
.ct-file input[type=file]::file-selector-button:hover { border-color: var(--brand); }
.ct-help summary { cursor: pointer; font-size: .8rem; color: var(--link); }
.ct-help p { margin-top: 6px; color: var(--muted); font-size: .8rem; }
/* Text hidden behind a small (i) button: <details class="info-more"><summary>label + .info-btn</summary>…</details> */
.info-more { margin: 0 0 1em; }
.info-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.info-more > summary::-webkit-details-marker { display: none; }
.info-more .info-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); color: var(--link); background: var(--surface); }
.info-more > summary:hover .info-btn, .info-more[open] .info-btn { border-color: var(--brand); color: var(--brand-strong); }
.info-more > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.info-more .info-body { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--muted); font-size: .9rem; }
.info-more .info-body p { margin: 0 0 10px; }
.info-more .info-body ul { margin: 4px 0 10px; padding-left: 20px; }
.info-more .info-body li { margin: 2px 0; }
.info-more .info-body > :last-child { margin-bottom: 0; }
.info-more .info-body b { color: var(--ink-strong); }
.info-more .info-body code { font-size: .85em; overflow-wrap: anywhere; }
@media (max-width: 900px) { .ct-panels { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .customer-table-row .customer-source { min-width: 0; width: 100%; } .customer-table-row label { flex: 1 1 100%; } }
/* Customer sync running: the green top border becomes its progress bar (js/admin-sync.js), with a light sweeping over it. */
.sync-bar { display: none; }
.pos-licences.syncing { position: relative; overflow: hidden; border-top-width: 0; padding-top: 16px; }
.pos-licences.syncing .sync-bar { display: block; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ok-soft); }
.sync-bar span {
    position: relative; display: block; width: 0; height: 100%; overflow: hidden; background: var(--ok);
    border-radius: 0 999px 999px 0; box-shadow: 0 0 8px var(--ok); transition: width .35s ease-out;
}
.sync-bar span::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent) no-repeat;
    background-size: 40% 100%; animation: sync-sweep 1.2s ease-in-out infinite;
}
.sync-done .sync-bar span { border-radius: 0; box-shadow: none; }
.sync-done .sync-bar span::after { animation: none; }
.customer-sync .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
/* A supplier syncing (/admin/sources): the same bar, in its "Last sync" cell. */
.source-sync { display: grid; gap: 6px; min-width: 220px; }
.source-sync-head { display: flex; align-items: center; gap: 8px; color: var(--title); font-variant-numeric: tabular-nums; }
.source-sync-head .spinner { width: 14px; height: 14px; border-width: 2px; }
.source-sync .sync-bar { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: var(--ok-soft); }
.source-sync .sync-bar span { border-radius: 999px; }
.source-sync.sync-done .spinner { display: none; }
.customer-sync [data-sync-label] { font-variant-numeric: tabular-nums; }
@keyframes sync-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .sync-bar span { transition: none; } .sync-bar span::after { animation: none; } }
/* The webshop group of a supplier source: a label that is also the picker. */
.source-group { margin: 6px 0 0; }
.source-group-label select {
    min-height: 28px; max-width: 260px; padding: 0 26px 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    border: 1px solid transparent; background-color: var(--ok-soft); color: var(--ok); cursor: pointer;
}
.source-group-label.none select { background-color: var(--page); color: var(--muted); border-color: var(--line); font-weight: 600; }

/* Admin: customer groups (rules per supplier and stock code, pasted customer codes) */
.group-back { margin: 0 0 4px; }
.group-back a { font-weight: 600; text-decoration: none; }
.group-table td:last-child, .group-rules td:last-child, .group-members td:last-child { width: 1%; white-space: nowrap; }
.group-rules td { vertical-align: middle; }
.group-rules .pos-actions { flex-wrap: nowrap; align-items: center; }
.group-rules input:not([type=checkbox]), .group-rules select {
    min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); max-width: 100%;
}
.group-rules input[type=checkbox] { accent-color: var(--brand-strong); width: 18px; height: 18px; }
.group-rules .group-markup { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.group-rules select { min-width: 160px; }
.group-rules input[name=stockCode] { width: 120px; }
.group-new-rule td { background: var(--page); }
.soap-table tr.group-hidden td { color: var(--muted); }
.group-paste { display: grid; gap: 8px; margin: 0 0 12px; }
.group-paste textarea {
    width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--ink); font: .9rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical;
}
.group-delete { margin-left: auto; color: var(--error); }

/* Departure day: the picker in the top bar, the day groups in the cart and greyed-out products that cannot make it. */
.departure-menu summary svg:first-child { flex: none; color: var(--brand-strong); }
.departure-menu .departure-current { white-space: nowrap; }
.departure-menu.none summary { border-color: var(--warn); }
.departure-panel { min-width: 17rem; max-height: 70vh; overflow-y: auto; }
.departure-day { justify-content: flex-start; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding-top: 10px; padding-bottom: 10px; }
.departure-day + .departure-day { border-top: 1px solid var(--line); }
.departure-day.current { background: var(--brand-soft); }
.departure-radio {
    flex: none; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--muted); border-radius: 50%; box-sizing: border-box;
}
.departure-day.current .departure-radio { border: 6px solid var(--brand-strong); }
.departure-text { display: grid; gap: 2px; }
.departure-name { font-weight: 600; }
.departure-delivery { font-size: .85rem; color: var(--muted); }
.departure-until { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.departure-label { font-size: .85rem; color: var(--muted); }
@media (max-width: 720px) { .departure-label { display: none; } }
.cart-day { margin: 0 0 4px; font-size: 1rem; display: flex; gap: 8px; align-items: baseline; }
.cart-day .muted { font-weight: 400; font-size: .85rem; }
.cart-day-group + .cart-day-group { margin-top: 20px; }
.not-on-departure { opacity: .55; }
.departure-miss { font-size: .85rem; color: var(--muted); margin: 4px 0 0; }

/* Admin page "Salesmen": the roles, one card each. */
.role-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px; }
.role-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); margin: 0; }
.role-new { border-style: dashed; }
.role-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.role-head input { flex: 1; min-width: 0; font-weight: 600; }
.role-sections { display: grid; gap: 2px; }
.role-card .admin-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* Product labels (On sale, ...): the badge on the admin pages and in the shop; colours come inline from the label. */
.label-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.4;
    letter-spacing: .01em; white-space: nowrap; vertical-align: middle; margin-right: 4px;
}
.soap-table .pick { width: 1%; text-align: center; }
.label-bar { margin-top: 0; }
/* Labels admin table: soft fields with a focus ring; the colour is one field (round swatch + hex code). */
.label-table td { vertical-align: middle; }
.label-table td:nth-child(5), .label-table td:last-child { white-space: nowrap; }
.label-table input[name=nl], .label-table input[name=en], .label-table input[name=fr], .label-table .colour-field {
    height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-strong);
    transition: border-color .15s, box-shadow .15s;
}
.label-table input[name=nl], .label-table input[name=en], .label-table input[name=fr] {
    width: 100%; min-width: 7em; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: .9rem;
}
.label-table input::placeholder { color: var(--muted); opacity: .7; }
.label-table input[name]:hover, .label-table .colour-field:hover { border-color: var(--muted); }
.label-table input[name=nl]:focus, .label-table input[name=en]:focus, .label-table input[name=fr]:focus, .label-table .colour-field:focus-within {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.label-table .colour-field { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 7px; box-sizing: border-box; }
.label-table .colour-field input[type="color"] {
    flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.label-table .colour-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.label-table .colour-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.label-table .colour-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.label-table .colour-field input[type="color"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.label-table .colour-hex {
    width: 5.6em; height: 100%; padding: 0; border: 0; background: none; color: inherit; outline: none;
    font: .85rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; text-transform: uppercase;
}
.label-table .colour-field:has(.colour-hex:invalid) { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
/* In the shop: over the photo of a tile, before the title of a row. */
.card-photo .label-badge { position: absolute; top: 8px; left: 8px; z-index: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.parcel-title .label-badge { margin-right: 6px; }
.customer-source-error { margin: 8px 0 0; }

/* A–Z bar on the right edge of the stock page (Catalogue.razor). A letter scrolls to its first product; the
   scroll-margin keeps that product below the sticky top bar and toolbar. */
.card, .parcel { scroll-margin-top: 130px; }
.az-bar {
    /* Full height between the sticky top bar and the footer, flush against the right edge. */
    position: fixed; right: 0; top: var(--az-top, 57px); bottom: var(--footer-height, 0px); z-index: 15;
    display: flex; flex-direction: column; width: 32px; padding: 0;
    background: var(--surface); border-left: 1px solid var(--line);
}
.az-bar button {
    flex: 1 1 0; min-height: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-strong); font: 700 clamp(.8rem, 2.4vh, 1.1rem)/1 var(--font); cursor: pointer;
}
.az-bar button:hover:not(:disabled), .az-bar button:focus-visible { background: var(--brand-soft); }
.az-bar button:disabled { color: var(--muted); opacity: .45; cursor: default; }
.shop:has(.az-bar) .results { padding-right: 36px; }
@media (max-width: 640px) { .az-bar { --az-top: 97px; width: 28px; } .shop:has(.az-bar) .results { padding-right: 32px; } }  /* the top bar wraps to two rows */
@media (max-width: 640px) { .card, .parcel { scroll-margin-top: 105px; } }