/* Spark B2B — premium design system */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --color-bg: #020617;
    --color-surface: rgba(15, 23, 42, 0.65);
    --color-surface-solid: #0f172a;
    --color-border: #1e293b;
    /* Silnější obrys pro tlačítka a ovládací prvky: rámeček karet je na to moc jemný. */
    --color-border-strong: #334155;
    --color-accent: #e30613;
    --color-accent-hover: #c00510;
    --color-text: #f1f5f9;
    --color-muted: #cbd5e1;
    --bs-secondary-color: #cbd5e1;
    --bs-secondary-color-rgb: 203, 213, 225;
    --color-success: #22c55e;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --radius: 12px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --hero-image: url('https://static.wixstatic.com/media/a50c18_8c1b532a892048d5a3dc5ff5680da8ff~mv2.jpg/v1/fill/w_1920,h_800,al_c,q_80/Bez-n%C3%A1zvu-1.jpg');
    --nav-height: 72px;

    /* Povrchy, které byly zadrátované na tmavé hodnoty — bez nich nejde přebarvit motiv */
    --color-deep: #0a0f1a;
    --color-scrim: rgba(2, 6, 23, 0.92);
    --color-scrim-soft: rgba(2, 6, 23, 0.55);
    --color-raise-1: rgba(255, 255, 255, 0.03);
    --color-raise-2: rgba(255, 255, 255, 0.04);
    --color-raise-3: rgba(255, 255, 255, 0.06);
    --color-raise-4: rgba(255, 255, 255, 0.12);
    --color-on-dark: rgba(255, 255, 255, 0.65);
    --color-sunken: rgba(15, 23, 42, 0.45);

    /* Navigace a hero stojí na tmavém podkladu v OBOU motivech, takže jejich text
       nesmí brát barvy motivu — ve světlém režimu by na tmavém pruhu zčernal.
       Tyhle tři se proto s motivem nepřepínají. */
    --on-dark-text: #f1f5f9;
    --on-dark-muted: rgba(255, 255, 255, 0.72);
    --on-dark-border: rgba(255, 255, 255, 0.14);

    /* Barevné tóny hlášek a štítků. V tmavém motivu pastel na průsvitné výplni,
       ve světlém sytý text na jemné výplni — jinak by pastel na bílé zmizel. */
    --tone-ok-text: #86efac;
    --tone-ok-bg: rgba(34, 197, 94, 0.12);
    --tone-ok-border: rgba(34, 197, 94, 0.3);
    --tone-danger-text: #fca5a5;
    --tone-danger-bg: rgba(227, 6, 19, 0.12);
    --tone-danger-border: rgba(227, 6, 19, 0.3);
    --tone-info-text: #93c5fd;
    --tone-info-bg: rgba(59, 130, 246, 0.12);
    --tone-info-border: rgba(59, 130, 246, 0.3);
    --tone-warn-text: #fde047;
    --tone-warn-bg: rgba(234, 179, 8, 0.12);
    --tone-warn-border: rgba(234, 179, 8, 0.3);
    --tone-amber-text: #fbbf24;
    --tone-amber-bg: rgba(245, 158, 11, 0.18);
    --tone-sky-text: #7dd3fc;
    --tone-sky-bg: rgba(56, 189, 248, 0.18);
    --tone-neutral-text: #cbd5e1;
    --tone-neutral-bg: rgba(148, 163, 184, 0.22);
}

/* Dual-domain brand skins (same app, Host-based BrandContext) */
body.brand-globalmoto {
    --color-accent: #c8102e;
    --color-accent-hover: #a50d25;
}

body.brand-forrealbikers {
    --color-accent: #e30613;
    --color-accent-hover: #c00510;
}

.dev-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: #f59e0b;
    color: #111827;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
}

/* An admin working as a partner (admin.php → partner → Work as partner). Not
   sticky: the catalog's table headers stick to the top. */
.acting-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    background: #fde68a;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid #f59e0b;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    margin: 0;
    line-height: 1.5;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover { color: var(--color-accent-hover); }

h1, h2, h3, h4, .heading-caps {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
}

.text-accent-italic {
    font-style: italic;
    color: var(--color-muted);
}

.app-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Navbar */
.navbar-spark {
    position: relative;
    z-index: 1040;
    background: var(--color-scrim) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--on-dark-border);
    color: var(--on-dark-text);
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    overflow: visible;
}

.navbar-spark .navbar-collapse {
    overflow: visible;
}

.navbar-spark .container-fluid {
    overflow: visible;
}

.navbar-spark .navbar-brand img { height: 40px; }

.navbar-spark .nav-link {
    color: var(--on-dark-muted) !important;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem !important;
}

.navbar-spark .nav-link:hover,
.navbar-spark .nav-link.active {
    color: var(--on-dark-text) !important;
}

.navbar-spark .nav-link.active { color: var(--color-accent) !important; }

.navbar-spark .navbar-toggler {
    border-color: var(--on-dark-border);
    padding: 0.35rem 0.5rem;
}

/* navbar-dark už dodává bílou ikonu; invert(1) z ní dělal černou na tmavém pruhu,
   takže hamburger nebyl vidět ani v tmavém režimu. */
.navbar-spark .navbar-toggler-icon {
    filter: none;
}

.navbar-spark .navbar-toggler:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none;
}

.user-pill {
    font-size: 0.75rem;
    color: var(--on-dark-muted) !important;
    text-transform: none;
    letter-spacing: 0;
}

.user-pill { color: var(--on-dark-muted); }
.user-pill strong { color: var(--color-accent); }

@media (max-width: 991.98px) {
    .user-pill-full { display: none !important; }
    .user-pill-short { display: block !important; }
}

@media (min-width: 992px) {
    .user-pill-short { display: none !important; }
}

/* Glass card */
.glass-card {
    background: var(--color-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}

.glass-card-sm { padding: 1rem; }

/* Buttons */
.btn-spark,
.btn-primary {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8125rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
}

.btn-spark:hover,
.btn-primary:hover {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.btn-outline-spark {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8125rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
}

.btn-outline-spark:hover,
.btn-outline-spark.active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(227, 6, 19, 0.08);
}

.btn-secondary {
    background-color: var(--color-surface-solid) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* Forms */
.form-control, .form-select {
    background-color: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    background-color: var(--color-surface-solid);
    border-color: var(--color-accent);
    color: var(--color-text);
    box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.25);
}

.form-label { color: var(--color-muted); font-size: 0.875rem; }

/* Alerts */
.alert {
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.alert-success {
    background: var(--tone-ok-bg);
    color: var(--tone-ok-text);
    border-color: var(--tone-ok-border);
}

.alert-danger {
    background: var(--tone-danger-bg);
    color: var(--tone-danger-text);
    border-color: var(--tone-danger-border);
}

.alert-info {
    background: var(--tone-info-bg);
    color: var(--tone-info-text);
    border-color: var(--tone-info-border);
}

.alert-warning {
    background: var(--tone-warn-bg);
    color: var(--tone-warn-text);
    border-color: var(--tone-warn-border);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: var(--color-raise-1);
}

.table thead th {
    background-color: var(--color-surface-solid);
    color: var(--color-text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--color-accent);
}

.table-dark {
    --bs-table-bg: var(--color-surface-solid);
    --bs-table-color: var(--color-text);
}

.table tbody td,
.table tbody th,
.table tfoot th,
.table tfoot td {
    color: var(--color-text) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--color-text) !important;
    background-color: var(--color-raise-1) !important;
    --bs-table-bg-type: var(--color-raise-1);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

.table tbody tr.table-dark td,
.table tbody tr.table-dark th {
    color: var(--color-text) !important;
    background-color: var(--color-deep) !important;
}

.app-shell .text-dark {
    color: var(--color-text) !important;
}

.text-muted,
.app-shell .text-muted {
    color: var(--color-muted) !important;
}

.preorder-table .form-control,
.order-table .form-control {
    color: var(--color-text) !important;
    background-color: var(--color-surface-solid) !important;
    border-color: var(--color-border);
    min-width: 3rem;
}

.badge.bg-success { background-color: var(--color-success) !important; }

/* Admin tabs */
.nav-tabs {
    border-bottom-color: var(--color-border);
}

.nav-tabs .nav-link {
    color: var(--color-muted);
    border: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.nav-tabs .nav-link.active {
    color: var(--color-accent) !important;
    background: transparent;
    border-bottom: 2px solid var(--color-accent);
}

/* Hero */
.hero-spark {
    position: relative;
    min-height: 320px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
    background: var(--color-surface-solid) center/cover no-repeat;
    background-image: linear-gradient(105deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.62) 55%, rgba(2, 6, 23, 0.78) 100%), var(--hero-image);
}

.hero-spark__content {
    position: relative;
    z-index: 1;
    padding: 3rem 2rem;
    max-width: 640px;
}

.hero-spark__content,
.hero-spark__content h1 {
    color: var(--on-dark-text);
}

.hero-spark__tag {
    font-style: italic;
    color: var(--on-dark-muted);
    margin-bottom: 0.5rem;
    display: block;
}

.hero-spark h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .hero-spark { min-height: 260px; }
    .hero-spark__content { padding: 2rem 1.25rem; }
}

/* Quick links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-link-card {
    display: block;
    padding: 1.25rem;
    text-align: center;
    color: var(--color-text);
    transition: border-color 0.2s, transform 0.2s;
}

.quick-link-card:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.quick-link-card .icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

/* Brand chips dashboard */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.brand-chip {
    text-align: center;
    padding: 1rem;
}

.brand-chip__name {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}

.brand-chip__discount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

.brand-chip__badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-muted);
}

