/* BAM Kaarsen Theme Styles */

/* BAM Theme Variables */
:root {
    --bam-gold: #d4af37;
    --bam-gold-light: #e6c76b;
    --bam-gold-dark: #b8962e;
    --bam-black: #000000;
    --bam-white: #ffffff;
}

/* Dark Theme (default) */
[data-bs-theme="dark"] {
    --bam-bg: #1a1a1a;
    --bam-bg-secondary: #242424;
    --bam-bg-tertiary: #2e2e2e;
    --bam-text: #f5f5f5;
    --bam-text-muted: #a8a8a8;
    --bam-border: #3a3a3a;
    --bam-card-bg: #242424;
    --bam-navbar-bg: #1a1a1a;
    --bam-footer-bg: #1a1a1a;
}

/* Light Theme */
[data-bs-theme="light"] {
    --bam-bg: #fafafa;
    --bam-bg-secondary: #f0f0f0;
    --bam-bg-tertiary: #e5e5e5;
    --bam-text: #1a1a1a;
    --bam-text-muted: #666666;
    --bam-border: #d0d0d0;
    --bam-card-bg: #ffffff;
    --bam-navbar-bg: #1a1a1a;
    --bam-footer-bg: #1a1a1a;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bam-bg);
    color: var(--bam-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

main {
    flex: 1;
}

/* Navbar */
.navbar {
    background-color: var(--bam-navbar-bg) !important;
    border-bottom: 2px solid var(--bam-gold);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand img {
    height: 70px;
    /* Apply gold color filter to SVG logo */
    filter: brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(497%) hue-rotate(7deg) brightness(92%) contrast(88%);
}

.navbar-dark .nav-link {
    color: var(--bam-white) !important;
}
.navbar-dark .nav-link:hover {
    color: var(--bam-gold) !important;
}

/* Gold accent buttons */
.btn-primary {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
    color: var(--bam-black);
    font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bam-gold-light);
    border-color: var(--bam-gold-light);
    color: var(--bam-black);
}

/* Outline gold buttons */
.btn-outline-gold {
    border-color: var(--bam-gold);
    color: var(--bam-gold);
}
.btn-outline-gold:hover {
    background-color: var(--bam-gold);
    color: var(--bam-black);
}

/* Cards */
.card {
    background-color: var(--bam-card-bg);
    border-color: var(--bam-border);
}

.product-card {
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bam-card-bg);
    border: 1px solid var(--bam-border);
}

.product-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card .card-title {
    flex: 1;
    color: var(--bam-text);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15);
    border-color: var(--bam-gold);
}

.product-image {
    height: 250px;
    object-fit: cover;
    background-color: var(--bam-bg-secondary);
}

[data-bs-theme="dark"] .product-image {
    background-color: #495057;
}

/* Placeholder logo styling */
.placeholder-logo {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    opacity: 0.3;
}

/* Theme-based placeholder logos */
.placeholder-logo-dark {
    display: block;
}
.placeholder-logo-light {
    display: none;
}

[data-bs-theme="light"] .placeholder-logo-dark {
    display: none;
}
[data-bs-theme="light"] .placeholder-logo-light {
    display: block;
}

/* Filter sidebar */
.filter-sidebar {
    background-color: var(--bam-bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--bam-border);
}

/* Footer */
footer {
    background-color: var(--bam-footer-bg) !important;
    border-top: 2px solid var(--bam-gold);
}

/* Theme toggle button */
.theme-toggle {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: color 0.3s;
    color: var(--bam-white);
}
.theme-toggle:hover {
    color: var(--bam-gold);
}

/* Gold accents */
.text-gold {
    color: var(--bam-gold) !important;
}
.bg-gold {
    background-color: var(--bam-gold) !important;
}
.border-gold {
    border-color: var(--bam-gold) !important;
}

/* Badge styling */
.badge.bg-primary {
    background-color: var(--bam-gold) !important;
    color: var(--bam-black) !important;
}

/* Price styling */
.price {
    color: var(--bam-gold);
    font-weight: 600;
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bam-bg-secondary);
    border-color: var(--bam-border);
    color: var(--bam-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bam-gold);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/* Modal styling */
