/* 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-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; }
    /* The webshop groups get a row of their own under the logo, scrolling sideways when they do not fit. */
    .topbar-inner { flex-wrap: wrap; row-gap: 4px; }
    .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; }
}

/* 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-open::before { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 30; }
.filters-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.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);
    }
    .filters-open::before, .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; }
.results-head .updated { margin-left: auto; color: var(--muted); font-size: .85rem; }
.results-head .loading-more {
    margin-left: auto; 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. */
.results-head .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) { .results-head .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, .results-head .loading-more::after { animation: none; } .loading-dots i { opacity: .7; } }
:root[data-theme="dark"] .results-head .loading-more::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .results-head .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; }
.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);
}
.search input:focus { border-color: var(--brand); }
.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; }
@media (max-width: 520px) { .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.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; }

/* 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; }
}

/* 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;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes toast-timer { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast-timer { animation: none; display: none; } }

.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-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 stock filters slide in; the admin menu simply sits above the page. */
@media (max-width: 1023px) {
    .admin-side { position: static; transform: none; width: auto; margin: 12px 16px 0; border-radius: var(--radius); z-index: auto; }
}
.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); }
.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; }

/* 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-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; }
.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.source-editing { grid-column: 1 / -1; background: var(--brand-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; }
.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; }
.source-edit { gap: 8px; }
.source-edit-title { font-weight: 800; color: var(--title); }
.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; }
.source-edit-wide { grid-column: 1 / -1; }
/* Webshop name, webshop group and the order deadline side by side (two by two on narrow screens). */
.source-edit-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 900px) { .source-edit-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .source-edit-shop { grid-template-columns: 1fr; } }
.source-edit-checks { display: flex; flex-wrap: wrap; gap: 4px 24px; }
/* Left, but after Save in the markup: Enter in a field submits Save, never Delete. */
.source-edit .admin-actions .source-delete { order: -1; margin-right: auto; }
.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; }
@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 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: 15rem; max-height: 70vh; overflow-y: auto; }
.departure-day { justify-content: space-between; width: 100%; }
.departure-day.current { background: var(--brand-soft); font-weight: 600; }
.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; }