.dashboard-contact__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.dashboard-contact__list dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: 0.15rem;
}

.dashboard-contact__list dd {
    margin-bottom: 0.75rem;
}

.dashboard-contact__list dd:last-child {
    margin-bottom: 0;
}

.dashboard-contact__list a {
    color: var(--color-accent);
    text-decoration: none;
}

.dashboard-contact__list a:hover {
    text-decoration: underline;
}

/* Preorder mode toggle */
.mode-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.mode-toggle a {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    background: var(--color-surface-solid);
}

.mode-toggle a.active {
    background: var(--color-accent);
    color: #fff;
}

/* Product catalog grid */
.catalog-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.product-card {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 6, 19, 0.4);
}

.product-card__img-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--color-deep);
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.product-card:hover .product-card__img {
    transform: scale(1.04);
}

.product-card__body { padding: 1rem; }

.product-card__brand {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    font-weight: 600;
}

.product-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0.35rem 0;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.product-card__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

.product-card__price-partner {
    font-weight: 700;
    color: var(--color-accent);
}

.product-card__availability {
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

/* Stock as a state, never a count: dot + word. Colours come from the tone tokens,
   so both themes keep the same meaning. */
.stock-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.stock-state__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}
.stock-state--ok { color: var(--tone-ok-text); }
.stock-state--ok .stock-state__dot {
    background: var(--color-success);
    box-shadow: 0 0 0 3px var(--tone-ok-bg);
}
.stock-state--low { color: var(--tone-amber-text); }
.stock-state--low .stock-state__dot { box-shadow: 0 0 0 3px var(--tone-amber-bg); }
.stock-state--out { color: var(--tone-neutral-text); font-weight: 500; }
.stock-state--out .stock-state__dot {
    background: transparent;
    border: 1.5px solid currentColor;
}
.stock-state--preorder { color: var(--tone-sky-text); }
.stock-state--preorder .stock-state__dot { box-shadow: 0 0 0 3px var(--tone-sky-bg); }

.bulk-size-cell .stock-state,
.size-grid__cell .stock-state {
    display: flex;
    justify-content: center;
    margin-top: 0.3rem;
}
.bulk-size-cell--out .form-control,
.size-grid__cell--out .form-control {
    border-style: dashed;
    color: var(--color-muted);
}
.product-card__availability .stock-state { text-transform: none; }

/* Under a quantity that stock does not fully cover. */
.stock-split {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--tone-amber-text);
    margin-top: 0.2rem;
    white-space: nowrap;
}
.stock-split--all { color: var(--tone-neutral-text); }

/* Checkout button while the company id is missing: 40 % greyed stub, 60 % the
   action that actually gets them somewhere. */
.preorder-checkout-action--split {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}
.preorder-checkout-action__stub {
    flex: 0 0 40%;
    opacity: 0.45;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preorder-checkout-action__fill { flex: 1 1 60%; }
@media (min-width: 992px) {
    .preorder-checkout-action--split { width: auto; min-width: 26rem; }
}

/* Dashboard notice: company id missing. */
.billing-missing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.billing-missing__text { flex: 1 1 18rem; }

/* Admin: the partner's IČO / DIČ was found in a register (App\Integrations\CompanyCheck). */
.company-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: #198754;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
}
.company-check[hidden] { display: none; }

/* Admin: registration link as a QR code, to scan on the spot. The code keeps its
   white background in the dark theme too, phones read dark-on-light best. */
.invite-qr { max-width: 16rem; }
.invite-qr__code {
    width: 100%;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 0.5rem;
}
.invite-qr__code svg { display: block; width: 100%; height: auto; }

/* Filters bar */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.filters-bar .form-group { min-width: 160px; flex: 1; }

.filters-bar__stock {
    min-width: auto;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem 0.5rem;
    background: var(--color-raise-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.filters-bar__stock-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    line-height: 1.2;
    white-space: nowrap;
}

.filters-bar__stock-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.filters-bar__stock-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filters-bar__stock-ui {
    display: inline-block;
    width: 2.5rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--color-raise-4);
    border: 1px solid var(--color-border);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.filters-bar__stock-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.35rem - 6px);
    height: calc(1.35rem - 6px);
    border-radius: 50%;
    background: var(--color-muted);
    transition: transform 0.2s ease, background 0.2s ease;
}

.filters-bar__stock-input:checked + .filters-bar__stock-ui {
    background: rgba(230, 57, 70, 0.35);
    border-color: var(--color-accent);
}

.filters-bar__stock-input:checked + .filters-bar__stock-ui::after {
    transform: translateX(1.1rem);
    background: var(--color-accent);
}

.filters-bar__stock-input:focus-visible + .filters-bar__stock-ui {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Modal / offcanvas dark */
.modal-content, .offcanvas {
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.modal-header, .offcanvas-header {
    border-bottom-color: var(--color-border);
}

.modal-footer, .offcanvas-footer {
    border-top-color: var(--color-border);
}

.btn-close { filter: invert(1); }

/* Ve světlém motivu je modál bílý, takže invertovaný křížek by na něm zmizel. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .btn-close { filter: none; }
}
:root[data-theme="light"] .btn-close { filter: none; }

.size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
}

.size-grid label {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-align: center;
    display: block;
}

.size-grid input {
    text-align: center;
    padding: 0.35rem;
}

/* Preorder bulk table */
.preorder-table th.size-column,
.preorder-table td.size-column {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    text-align: center;
}

.preorder-bulk-wrap {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.preorder-table th.sticky-column-left,
.preorder-table td.sticky-column-left {
    position: sticky;
    left: 0;
    background-color: var(--color-surface-solid);
    z-index: 2;
}

.preorder-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--color-surface-solid);
    z-index: 3;
}

.preorder-table th.sticky-column-left {
    z-index: 4;
}

.preorder-table tbody tr.table-dark td {
    background-color: var(--color-deep) !important;
}

.preorder-table tfoot th {
    background-color: var(--color-surface-solid);
    border-top: 3px solid var(--color-accent);
}

/* Bulk order — product rows */
.bulk-order-row__img {
    width: 88px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.bulk-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.75rem;
}

.bulk-size-cell label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
}

.bulk-size-cell .form-control {
    min-height: 2.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem 0.35rem;
}

.bulk-order-row__total {
    min-width: 4rem;
}

/* Language dropdown */
.lang-dropdown {
    position: relative;
    z-index: 1050;
}

.lang-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    color: var(--on-dark-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--on-dark-border);
    border-radius: 6px;
    box-shadow: none;
}

.lang-dropdown__toggle:hover,
.lang-dropdown__toggle:focus,
.lang-dropdown__toggle.show {
    color: var(--on-dark-text);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-dropdown__toggle::after {
    margin-left: 0.15rem;
    opacity: 0.6;
}

.lang-dropdown__code {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.lang-dropdown__menu {
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.35rem;
    min-width: 11rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: 1100 !important;
}

.lang-dropdown__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
}

.lang-dropdown__menu .dropdown-item:hover,
.lang-dropdown__menu .dropdown-item:focus {
    color: var(--color-text);
    background: var(--color-raise-3);
}

.lang-dropdown__menu .dropdown-item.active {
    color: var(--color-accent);
    background: rgba(227, 6, 19, 0.12);
}

.lang-dropdown__item-code {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.7;
    min-width: 1.5rem;
}

/* Marketing browser */
.marketing-breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.marketing-breadcrumb a {
    color: var(--color-muted);
}

.marketing-files-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.5rem;
}