.modal-content {
    background-color: var(--bam-card-bg);
    border-color: var(--bam-border);
}
.modal-header {
    border-bottom-color: var(--bam-border);
}
.modal-footer {
    border-top-color: var(--bam-border);
}

/* Table styling */
.table {
    --bs-table-bg: var(--bam-card-bg);
    --bs-table-border-color: var(--bam-border);
    color: var(--bam-text);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bam-bg-secondary);
    border-color: var(--bam-border);
}
.dropdown-item {
    color: var(--bam-text);
}
.dropdown-item:hover {
    background-color: var(--bam-bg-tertiary);
    color: var(--bam-gold);
}

/* Dark theme specific text colors */
[data-bs-theme="dark"] .filter-sidebar {
    color: #c7bea2 !important;
}
[data-bs-theme="dark"] .filter-sidebar .form-check-label {
    color: #c7bea2 !important;
}
[data-bs-theme="dark"] .filter-sidebar a {
    color: #c7bea2 !important;
}
[data-bs-theme="dark"] .filter-sidebar h5,
[data-bs-theme="dark"] .filter-sidebar h6,
[data-bs-theme="dark"] .filter-sidebar label {
    color: #c7bea2 !important;
}
[data-bs-theme="dark"] .btn-primary {
    background-color: #c7bea2;
    border-color: #c7bea2;
    color: var(--bam-black);
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus {
    background-color: #b8af93;
    border-color: #b8af93;
    color: var(--bam-black);
}
[data-bs-theme="dark"] .product-card .card-title {
    color: #faeec9c2;
}
[data-bs-theme="dark"] .btn-outline-primary {
    border-color: #faeec9c2;
    color: #faeec9c2;
}
[data-bs-theme="dark"] .btn-outline-primary:hover, 
[data-bs-theme="dark"] .btn-outline-primary:focus, 
[data-bs-theme="dark"] .btn-outline-primary:active {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
    color: var(--bam-black);
}

/* Override Bootstrap primary/blue colors with gold/amber */
.btn-outline-primary {
    border-color: var(--bam-gold);
    color: var(--bam-gold);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
    color: var(--bam-black);
}

/* Form check inputs (checkboxes, radios) */
.form-check-input:checked {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
}
.form-check-input:focus {
    border-color: var(--bam-gold);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/* Links */
a {
    color: var(--bam-gold);
}
a:hover {
    color: var(--bam-gold-light);
}

/* Override Bootstrap's blue focus ring */
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/* Light theme specific overrides */
[data-bs-theme="light"] .btn-primary {
    background-color: #fff3cd;
    border-color: var(--bam-gold);
    color: var(--bam-black);
}
[data-bs-theme="light"] .btn-primary:hover, [data-bs-theme="light"] .btn-primary:focus {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
    color: var(--bam-black);
}
[data-bs-theme="light"] .btn-outline-primary {
    border-color: #495057;
    color: #495057;
}
[data-bs-theme="light"] .btn-outline-primary:hover {
    background-color: #495057;
    border-color: #495057;
    color: var(--bam-white);
}
[data-bs-theme="light"] a {
    color: #495057;
}
[data-bs-theme="light"] a:hover {
    color: var(--bam-black);
}
[data-bs-theme="light"] .filter-sidebar {
    color: #495057;
}

/* ===== Mobile AliExpress-style layout ===== */

/* Mobile quick-search bar (below navbar) */
.mobile-search {
    padding: 0.5rem 1rem;
    background-color: var(--bam-navbar-bg);
    border-bottom: 1px solid var(--bam-border);
    margin-bottom: 1rem;
}

.mobile-search .form-control {
    border-radius: 2rem 0 0 2rem;
}

.mobile-search .btn {
    border-radius: 0 2rem 2rem 0;
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background-color: var(--bam-navbar-bg);
    border-top: 1px solid var(--bam-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.4rem 0;
    color: var(--bam-text-muted);
    text-decoration: none;
    font-size: 0.7rem;
}

.mobile-bottom-nav .mobile-nav-item i {
    font-size: 1.35rem;
    line-height: 1;
}

.mobile-bottom-nav .mobile-nav-item.active {
    color: var(--bam-gold);
}

/* Light theme: use light background for mobile bottom nav */
[data-bs-theme="light"] .mobile-bottom-nav {
    background-color: var(--bam-bg-secondary);
    border-top: 1px solid var(--bam-border);
}

[data-bs-theme="light"] .mobile-bottom-nav .mobile-nav-item {
    color: var(--bam-text-muted);
}

[data-bs-theme="light"] .mobile-bottom-nav .mobile-nav-item.active {
    color: var(--bam-gold);
}

/* Reserve space so fixed bottom nav doesn't cover content */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 64px;
    }
}

/* ============================================================
   White Label Studio
   The studio is entirely server-rendered: every tile is a button
   that posts to htmx, and the only client-side state is the scent
   family filter, which is a pure CSS radio + sibling selector.
   ============================================================ */

.wl-header-intro {
    max-width: 46rem;
}

.wl-studio {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* --- progress rail --- */
.wl-rail-wrap {
    margin-bottom: 1.5rem;
}

.wl-rail {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-rail-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bam-text-muted);
    font-size: .875rem;
    white-space: nowrap;
}

.wl-rail-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--bam-border);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
}