.marketing-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.marketing-item--has-preview {
    flex-wrap: wrap;
    padding: 1rem 0;
}

.marketing-item__preview-link {
    flex-shrink: 0;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.25);
}

.marketing-item__preview {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
}

.marketing-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.marketing-item__name {
    word-break: break-word;
}

.marketing-item__download {
    flex-shrink: 0;
    margin-left: auto;
}

@media (min-width: 576px) {
    .marketing-item--has-preview .marketing-item__preview {
        width: 140px;
        height: 105px;
    }
}

.marketing-item:last-child {
    border-bottom: none;
}

.marketing-folder-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    color: var(--color-text);
    font-weight: 500;
}

.marketing-folder-link:hover {
    color: var(--color-accent);
}

.marketing-admin-toolbar__forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.marketing-admin-toolbar__form {
    margin: 0;
}

/* /feeddocs: public documentation of the partner product feed. */
.feeddocs-page {
    background: var(--color-bg);
    color: var(--color-text);
}

.feeddocs {
    max-width: 1200px;
}

.feeddocs__toc {
    position: sticky;
    top: 1rem;
    font-size: 0.875rem;
}

.feeddocs__toc ol {
    padding-left: 1.25rem;
}

.feeddocs__toc li {
    margin-bottom: 0.25rem;
}

.feeddocs__body section {
    scroll-margin-top: 1rem;
}

.feeddocs__body section > :last-child {
    margin-bottom: 0;
}

.feeddocs__code {
    background: var(--color-sunken);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    max-height: 32rem;
    overflow: auto;
    white-space: pre;
}

.feeddocs__code code {
    color: inherit;
}

.feeddocs__url {
    word-break: break-all;
}

/* Upload form: several files, dropped on it or chosen, with a line each while they go. */
.marketing-upload {
    border: 1px dashed transparent;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.marketing-upload.is-dragover {
    border-color: var(--color-accent);
    background-color: var(--color-sunken);
}

.marketing-upload__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    font-size: 0.8125rem;
}

.marketing-upload__item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--color-border);
}

.marketing-upload__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-upload__state {
    flex-shrink: 0;
    color: var(--color-muted);
}

.marketing-upload__item.is-done .marketing-upload__state {
    color: var(--color-success);
}

.marketing-upload__item.is-failed .marketing-upload__state {
    color: #dc3545;
    white-space: normal;
    text-align: right;
}

.marketing-folder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.marketing-folder-row .marketing-folder-link {
    flex: 1;
    min-width: 0;
}

.marketing-folder-row__delete {
    flex-shrink: 0;
    margin: 0;
}

.marketing-item__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.marketing-item__actions .marketing-item__download {
    margin-left: 0;
}

/* Responsive data tables → cards */
@media (max-width: 767.98px) {
    .table-responsive-cards thead { display: none; }

    .table-responsive-cards tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 0.75rem;
        background: var(--color-surface);
    }

    .table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border: none;
    }

    .table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: var(--color-muted);
        margin-right: 1rem;
    }
}

/* Login page — split B2B layout */
body.page-login {
    background: var(--color-bg);
    overflow: hidden;
}

body.page-login .navbar-spark {
    z-index: 1100;
}

body.page-login .lang-dropdown__menu {
    z-index: 1200 !important;
}

.app-shell--auth {
    max-width: none;
    padding: 0;
}

.navbar-spark--minimal {
    border-bottom: 1px solid var(--on-dark-border);
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(12px);
}

.auth-page {
    display: grid;
    grid-template-columns: 1fr minmax(380px, 480px);
    grid-template-rows: 1fr;
    min-height: calc(100vh - var(--nav-height));
}

.auth-page__brand {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 320px;
    overflow: hidden;
}

.auth-page__panel {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
}

.auth-page__visual {
    position: absolute;
    inset: 0;
    background-image: var(--auth-visual, var(--hero-image));
    background-size: cover;
    background-position: center;
}

.auth-page__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(2, 6, 23, 0.94) 0%,
        rgba(2, 6, 23, 0.72) 45%,
        rgba(127, 29, 29, 0.35) 100%
    );
}

.auth-page__brand-inner {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 5vw, 3.5rem);
    max-width: 640px;
    color: #f8fafc;
}

.auth-page__logo {
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

.auth-page__portal-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.auth-page__headline {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.auth-page__lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(241, 245, 249, 0.82);
    margin-bottom: 0;
}

.auth-page__highlights {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.auth-page__highlights li {
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border-left: 2px solid var(--color-accent);
    color: rgba(241, 245, 249, 0.9);
}

.auth-page__form-card {
    width: 100%;
    max-width: 400px;
}

.auth-form__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.auth-form__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.auth-form__subtitle {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 1.75rem;
    line-height: 1.55;
}

.auth-page__footer-note {
    margin-top: 2rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: center;
}

@media (max-width: 991.98px) {
    .auth-page {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        height: calc(100dvh - var(--nav-height));
        max-height: calc(100dvh - var(--nav-height));
        min-height: 0;
        overflow: hidden;
    }

    .auth-page__panel {
        grid-column: 1;
        grid-row: 1;
        border-left: none;
        border-bottom: 1px solid var(--color-border);
        padding: 1rem 1rem 0.75rem;
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .auth-form__eyebrow {
        display: none;
    }

    .auth-page__form-card {
        max-width: none;
    }

    .auth-form__title {
        font-size: 1.5rem;
    }

    .auth-form__subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .auth-page__footer-note {
        margin-top: 1.25rem;
    }

    .auth-page__brand {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        max-height: 9rem;
        flex-shrink: 0;
    }

    .auth-page__brand-inner {
        padding: 1rem 1.25rem;
    }

    .auth-page__logo {
        width: 72px;
        margin-bottom: 0.35rem;
    }

    .auth-page__portal-label {
        margin-bottom: 0.35rem;
        font-size: 0.6rem;
    }

    .auth-page__headline {
        font-size: 1rem;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .auth-page__lead,
    .auth-page__highlights--desktop {
        display: none;
    }
}

.site-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-muted);
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-border);
    margin-top: 2rem;
}

/* Img thumbnail in tables */
.img-thumbnail {
    background: var(--color-deep);
    border-color: var(--color-border);
}

.discount-pill {
    display: inline-block;
    background: rgba(227, 6, 19, 0.15);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.variant-quantity-input.is-stock-warning {
    border-color: #f0ad4e;
    box-shadow: 0 0 0 1px rgba(240, 173, 78, 0.35);
}

/* Checkout action — mirrored above and below the product list */
.preorder-checkout-action {
    display: flex;
    justify-content: flex-end;
}

.preorder-checkout-action--top {
    margin-bottom: 1.25rem;
}

.preorder-checkout-action--bottom {
    margin-top: 1.5rem;
}

.order-draft-summary {
    border-left: 3px solid var(--color-accent);
    transition: opacity 0.2s ease;
}

.order-draft-summary--empty {
    opacity: 0.55;
}

.order-draft-summary--empty .order-draft-summary__total,
.order-draft-summary--empty .order-draft-summary__meta {
    display: none;
}

.order-draft-summary__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-bottom: 0.5rem;
}

.order-draft-summary__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
    min-width: 0;
}

.order-draft-summary__title {
    margin-right: 0.25rem;
}

.order-draft-summary__meta {
    font-size: 0.875rem;
    color: var(--color-muted);
}

.order-draft-summary__total {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.05rem;
}

.order-draft-summary__toggle {
    flex-shrink: 0;
}

#draft-cart-panel {
    margin-top: 0.25rem;
}

.order-draft-cart-panel {
    margin-top: 0.5rem;
    padding: 0.75rem 0.85rem 0.5rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
}

.order-draft-cart-table {
    margin-bottom: 0;
}

.order-draft-cart-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    border-bottom-color: var(--color-border);
    white-space: nowrap;
}

.order-draft-cart-table__row td {
    vertical-align: middle;
    font-size: 0.9rem;
    border-bottom-color: var(--color-raise-3);
}

.order-draft-cart-table__product {
    max-width: 28rem;
    word-break: break-word;
}

.order-draft-cart-table__price {
    font-weight: 600;
    color: var(--color-accent);
    white-space: nowrap;
}