.wl-rail-step.is-done {
    color: var(--bam-text);
}

.wl-rail-step.is-done .wl-rail-num {
    border-color: var(--bam-gold);
    color: var(--bam-gold);
}

.wl-rail-step.is-current {
    color: var(--bam-gold);
    font-weight: 600;
}

.wl-rail-step.is-current .wl-rail-num {
    background-color: var(--bam-gold);
    border-color: var(--bam-gold);
    color: var(--bam-black);
}

/* --- option grids --- */
.wl-step-help {
    margin-bottom: 1.25rem;
}

.wl-grid {
    display: grid;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.wl-grid-figure {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.wl-grid-swatch {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.wl-grid-plain {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.wl-grid-scent {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.wl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .75rem;
    text-align: center;
    background-color: var(--bam-card-bg);
    border: 1px solid var(--bam-border);
    border-radius: .5rem;
    color: var(--bam-text);
    transition: border-color .15s ease, transform .15s ease;
}

.wl-tile:hover:not(:disabled) {
    border-color: var(--bam-gold-light);
    transform: translateY(-2px);
}

.wl-tile:focus-visible {
    outline: 2px solid var(--bam-gold);
    outline-offset: 2px;
}

.wl-tile.is-selected {
    border-color: var(--bam-gold);
    box-shadow: inset 0 0 0 1px var(--bam-gold);
}

.wl-tile:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.wl-tile-scent {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.wl-tile-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.wl-tile-label {
    font-weight: 600;
    font-size: .9rem;
}

.wl-tile-meta,
.wl-tile-desc {
    color: var(--bam-text-muted);
    font-size: .78rem;
}

/* --- swatches and figures --- */
.wl-swatch {
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--bam-border);
    background: var(--wl-swatch, var(--bam-bg-tertiary));
    overflow: hidden;
    flex: 0 0 auto;
}

.wl-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-swatch-mat {
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .18);
}

.wl-swatch-glans {
    box-shadow: inset 6px -6px 12px rgba(0, 0, 0, .25),
                inset -6px 6px 10px rgba(255, 255, 255, .35);
}

.wl-swatch-scent {
    width: 2.1rem;
    height: 2.1rem;
}

.wl-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5.5rem;
    color: var(--bam-gold-light);
}

.wl-figure img,
.wl-figure svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- scent family filter (CSS only) --- */
.wl-scent-block {
    margin-bottom: 1.5rem;
}

.wl-fam-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wl-fam-chip {
    display: inline-block;
    margin: 0 .35rem .6rem 0;
    padding: .2rem .7rem;
    border: 1px solid var(--bam-border);
    border-radius: 2rem;
    color: var(--bam-text-muted);
    font-size: .8rem;
    cursor: pointer;
}

.wl-fam-input:checked + .wl-fam-chip {
    border-color: var(--bam-gold);
    color: var(--bam-gold);
}

.wl-fam-input:focus-visible + .wl-fam-chip {
    outline: 2px solid var(--bam-gold);
    outline-offset: 2px;
}

.wl-fam-input[value="fris"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="fris"]),
.wl-fam-input[value="zoet"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="zoet"]),
.wl-fam-input[value="warm"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="warm"]),
.wl-fam-input[value="kruidig"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="kruidig"]),
.wl-fam-input[value="bloemig"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="bloemig"]),
.wl-fam-input[value="overig"]:checked ~ .wl-scents .wl-tile-scent:not([data-family="overig"]) {
    display: none;
}