.order-draft-cart-remove {
    line-height: 1;
    padding: 0.15rem 0.45rem;
}

.product-total-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 2.5rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.35rem;
    transition: background-color 0.2s ease;
}

.product-total-wrap--flash-up {
    background-color: rgba(110, 231, 160, 0.14);
}

.product-total-wrap--flash-down {
    background-color: rgba(232, 144, 144, 0.12);
}

.product-total-wrap--inline {
    align-items: flex-start;
    vertical-align: middle;
}

.qty-count-display {
    display: inline-block;
    transition: color 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.draft-units-count {
    font-weight: 700;
    margin: 0 0.2rem;
}

.qty-pulse-up {
    animation: qty-pulse-up 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.qty-pulse-down {
    animation: qty-pulse-down 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes qty-pulse-up {
    0% {
        transform: scale(1);
        color: inherit;
    }
    40% {
        transform: scale(1.2);
        color: #6ee7a0;
        text-shadow: 0 0 14px rgba(110, 231, 160, 0.55);
    }
    100% {
        transform: scale(1);
        color: inherit;
        text-shadow: none;
    }
}

@keyframes qty-pulse-down {
    0% {
        transform: scale(1);
        color: inherit;
    }
    40% {
        transform: scale(1.14);
        color: #e89090;
        text-shadow: 0 0 10px rgba(232, 144, 144, 0.4);
    }
    100% {
        transform: scale(1);
        color: inherit;
        text-shadow: none;
    }
}

.product-add-feedback {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6ee7a0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.25s ease, transform 0.2s ease;
    transform: translateY(-4px);
    line-height: 1.2;
    white-space: nowrap;
}

.product-add-feedback--down {
    color: #e89090;
}

.product-add-feedback--visible {
    opacity: 1;
    max-height: 1.5rem;
    transform: translateY(0);
}

.bulk-order-row__total .product-add-feedback--visible {
    margin-top: 0.1rem;
}

.order-cart-fab {
    position: fixed;
    top: calc(4.5rem + env(safe-area-inset-top, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    z-index: 1040;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    background: rgba(20, 20, 24, 0.92);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.env-dev .order-cart-fab {
    top: calc(6.5rem + env(safe-area-inset-top, 0px));
}

.order-cart-fab:hover {
    transform: scale(1.06);
    color: #fff;
    background: var(--color-accent);
}

.order-cart-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.order-cart-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #111;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

.order-cart-fab__badge--bump {
    animation: qty-bump 0.45s ease;
}

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    max-width: 7.5rem;
    margin: 0 auto;
}

.qty-stepper .form-control {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    -moz-appearance: textfield;
}

.qty-stepper .form-control::-webkit-outer-spin-button,
.qty-stepper .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper__btn {
    min-width: 2rem;
    padding: 0.15rem 0.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.ares-ico-wrap {
    position: relative;
}

.ares-ico-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 1050;
    /* Z motivu, ne natvrdo tmavé: ve světlém režimu byl tmavý panel s tmavým textem. */
    background: var(--color-surface-solid);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: 0.5rem;
    box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.35));
    overflow: hidden;
}

.ares-ico-dropdown__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--color-raise-3);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ares-ico-dropdown__item:last-child {
    border-bottom: 0;
}

.ares-ico-dropdown__item:hover,
.ares-ico-dropdown__item:focus-visible {
    background: rgba(110, 231, 160, 0.1);
    outline: none;
}

.ares-ico-dropdown__meta {
    font-size: 0.78rem;
    color: var(--color-on-dark);
}

.ares-ico-dropdown__empty {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    color: var(--color-on-dark);
}

/* ===== Admin: párování a řazení kategorií ===== */

.cat-section { margin-bottom: 2.25rem; }

.cat-section__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.cat-counter {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-border);
    color: var(--color-muted);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* --- zásobník nespárovaných --- */

.cat-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem;
    min-height: 4.5rem;
    background: var(--color-sunken);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

.cat-pool__empty {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0.35rem 0.25rem;
}

.cat-block {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    cursor: grab;
    user-select: none;
}

.cat-block:hover { border-color: var(--color-accent); }
.cat-block.dragging { opacity: 0.4; cursor: grabbing; }

.cat-block__grip,
.cat-target__grip,
.cat-product__grip {
    color: var(--color-muted);
    cursor: grab;
    line-height: 1;
    font-size: 1.05rem;
}

.cat-block__name { font-weight: 600; font-size: 0.9rem; }

.cat-block__count,
.cat-chip__count {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--color-border);
    color: var(--color-muted);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
}

.cat-block__promote {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0 0.15rem;
}

.cat-block__promote:hover { text-decoration: underline; }
.cat-block__promote:disabled { opacity: 0.5; cursor: default; }

/* --- cílové kategorie --- */

.cat-targets { display: flex; flex-direction: column; gap: 0.75rem; }

.cat-target {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.cat-target.dragging { opacity: 0.45; }

.cat-target--over {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.25);
}

.cat-target--preorder { border-left: 3px solid #f59e0b; }
.cat-target--off { opacity: 0.6; }

.cat-target__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.cat-target__name { font-size: 1rem; }

.cat-target__stat {
    font-size: 0.8rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.cat-target__actions { margin-left: auto; display: flex; gap: 0.4rem; }

.cat-target__drop {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.65rem;
    padding: 0.5rem;
    min-height: 2.9rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}

.cat-target__hint { color: var(--color-muted); font-size: 0.82rem; }

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.22rem 0.3rem 0.22rem 0.6rem;
    font-size: 0.85rem;
}

.cat-chip__x {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.cat-chip__x:hover { color: var(--color-accent); }

.cat-pill {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-border);
    color: var(--color-muted);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
}

.cat-pill--preorder { background: var(--tone-amber-bg); color: var(--tone-amber-text); }

/* --- editace kategorie --- */

.cat-edit {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.cat-edit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.cat-edit__grid label { display: flex; flex-direction: column; gap: 0.2rem; }
.cat-edit__grid label span { font-size: 0.78rem; color: var(--color-muted); }

.cat-edit__checks { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem; }
.cat-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }

.cat-delete { margin-top: 0.5rem; }

.cat-new { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 40rem; }
.cat-new .form-control { flex: 1 1 12rem; }

@media (max-width: 576px) {
    .cat-target__actions { margin-left: 0; width: 100%; }
}

/* ===== Pokladna: přepínač předobjednávky ===== */

.preorder-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    margin-bottom: 0.9rem;
    background: var(--color-surface-solid);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.preorder-toggle:hover { border-color: #f59e0b; }

.preorder-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.preorder-toggle__box {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 0.1rem;
    border: 2px solid var(--color-muted);
    border-radius: 6px;
    background: transparent;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.preorder-toggle__box::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid #0b1220;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.preorder-toggle__input:checked ~ .preorder-toggle__box {
    background: #f59e0b;
    border-color: #f59e0b;
}

.preorder-toggle__input:checked ~ .preorder-toggle__box::after { transform: rotate(45deg) scale(1); }

.preorder-toggle__input:focus-visible ~ .preorder-toggle__box {
    outline: 2px solid #f59e0b;
    outline-offset: 3px;
}

.preorder-toggle:has(.preorder-toggle__input:checked) {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.preorder-toggle__text { display: flex; flex-direction: column; gap: 0.15rem; }
.preorder-toggle__text strong { font-size: 1rem; }
.preorder-toggle__text span { font-size: 0.86rem; color: var(--color-muted); }

.preorder-date {
    margin-bottom: 1rem;
    padding-left: 1.1rem;
    border-left: 3px solid #f59e0b;
}

.checkout-submit { min-width: 14rem; }

@media (prefers-reduced-motion: reduce) {
    .preorder-toggle,
    .preorder-toggle__box,
    .preorder-toggle__box::after { transition: none; }
}

/* ===== Katalog: záhlaví skupiny podle pohlaví ===== */

.catalog-group {
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 2.5rem 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--color-accent);
    color: var(--color-text);
}

.catalog-group:first-of-type { margin-top: 0.5rem; }

.cat-pill--split { background: var(--tone-sky-bg); color: var(--tone-sky-text); }

/* ===== Katalog: filtr značek jako primární ===== */

.filters-bar { flex-direction: column; align-items: stretch; gap: 0.9rem; }

.brand-filter { display: flex; flex-direction: column; gap: 0.45rem; }

.brand-filter__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-muted);
}

.brand-filter__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.brand-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.05rem;
    border: 2px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-solid);
    color: var(--color-text);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.brand-filter__chip:hover { border-color: var(--color-accent); color: var(--color-text); }

.brand-filter__chip--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.brand-filter__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.filters-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.filters-bar__row .form-group { margin-bottom: 0; }
.filters-bar__row .form-select { min-width: 15rem; }

.filters-bar__count {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    padding-bottom: 0.4rem;
}

@media (max-width: 576px) {
    .filters-bar__count { margin-left: 0; }
    .filters-bar__row .form-select { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .brand-filter__chip { transition: none; } }

.cat-pill--brand {
    background: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    letter-spacing: 0.08em;
}

/* Značka nad kategoriemi v rozbalovátku filtru */
.filters-bar optgroup {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.filters-bar optgroup option {
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: normal;
}

.cat-target__stat-hidden { color: var(--color-accent); font-weight: 600; }

/* ===== Původ dat: z CBG vs. starý import ===== */

.origin-pill {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    white-space: nowrap;
}

.origin-pill--cbg    { background: var(--tone-ok-bg);      color: var(--tone-ok-text); }
.origin-pill--legacy { background: var(--tone-neutral-bg); color: var(--tone-neutral-text); }
.origin-pill--mixed  { background: var(--tone-amber-bg);   color: var(--tone-amber-text); }

/* ===== Pořadí produktů podle váhy ===== */

.weights-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
    padding: 0.6rem 0;
}

.weights-toolbar--bottom { position: static; margin-top: 1rem; }
.weights-toolbar__count { font-size: 0.85rem; color: var(--color-muted); }
.weights-toolbar__search { max-width: 16rem; margin-left: auto; }

.weight-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.weight-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    padding: 0.35rem 0.6rem;
}

.weight-row__input {
    width: 5rem;
    flex: 0 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.weight-row__img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    flex: 0 0 auto;
}

.weight-row__img--none { background: var(--color-border); }

.weight-row__body { display: flex; flex-direction: column; min-width: 0; }
.weight-row__title { font-size: 0.9rem; font-weight: 600; }
.weight-row__meta { font-size: 0.76rem; color: var(--color-muted); }

@media (max-width: 576px) {
    .weights-toolbar__search { margin-left: 0; max-width: 100%; }
    .weight-row__input { width: 4rem; }
}

.cat-products {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

.cat-products .weights-toolbar { position: static; padding-top: 0; }
.cat-products .weight-list { max-height: 30rem; overflow-y: auto; padding-right: 0.3rem; }

/* ===== Fronta schvalování ===== */

.nav-badge {
    display: inline-block;
    min-width: 1.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    margin-left: 0.3rem;
    padding: 0 0.3rem;
}

.approval-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    position: sticky;
    top: 0;
    z-index: 5;
}

.approval-toolbar__count {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}

.nav-badge--muted { background: var(--color-border); color: var(--color-muted); }
.weight-row__action { margin-left: auto; flex: 0 0 auto; }

/* ===== Předobjednávky v katalogu (kolabovatelný blok) ===== */

.catalog-preorder {
    border: 2px solid #f59e0b;
    border-radius: var(--radius);
    background: rgba(245, 158, 11, 0.06);
    padding: 0.35rem 1rem 1rem;
    margin-bottom: 1.75rem;
}

.catalog-preorder__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.6rem 0;
    list-style: none;
}

.catalog-preorder__summary::-webkit-details-marker { display: none; }

.catalog-preorder__summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 7px solid #f59e0b;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

.catalog-preorder[open] > .catalog-preorder__summary::before { transform: rotate(90deg); }

.catalog-preorder__summary:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 3px;
    border-radius: 4px;
}

.catalog-group--preorder {
    border-bottom: none;
    margin: 0;
    padding: 0;
    color: var(--tone-amber-text);
}

.catalog-preorder__count {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-preorder__summary::before { transition: none; }
}

/* ===== Administrace: vzhled značek ===== */

.branding-brand {
    padding: 1.1rem 0 1.4rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.4rem;
}

.branding-brand:last-of-type { border-bottom: none; }

.branding-brand__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.branding-preview {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.branding-preview__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}

.branding-preview__logo {
    background: #0f172a;
    border-radius: 6px;
    padding: 0.85rem;
    text-align: center;
}

.branding-preview__logo img { max-height: 40px; width: auto; }

.branding-preview__accent {
    border-radius: 6px;
    padding: 0.4rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    font-family: monospace;
}

.preorder-import {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.4rem;
}

.preorder-import__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.preorder-import__head .btn { margin-left: auto; }

.preorder-import__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.preorder-import__form input[type="file"] { max-width: 24rem; }

/* ===== Světlý režim =====
   Tmavý motiv zůstává výchozí v :root. Světlý se použije, když ho chce systém a
   uživatel si výslovně nezvolil tmavý, nebo když si ho zvolí sám — přepínač tak
   vyhraje v obou směrech. */

:root[data-theme="light"],
:root[data-theme="light"] body {
    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-bg: #eceff4;
        --color-surface: #ffffff;
        --color-surface-solid: #ffffff;
        --color-border: #dde3ea;
        --color-border-strong: #b9c3d0;
        --color-text: #0f172a;
        --color-muted: #52606d;
        --bs-secondary-color: #52606d;
        --bs-secondary-color-rgb: 82, 96, 109;
        --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);

        --color-deep: #e5e9ef;
        /* Lišta zůstává tmavá i tady, takže skoro neprůhledná — 0.72 z ní dělala
           nevýraznou šeď. */
        --color-scrim: rgba(15, 23, 42, 0.96);
        --color-scrim-soft: rgba(15, 23, 42, 0.72);
        --color-raise-1: rgba(15, 23, 42, 0.02);
        --color-raise-2: rgba(15, 23, 42, 0.035);
        --color-raise-3: rgba(15, 23, 42, 0.055);
        --color-raise-4: rgba(15, 23, 42, 0.10);
        --color-on-dark: rgba(255, 255, 255, 0.85);
        --color-sunken: rgba(15, 23, 42, 0.035);

        /* Sytý text na jemné výplni — pastel z tmavého motivu by na bílé zmizel.
           Text drží kontrast nad 4.5:1, výplň zůstává decentní. */
        --tone-ok-text: #15803d;
        --tone-ok-bg: #e9f6ed;
        --tone-ok-border: #b6e0c3;
        --tone-danger-text: #b3261e;
        --tone-danger-bg: #fdecea;
        --tone-danger-border: #f3c2be;
        --tone-info-text: #1d4ed8;
        --tone-info-bg: #eaf0fe;
        --tone-info-border: #c3d4fb;
        --tone-warn-text: #92610a;
        --tone-warn-bg: #fdf3d9;
        --tone-warn-border: #ecd49a;
        --tone-amber-text: #92610a;
        --tone-amber-bg: #fdf3d9;
        --tone-sky-text: #0b6b8f;
        --tone-sky-bg: #e4f4fb;
        --tone-neutral-text: #475569;
        --tone-neutral-bg: #e8ecf1;
    }
}

:root[data-theme="light"] {
    --color-bg: #eceff4;
    --color-surface: #ffffff;
    --color-surface-solid: #ffffff;
    --color-border: #dde3ea;
    --color-border-strong: #b9c3d0;
    --color-text: #0f172a;
    --color-muted: #52606d;
    --bs-secondary-color: #52606d;
    --bs-secondary-color-rgb: 82, 96, 109;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);

    --color-deep: #e5e9ef;
    /* Lišta zůstává tmavá i tady, takže skoro neprůhledná — 0.72 z ní dělala
       nevýraznou šeď. */
    --color-scrim: rgba(15, 23, 42, 0.96);
    --color-scrim-soft: rgba(15, 23, 42, 0.72);
    --color-raise-1: rgba(15, 23, 42, 0.02);
    --color-raise-2: rgba(15, 23, 42, 0.035);
    --color-raise-3: rgba(15, 23, 42, 0.055);
    --color-raise-4: rgba(15, 23, 42, 0.10);
    --color-on-dark: rgba(255, 255, 255, 0.85);
    --color-sunken: rgba(15, 23, 42, 0.035);

    /* Sytý text na jemné výplni — pastel z tmavého motivu by na bílé zmizel.
       Text drží kontrast nad 4.5:1, výplň zůstává decentní. */
    --tone-ok-text: #15803d;
    --tone-ok-bg: #e9f6ed;
    --tone-ok-border: #b6e0c3;
    --tone-danger-text: #b3261e;
    --tone-danger-bg: #fdecea;
    --tone-danger-border: #f3c2be;
    --tone-info-text: #1d4ed8;
    --tone-info-bg: #eaf0fe;
    --tone-info-border: #c3d4fb;
    --tone-warn-text: #92610a;
    --tone-warn-bg: #fdf3d9;
    --tone-warn-border: #ecd49a;
    --tone-amber-text: #92610a;
    --tone-amber-bg: #fdf3d9;
    --tone-sky-text: #0b6b8f;
    --tone-sky-bg: #e4f4fb;
    --tone-neutral-text: #475569;
    --tone-neutral-bg: #e8ecf1;
}