/* --- form bits --- */
.wl-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.wl-fieldset > legend {
    float: none;
    width: auto;
    margin-bottom: .75rem;
    color: var(--bam-gold);
}

.wl-field {
    margin-bottom: 1rem;
}

.wl-modes {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}

.wl-slot-title {
    color: var(--bam-gold);
    margin-bottom: .5rem;
}

.wl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.5rem;
}

.wl-logo-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.wl-logo-preview img {
    max-width: 8rem;
    max-height: 4rem;
    object-fit: contain;
    background-color: var(--bam-white);
    border-radius: .25rem;
    padding: .25rem;
}

/* One label editor: a logo or a line of text, plus its two colours. */
.wl-label-help {
    margin: 1rem 0 .5rem;
}

.wl-label-card {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.wl-label-card > :last-child {
    margin-bottom: 0;
}

.wl-label-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.wl-label-colors .wl-field {
    margin-bottom: 0;
}

/* --- preview + specification --- */
.wl-spec-sticky {
    position: sticky;
    top: 1rem;
}

.wl-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--bam-bg-secondary);
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.wl-preview svg,
.wl-preview-img {
    width: 100%;
    max-width: 15rem;
    height: auto;
}

/* The flame is the only moving part, and it is driven purely by CSS. */
.wl-flame {
    transform-origin: center;
    animation: wl-flicker 2.6s ease-in-out infinite;
}

@keyframes wl-flicker {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06, .94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wl-flame {
        animation: none;
    }
}

.wl-sku {
    display: block;
    color: var(--bam-text-muted);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .78rem;
    letter-spacing: .04em;
    margin-bottom: .75rem;
}

.wl-spec-list {
    margin: 0 0 1rem;
}

.wl-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--bam-border);
    font-size: .85rem;
}

.wl-spec-row dt {
    color: var(--bam-text-muted);
    font-weight: 400;
}

.wl-spec-row dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}

.wl-spec-note {
    display: block;
    font-weight: 400;
    color: var(--bam-text-muted);
    font-size: .75rem;
}

.wl-quote-note {
    color: var(--bam-text-muted);
    font-size: .8rem;
    margin-bottom: 0;
}

/* --- request lines --- */
.wl-line-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wl-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    background-color: var(--bam-card-bg);
    border: 1px solid var(--bam-border);
    border-radius: .5rem;
}

.wl-line.is-editing {
    border-color: var(--bam-gold);
}

.wl-line-thumb {
    flex: 0 0 3rem;
    width: 3rem;
}

.wl-line-thumb svg,
.wl-line-thumb img {
    width: 100%;
    height: auto;
}

.wl-line-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wl-line-title {
    font-weight: 600;
    font-size: .9rem;
}

.wl-line-sku,
.wl-line-detail {
    display: block;
    color: var(--bam-text-muted);
    font-size: .75rem;
}

.wl-line-qty {
    font-weight: 600;
    white-space: nowrap;
}

.wl-line-actions {
    display: flex;
    gap: .25rem;
}

@media (max-width: 991.98px) {
    .wl-spec-sticky {
        position: static;
    }
}

/* ------------------------------------------------------------
   One-screen studio.
   On a desktop viewport the studio turns into an app shell: the
   document itself never scrolls, only the two panes inside it do,
   so the preview and the progress rail stay put while the visitor
   works through a step. Narrow or short viewports keep the normal
   document flow. The switch is a :has() selector, so no JS.
   ------------------------------------------------------------ */