/* Přepínač motivu */

.theme-toggle {
    background: none;
    border: 1px solid var(--on-dark-border);
    border-radius: 999px;
    color: var(--on-dark-text);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.theme-toggle:hover { border-color: var(--color-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; }

.theme-toggle__moon { display: none; }
.theme-toggle__sun { display: block; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle__moon { display: block; }
    :root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }
}

:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

/* ===== Rozbalené menu na mobilu =====
   Vykresluje se uvnitř lišty, takže tmavé pozadí dědí — vlastní podklad je pojistka,
   aby odkazy nikdy neskončily světlé na světlé stránce, a zároveň menu opticky
   oddělí od obsahu pod ním. */

@media (max-width: 991.98px) {
    .navbar-spark .navbar-collapse {
        background: rgba(2, 6, 23, 0.97);
        border-top: 1px solid var(--on-dark-border);
        border-radius: 0 0 var(--radius) var(--radius);
        margin-top: 0.75rem;
        padding: 0.5rem 0.75rem 0.75rem;
    }

    .navbar-spark .navbar-collapse .navbar-nav {
        gap: 0.15rem;
    }

    .navbar-spark .navbar-collapse .nav-link {
        padding: 0.6rem 0.25rem !important;
        border-bottom: 1px solid var(--color-raise-3);
    }

    .navbar-spark .navbar-collapse .nav-link:last-child {
        border-bottom: none;
    }

    /* Přepínače na jeden řádek, ať menu neroste do výšky zbytečně. */
    .navbar-spark .navbar-collapse .navbar-nav.flex-row {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--on-dark-border);
        align-items: center;
    }
}

/* ===== Objednávka vs. předobjednávka (dva toky) ===== */

.order-page-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Obrysové tlačítko v záhlaví: musí být vidět na tmavém i světlém podkladu, takže
   obrys je z textové barvy, ne z barvy rámečku karet. */
.btn-outline-spark.btn-head {
    border-color: currentColor;
    color: var(--color-text);
}
.btn-outline-spark.btn-head:hover,
.btn-outline-spark.btn-head:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.navbar-spark .nav-link--preorder { font-weight: 700; }

.preorder-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--tone-amber-text);
    background: var(--tone-amber-bg);
    color: var(--tone-amber-text);
    font-size: 0.9rem;
}

.bulk-order-row__brand { color: var(--color-accent); }
.bulk-order-row__price { color: var(--color-text); }

.checkout-table-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.checkout-table-title::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}
.checkout-table-title--stock { color: var(--tone-ok-text); }
.checkout-table-title--stock::before { background: var(--tone-ok-text); }
.checkout-table-title--backorder { color: var(--tone-amber-text); }
.checkout-table-title--backorder::before { background: var(--tone-amber-text); }
.checkout-table--backorder { --bs-table-bg: var(--tone-amber-bg); }
.checkout-qty-static { font-weight: 600; }
.checkout-table tfoot th { border-top: 2px solid var(--color-accent); }

.preorder-date--always { margin: 0 0 1rem; }

.payment-related {
    border: 1px solid var(--tone-amber-text);
    background: var(--tone-amber-bg);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.payment-related__title { color: var(--tone-amber-text); margin-bottom: 0.35rem; }

.kind-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-text);
}
.kind-pill--stock { background: var(--tone-ok-bg); color: var(--tone-ok-text); }
.kind-pill--preorder { background: var(--tone-amber-bg); color: var(--tone-amber-text); }
.kind-pill--backorder { background: var(--tone-sky-bg); color: var(--tone-sky-text); }

/* Admin: kampaň a slevy */
.campaign-state {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-text);
}
.campaign-state--open { background: var(--tone-ok-bg); color: var(--tone-ok-text); }

.preorder-campaign-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.weight-row__only { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.brand-discount-card__categories summary { cursor: pointer; }
.brand-discount-table input { max-width: 5.5rem; margin: 0 auto; }

@media (max-width: 576px) {
    .weight-row { flex-wrap: wrap; }
    .weight-row__only { margin-left: 0; }
}

/* ===== Objednávka vs. předobjednávka (dva toky) ===== */

.order-page-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Obrysové tlačítko v záhlaví: musí být vidět na tmavém i světlém podkladu, takže
   obrys je z textové barvy, ne z barvy rámečku karet. */
.btn-outline-spark.btn-head {
    border-color: currentColor;
    color: var(--color-text);
}
.btn-outline-spark.btn-head:hover,
.btn-outline-spark.btn-head:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.navbar-spark .nav-link--preorder { font-weight: 700; }

.preorder-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--tone-amber-text);
    background: var(--tone-amber-bg);
    color: var(--tone-amber-text);
    font-size: 0.9rem;
}

.bulk-order-row__brand { color: var(--color-accent); }
.bulk-order-row__price { color: var(--color-text); }

.checkout-table-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.checkout-table-title::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}
.checkout-table-title--stock { color: var(--tone-ok-text); }
.checkout-table-title--stock::before { background: var(--tone-ok-text); }
.checkout-table-title--backorder { color: var(--tone-amber-text); }
.checkout-table-title--backorder::before { background: var(--tone-amber-text); }
.checkout-table--backorder { --bs-table-bg: var(--tone-amber-bg); }
.checkout-qty-static { font-weight: 600; }
.checkout-table tfoot th { border-top: 2px solid var(--color-accent); }

.preorder-date--always { margin: 0 0 1rem; }

.payment-related {
    border: 1px solid var(--tone-amber-text);
    background: var(--tone-amber-bg);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.payment-related__title { color: var(--tone-amber-text); margin-bottom: 0.35rem; }

.kind-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-text);
}
.kind-pill--stock { background: var(--tone-ok-bg); color: var(--tone-ok-text); }
.kind-pill--preorder { background: var(--tone-amber-bg); color: var(--tone-amber-text); }
.kind-pill--backorder { background: var(--tone-sky-bg); color: var(--tone-sky-text); }

/* Admin: kampaň a slevy */
.campaign-state {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-text);
}
.campaign-state--open { background: var(--tone-ok-bg); color: var(--tone-ok-text); }

.preorder-campaign-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.weight-row__only { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.brand-discount-card__categories summary { cursor: pointer; }
.brand-discount-table input { max-width: 5.5rem; margin: 0 auto; }

@media (max-width: 576px) {
    .weight-row { flex-wrap: wrap; }
    .weight-row__only { margin-left: 0; }
}

/* ===== Stav objednávky: Přijato / Ve zpracování / Odesláno / Storno ===== */

.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-text);
    white-space: nowrap;
}
.status-pill--received { background: var(--tone-info-bg); color: var(--tone-info-text); border-color: var(--tone-info-border); }
.status-pill--processing { background: var(--tone-warn-bg); color: var(--tone-warn-text); border-color: var(--tone-warn-border); }
.status-pill--shipped { background: var(--tone-ok-bg); color: var(--tone-ok-text); border-color: var(--tone-ok-border); }
.status-pill--cancelled { background: var(--tone-danger-bg); color: var(--tone-danger-text); border-color: var(--tone-danger-border); }

/* ===== Přehled partnera: banner otevřených předobjednávek ===== */

/* Stejný hero, jen s červeným pruhem a větším titulkem — má být vidět, že se něco děje. */
.hero-spark--preorder {
    background-image: linear-gradient(105deg, rgba(2, 6, 23, 0.94) 0%, rgba(2, 6, 23, 0.7) 55%, rgba(2, 6, 23, 0.82) 100%), var(--hero-image);
    box-shadow: inset 6px 0 0 var(--color-accent);
}

.hero-spark--preorder h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

.hero-spark__lead {
    color: var(--on-dark-muted);
    font-size: 1.05rem;
    max-width: 34rem;
}

.hero-spark__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-hero {
    font-size: 1rem;
    padding: 0.9rem 1.75rem;
}

/* Obrysové tlačítko leží na tmavé fotce v obou motivech, takže se řídí barvou
   textu hero, ne motivu stránky. */
.btn-outline-spark.btn-hero--secondary {
    color: var(--on-dark-text);
    border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline-spark.btn-hero--secondary:hover,
.btn-outline-spark.btn-hero--secondary:focus-visible {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.quick-link-card--preorder { border-color: var(--color-accent); }
.quick-link-card--preorder .icon { color: var(--color-accent); }

/* ===== Registrace: co ARES našel ===== */

.ares-match {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--tone-ok-border);
    background: var(--tone-ok-bg);
    color: var(--tone-ok-text);
    font-size: 0.875rem;
}
.ares-match__label { font-weight: 700; margin-right: 0.35rem; }

/* ===== Bootstrap prvky bez vlastního motivu =====
   Tlačítka, karty, seznamy a stránkování zůstávaly v Bootstrapových barvách: šedý
   obrys na tmavém pozadí, bílá karta v tmavém motivu, bílé tlačítko na bílé kartě ve
   světlém. Tady dostávají barvy z tokenů, takže sedí v obou motivech. */

.btn-outline-secondary {
    color: var(--color-text);
    border-color: var(--color-border-strong);
    background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: var(--color-text);
    background: var(--color-raise-3);
    border-color: var(--color-muted);
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    color: var(--color-muted);
    border-color: var(--color-border);
}

/* Plné sekundární tlačítko: ve světlém motivu bylo bílé na bílé kartě. */
.btn-secondary {
    background-color: var(--color-raise-3) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text) !important;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--color-raise-4) !important;
    border-color: var(--color-muted) !important;
}
.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--color-muted) !important;
}

/* „Světlý obrys“ dává smysl jen na tmavém podkladu; jinde se chová jako obrys motivu. */
.app-shell .btn-outline-light {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.app-shell .btn-outline-light:hover,
.app-shell .btn-outline-light:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: transparent;
}

.btn-outline-spark,
.btn-outline-spark:disabled {
    border-color: var(--color-border-strong);
}

/* Štítek s tmavým textem na žluté: přebarvení .text-dark na barvu motivu z něj
   v tmavém režimu dělalo světlý text na žluté. */
.app-shell .badge.text-dark {
    color: #212529 !important;
}

/* Světlá výplň Bootstrapu (formulář variant produktu) v tmavém motivu se světlým textem. */
.app-shell .bg-light {
    background-color: var(--color-raise-3) !important;
}

.card {
    --bs-card-bg: var(--color-surface);
    --bs-card-color: var(--color-text);
    --bs-card-border-color: var(--color-border);
    --bs-card-cap-bg: var(--color-raise-2);
    --bs-card-cap-color: var(--color-text);
}
.card-header {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.list-group {
    --bs-list-group-bg: var(--color-surface);
    --bs-list-group-color: var(--color-text);
    --bs-list-group-border-color: var(--color-border);
}

.pagination {
    --bs-pagination-bg: var(--color-surface-solid);
    --bs-pagination-color: var(--color-text);
    --bs-pagination-border-color: var(--color-border-strong);
    --bs-pagination-hover-bg: var(--color-raise-3);
    --bs-pagination-hover-color: var(--color-accent);
    --bs-pagination-hover-border-color: var(--color-border-strong);
    --bs-pagination-focus-bg: var(--color-raise-3);
    --bs-pagination-focus-color: var(--color-accent);
    --bs-pagination-active-bg: var(--color-accent);
    --bs-pagination-active-border-color: var(--color-accent);
    --bs-pagination-disabled-bg: var(--color-surface-solid);
    --bs-pagination-disabled-color: var(--color-muted);
    --bs-pagination-disabled-border-color: var(--color-border);
}

/* Nápověda v polích: Bootstrap ji barví tmavě šedou, která v tmavém motivu zmizí. */
.form-control::placeholder {
    color: var(--color-muted);
    opacity: 0.75;
}

/* Šipka výběru: světlá v tmavém motivu, tmavá ve světlém. */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}
:root[data-theme="light"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Zaškrtávátka a přepínače: tmavý motiv má tmavé pole se světlým rámečkem, světlý naopak. */
.form-check-input {
    background-color: var(--color-surface-solid);
    border-color: var(--color-border-strong);
}
.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.form-check-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.25);
}

/* ===== Administrace: menu ve dvou řadách ===== */

.admin-nav__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.admin-nav__brand {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0.5rem 0;
}
.admin-nav__groups { border-bottom: 0; }
.admin-nav__groups .nav-link {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
}
.admin-nav__items {
    gap: 0.25rem;
    padding: 0.5rem 0 0;
}
.admin-nav__items .nav-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.admin-nav__items .nav-link:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.admin-nav__items .nav-link.active {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(227, 6, 19, 0.08);
}
.admin-nav__dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--tone-ok-text);
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* ===== Administrace: produkty, hromadné akce ===== */

.bulk-actions {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}
.bulk-actions__summary {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.bulk-actions__body { padding: 0 0.9rem 0.9rem; }
.bulk-actions__form { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.bulk-actions__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.bulk-actions__label { font-size: 0.8rem; color: var(--color-muted); font-weight: 600; }

.admin-products__check { width: 2.5rem; text-align: center; }
.admin-products__thumb { width: 50px; height: auto; border-radius: 4px; background: #fff; }
.admin-products__row--hidden td { opacity: 0.6; }

.variant-item__label { color: var(--color-text); }

/* ===== Katalog: zvětšení obrázku ===== */

.product-card__img-wrap { position: relative; }
.product-card__zoom {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 0;
    background: rgba(2, 6, 23, 0.7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}
.product-card:hover .product-card__zoom { opacity: 1; }
.product-card__zoom:hover { transform: scale(1.08); background: var(--color-accent); }

.bulk-order-row__zoom {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    line-height: 0;
}

.image-modal__content { background: var(--color-deep); }
.image-modal__body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #fff;
}
.image-modal__img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-out;
}

/* Produkt v jedné velikosti: jedno pole místo mřížky. */
.size-grid--single,
.bulk-size-grid--single {
    grid-template-columns: minmax(120px, 200px);
}

/* Předobjednávky v adminu: seznam v pořadí katalogu, s nadpisy kategorií */
.weight-list__group {
    list-style: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0.75rem 0 0.15rem;
}
.weight-row__pos {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-muted);
}

/* ===== Stránka partnera v adminu ===== */
.partner-dl dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 0.5rem;
}
.partner-dl dd { margin-bottom: 0.15rem; }
.vat-note { display: block; font-size: 0.85rem; color: var(--color-muted); font-style: normal; }
.input-group-text { background: var(--color-raise-3); border-color: var(--color-border-strong); color: var(--color-text); }

/* Hledání v katalogu partnera */
.filters-bar__search { min-width: 18rem; flex: 1.5; }
.filters-bar__search .input-group .btn { display: inline-flex; align-items: center; }
@media (max-width: 576px) {
    .filters-bar__search { min-width: 0; width: 100%; }
}


/* --- Analytics (Admin → Analytika) --- */
.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}
.analytics-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}
.analytics-kpi__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.analytics-kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.analytics-kpi__sub { font-size: 0.8rem; color: var(--color-muted); }
.analytics-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 90px;
    border-bottom: 1px solid var(--color-border-strong);
}
.analytics-bars__col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.analytics-bars__bar { width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; background: var(--color-accent); opacity: 0.85; }
.analytics-bars--active .analytics-bars__bar { background: var(--color-muted); opacity: 0.6; }
.analytics-bars__col:hover .analytics-bars__bar { opacity: 1; }
.analytics-bars__labels { display: flex; gap: 2px; font-size: 0.7rem; color: var(--color-muted); }
.analytics-bars__labels span { flex: 1 1 0; white-space: nowrap; overflow: visible; }
.analytics-funnel__row { margin-bottom: 0.6rem; }
.analytics-funnel__track { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; margin-top: 0.2rem; }
.analytics-funnel__fill { height: 100%; background: var(--color-accent); border-radius: 3px; }
.analytics-table td, .analytics-table th { vertical-align: middle; font-variant-numeric: tabular-nums; }
.analytics-table th a { color: inherit; text-decoration: none; }
.analytics-files { max-height: 420px; overflow-y: auto; }