@media (min-width: 992px) and (min-height: 600px) {

    body:has(#wl-studio) {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    body:has(#wl-studio) > .navbar {
        margin-bottom: 0 !important;
    }

    body:has(#wl-studio) > footer {
        display: none;
    }

    body:has(#wl-studio) > main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .wl-studio {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Title and intro share one line so the panes get the height back. */
    .wl-header {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: .5rem;
    }

    .wl-header h1 {
        margin: 0;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    .wl-header-intro {
        margin: 0;
        font-size: .85rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wl-rail-wrap {
        margin-bottom: .85rem;
    }

    /* The bootstrap row becomes a grid: a single non-wrapping line gives
       both panes an exact height for their scrollers to resolve against. */
    .wl-panes {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: 1.5rem;
        flex: 1 1 auto;
        min-height: 0;
        margin: 0;
    }

    .wl-panes > .wl-pane {
        display: flex;
        flex-direction: column;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .wl-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: .6rem;
        scrollbar-width: thin;
        scrollbar-color: var(--bam-border) transparent;
    }

    .wl-scroll::-webkit-scrollbar,
    .wl-side > #wl-spec::-webkit-scrollbar,
    .wl-side > #wl-lines::-webkit-scrollbar {
        width: 8px;
    }

    .wl-scroll::-webkit-scrollbar-track,
    .wl-side > #wl-spec::-webkit-scrollbar-track,
    .wl-side > #wl-lines::-webkit-scrollbar-track {
        background: transparent;
    }

    .wl-scroll::-webkit-scrollbar-thumb,
    .wl-side > #wl-spec::-webkit-scrollbar-thumb,
    .wl-side > #wl-lines::-webkit-scrollbar-thumb {
        background-color: var(--bam-border);
        border-radius: 4px;
    }

    /* Inside its own scroller the specification no longer needs to stick. */
    .wl-scroll .wl-spec-sticky {
        position: static;
    }

    /* The side pane carries two cards: the specification and the candles
       already composed. They split the pane and each scrolls inside its own
       box, so the list stays in view instead of hiding below the preview.
       The pane stops level with the top border of the step actions opposite,
       which is one button plus its padding and border high. */
    .wl-side {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        overflow: hidden;
        padding-right: 0;
        padding-bottom: calc(38px + 1.05rem);
    }

    .wl-side > #wl-spec {
        flex: 0 1 auto;
    }

    .wl-side > #wl-lines {
        flex: 1 1 auto;
    }

    .wl-side > #wl-spec,
    .wl-side > #wl-lines {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .2rem .6rem .2rem .2rem;
        scrollbar-width: thin;
        scrollbar-color: var(--bam-border) transparent;
    }

    /* The gap belongs to the pane, so the card does not carry its own margin
       up past the top of its scroller. */
    .wl-side > #wl-lines > .wl-card {
        margin-top: 0;
    }

    /* Cap the preview by width so it keeps its aspect ratio and still
       leaves room for the specification on a 768px-tall laptop. */
    .wl-preview {
        padding: .5rem;
        margin-bottom: .5rem;
    }

    .wl-preview svg,
    .wl-preview-img {
        max-width: min(9rem, 13vh);
    }

    #wl-spec .card-body {
        display: flex;
        flex-direction: column;
        padding: .85rem;
    }

    /* Same trick as the step actions: pinned low, but scrolling with the
       card once the visitor moves down to the request list. */
    .wl-spec-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: auto;
        padding-bottom: .1rem;
        background-color: var(--bam-card-bg);
        box-shadow: 0 -.75rem .75rem -.25rem var(--bam-card-bg);
    }

    .wl-spec-list {
        margin-bottom: .75rem;
    }

    .wl-spec-row {
        padding: .25rem 0;
    }

    .wl-step-help {
        margin-bottom: .85rem;
    }

    /* Back / next ride along at the foot of the pane instead of hiding
       below a long list of options. */
    .wl-step .wl-step-inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .wl-step .wl-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-top: auto;
        padding: .75rem 0 .25rem;
        background-color: var(--bam-bg);
        border-top: 1px solid var(--bam-border);
    }

    /* The first step has neither a back nor a next button. */
    .wl-step .wl-actions:not(:has(button)) {
        display: none;
    }

    .wl-grid,
    .wl-fieldset,
    .wl-scent-block {
        margin-bottom: 1rem;
    }
}