/* --- Doprodej (clearance) --- */
/* The same pill as the partner discount, filled, so the extra discount stands out. */
.discount-pill--clearance { background: var(--color-accent); color: #fff; }
.price-step { white-space: nowrap; }
.clearance-note { color: #b45309; }
.clearance-cap { display: block; font-size: 0.7rem; color: #b45309; margin-top: 0.15rem; }
.size-grid__cell--off, .bulk-size-cell--off { opacity: 0.45; }
.size-grid__cell--off input, .bulk-size-cell--off input { cursor: not-allowed; }


/* --- EAN search: the size the code belongs to --- */
.size-grid__cell--match, .bulk-size-cell--match {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 8px;
}


/* --- Order money: totals without VAT, VAT, with VAT, amount to pay --- */
.money-row th { font-weight: 500; color: var(--color-muted); }
.money-row--total th, .money-row--total td { font-weight: 700; color: var(--color-text); }
.money-row--pay th, .money-row--pay td { font-weight: 700; color: var(--color-accent); border-top: 2px solid var(--color-border-strong); }
.money-table th, .money-table td { padding: 0.3rem 0.5rem; }


/* --- Admin product list: row actions --- */
.row-actions { display: flex; flex-direction: column; gap: 0.4rem; min-width: 15rem; }
.row-actions__toggles, .row-actions__main { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.row-actions form { margin: 0; }
.row-toggle {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--color-border-strong); background: transparent;
    color: var(--color-muted); font-size: 0.8rem; font-weight: 600; line-height: 1.3;
    white-space: nowrap; cursor: pointer;
}
.row-toggle:hover { border-color: var(--color-accent); color: var(--color-text); }
.row-toggle__mark { display: inline-block; width: 0.8em; text-align: center; font-weight: 700; }
.row-toggle--preorder.is-on { background: var(--tone-amber-bg); color: var(--tone-amber-text); border-color: transparent; }
.row-toggle--clearance.is-on { background: var(--color-accent); color: #fff; border-color: transparent; }
.row-toggle.is-on:hover { filter: brightness(0.95); }
.row-action {
    display: inline-flex; align-items: center;
    padding: 0.28rem 0.75rem; border-radius: 8px;
    border: 1px solid var(--color-border-strong); background: transparent;
    color: var(--color-text); font-size: 0.8rem; font-weight: 600; line-height: 1.3;
    text-decoration: none; cursor: pointer;
}
.row-action:hover { border-color: var(--color-accent); color: var(--color-text); }
.row-action--danger { border-color: transparent; color: #dc3545; }
.row-action--danger:hover { border-color: #dc3545; color: #dc3545; }


/* A product from a preorder collection: named, so it is not mistaken for the old import. */
.origin-pill--collection { background: var(--tone-sky-bg); color: var(--tone-sky-text); text-transform: none; }


/* Explanation of a number, shown on hover or keyboard focus. */
.has-tip { position: relative; cursor: help; }
.has-tip::after {
    content: attr(data-tip);
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
    padding: 0.55rem 0.7rem; border-radius: 8px;
    background: var(--color-surface-solid); color: var(--color-text);
    border: 1px solid var(--color-border-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.78rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none;
}
.has-tip:hover::after, .has-tip:focus::after, .has-tip:focus-visible::after { opacity: 1; visibility: visible; }
.has-tip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* The outcome of a change, floating when the page came back scrolled down (admin-scroll.js). */
.flash-float {
    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1080;
    width: min(36rem, calc(100vw - 2rem)); cursor: pointer;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.flash-float .alert { margin-bottom: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.flash-float.is-hidden { opacity: 0; transform: translate(-50%, -0.5rem); }

/* Marketing links: a YouTube video shows its thumbnail with a play mark, other links an icon. */
.marketing-item__video { position: relative; }
.marketing-item__play {
    position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 1.8rem; transform: translate(-50%, -50%);
    border-radius: 0.5rem; background: rgba(220, 0, 0, 0.88); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.marketing-item__play::after {
    content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 0.45rem 0 0.45rem 0.75rem; border-color: transparent transparent transparent #fff;
}
.marketing-item__video:hover .marketing-item__play { background: #e00; }
.marketing-item__icon {
    flex-shrink: 0; width: 2.5rem; text-align: center; font-size: 1.5rem; text-decoration: none;
}
.marketing-admin-toolbar__form--link input[type="url"] { min-width: 16rem; flex: 1 1 16rem; }

/* ---------- Home page carousel (views/partner/_home_carousel.php, js/home-carousel.js) ---------- */
.dashboard-contact__name { font-weight: 600; }
.home-carousel { overflow: hidden; }
.home-carousel__head {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem;
}
.home-carousel__nav { display: flex; gap: 0.5rem; }
.home-carousel.is-static .home-carousel__nav { display: none; }
.home-carousel__btn {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border-strong); background: var(--color-surface-solid); color: var(--color-text);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-carousel__btn:hover, .home-carousel__btn:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.home-carousel__track {
    --home-gap: 1rem;
    display: grid; grid-auto-flow: column; gap: var(--home-gap);
    grid-auto-columns: calc((100% - 3 * var(--home-gap)) / 4);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 0.25rem 0.1rem 0.5rem; margin: 0 -0.1rem; scroll-padding-inline: 0.1rem;
}
.home-carousel__track::-webkit-scrollbar { display: none; }
.home-carousel__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius); }
@media (max-width: 1199.98px) { .home-carousel__track { grid-auto-columns: calc((100% - 2 * var(--home-gap)) / 3); } }
@media (max-width: 899.98px) { .home-carousel__track { grid-auto-columns: calc((100% - var(--home-gap)) / 2); } }
@media (max-width: 575.98px) { .home-carousel__track { grid-auto-columns: 82%; } }

.home-card {
    scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--color-border); border-radius: calc(var(--radius) + 2px); overflow: hidden;
    background: var(--color-surface-solid);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.home-card__media {
    position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden;
}
.home-card__media img {
    width: 100%; height: 100%; object-fit: contain; padding: 0.75rem;
    transition: transform 0.35s ease;
}
.home-card:hover .home-card__media img { transform: scale(1.04); }
.home-card__badge {
    position: absolute; top: 0.6rem; left: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
    background: #0f172a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.home-card__badge--new { background: var(--color-accent); }
.home-card__badge--recommended { background: #b45309; }
.home-card__badge--sale { background: #0f766e; }
.home-card__badge--preorder { background: #4338ca; }
.home-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 0.95rem 0.95rem; flex: 1; }
.home-card__brand { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.home-card__title { font-size: 0.98rem; line-height: 1.3; margin: 0; }
.home-card__title a { color: var(--color-text); text-decoration: none; }
.home-card__title a:hover { color: var(--color-accent); }
.home-card__text {
    font-size: 0.83rem; color: var(--color-muted); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-card__prices { display: flex; flex-direction: column; gap: 0.1rem; margin-top: auto; padding-top: 0.35rem; }
.home-card__rrp { font-size: 0.75rem; color: var(--color-muted); }
.home-card__price { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.home-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.home-card__foot > span, .home-card__foot > .stock-badge { white-space: nowrap; font-size: 0.78rem; }
.home-card__cta { margin-left: auto; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .home-card, .home-card__media img { transition: none; }
    .home-card:hover { transform: none; }
    .home-card:hover .home-card__media img { transform: none; }
}

/* Settings → Home page (views/admin/homepage.php) */
.home-contact-block { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem; }
.home-slides { display: flex; flex-direction: column; gap: 0.6rem; }
.home-slide {
    display: grid; grid-template-columns: 4.5rem 4rem minmax(10rem, 1fr) minmax(0, 2.2fr); gap: 0.75rem; align-items: start;
    border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.6rem;
}
.home-slide--warn { border-color: #b45309; }
.home-slide__thumb {
    display: inline-flex; width: 4rem; height: 3rem; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #fff;
}
.home-slide__thumb img { width: 100%; height: 100%; object-fit: contain; }
.home-slide__product { min-width: 0; word-break: break-word; }
@media (max-width: 991.98px) {
    .home-slide { grid-template-columns: 4.5rem 4rem minmax(0, 1fr); }
    .home-slide__fields { grid-column: 1 / -1; }
}
.home-candidate {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border);
}
.home-candidate:last-child { border-bottom: none; }
.home-warn { color: #fbbf24; }
:root[data-theme="light"] .home-warn { color: #b45309; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .home-warn { color: #b45309; } }