/* Dataveli Cart — base.css
 * Shared foundation loaded before every context-specific CSS bundle.
 * Owns tokens, global layout primitives, buttons, forms, modals, DataTables,
 * Select2, site header/sidebar controls, shared catalog/table primitives,
 * product quick-view support, cart submodal support, and common keyframes.
 *
 * Loading:
 *   - Public layouts: base.css + a route bundle (shop.css and/or singles.css)
 *   - Admin layout:   base.css + admin.css
 *   - app.css remains an @import fallback/orchestrator, not the primary source.
 *
 * TABLE OF CONTENTS
 * -----------------
 *  §03  Glass Panel Primitive
 *  §08  Buttons
 *  §13  Modals
 *  §04b Swipe Animation Classes
 *  §19b Burger Morph
 *  §12  Sidebar Audio Toggle
 *  §09  Form Controls
 *  §09b Custom Checkbox
 *  §16  DataTables Override
 *  §14  Active-Filter Chips
 *  §15  Select2 Override
 *  §19  Sidebar (off-canvas)
 *  §20  Floating Back-to-top
 *  §05  Reveal on Scroll
 *  §04  Keyframe Animations
 *  §28  Cart Backorder Warnings / Site Header Layout
 *  §44b Category Links in Quick-view
 *  §47  Product Quick-view Attachments / Account + Order Modal Shared UI
 *  §52c Scheduled Price Form
 *  §29  Cart Submodal / Cart Quick-add / Shared Catalog Filter Controls
 *  §05b Storefront Page Arrival Transition
 *  §30b Catalog Filter Toggle Hint
 *  §30c Storefront Filterbar
 *  §30e Subcategory Select Dim
 *  §34  Catalog List Thumbnails
 */

:root {
    --finland-blue: rgb(25, 54, 131);
    --finland-blue-600: rgb(0, 30, 95);
    --finland-blue-400: rgb(75, 140, 240);
    --header-accent: rgb(189, 215, 252);
    --finland-white: #ffffff;
    --ink: rgba(11, 29, 58, 0.96);
    --ink-transparent: rgba(11, 29, 58, 0.16);
    --muted-500: #6b7280;
    --muted-600: #4b5563;
    --muted-700: #374151;
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-shadow: 0 8px 32px 0 rgba(0, 53, 128, 0.18);
    --surface-soft: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(200, 200, 200, 1);
    --surface-accent: rgba(0, 53, 128, 0.618);
    --line-soft: rgba(255, 255, 255, 0.55);
    --button-border-soft: rgba(148, 163, 184, 0.58);
    --overlay-bg: rgba(11, 29, 58, 0.45);
    --datatable-row-bg: rgba(255, 255, 255, 0.55);
    --datatable-row-hover-bg: rgba(222, 230, 244, 0.92);
    --datatable-row-border: rgba(156, 163, 175, 0.5);
    --page-bg:
        radial-gradient(1200px 600px at 10% 10%, rgba(0, 53, 128, 0.382), transparent 40%),
        radial-gradient(900px 500px at 90% 20%, rgba(255, 255, 255, 0.5), transparent 40%),
        radial-gradient(1000px 600px at 50% 100%, rgba(0, 53, 128, 0.25), transparent 40%),
        linear-gradient(135deg, #eaf2ff 0%, #ffffff 50%, #cfe0ff 100%);
    --page-blob-a: radial-gradient(circle, rgba(0, 53, 128, 0.62), transparent 72%);
    --page-blob-b: radial-gradient(circle, rgba(43, 90, 168, 0.382), transparent 70%);
    --cursor-magnify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='13' r='8' fill='white' fill-opacity='0.92' stroke='%23003580' stroke-width='2.6'/%3E%3Cpath d='M19.5 19.5 27 27' stroke='%23003580' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 12 12;

    /* ---- Z-index scale -------------------------------------------------- */
    --z-cat-dir-floating:  46;   /* floating category directory pill       */
    --z-back-to-top:       48;   /* floating back-to-top button            */
    --z-overlay:          50;   /* modal backdrop                         */
    --z-sidebar-backdrop: 55;   /* sidebar scrim                          */
    --z-sidebar:          60;   /* off-canvas sidebar panel               */
    --z-sub-modal:       200;   /* account-product sub-modal              */
    --z-image-modal:   10120;   /* product image/video lightbox + controls */
    --z-order-modal:    8000;   /* customer-order-view-modal              */
    --z-order-edit-modal: 9200; /* customer-order-edit-modal              */
    --z-product-sub-modal: 9400; /* sub-modals opened from within product-modal */
    --z-loading-overlay:  9500; /* #loading-overlay AJAX spinner          */
    --z-progress-modal:   9600; /* #images-progress-modal                 */
    --z-confirm-modal:    9850; /* site-confirm-modal (above all modals)  */
    --z-tooltip:        9999;   /* site-tooltip                           */
    --z-toast:        100050;   /* #toast-host (always above all modals)  */
    --z-hero-modal:      300;   /* hero featured / on-sale full-screen     */
    --z-hero-product-modal: 400; /* product-modal opened from hero modal   */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--finland-blue) !important;
}

html {
    scroll-behavior: smooth;
}

#categories,
#catalog,
#catalog-grid,
#newsletter {
    scroll-margin-top: var(--sticky-header-offset, 96px);
}

html, body {
    min-height: 100%;
    width: 100%;
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body {
    overflow-x: clip;
}
html.ui-scroll-lock,
body.ui-scroll-lock {
    overflow: hidden !important;
}
html.motion-reduce {
    scroll-behavior: auto;
}
html.motion-reduce *,
html.motion-reduce *::before,
html.motion-reduce *::after,
body.motion-reduce *,
body.motion-reduce *::before,
body.motion-reduce *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}

body {
    background: var(--page-bg);
    background-attachment: fixed;
    background-size: cover;
    max-width: 100%;
}

/* Floating colour blobs to enhance the blur effect */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 1px;
    filter: blur(80px);
    pointer-events: none;
    transform-origin: center;
    /* Only animate transform — opacity animation invalidates backdrop-filter
       caches on every composited glass element every frame. */
    will-change: transform;
    opacity: 0.78;
}
body::before {
    width: 520px; height: 520px;
    top: -140px; left: -160px;
    background: var(--page-blob-a);
    animation: orb-drift-a 28s ease-in-out infinite alternate;
}
body:not(.theme-dark):not(.theme-mixed)::before {
    width: 556px;
    height: 556px;
    top: -148px;
    left: -172px;
    animation: orb-drift-a-light 24s ease-in-out infinite alternate;
}
body::after {
    width: 620px; height: 620px;
    bottom: -200px; right: -200px;
    background: var(--page-blob-b);
    animation: orb-drift-b 34s ease-in-out infinite alternate;
}

@keyframes orb-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(18px, 12px, 0) scale(1.045); }
    100% { transform: translate3d(34px, -10px, 0) scale(0.985); }
}

@keyframes orb-drift-a-light {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    35%  { transform: translate3d(14px, 10px, 0) scale(1.04); }
    68%  { transform: translate3d(28px, -8px, 0) scale(1.075); }
    100% { transform: translate3d(42px, 6px, 0) scale(1.03); }
}

@keyframes orb-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-16px, -18px, 0) scale(1.05); }
    100% { transform: translate3d(-28px, 14px, 0) scale(0.99); }
}

html.motion-reduce body::before,
html.motion-reduce body::after,
body.motion-reduce::before,
body.motion-reduce::after {
    animation: none !important;
    will-change: auto !important;
}

/* ======================================================================= */
/*  * ▶ Start of §03  Glass Panel Primitive                                */
/* ======================================================================= */

/* ---------- Glass panel primitive ---------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 1px;
}
.shop-hero-section {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 22px 48px rgba(0, 53, 128, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    background-image: url(../img/hero-bg2.webp), var(--page-bg);
    background-size: cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    contain: paint;
    padding: 1.618rem;
    /* equal margins: flag (320px) + 2 × 2.618rem (42px) = 404px */
    min-height: 404px;
    /* Animated-button focal point (desktop) */
    --phi: 0.618;
    --phi-inverse: 0.382;
    /* Horizontal: 19.1% of grid width ≈ φ⁻³ × 100 */
    --focal-left: 19.1%;
    /* Vertical: 261px from grid top; section padding-top φ² (2.618rem) */
    --focal-top: 261px;
}
#hero-particles {
    background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(128,128,128,0.618) 61.8%, rgba(0,0,0,0.08) 100%);
}
/* Hero particles canvas — sits behind all hero content */
#hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.shop-hero-grid {
    position: relative;
    z-index: 2;
}
.hero-static-btns {
    align-items: flex-start;
    padding-left: 0.618rem;
}
.hero-static-btns .btn:not(.hero-sale-btn) {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0.35rem 0.55rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    white-space: normal;
}
.hero-static-btns .btn:not(.hero-sale-btn) svg {
    flex-shrink: 0;
}
/* Featured button: calm spotlight drift with a small showman bow during its turn */
@keyframes hero-btn-kb-feat {
    0%, 100% { transform: translateZ(0) scale(1)     translateY(0);   }
    38%      { transform: translateZ(0) scale(1.075) translateY(-4px); }
    72%      { transform: translateZ(0) scale(1.048) translateY(2px);  }
}
@keyframes hero-featured-ring {
    0%    { opacity: .70; outline-offset: 0;    transform: translateZ(0) scale(.99) rotate(-1.2deg); }
    14%   { opacity: .22; outline-offset: 8px;  transform: translateZ(0) scale(1.06) rotate(.5deg); }
    22%   { opacity: 0;   outline-offset: 13px; transform: translateZ(0) scale(1.09) rotate(.7deg); }
    22.1% { opacity: 0;   outline-offset: 0;    transform: translateZ(0) scale(1.01) rotate(-.7deg); }
    31%   { opacity: .58; outline-offset: 0;    transform: translateZ(0) scale(1.02) rotate(-.7deg); }
    45%   { opacity: .16; outline-offset: 10px; transform: translateZ(0) scale(1.085) rotate(.9deg); }
    53%   { opacity: 0;   outline-offset: 15px; transform: translateZ(0) scale(1.11) rotate(.4deg); }
    53.1% { opacity: 0;   outline-offset: 0;    transform: translateZ(0) scale(1.015) rotate(.6deg); }
    67%   { opacity: .46; outline-offset: 0;    transform: translateZ(0) scale(1.025) rotate(.6deg); }
    84%   { opacity: .10; outline-offset: 12px; transform: translateZ(0) scale(1.12) rotate(-.2deg); }
    100%  { opacity: 0;   outline-offset: 18px; transform: translateZ(0) scale(1.16) rotate(0deg); }
}
#hero-featured-open {
    position: relative;
    overflow: visible;
    animation: hero-btn-kb-feat 6.5s ease-in-out infinite;
    z-index: 0;
}
#hero-featured-open::before {
    content: '';
    position: absolute;
    inset: -2px;
    outline: 2px solid var(--ink);
    outline-offset: 0;
    border: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0) scale(1);
    transform-origin: center;
    z-index: -1;
    animation: none;
}
#hero-featured-open.hero-seq-pulse::before {
    animation: hero-featured-ring var(--pulse-duration, 3500ms) linear 1 forwards;
}
#hero-featured-open:hover {
    outline: none;
}
/* Gloss ::after is off-screen (translateX(-120%)) but overflow:visible would reveal it;
   keep it hidden at rest — the btn-light-sweep hover animation overrides this. */
#hero-featured-open::after {
    opacity: 0;
}
/* ── Wrapper carries the drop-shadow so it renders outside the clip-path ── */
.hero-featured-wrap,
.hero-new-wrap,
.hero-sale-wrap {
    position: absolute;
    left: var(--focal-left);
    top: var(--focal-top);
    transform: translate(-50%, -50%);
    display: none;
    align-items: flex-start;
    isolation: isolate;
}

.hero-sale-wrap {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    animation: none;
    contain: layout style;
}

/* Mobile: revert to flex flow */
@media (max-width: 767px) {
    .hero-featured-wrap,
    .hero-new-wrap,
    .hero-sale-wrap {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        display: inline-flex !important;
        align-items: flex-start;
    }

    .hero-featured-wrap,
    .hero-new-wrap {
        margin-top: .15rem;
        margin-left: .9rem;
    }

    .hero-sale-wrap {
        margin-top: .15rem;
        margin-left: 4.045rem;
    }
}

/* Hero action buttons row: stay in flex flow below carousel */
.hero-actions-phi-wrap {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
}

.hero-sale-wrap::before {
    content: '';
    position: absolute;
    inset: -1rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(253,224,71,0.70) 0%, rgba(245,158,11,0.38) 38%, rgba(245,158,11,0) 72%);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0) scale(.72);
    transform-origin: center;
    z-index: -1;
}
.hero-sale-wrap.hero-seq-pulse::before {
    animation: hero-sale-wrap-pulse var(--pulse-duration, 4200ms) linear 1 forwards;
}
@keyframes hero-sale-wrap-pulse {
    0%        { opacity: 0;   transform: translateZ(0) scale(.94); }
    10%       { opacity: .32; transform: translateZ(0) scale(1.06); }
    20%       { opacity: 0;   transform: translateZ(0) scale(.94); }
    40%       { opacity: .32; transform: translateZ(0) scale(1.06); }
    56%       { opacity: 0;   transform: translateZ(0) scale(.94); }
    74%       { opacity: .32; transform: translateZ(0) scale(1.06); }
    88%, 100% { opacity: 0;   transform: translateZ(0) scale(.94); }
}
/* Wrapper drop-shadow transitions black → amber glow in sync with the scale pulse */
.hero-sale-wrap.hero-seq-pulse {
    will-change: filter;
    animation: hero-sale-wrap-glow var(--pulse-duration, 4200ms) linear 1 forwards;
}
@keyframes hero-sale-wrap-glow {
    0%        { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
    10%       { filter: drop-shadow(0 0 14px rgba(253,224,71,0.96)) drop-shadow(0 0 30px rgba(245,158,11,0.72)); }
    20%       { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
    40%       { filter: drop-shadow(0 0 14px rgba(253,224,71,0.96)) drop-shadow(0 0 30px rgba(245,158,11,0.72)); }
    56%       { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
    74%       { filter: drop-shadow(0 0 14px rgba(253,224,71,0.96)) drop-shadow(0 0 30px rgba(245,158,11,0.72)); }
    88%, 100% { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.75)) drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
}
/* ── On-sale hero button — proper 12-point square starburst ── */
.hero-sale-btn,
#hero-sale-open {
    /* Square so clip-path % stays proportional */
    flex: 0 0 6rem !important;
    width: 6rem !important;
    min-width: 6rem !important;
    height: 6rem;
    padding: .3rem !important;
    border-radius: 0 !important;
    border: none !important;
    /*
     * 12-point starburst — 24 vertices alternating:
     *   outer R=48%  (sharp tips)
     *   inner r=22%  (deep valleys)
     * Computed with center (50,50), angles every 30° starting at 12-o'clock.
     */
    clip-path: polygon(
        50%  2%,  56% 29%,
        74%  8%,  66% 34%,
        92% 26%,  71% 44%,
        98% 50%,  71% 56%,
        92% 74%,  66% 66%,
        74% 92%,  56% 71%,
        50% 98%,  44% 71%,
        26% 92%,  34% 66%,
         8% 74%,  29% 56%,
         2% 50%,  29% 44%,
         8% 26%,  34% 34%,
        26%  8%,  44% 29%
    );
    /* Rich gold sale badge */
    background: linear-gradient(145deg, #fef3c7 0%, #fbbf24 30%, #f59e0b 60%, #d97706 100%) !important;
    color: #7c2d00 !important;
    font-size: .52rem !important;
    font-weight: 900 !important;
    letter-spacing: .03em;
    text-shadow: 0 1px 2px rgba(255,255,255,0.50);
    line-height: 1.3;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* Idle: slight tilt; the sequencer adds the scale pulse. */
    transform-origin: center;
    transform: rotate(-15deg);
    animation: none;
    backface-visibility: hidden;
    position: relative;
    will-change: transform; /* scale animation runs on compositor thread */
    z-index: 1;
}
.hero-sale-wrap.hero-seq-pulse #hero-sale-open {
    animation: hero-sale-pulse var(--pulse-duration, 4200ms) linear 1 forwards;
}

/* Featured / New buttons: sequenced, characterful breathe during active window */
#hero-featured-open.hero-seq-pulse,
#hero-new-open.hero-seq-pulse {
    animation: hero-btn-breathe var(--pulse-duration, 3600ms) linear 1 forwards;
}
@keyframes hero-btn-breathe {
    0%, 100% { transform: translateZ(0) translateY(0) scale(1) rotate(0deg); }
    32%      { transform: translateZ(0) translateY(-3px) scale(1.12) rotate(-.8deg); }
    62%      { transform: translateZ(0) translateY(-1px) scale(1.065) rotate(.7deg); }
    82%      { transform: translateZ(0) translateY(0) scale(1.02) rotate(.2deg); }
}

/* ======================================================================= */
/*  * ◀ End of   §03  Glass Panel Primitive                                */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §08  Buttons                                              */
/* ======================================================================= */

    /* Sit beside the other buttons without stretching the row */
.hero-sale-wrap.is-hovered #hero-sale-open {
    animation: hero-sale-hover 3s linear infinite;
    filter: brightness(1.10);
    outline: none;
}
#hero-sale-open:hover {
    outline: none;
}
/* Click: jelly squeeze */
#hero-sale-open.is-squeeze {
    animation: hero-sale-squeeze .35s cubic-bezier(.36,.07,.19,.97) forwards !important;
}
@keyframes hero-sale-spin {
    from { transform: rotate(-15deg) scale(1); }
    to   { transform: rotate(345deg) scale(1); }
}
@keyframes hero-sale-hover {
    0%, 100% { transform: rotate(-15deg) scale(1.10); }
    50%      { transform: rotate(-10deg) scale(1.20); }
}
@keyframes hero-sale-hover-pulse {
    0%, 100% { transform: rotate(var(--_r, 0deg)) scale(1.18); }
    50%      { transform: rotate(var(--_r, 0deg)) scale(1.32); }
}
@keyframes hero-sale-squeeze {
    0%   { transform: rotate(-15deg) scale(1,    1);    filter: brightness(1); }
    30%  { transform: rotate(-12deg) scale(1.12, 0.84); filter: brightness(1.18); }
    55%  { transform: rotate(-19deg) scale(0.92, 1.10); filter: brightness(0.97); }
    75%  { transform: rotate(-13deg) scale(1.04, 0.97); filter: brightness(1.06); }
    100% { transform: rotate(-15deg) scale(1,    1);    filter: brightness(1); }
}
@keyframes hero-sale-pulse {
    0%        { transform: rotate(-15deg) scale(1); }
    10%       { transform: rotate(-9deg)  scale(1.36); }
    20%       { transform: rotate(-15deg) scale(1); }
    40%       { transform: rotate(-9deg)  scale(1.36); }
    56%       { transform: rotate(-15deg) scale(1); }
    74%       { transform: rotate(-9deg)  scale(1.36); }
    88%, 100% { transform: rotate(-15deg) scale(1); }
}

/* ── Hero button carousel: entrance/exit animations ── */
/* Entrance animation: fade in + scale pop */
@keyframes hero-button-fade-in {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Exit animation: fade out + scale pop */
@keyframes hero-button-fade-out {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

/* Hide non-active carousel buttons - completely remove from DOM */
.hero-button-hidden {
    display: none !important;
}

/* Active state: button is visible during pulse sequences (no animation) */
.hero-button-visible {
    display: inline-flex !important;
}

/* Entrance phase: trigger fade-in animation */
.hero-button-entering {
    display: inline-flex !important;
    animation: hero-button-fade-in 0.15s ease-out forwards;
}

/* Exit phase: trigger fade-out animation */
.hero-button-exiting {
    display: inline-flex !important;
    animation: hero-button-fade-out 0.15s ease-in forwards;
}

#shop-hero.hero-motion-paused .hero-sale-wrap,
#shop-hero.hero-motion-paused .hero-sale-wrap::before,
#shop-hero.hero-motion-paused .hero-sale-btn,
#shop-hero.hero-motion-paused #hero-featured-open,
#shop-hero.hero-motion-paused #hero-featured-open.hero-seq-pulse,
#shop-hero.hero-motion-paused #hero-featured-open.hero-seq-pulse::before,
#shop-hero.hero-motion-paused #hero-featured-open.hero-seq-pulse::after,
#shop-hero.hero-motion-paused #hero-new-open,
#shop-hero.hero-motion-paused #hero-new-open.hero-seq-pulse,
#shop-hero.hero-motion-paused #hero-new-open.hero-seq-pulse::before,
#shop-hero.hero-motion-paused #hero-new-open.hero-seq-pulse::after,
#shop-hero.hero-motion-paused .animate-bob {
    animation-play-state: paused !important;
}

/* ======================================================================= */
/*  * ◀ End of   §08  Buttons                                              */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §13  Modals                                               */
/* ======================================================================= */

/* ── Sale hero modal — lighter blue palette ── */
#hero-sale-modal .modal-panel {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 1.75rem 1.75rem 0;
    /* Genuinely lighter: real blue-glass instead of near-black navy */
    background: rgba(28, 74, 180, 0.46) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    border-color: rgba(147, 197, 253, 0.55) !important;
    box-shadow:
        0 0 0 1px rgba(186, 230, 253, 0.20) inset,
        0 28px 64px rgba(2, 10, 40, 0.32),
        0 0 100px rgba(75, 140, 240, 0.35) !important;
    color: #ffffff;
}
/* Sale orbs — lighter, more transparent, cyan-blue tones */
.sale-hero-orbs .featured-hero-orb { opacity: 0; }
.sale-hero-orb--1 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(147,197,253,.38) 0%, rgba(75,140,240,.16) 50%, transparent 80%);
    top: -10%; left: -8%;
    animation: fh-orb-drift-1 13s ease-in-out infinite alternate;
    animation-delay: 0s;
}
.sale-hero-orb--2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(56,189,248,.30) 0%, rgba(14,116,164,.14) 50%, transparent 80%);
    bottom: -14%; right: -8%;
    animation: fh-orb-drift-2 16s ease-in-out infinite alternate;
    animation-delay: -5s;
}
.sale-hero-orb--3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(186,230,253,.28) 0%, rgba(56,130,246,.10) 50%, transparent 80%);
    top: 35%; right: 12%;
    animation: fh-orb-drift-3 11s ease-in-out infinite alternate;
    animation-delay: -3s;
}

/* ======================================================================= */
/*  * ◀ End of   §13  Modals                                               */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §04b  Swipe Animation Classes                             */
/* ======================================================================= */

/* ---- Swipe animation classes ---- */
/* Active card flies in from the right (user went forward) */
.featured-hero-modal-slide--enter-right {
    animation: fhm-enter-right .52s cubic-bezier(.16, 1.15, .3, 1) both;
}
/* Active card flies in from the left (user went back) */
.featured-hero-modal-slide--enter-left {
    animation: fhm-enter-left .52s cubic-bezier(.16, 1.15, .3, 1) both;
}
/* Old active card settles into the prev (left) slot — user went forward */
.featured-hero-modal-slide--settle-prev {
    animation: fhm-settle-prev .44s cubic-bezier(.22, 1, .36, 1) both;
}
/* Old active card settles into the next (right) slot — user went back */
.featured-hero-modal-slide--settle-next {
    animation: fhm-settle-next .44s cubic-bezier(.22, 1, .36, 1) both;
}
/* Brand-new far card appears on the right edge (user went forward) */
.featured-hero-modal-slide--appear-right {
    animation: fhm-appear-right .42s cubic-bezier(.22, 1, .36, 1) both;
}
/* Brand-new far card appears on the left edge (user went back) */
.featured-hero-modal-slide--appear-left {
    animation: fhm-appear-left .42s cubic-bezier(.22, 1, .36, 1) both;
}

/* Active enters from right: starts right/deep/tilted, overshoots, lands */
@keyframes fhm-enter-right {
    0%   { opacity: 0;   transform: scale(0.58) translateX(180px)  translateZ(-180px) rotateY(-38deg); filter: brightness(0.45) saturate(0.35); }
    52%  { opacity: 1;   transform: scale(1.06) translateX(-10px)  translateZ(52px)   rotateY(5deg);  filter: brightness(1.06) saturate(1.06); }
    100% { opacity: 1;   transform: scale(1.03) translateX(0)      translateZ(40px)   rotateY(0deg);  filter: brightness(1)    saturate(1); }
}
/* Active enters from left */
@keyframes fhm-enter-left {
    0%   { opacity: 0;   transform: scale(0.58) translateX(-180px) translateZ(-180px) rotateY(38deg);  filter: brightness(0.45) saturate(0.35); }
    52%  { opacity: 1;   transform: scale(1.06) translateX(10px)   translateZ(52px)   rotateY(-5deg); filter: brightness(1.06) saturate(1.06); }
    100% { opacity: 1;   transform: scale(1.03) translateX(0)      translateZ(40px)   rotateY(0deg);  filter: brightness(1)    saturate(1); }
}
/* Old active settles into prev slot (left) */
@keyframes fhm-settle-prev {
    0%   { opacity: 1;    transform: scale(1.03) translateX(0)      translateZ(40px)  rotateY(0deg);  filter: brightness(1)    saturate(1); }
    100% { opacity: 0.48; transform: scale(0.78) translateX(-6%)    translateZ(-80px) rotateY(22deg); filter: brightness(0.78) saturate(0.7); }
}
/* Old active settles into next slot (right) */
@keyframes fhm-settle-next {
    0%   { opacity: 1;    transform: scale(1.03) translateX(0)      translateZ(40px)  rotateY(0deg);   filter: brightness(1)    saturate(1); }
    100% { opacity: 0.48; transform: scale(0.78) translateX(6%)     translateZ(-80px) rotateY(-22deg); filter: brightness(0.78) saturate(0.7); }
}
/* New card appears on right edge (was two steps ahead; user went forward) */
@keyframes fhm-appear-right {
    0%   { opacity: 0;    transform: scale(0.62) translateX(90px)  translateZ(-160px) rotateY(-32deg); filter: brightness(0.4) saturate(0.3); }
    100% { opacity: 0.48; transform: scale(0.78) translateX(6%)    translateZ(-80px)  rotateY(-22deg); filter: brightness(0.78) saturate(0.7); }
}
/* New card appears on left edge (was two steps behind; user went back) */
@keyframes fhm-appear-left {
    0%   { opacity: 0;    transform: scale(0.62) translateX(-90px) translateZ(-160px) rotateY(32deg);  filter: brightness(0.4) saturate(0.3); }
    100% { opacity: 0.48; transform: scale(0.78) translateX(-6%)   translateZ(-80px)  rotateY(22deg);  filter: brightness(0.78) saturate(0.7); }
}
.featured-hero-modal-slide .product-card {
    width: 100%;
    margin: 0 auto;
}
.featured-hero-modal-slide .product-card.reveal {
    opacity: 1;
    transform: none;
}

/* ======================================================================= */
/*  * ◀ End of   §04b  Swipe Animation Classes                             */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §19b  Burger Morph                                        */
/* ======================================================================= */

/* Left slot: burger + title */
.admin-header__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;                /* ~12px — Φ-harmonic of 20px */
    min-width: 0;
    flex-shrink: 1;
}
.admin-header__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--flag-blue, #003087);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Right slot: all controls */
.admin-header__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;                 /* 8px base unit between controls */
    flex-shrink: 0;
}
/* Thin vertical rule between logical groups */
.admin-header__divider {
    display: block;
    width: 1px;
    height: 1.25rem;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 0.25rem;
    flex-shrink: 0;
    border-radius: 1px;
}
/* Locale select — compact */
.admin-header__locale-form { display: flex; align-items: center; }
.admin-header__select {
    font-size: 0.78rem;
    padding: 0.2rem 1.6rem 0.2rem 0.5rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: rgba(255, 255, 255, 0.55);
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}
.admin-header__select:focus { border-color: rgba(0, 48, 135, 0.5); }
/* Icon-only buttons (theme toggle) */
.admin-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.admin-header__icon-btn:hover {
    background: rgba(0, 0, 0, 0.0);
    border-color: rgba(0, 0, 0, 0.1);
}
/* Text-style action links/buttons */
.admin-header__text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--flag-blue, #003087);
    opacity: 0.72;
    text-decoration: none;
    padding: 0.2rem 0.45rem;
    border-radius: 0.3rem;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: none;
}
.admin-header__text-btn:hover { opacity: 1; background: rgba(0, 48, 135, 0.07s); }
/* User group: email + logout */
.admin-header__user {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}
.admin-header__email {
    display: none;
    font-size: 0.75rem;
    opacity: 0.5;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body .burger:hover {
    border: 4px solid var(--finland-blue) !important;
}
.site-header-brand .text-flag-blue.tracking-tight {
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.382);
}
.site-header,
.site-main,
.site-footer {
    width: 100%;
    max-width: 100%;
}
.glass-dark {
    background: rgba(0, 39, 107, 0.618);
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow);
}
/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 1px;
    font-weight: 600;
    transition: all .025s !important;
    transition-duration: 0.025s !important;
    transition-delay: 0.025s !important;
    cursor: pointer;
    border: 1px solid;
    position: relative;
    overflow: hidden;
}
/* Base pseudo-element reset shared by all .btn variants' ::after animations */
.btn::after {
    content: "";
    position: absolute; inset: 0;
    transition: transform .1s ease;
    pointer-events: none;
}
@keyframes btn-light-sweep {
    0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 0.7; }
    100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
.btn-primary {
    background: linear-gradient(135deg, var(--finland-blue) 0%, var(--finland-blue) 61.8%, var(--finland-blue-600) 100%) !important;
    color: var(--finland-white) !important;
    margin: 1px;
    text-shadow: 0 0 1px var(--ink) !important;
    border-color: rgba(255,255,255,1);
    box-shadow: -1px -1px 2px var(--ink) !important;
    transition: box-shadow 0.15s, transform 0.15s !important;
    transform: translateY(0);
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    top: -10%;
    bottom: -10%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0)  20%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.0)  80%,
        transparent 100%
    );
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
    border-radius: inherit;
}
.btn-primary:hover::after {
    animation: btn-light-sweep 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--finland-blue-600) 0%, var(--finland-blue) 61.8%, var(--finland-blue-400) 100%) !important;
    margin: 1px;
    color: var(--finland-white) !important;
    text-shadow: 0 0 1px var(--ink) !important;
    box-shadow: 0 0 1px var(--ink) !important;
    transform: translateY(1px) !important;
}
.btn-ghost {
    background: linear-gradient(135deg, var(--finland-blue-400) 0%, var(--finland-blue-400) 38.2%, var(--finland-blue-400) 100%) !important;
    border: 1px solid rgba(255,255,255,1) !important;
    margin: 1px;
    color: var(--finland-white) !important;
    text-shadow: 0 0 1px black !important;
    box-shadow: -1px -1px 1px var(--ink) !important;
    transform: translateY(0);
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.btn-ghost::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 35%;
    top: -15%;
    bottom: -15%;
    background: linear-gradient(
        105deg,
        transparent        0%,
        rgba(255,255,255,0)   18%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0)   82%,
        transparent        100%
    );
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
    border-radius: inherit;
}
.btn-ghost:hover::after {
    animation: btn-light-sweep 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.btn-ghost:hover {
    background: linear-gradient(135deg, var(--finland-blue-400) 0%, var(--finland-blue-400) 38.2%, var(--finland-blue-400) 50%,var(--finland-blue) 100%) !important;
    border: 1px solid white !important;
    color: var(--finland-white) !important;
    margin: 1px;
    text-shadow: 0 0 1px var(--ink) !important;
    box-shadow: 0 0 1px var(--ink) !important;
    transform: translateY(1px) !important;
    transition: box-shadow 0.15s, transform 0.15s !important;
}
/* ── .btn-xs compact button variant ─────────────────────────────────────── */
.btn-xs {
    padding: 0.15rem 0.55rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 0.3rem !important;
}
/* ── .btn-flat — primary colours, no box shadow, 2 px radius ─────────────── */
.btn-flat {
    background: linear-gradient(135deg, var(--finland-blue) 0%, var(--finland-blue) 61.8%, var(--finland-blue-600) 100%) !important;
    color: var(--finland-white) !important;
    text-shadow: 0 0 1px var(--ink) !important;
    border-color: rgba(255,255,255,0.5);
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: background 0.15s, transform 0.15s !important;
    transform: translateY(0);
    will-change: transform;
    position: relative;
    overflow: hidden;
}
.btn-flat::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    top: -10%;
    bottom: -10%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0)  20%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.0)  80%,
        transparent 100%
    );
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
    border-radius: inherit;
}
.btn-flat:hover::after {
    animation: btn-light-sweep 0.62s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.btn-flat:hover {
    background: linear-gradient(135deg, var(--finland-blue-600) 0%, var(--finland-blue) 61.8%, var(--finland-blue-400) 100%) !important;
    color: var(--finland-white) !important;
    text-shadow: 0 0 1px var(--ink) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}
.theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    flex-shrink: 0;
    border-color: transparent !important;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    border: 1px solid black !important;
    background-color: rgba(255,255,255,0.16) !important;
}

.theme-toggle__icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .22s ease, transform .22s ease;
}
.theme-toggle__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.theme-toggle__icon--sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.theme-toggle__icon--moon {
    opacity: 0;
    transform: scale(.7) rotate(-18deg);
}
.theme-toggle__icon--mixed {
    opacity: 0;
    transform: scale(.68) rotate(-12deg);
}
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-warning { background: #d97706; color: #fff; }
.btn-warning:hover { background: #b45309; }
.btn-ok { background: darkgreen; color: white; }
div.admin-view-modal-footer button.btn-ok:hover { background: green !important; color: white; }
.btn:active { animation: bounce-down .3s ease; }
.btn-group {
    display: flex;
    align-items: stretch;
}
.btn-group > .btn {
    border-radius: 0 !important;
}
.btn-group > .btn:first-child {
    border-radius: 2px 0 0 2px !important;
}
.btn-group > .btn:last-child {
    border-radius: 0 2px 2px 0 !important;
}
.btn-group > .btn + .btn {
    margin-left: -1px;
}
.site-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    max-width: min(18rem, calc(100vw - 1rem));
    padding: .45rem .65rem;
    background: rgba(15, 23, 42, 0.92);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .08s linear, transform .12s ease;
}
.site-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.site-header-tooltip-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2rem;
    padding: 0rem .618rem;
    color: var(--ink);
    border: none;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.site-header-tooltip-toggle:hover,
.site-header-tooltip-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 53, 128, 0.44);
    box-shadow: 0 6px 16px rgba(0, 53, 128, 0.12);
}
.site-header-tooltip-toggle__label,
.site-header-tooltip-toggle__state {
    white-space: nowrap;
}
.site-header-tooltip-toggle__state {
    min-width: 2.5rem;
    text-align: center;
    color: #b91c1c;
}
.site-header-tooltip-toggle__ui {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.35rem;
    height: 1.35rem;
    padding: .125rem;
    background: rgba(148, 163, 184, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.5);
    margin-left: auto;
    transition: background-color .2s ease, border-color .2s ease;
}
.site-header-tooltip-toggle__thumb {
    width: .9rem;
    height: .9rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    transition: transform .2s ease, background-color .2s ease;
}
.site-header-tooltip-toggle.is-active {
    background: rgba(255, 255, 255, 0);
    border-color: rgba(0, 53, 128, 0.5);
    color: var(--finland-blue);
}
.site-header-tooltip-toggle.is-active .site-header-tooltip-toggle__state {
    color: #15803d;
}
.site-header-tooltip-toggle.is-active .site-header-tooltip-toggle__ui {
    background: rgba(0, 53, 128, 0.16);
    border-color: rgba(0, 53, 128, 0.44);
}
.site-header-tooltip-toggle.is-active .site-header-tooltip-toggle__thumb {
    transform: translateX(1rem);
    background: var(--finland-blue);
}

/* ======================================================================= */
/*  * ◀ End of   §19b  Burger Morph                                        */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §12  Sidebar Audio Toggle                                 */
/* ======================================================================= */

/* ---- Sidebar audio toggle ---- */
.sidebar-audio-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2rem;
    padding: 0rem .618rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

#sidebar-audio-toggle.sidebar-audio-toggle:hover {
    border: 1px solid rgba(148, 163, 184, 0.618);
}

.sidebar-audio-toggle:hover,
.sidebar-audio-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 53, 128, 0.44);
    box-shadow: 0 6px 16px rgba(0, 53, 128, 0.12);
}
.sidebar-audio-toggle__label,
.sidebar-audio-toggle__state {
    white-space: nowrap;
}
.sidebar-audio-toggle__state {
    min-width: 2.5rem;
    text-align: center;
    color: #b91c1c;
}
.sidebar-audio-toggle__ui {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.35rem;
    height: 1.35rem;
    padding: .125rem;
    background: rgba(148, 163, 184, 0.32);
    border: 1px solid rgba(148, 163, 184, 0.5);
    margin-left: auto;
    transition: background-color .2s ease, border-color .2s ease;
}
.sidebar-audio-toggle__thumb {
    width: .9rem;
    height: .9rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    transition: transform .2s ease, background-color .2s ease;
}
.sidebar-audio-toggle.is-active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 53, 128, 0.5);
    color: var(--finland-blue);
}
.sidebar-audio-toggle.is-active .sidebar-audio-toggle__state {
    color: #15803d;
}
.sidebar-audio-toggle.is-active .sidebar-audio-toggle__ui {
    background: rgba(0, 53, 128, 0.16);
    border-color: rgba(0, 53, 128, 0.44);
}
.sidebar-audio-toggle.is-active .sidebar-audio-toggle__thumb {
    transform: translateX(1rem);
    background: var(--finland-blue);
}
#toast-host {
    position: fixed;
    top: var(--toast-header-top, calc(var(--sticky-header-height, 64px) + 0.5rem));
    right: 1rem;
    z-index: var(--z-toast) !important;
    transition: top .25s ease;
}
body.admin-shell #toast-host {
    top: 1.25rem;
    width: 360px !important;
}
body.page-account #toast-host {
    top: 5rem;
}
/* Toast layout: close button on left, message on right */
#toast-host .toast-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#toast-host .toast-close-btn {
    flex-shrink: 0;
    order: -1;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
    opacity: 0.55;
    color: inherit;
    transition: opacity 0.15s;
}
#toast-host .toast-close-btn:hover { opacity: 1; }
#toast-host .toast-message { flex: 1; }

/* ---- Toast colour overrides ------------------------------------------------
 * Default (light mode): richer/darker palette so toasts read clearly on the
 * white/glass surface without looking washed-out.
 * Dark mode: bright-on-dark palette — body.theme-dark has higher specificity
 * and wins over the generic rules below.
 * Mixed mode: structurally a light theme; keeps the dark-green treatment.
 * We target .glass children of #toast-host so only toasts are affected.
 * --------------------------------------------------------------------------- */

/* Light mode defaults — rich, saturated colours */
#toast-host .glass.border-emerald-300 {
    background: rgba(5, 150, 105, 0.888) !important;
    border-color: #059669 !important;   /* emerald-600 */
    color: #bbffb7 !important;           /* emerald-900 */
    font-weight: 600 !important;
}
#toast-host .glass.border-red-300 {
    background: rgba(220, 38, 38, 0.888) !important;
    border-color: #dc2626 !important;   /* red-600 */
    color: #fff !important;           /* red-900 */
    font-weight: 600 !important;
}
#toast-host .glass.border-amber-300 {
    background: rgba(180, 9, 9, 0.888) !important;
    border-color: #b45309 !important;   /* amber-700 */
    color: #ff0000 !important;           /* amber-900 */
    font-weight: 600 !important;
}
#toast-host .glass.border-blue-300 {
    background: rgba(29, 78, 216, 0.888) !important;
    border-color: #1d4ed8 !important;   /* blue-700 */
    color: #00154f !important;           /* blue-900 */
    font-weight: 600 !important;
}

body .text-amber-300 {
    background: rgba(158, 113, 0, 0.382) !important;
    color: #5d2800 !important;           /* amber-200 */
    font-weight: 700 !important;
    border-color: #fbbf24 !important;
}
body .text-amber-700 {
    background: rgba(158, 113, 0, 0) !important;
    color: #873a00 !important;           /* amber-200 */
    font-weight: 700 !important;
    border-color: #fbbf24 !important;
}
/* Uniform-width card action buttons (storefront product cards / list rows) */
.btn-card-action {
    min-width: 6.5rem;
    padding: .35rem .75rem;
    font-size: .8125rem;
    text-align: center;
    justify-content: center;
}

/* ---------- Square control language ----------
 * Cards keep their rounded corners, but interactive controls across the
 * storefront and admin use square edges for a cleaner, more structured UI.
 */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.theme-toggle,
.sidebar-close,
.back-to-top-btn,
.back-to-top-dismiss,
.back-to-top-btn__icon,
.burger,
.modal-close,
.order-status-switch,
.order-status-switch__ui,
.order-status-switch__thumb,
.view-toggle-btn,
.view-toggle,
.catalog-filter-tile,
.dt-container .dt-button,
.dt-container button.dt-button,
.dt-container div.dt-button,
.dt-container a.dt-button,
.dt-paging .paginate_button,
.dt-search input,
.dt-length select,
.select2-container--default .select2-selection--single,
.select2-dropdown,
.dt-button-collection,
.image-source-tabs [data-src] {
    border-radius: 0 !important;
}


/* ======================================================================= */
/*  * ◀ End of   §12  Sidebar Audio Toggle                                 */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §09  Form Controls                                        */
/* ======================================================================= */

/* ---------- Form controls over glass ---------- */
.input, .select, .textarea {
    width: 100%;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: 1px;
    padding: .55rem .8rem;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, max-width 0.5s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
}
/* Restore a custom chevron arrow for <select> elements now that appearance:none
   removes the native OS arrow. padding-right makes room for the icon. */
.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 2rem;
}
/* Filter bar selects that carry a custom SVG overlay span — suppress the CSS
   background-image arrow to prevent a double-arrow appearance. */
#catalog-price-preset,
#catalog-page-size-select {
    background-image: none !important;
}
/* ── List-row favourites button (inverted: filled background) ── */
.btn-fav-list {
    color: #fff;
    background: #ef4444;  /* inverted: was transparent, now solid red */
    border: 1.5px solid #ef4444;
    border-radius: 6px;
    width: 32px; min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .13s, color .13s, border-color .13s;
}
.btn-fav-list:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-fav-list.is-favourite {
    color: #fff;
    background: #16a34a;  /* inverted: was transparent, now solid green */
    border-color: #16a34a;
}
.btn-fav-list.is-favourite:hover { background: #15803d; border-color: #15803d; }
/* ── List-row ask-product button (inverted: filled background) ── */
.btn-ask-product {
    color: #fff;
    background: var(--flag-blue, #003580);  /* inverted: was transparent, now solid blue */
    border: 1.5px solid var(--flag-blue, #003580);
    border-radius: 6px;
    width: 32px; min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .13s, color .13s, border-color .13s;
}
.btn-ask-product:hover { background: #002460; border-color: #002460; }
/* Catalog DataTable datetime cells */
.catalog-dt-date {
    font-size: .82rem;
    white-space: nowrap;
    color: var(--ink);
}
.catalog-dt-time {
    font-size: .72rem;
    color: var(--muted-500, #6b7280);
    margin-top: .12rem;
    white-space: nowrap;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--finland-blue-400);
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.15);
}


/* ======================================================================= */
/*  * ◀ End of   §09  Form Controls                                        */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §09b  Custom Checkbox                                     */
/* ======================================================================= */

/* ---------- Custom checkbox ---------- */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid rgba(148, 163, 184, 0.7);
    border-radius: 2px;
    background: var(--surface-soft);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
    vertical-align: middle;
}
input[type="checkbox"]:checked {
    background: var(--finland-blue-400);
    border-color: var(--finland-blue-400);
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 2.5px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid #000;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.2);
}
/* Inside admin modals (glass/dark background) always use white checkmarks */
.product-form-modal-body input[type="checkbox"]:checked::after,
.admin-form-modal-body input[type="checkbox"]:checked::after,
.order-modal-body input[type="checkbox"]:checked::after {
    border-color: #ffffff;
}

.input,
.select,
.textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
    border-radius: 0 !important;
}

.select2-container,
.select2-container * {
    border-radius: 0 !important;
}

.modal-panel .input,
.modal-panel .select,
.modal-panel .textarea,
.modal-panel .select2-container--default .select2-selection--single,
.modal-panel .select2-dropdown {
    border-color: rgba(156, 163, 175, 0.42) !important;
}

.modal-panel .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.modal-panel .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
#customer-order-view-modal.open {
    z-index: var(--z-order-modal) !important;
}
/* Progress modal must sit above the loading-overlay spinner (z 9500) */
#images-progress-modal {
    z-index: var(--z-progress-modal) !important;
}
#customer-order-edit-modal.open {
    z-index: var(--z-order-edit-modal) !important;
}
/* Product sub-modal sits above order-detail-modal */
#account-product-modal.open {
    z-index: var(--z-sub-modal) !important;
}
/* Account product modal always uses dark/glass styling to match the account page */
#account-product-modal .product-quick-view-modal-panel,
#account-product-modal .product-quick-view-modal-header,
#account-product-modal .product-quick-view-modal-body,
#account-product-modal .product-quick-view-modal-footer {
    background: rgba(11, 29, 58, 0.1) !important;
    color: #ffffff !important;
}
#account-product-modal .product-quick-view-modal-panel .text-gray-500,
#account-product-modal .product-quick-view-modal-panel .text-gray-600,
#account-product-modal .product-quick-view-modal-panel .text-gray-700,
#account-product-modal .product-quick-view-modal-panel .text-flag-blue,
#account-product-modal .product-quick-view-modal-panel .text-finland-blue {
    color: #e2e8f0 !important;
}
#account-product-modal .product-quick-view-modal-header {
    border-bottom-color: rgba(142, 174, 226, 0.24) !important;
}
#account-product-modal .product-quick-view-modal-footer {
    border-top-color: rgba(142, 174, 226, 0.24) !important;
}
#account-product-modal .product-quick-view-modal-panel {
    border-color: rgba(142, 174, 226, 0.28) !important;
}
#account-product-modal .catalog-flag-badge--featured {
    background: rgba(251, 146, 60, 0.28) !important;
    border-color: rgba(251, 146, 60, 0.55) !important;
    color: #fed7aa !important;
}
#account-product-modal .product-variant-group__label {
    color: #ffffff !important;
}
#account-product-modal .product-variant-group__select {
    border-color: rgba(142, 174, 226, 0.55) !important;
    color: #ffffff !important;
    background: rgba(11, 29, 58, 0.55) !important;
}
#account-product-modal .product-variant-group__select option {
    background: #0b1d3a;
    color: #ffffff;
}
/* Shop index product modal — same dark/glass styling as account modal */
#product-modal .product-quick-view-modal-panel,
#product-modal .product-quick-view-modal-header,
#product-modal .product-quick-view-modal-body,
#product-modal .product-quick-view-modal-footer {
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
}
#product-modal .product-quick-view-modal-panel .text-gray-500,
#product-modal .product-quick-view-modal-panel .text-gray-600,
#product-modal .product-quick-view-modal-panel .text-gray-700,
#product-modal .product-quick-view-modal-panel .text-flag-blue,
#product-modal .product-quick-view-modal-panel .text-finland-blue {
    color: #e2e8f0 !important;
}
#product-modal .product-quick-view-modal-header {
    border-bottom-color: rgba(142, 174, 226, 0.24) !important;
}
#product-modal .product-quick-view-modal-footer {
    border-top-color: rgba(142, 174, 226, 0.24) !important;
    max-height: none !important;
    justify-content: flex-end !important;
}
/* Footer buttons: compact, equal widths, capped at 6rem */
#product-modal .product-quick-view-modal-footer .btn {
    font-size: .78rem !important;
    padding-top: .28rem !important;
    padding-bottom: .28rem !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 6rem !important;
}
/* Sulje (close) button — visually shorter than the other footer buttons */
#product-modal .product-quick-view-modal-footer .btn[data-modal-close] {
    padding-top: .12rem !important;
    padding-bottom: .12rem !important;
}
/* "Osta" button: pulsating white-glow shadow (filter avoids box-shadow !important conflict) */
@keyframes pm-osta-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.30)) drop-shadow(0 0 8px rgba(255,255,255,0.12)); }
    50%       { filter: drop-shadow(0 0 14px rgba(255,255,255,0.90)) drop-shadow(0 0 28px rgba(255,255,255,0.50)) drop-shadow(0 0 4px rgba(255,255,255,0.25)); }
}
#product-modal #pm-footer-add {
    animation: pm-osta-pulse 2.2s ease-in-out infinite !important;
}
#product-modal .product-quick-view-modal-panel {
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #e2e8f0;
}
#product-modal .catalog-flag-badge--featured {
    background: rgba(251, 146, 60, 0.28) !important;
    border-color: rgba(251, 146, 60, 0.55) !important;
    color: #fed7aa !important;
}
#product-modal .product-variant-group__label {
    color: #ffffff !important;
}
#product-modal .product-variant-group__select {
    border-color: rgba(142, 174, 226, 0.55) !important;
    color: #ffffff !important;
    background: rgba(11, 29, 58, 0.55) !important;
}
#product-modal .product-variant-group__select option {
    background: #0b1d3a;
    color: #ffffff;
}
/* Both product modals — always-dark background: sale badge, reviews, bought-before */
#account-product-modal .catalog-flag-badge--sale,
#account-product-modal .catalog-sale-badge,
#product-modal .catalog-flag-badge--sale,
#product-modal .catalog-sale-badge {
    background: rgba(248, 113, 113, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fecaca !important;
}
#account-product-modal .catalog-rating-summary,
#account-product-modal .catalog-rating-summary span,
#product-modal .catalog-rating-summary,
#product-modal .catalog-rating-summary span {
    color: #ffffff !important;
}
#account-product-modal .catalog-rating-summary .text-amber-500,
#product-modal .catalog-rating-summary .text-amber-500 {
    color: #fcd34d !important;
}
#account-product-modal #pm-review,
#product-modal #pm-review,
#account-product-modal #apm-review,
#product-modal #apm-review {
    color: #ffffff !important;
}
#account-product-modal .catalog-bought-before,
#account-product-modal #pm-bought-before,
#product-modal .catalog-bought-before,
#product-modal #pm-bought-before {
    color: #ffffff !important;
}
/* Both modals — review section: readonly display + write form always on dark bg */
#account-product-modal .pm-review-readonly__title,
#product-modal .pm-review-readonly__title {
    color: #e2e8f0 !important;
}
#account-product-modal .pm-review-readonly__body,
#product-modal .pm-review-readonly__body {
    color: #ffffff !important;
}
#account-product-modal .pm-review-readonly__stars,
#product-modal .pm-review-readonly__stars {
    color: #fbbf24 !important;
}
#account-product-modal .pm-write-review__title,
#product-modal .pm-write-review__title {
    color: #93c5fd !important;
}
#account-product-modal .pm-star-btn,
#product-modal .pm-star-btn {
    color: rgba(255, 255, 255, 0.22) !important;
}
#account-product-modal .pm-star-btn.is-active,
#account-product-modal .pm-star-btn.is-hovered,
#account-product-modal .pm-star-btn:hover,
#product-modal .pm-star-btn.is-active,
#product-modal .pm-star-btn.is-hovered,
#product-modal .pm-star-btn:hover {
    color: #fbbf24 !important;
}
#account-product-modal .pm-write-review__status--ok,
#product-modal .pm-write-review__status--ok {
    color: #34d399 !important;
}
#account-product-modal .pm-write-review__status--err,
#product-modal .pm-write-review__status--err {
    color: #f87171 !important;
}

/* ======================================================================= */
/*  * ◀ End of   §09b  Custom Checkbox                                     */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §16  DataTables Override                                  */
/* ======================================================================= */

/* ---------- DataTables override to match glass ---------- */
table.dataTable {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
table.dataTable thead th {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: var(--ink);
    font-weight: 700;
    border-bottom: none !important;
    padding-left: 1rem !important;
    text-align: center !important;
}
/* Sticky / floating clone must also be centred */
table.dataTable.fixedHeader-floating thead th,
table.dataTable.fixedHeader-locked thead th {
    text-align: center !important;
}

/* ── Catalog table: sticky thead ────────────────────────────────────────── */
#catalog-table thead {
    position: relative;
    top: 0;
    z-index: 40;
    background: var(--glass-bg) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
body:has(#catalog-filters-card.is-sticky) #catalog-table thead.catalog-thead--is-stuck {
    position: sticky;
}
#catalog-table thead th {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none;
}
/* When the filter card is fully collapsed the thead reverts to normal flow.
   z-index must also be reset: the thead keeps backdrop-filter from the base
   rule which creates a stacking context; without resetting z-index it would
   sit at z-40 in the root context — above the sticky filter bar (z-10). */
body:has(#catalog-filters-card.is-collapsed) #catalog-table thead {
    position: relative !important;
    top: auto !important;
    z-index: 0 !important;
}
/* ── Sticky-thead dismiss button ─────────────────────────────────────────── */
#catalog-col-actions {
    position: relative;
}
#catalog-thead-dismiss-btn {
    display: none;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(142, 174, 226, 0.45);
    background: rgba(11, 29, 58, 0.45);
    color: rgba(226, 232, 240, 0.85);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    z-index: 2;
}
#catalog-table thead.catalog-thead--is-stuck th {
    padding-top: 0.14rem !important;
    padding-bottom: 0.14rem !important;
    font-size: 0.72rem !important;
}
#catalog-table thead.catalog-thead--is-stuck #catalog-thead-dismiss-btn {
    display: flex;
}
#catalog-thead-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.72);
    border-color: rgba(239, 68, 68, 0.85);
    color: #ffffff;
}
/* Dismissed: drop out of sticky flow */
#catalog-table thead.catalog-thead--dismissed {
    position: relative !important;
    top: auto !important;
}
/* ── /Sticky-thead dismiss button ────────────────────────────────────────── */

/* ── Storefront catalog list-view: fixed column widths ──────────────────── */
/* Targeting by <th id> pins each column so DataTables auto-width and the
   FixedHeader clone both measure the same pixel values. */
#catalog-col-expand      { width: 0      !important; padding: 0 !important; }
#catalog-col-thumb       { width: 5.75rem !important; }
#catalog-col-product     { width: auto   !important; }
#catalog-col-category    { width: 8rem  !important; }
#catalog-col-subcategory { min-width: 8rem  !important; }
#catalog-col-description { width: 14rem !important; }
#catalog-col-price       { width: 6rem   !important; }
#catalog-col-stock       { width: 5rem   !important; }
#catalog-col-in-cart     { width: auto   !important; }
/* Actions column: hard pixel floor so the 2×2 button grid never wraps to 4-across */
#catalog-col-actions     { min-width: 94px !important; width: 94px !important; max-width: 94px !important; padding-left: .5rem !important; padding-right: .5rem !important; }
/* ── /Storefront catalog list-view: fixed column widths ─────────────────── */
table.dataTable tbody tr {
    background: var(--datatable-row-bg);
    backdrop-filter: blur(6px);
}
table.dataTable tbody tr:hover {
    background: var(--datatable-row-hover-bg) !important;
}
table.dataTable tbody td {
    border-top: 1px solid var(--datatable-row-border) !important;
    border-bottom: 1px solid var(--datatable-row-border) !important;
    padding: .618rem 0.16rem .618rem 1.382rem;
    background: var(--datatable-row-bg);
    transition: background-color .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease;
}
body.theme-dark table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    color: white !important;
}
table.dataTable tbody tr:hover > td {
    background: var(--datatable-row-hover-bg) !important;
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.03);
    filter: brightness(0.96);
    opacity: 0.92;
}
table.dataTable tbody .btn {
    border-radius: 1px !important;
    min-height: 2.15rem !important;
    min-width: 6rem !important;
    padding-top: .34rem !important;
    padding-bottom: .34rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* ── Storefront catalog list-view footer (shared: loaded by shop + admin) ── */
.catalog-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .25rem .25rem;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-top: .5rem;
}
.catalog-list-footer__meta {
    font-size: .72rem;
    color: var(--muted-1, #6b7280);
}
.catalog-list-footer__nav {
    display: flex;
    align-items: center;
    gap: 0;
}
.catalog-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: .5rem;
}
.clf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .35rem;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: .3rem;
    background: transparent;
    color: var(--ink, #1f2937);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.clf-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.3);
}
.clf-btn:disabled, .clf-btn.is-disabled {
    opacity: .35;
    cursor: default;
}
.clf-page-indicator {
    font-size: .72rem;
    color: var(--muted-1, #6b7280);
    min-width: 2.8rem;
    text-align: center;
    white-space: nowrap;
    padding: 0 .2rem;
}

/* ======================================================================= */
/*  * ◀ End of   §16  DataTables Override                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §14  Active-Filter Chips                                  */
/* ======================================================================= */

/* ---- Active-filter chips ---- */
.dt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem .15rem .55rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.35);
    font-size: .72rem;
    font-weight: 600;
    color: #1d4ed8;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, border-color 0.15s;
}
.dt-filter-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dt-filter-chip--removable {
    padding-left: .25rem;
    padding-right: .55rem;
}
.dt-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0 .1rem;
    margin: 0;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.12s;
}
.dt-filter-chip__remove:hover { opacity: 1; }
.dt-container .dt-buttons {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.dt-container .dt-button,
.dt-container button.dt-button,
.dt-container div.dt-button,
.dt-container a.dt-button {
    background: var(--surface-soft) !important;
    border: 1px solid rgba(156, 163, 175, 0.38) !important;
    border-radius: .24rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    min-height: 2.15rem !important;
    padding: .38rem .75rem !important;
    line-height: 1.2 !important;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}
.dt-container .datatable-toolbar-btn {
    min-width: 6.75rem !important;
    justify-content: center;
}
.dt-container .dt-button:hover,
.dt-container button.dt-button:hover,
.dt-container div.dt-button:hover,
.dt-container a.dt-button:hover,
.dt-container .dt-button:focus-visible,
.dt-container button.dt-button:focus-visible,
.dt-container div.dt-button:focus-visible,
.dt-container a.dt-button:focus-visible {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(0, 53, 128, 0.26) !important;
    color: var(--finland-blue) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}
/* DataTables backdrop removed — it gets clipped inside the wrapper; click-outside closes via body listener */
div.dt-button-background {
    display: none !important;
}
/* Remove inherited text-shadow from btn-ghost when used on DataTable export buttons */
.dt-container .dt-button.btn-ghost {
    text-shadow: none !important;
}
/* Colvis / button-collection dropdown */
.dt-button-collection {
    background: rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(14, 60, 134, 0.18) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 20, 80, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07) !important;
    padding: 0.25rem !important;
    min-width: 152px !important;
    max-height: min(33rem, 78vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* Each column row: checkbox col | label col */
.dt-button-collection .dt-button {
    display: grid !important;
    grid-template-columns: 1.4rem 1fr !important;
    align-items: center !important;
    gap: 0.3rem !important;
    width: 100%;
    border: none !important;
    background: transparent !important;
    border-radius: 5px !important;
    padding: 0.28rem 0.55rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    margin: 1px 0 !important;
    font-weight: 400 !important;
    transition: background 0.1s;
    box-shadow: none !important;
    text-align: left !important;
}
/* Custom checkbox — first grid cell via ::before */
.dt-button-collection .dt-button::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1.5px solid rgba(0, 60, 140, 0.28);
    background: transparent;
    box-sizing: border-box;
    justify-self: center;
    pointer-events: none;
    flex-shrink: 0;
}
/* Active column: filled checkbox with checkmark */
.dt-button-collection .dt-button-active::after {
    display: none !important;
}
.dt-button-collection .dt-button-active::before {
    background: var(--finland-blue-600, #003580) !important;
    border-color: var(--finland-blue-600, #003580) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpolyline points='1 4 4 7 9 1' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: 8px 7px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.dt-button-collection .dt-button:not(.disabled):hover {
    background: rgba(0, 60, 140, 0.07) !important;
    color: var(--finland-blue) !important;
}
/* Restore defaults button — full-width, no checkbox, separator above */
.dt-button-collection .colvis-restore-btn {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 0.35rem !important;
    padding-top: 0.38rem !important;
    border-top: 1px solid rgba(0, 60, 140, 0.1) !important;
    color: var(--finland-blue-600, #003580) !important;
    font-weight: 500 !important;
}
.dt-button-collection .colvis-restore-btn::before {
    display: none !important;
}
.dt-search input,
.dt-length select {
    background: var(--surface-soft);
    border: 1px solid rgba(156, 163, 175, 0.38);
    border-radius: .5rem; padding: .35rem .6rem;
    color: var(--ink);
}
.dt-length {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.dt-container .datatable-total-count {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--muted-600);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}


/* ======================================================================= */
/*  * ◀ End of   §14  Active-Filter Chips                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §15  Select2 Override                                     */
/* ======================================================================= */

/* ---------- Select2 override ---------- */
/* Select2 appends its dropdown to <body> outside the element where
   font-family is declared, so we must force-inherit it on every part. */
.select2-container,
.select2-container *,
.select2-dropdown,
.select2-dropdown *,
.select2-search--dropdown .select2-search__field,
.select2-results__option {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
.select2-container--default .select2-selection--single {
    background: var(--surface-soft) !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
    height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    color: var(--ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    text-align: center !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}
.select2-dropdown {
    background: var(--surface-strong) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
}
.select2-search--dropdown .select2-search__field {
    border-radius: 0 !important;
}

.order-edit-picker-row > * {
    min-width: 0;
}

.order-edit-picker-row > .flex-1 {
    flex: 0 1 38.2%;
    max-width: 38.2%;
    min-width: 16rem;
}

.order-edit-picker-field {
    position: relative;
}

.order-edit-picker-row > .btn {
    flex: 0 0 auto;
}

.order-edit-picker-row .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.order-edit-picker-row .select2-container--open {
    width: 100% !important;
    max-width: 100% !important;
}

/* ---------- Nav link underline (left → right, persists when active) ----------
 * A 3px bar rendered as a dedicated ::after pseudo-element. We animate scaleX
 * from 0 → 1 with transform-origin: left center so the underline grows from
 * the left on hover AND stays fully extended whenever .is-active is present.
 * .is-active is assigned both by the server (based on the current route) and
 * by the scroll-spy in app.js (based on which section is in the viewport). */
.nav-link {
    position: relative;
    display: inline-block;
    padding: .4rem 0;
    color: var(--finland-blue-600);
    text-decoration: none;
    text-shadow: 0px 0px 1px white;
    transition: text-shadow 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav-link:hover {
    text-shadow: 0px 0px 4px var(--finland-blue);
    transition: text-shadow 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: white;
    transform: translateY(1px);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--finland-blue-600);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .16s cubic-bezier(.65, 0, .35, 1);
    pointer-events: none;
}
.quick-start-menu {
    position: relative;
}

/* ── Global search toggle button (nav-link variant) ── */
.global-search-toggle {
    background: transparent;
    border: 0;
    padding-inline: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}
.global-search-toggle__icon {
    flex-shrink: 0;
    transition: transform .18s ease;
}
.global-search-toggle.is-active .global-search-toggle__icon {
    transform: rotate(90deg) scale(1.1);
}

/* ── Global search panel ── */
.global-search-panel {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 39;
    display: flex;
    justify-content: center;
    padding: .25rem 1.25rem;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow, 0 2px 8px rgba(0, 0, 0, 0.10));
    transform: translateY(-110%);
    opacity: 0;
    transition:
        transform .26s cubic-bezier(0.22, 1, 0.36, 1),
        opacity .22s ease;
    pointer-events: none;
}
.global-search-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.global-search-panel__inner {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    max-width: 680px;
}
.global-search-panel__icon {
    flex-shrink: 0;
    color: var(--muted-ink, #6b7280);
}
.global-search-panel__input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: var(--ink) !important;
    font-size: .82rem;
    font-weight: 700;
    height: 1.65rem;
}
.global-search-panel__input::placeholder {
    color: var(--muted-ink, #9ca3af);
    font-weight: 400;
}
.global-search-panel__input:focus {
    border-color: var(--color-primary, #003580) !important;
    box-shadow: 0 0 0 2px rgba(0, 53, 128, 0.15) !important;
}
.global-search-panel__close {
    flex-shrink: 0;
    color: #000 !important;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .45rem !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
    text-shadow: none !important;
    transform: none !important;
    margin: 0 !important;
}
.global-search-panel__close:hover {
    color: #000 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}
.global-search-panel__close:focus-visible {
    color: #000 !important;
    outline: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.global-search-panel__reset {
    flex-shrink: 0;
    color: var(--muted-ink, #6b7280);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .2rem .5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 4px;
    white-space: nowrap;
}
.global-search-panel__reset:hover {
    color: var(--ink);
    border-color: rgba(0, 0, 0, 0.35) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}
/* ── Hero modal category Select2 ──────────────────────────────────── */
.fh-cat-select-wrap {
    display: flex;
    align-items: center;
    margin: 0 .5rem;
    min-width: 12rem;
    max-width: 20rem;
    flex-shrink: 0;
}
.fh-cat-select-wrap .select2-container { width: 100% !important; }
.fh-cat-select-wrap .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.30);
    height: 1.9rem;
    display: flex;
    align-items: center;
}
.fh-cat-select-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.fh-cat-select-wrap .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: rgba(255, 255, 255, 0.6);
}
.fh-cat-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    line-height: 1.9rem;
    padding-left: .55rem;
    padding-right: 1.6rem;
    font-size: .82rem;
}
.fh-cat-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 1.9rem;
}
.fh-cat-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent;
}
.fh-cat-s2-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .1rem 0;
}
.fh-cat-s2-thumb {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 3px;
    flex-shrink: 0;
    cursor: zoom-in;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: opacity .15s ease;
}
.fh-cat-s2-thumb:hover { opacity: .8; }
.fh-cat-s2-name {
    font-size: .84rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ── Per-modal Select2 dropdown theming ───────────────────────────── */
/* Featured modal — deep navy */
#hero-featured-modal .select2-container--default .select2-results__option--highlighted {
    background: rgba(56, 130, 246, 0.30) !important;
    color: #fff !important;
}
#hero-featured-modal .select2-dropdown {
    background: rgba(11, 29, 58, 0.95) !important;
    border-color: rgba(142, 174, 226, 0.38) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}
#hero-featured-modal .select2-results__option {
    color: rgba(226, 232, 240, 0.92);
}
#hero-featured-modal .select2-container--default .select2-selection--single {
    background: rgba(56, 130, 246, 0.14) !important;
    border-color: rgba(142, 174, 226, 0.45) !important;
}
#hero-featured-modal .select2-container--default.select2-container--focus .select2-selection--single,
#hero-featured-modal .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: rgba(147, 197, 253, 0.75) !important;
    background: rgba(56, 130, 246, 0.22) !important;
}
#hero-featured-modal .select2-results__option[aria-selected="true"],
#hero-featured-modal .select2-results__option--selected {
    background: rgba(56, 130, 246, 0.22) !important;
    color: rgba(226, 232, 240, 0.80) !important;
}
#hero-featured-modal .select2-results__option--highlighted.select2-results__option--selected {
    background: rgba(56, 130, 246, 0.42) !important;
    color: #fff !important;
}
#hero-featured-modal .select2-selection__rendered,
#hero-featured-modal .select2-selection__placeholder {
    color: rgba(226, 232, 240, 0.90) !important;
}
#hero-featured-modal .select2-selection__arrow b {
    border-color: rgba(226, 232, 240, 0.65) transparent transparent transparent !important;
}
#hero-featured-modal .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent rgba(226, 232, 240, 0.65) transparent !important;
}
/* Sale modal — lighter blue */
#hero-sale-modal .select2-container--default .select2-results__option--highlighted {
    background: rgba(75, 140, 240, 0.35) !important;
    color: #fff !important;
}
#hero-sale-modal .select2-dropdown {
    background: rgba(20, 55, 140, 0.92) !important;
    border-color: rgba(147, 197, 253, 0.45) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
#hero-sale-modal .select2-results__option {
    color: rgba(224, 242, 254, 0.92);
}
#hero-sale-modal .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(147, 197, 253, 0.50) !important;
}
#hero-sale-modal .select2-container--default.select2-container--focus .select2-selection--single,
#hero-sale-modal .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: rgba(186, 230, 253, 0.80) !important;
    background: rgba(255, 255, 255, 0.20) !important;
}
#hero-sale-modal .select2-results__option[aria-selected="true"],
#hero-sale-modal .select2-results__option--selected {
    background: rgba(75, 140, 240, 0.28) !important;
    color: rgba(224, 242, 254, 0.80) !important;
}
#hero-sale-modal .select2-results__option--highlighted.select2-results__option--selected {
    background: rgba(75, 140, 240, 0.50) !important;
    color: #fff !important;
}
#hero-sale-modal .select2-selection__rendered,
#hero-sale-modal .select2-selection__placeholder {
    color: rgba(224, 242, 254, 0.90) !important;
}
#hero-sale-modal .select2-selection__arrow b {
    border-color: rgba(224, 242, 254, 0.65) transparent transparent transparent !important;
}
#hero-sale-modal .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent rgba(224, 242, 254, 0.65) transparent !important;
}
/* New modal — green */
#hero-new-modal .select2-container--default .select2-results__option--highlighted {
    background: rgba(34, 197, 94, 0.28) !important;
    color: #fff !important;
}
#hero-new-modal .select2-dropdown {
    background: rgba(5, 46, 22, 0.94) !important;
    border-color: rgba(134, 239, 172, 0.42) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
#hero-new-modal .select2-results__option {
    color: rgba(220, 252, 231, 0.92);
}
#hero-new-modal .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(134, 239, 172, 0.45) !important;
}
#hero-new-modal .select2-container--default.select2-container--focus .select2-selection--single,
#hero-new-modal .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: rgba(167, 243, 208, 0.78) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}
#hero-new-modal .select2-results__option[aria-selected="true"],
#hero-new-modal .select2-results__option--selected {
    background: rgba(34, 197, 94, 0.26) !important;
    color: rgba(220, 252, 231, 0.80) !important;
}
#hero-new-modal .select2-results__option--highlighted.select2-results__option--selected {
    background: rgba(34, 197, 94, 0.46) !important;
    color: #fff !important;
}
#hero-new-modal .select2-selection__rendered,
#hero-new-modal .select2-selection__placeholder {
    color: rgba(220, 252, 231, 0.90) !important;
}
#hero-new-modal .select2-selection__arrow b {
    border-color: rgba(220, 252, 231, 0.65) transparent transparent transparent !important;
}
#hero-new-modal .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent rgba(220, 252, 231, 0.65) transparent !important;
}
/* Shop-all modal — purple/violet */
#hero-shop-modal .select2-container--default .select2-results__option--highlighted {
    background: rgba(140, 100, 255, 0.30) !important;
    color: #fff !important;
}
#hero-shop-modal .select2-dropdown {
    background: rgba(22, 12, 50, 0.94) !important;
    border-color: rgba(192, 162, 255, 0.42) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
#hero-shop-modal .select2-results__option {
    color: rgba(237, 233, 254, 0.92);
}
#hero-shop-modal .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}
#hero-shop-modal .select2-container--default.select2-container--focus .select2-selection--single,
#hero-shop-modal .select2-container--default.select2-container--open  .select2-selection--single {
    border-color: rgba(196, 181, 253, 0.78) !important;
    background: rgba(255, 255, 255, 0.16) !important;
}
#hero-shop-modal .select2-results__option[aria-selected="true"],
#hero-shop-modal .select2-results__option--selected {
    background: rgba(140, 100, 255, 0.28) !important;
    color: rgba(237, 233, 254, 0.80) !important;
}
#hero-shop-modal .select2-results__option--highlighted.select2-results__option--selected {
    background: rgba(140, 100, 255, 0.48) !important;
    color: #fff !important;
}
#hero-shop-modal .select2-selection__rendered,
#hero-shop-modal .select2-selection__placeholder {
    color: rgba(237, 233, 254, 0.90) !important;
}
#hero-shop-modal .select2-selection__arrow b {
    border-color: rgba(237, 233, 254, 0.65) transparent transparent transparent !important;
}
#hero-shop-modal .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent rgba(237, 233, 254, 0.65) transparent !important;
}
/* ── Category image full-size preview overlay ─────────────────────── */
.fh-cat-img-preview {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.fh-cat-img-preview.is-open { opacity: 1; pointer-events: auto; }
.fh-cat-img-preview__img {
    max-width: min(350px, 90vw);
    max-height: min(280px, 70vh);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
.fh-cat-img-preview__name {
    color: rgba(255, 255, 255, 0.85);
    font-size: .9rem;
    text-align: center;
    max-width: 280px;
}
.fh-cat-img-preview__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1.1rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.fh-cat-img-preview__close:hover { background: rgba(255, 255, 255, 0.25); }

.quick-start-toggle {
    background: transparent;
    border: 0;
    padding-inline: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.quick-start-toggle:hover {
    text-shadow: 0px 0px 4px var(--finland-blue);
    color: var(--finland-blue-400);
    transform: translateY(1px);
}
.quick-start-toggle-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.quick-start-toggle-chevron {
    width: .85rem;
    height: .85rem;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    transform: rotate(0deg);
}
.quick-start-toggle[aria-expanded="true"] .quick-start-toggle-chevron {
    transform: rotate(180deg);
}
.quick-start-dropdown-shell {
    position: absolute;
    top: calc(100% + .8rem);
    left: 0;
    min-width: 16rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.4rem);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.quick-start-dropdown {
    position: relative;
    max-height: 61.8vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    padding-right: 1.1rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.quick-start-dropdown::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.quick-start-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0.18) 100%);
    border-left: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    cursor: pointer;
}
/* Shared thumb style used by quick-start and Select2 custom scrollbars */
.custom-scrollbar__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    min-height: 34px;
    background: linear-gradient(180deg, rgba(43, 90, 168, 0.96) 0%, rgba(0, 53, 128, 0.96) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 0 0 1px rgba(15, 23, 42, 0.14);
    transform: translateY(0);
    cursor: grab;
    transition: transform .08s linear;
    touch-action: none;
}
.custom-scrollbar__thumb.is-dragging {
    cursor: grabbing;
}
.quick-start-scrollbar.is-hidden {
    display: none;
}
/* Select2 custom scrollbar rail — injected by JS into .select2-results */
.select2-custom-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.15) 100%);
    border-left: 1px solid rgba(148, 163, 184, 0.20);
    cursor: pointer;
    pointer-events: auto;
}
.select2-custom-scrollbar.is-hidden {
    display: none;
}
/* Hide the native scrollbar on the results list so our custom one shows */
.select2-results__options {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Add right padding so list items don't sit under the rail */
    padding-right: 18px !important;
}
.select2-results__options::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}
.quick-start-sticky-group {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    gap: .2rem;
    margin: -.5rem -.5rem .15rem;
    padding: .5rem 1.65rem .35rem .5rem;
    background: inherit;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
.quick-start-menu.is-open .quick-start-dropdown-shell {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.quick-start-link {
    display: block;
    padding: .7rem .8rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    transition: background .18s ease, color .18s ease;
}
.quick-start-link--sticky {
    background: rgba(0, 53, 128, 0.04);
}
.quick-start-link:hover,
.quick-start-link:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue);
}
.payment-secure-note {
    color: #2b5aa8;
}

/* Reusable animated underline — grows from centre outward to 61.8% of parent
   width (golden ratio), so it never reaches the edges of the link text. */
.link-underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: color .25s ease;
}
.link-underline::after {
    content: "";
    position: absolute;
    /* Centre the bar and constrain to 61.8% of the element width */
    left: 25%;
    right: 25%;
    bottom: -1px;
    height: 2px;
    background: var(--finland-blue-600);
    border-radius: 3px;
    /* Start at zero width from the centre, expand outward on hover */
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .38s cubic-bezier(.65, 0, .35, 1);
    pointer-events: none;
}
.link-underline:hover::after {
    transform: scaleX(1);
}

.header-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: 1px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    margin: 1px;
    background-color: darkred;
    border-color: darkred;
    color: #fff;
    transition: all .2s ease;
    height: 37.1875px;
}
.header-logout-btn:hover {
    background-color: rgba(225, 61, 61, 0.82);
    border-color: darkred;
    color: white;
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    border: darkred;
}

.header-headline {
    text-shadow: 0 0 1px white !important;
    color: var(--finland-blue-600) !important;
}
.header-headline:hover {
    color: white !important;
    text-shadow: 0 0 3px black !important;
}
.nav-link:hover:after,
.nav-link.is-active:after {
  transform: scaleX(1);
  color: var(--finland-blue-600);
}


/* ======================================================================= */
/*  * ◀ End of   §15  Select2 Override                                     */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §19  Sidebar (off-canvas)                                 */
/* ======================================================================= */

/* ---------- Sidebar (off-canvas, left) ---------- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: var(--z-sidebar);
    transform: translateX(-105%);
    transition: transform .45s cubic-bezier(.77, 0, .18, 1);
    padding: 1rem;
    pointer-events: none;
}
.sidebar.open {
    transform: translateX(0);
    pointer-events: auto;
}
.sidebar-inner {
    height: 100%;
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.sidebar-close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 2rem;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
    flex-shrink: 0;
}
.sidebar-close:hover,
.sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.04);
}
.sidebar-close.is-rotating-left {
    transform: rotate(-90deg) scale(1.02);
}
.sidebar-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: var(--z-sidebar-backdrop);
}
.sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.sidebar-link {
    position: relative;
    display: block;
    padding: .6rem .9rem;
    border-radius: 1px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: background .25s ease, color .25s ease;
    overflow: hidden;
    text-shadow: 0 0 1px black !important;
}
a[data-admin-nav] {
    position: relative;
    text-decoration: none;
}
a[data-admin-nav]::after {
    display: none;
}
.sidebar-link:hover,
.sidebar-link.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding-left: 1.15rem;
}
.sidebar-link:hover::before,
.sidebar-link.is-active::before { transform: scaleY(1); }
.sidebar-quick-start {
    display: grid;
    gap: .3rem;
}
.sidebar-quick-start__summary {
    list-style: none;
    cursor: pointer;
}
.sidebar-quick-start__summary::-webkit-details-marker {
    display: none;
}
.sidebar-quick-start__list {
    display: grid;
    gap: .2rem;
    padding-left: .6rem;
}
.sidebar-quick-start__link {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    padding: .55rem .8rem;
    transition: background .18s ease, color .18s ease;
}
.sidebar-quick-start__link:hover,
.sidebar-quick-start__link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding-left: 1rem;
}
.admin-sale-history-list {
    display: grid;
    gap: .65rem;
}
.admin-sale-history-item {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.36);
    padding: .7rem .85rem;
    border-radius: .5rem;
}
/* ---- Price history ---- */
.admin-price-history-list {
    display: grid;
    gap: .55rem;
}
.admin-price-history-item {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.32);
    padding: .6rem .85rem;
    border-radius: .5rem;
}
.admin-price-history-item__prices {
    font-size: .9rem;
    font-weight: 600;
}
.admin-price-history-item__old {
    opacity: .55;
    text-decoration: line-through;
}
.admin-price-history-item__new {
    color: #003580;
}
.admin-price-history-item__meta {
    font-size: .72rem;
    opacity: .7;
    margin-top: .15rem;
}


/* ======================================================================= */
/*  * ◀ End of   §19  Sidebar (off-canvas)                                 */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §20  Floating Back-to-top                                 */
/* ======================================================================= */

/* ---------- Floating back-to-top button ---------- */
.back-to-top-shell {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--z-back-to-top);
    display: flex;
    align-items: center;
    gap: 0;
    padding: .22rem;
    border-radius: 999px;
    background: rgba(0, 53, 128, 0);
    color: #fff;
    border: none;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease;
}
.back-to-top-shell.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top-shell:hover,
.back-to-top-shell:focus-within {
    background: var(--finland-blue-600);
}
.back-to-top-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border-radius: 1px;
    background: transparent;
    color: darkgreen;
    border: none;
    box-shadow: none;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
    min-height: 2.6rem;
    transition: opacity .2s ease;
}
.back-to-top-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}
.back-to-top-btn__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}
.back-to-top-btn__icon.is-spinning-forward {
    animation: back-to-top-spin-forward .45s ease;
}
.back-to-top-btn__icon.is-spinning-backward {
    animation: back-to-top-spin-backward .45s ease;
}
.back-to-top-btn__label {
    font-size: 1rem;
    text-transform: uppercase;
}
.back-to-top-dismiss {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: red;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

.back-to-top-dismiss::after {
    content: "";
    position: absolute;
    right: -.04rem;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255, 255, 255, 0.22);
}
.back-to-top-dismiss:hover,
.back-to-top-dismiss:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: darkred;
    transform: scale(1.05);
}
.back-to-top-dismiss:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}
.back-to-top-dismiss.is-spinning-forward {
    animation: back-to-top-dismiss-spin-forward .45s ease;
}
.back-to-top-dismiss.is-spinning-backward {
    animation: back-to-top-dismiss-spin-backward .45s ease;
}
@keyframes back-to-top-spin-forward {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes back-to-top-spin-backward {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes back-to-top-dismiss-spin-forward {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes back-to-top-dismiss-spin-backward {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Burger ↔ cross morph ---------- */
.burger {
    position: relative;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 3px solid var(--ink) !important;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, transform .25s ease, border-color .25s ease;
    flex-shrink: 0;
}
@keyframes burger-wobble {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(3px); }
    50%  { transform: translateX(-2px); }
    75%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
}
.burger:not(.open):hover .burger-bar-1 { animation: burger-wobble .4s ease; }
.burger:not(.open):hover .burger-bar-2 { animation: burger-wobble .4s ease .05s; }
.burger:not(.open):hover .burger-bar-3 { animation: burger-wobble .4s ease .1s; }
.burger-bar {
    position: absolute;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 18px;
    height: 3px;
    background: var(--ink) !important;
    border-radius: 1px;
    transition: transform .4s cubic-bezier(.68, -0.55, .27, 1.55),
                opacity .25s ease,
                top .4s cubic-bezier(.68, -0.55, .27, 1.55);
}
.burger:hover .burger-bar {
    background: var(--finland-blue-600) !important;
    border-color: var(--finland-blue) !important;
}
.burger-bar-1 { top: 8px; }
.burger-bar-2 { top: 14px; }
.burger-bar-3 { top: 20px; }
.burger.open .burger-bar-1 { top: 17px; transform: rotate(45deg); }
.burger.open .burger-bar-2 { opacity: 0; transform: scaleX(0); }
.burger.open .burger-bar-3 { top: 17px; transform: rotate(-45deg); }
.burger.open { transform: rotate(90deg); }

/* Admin burger visibility should not depend on generated utility CSS. */
#admin-sidebar-toggle { display: inline-flex; }

/* ======================================================================= */
/*  * ◀ End of   §20  Floating Back-to-top                                 */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §05  Reveal on Scroll                                     */
/* ======================================================================= */

/* ---------- Reveal on scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .01s ease, transform .01s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}


/* ======================================================================= */
/*  * ◀ End of   §05  Reveal on Scroll                                     */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §04  Keyframe Animations                                  */
/* ======================================================================= */

/* ---------- Keyframe animations ---------- */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes adminPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes gentleBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.animate-float  { animation: floatUp .8s cubic-bezier(.2, .8, .2, 1) both; }
.animate-fade   { animation: fadeIn .8s ease both; }
.animate-bob    { animation: gentleBob 4s ease-in-out infinite; }

/* Stagger helper — combine with .animate-float */
.stagger-1 { animation-delay: .08s; }
.stagger-2 { animation-delay: .16s; }
.stagger-3 { animation-delay: .24s; }
.stagger-4 { animation-delay: .32s; }
.stagger-5 { animation-delay: .40s; }

/* ---- Hero flag click animation sequences ---- */
@keyframes flagWiggle {
    0%,100% { transform: rotate(0deg) scale(1) translateY(0); }
    10%     { transform: rotate(-12deg) scale(1.06) translateY(-2px); }
    25%     { transform: rotate(14deg)  scale(1.09) translateY(-7px); }
    40%     { transform: rotate(-10deg) scale(1.05) translateY(-3px); }
    55%     { transform: rotate(8deg)   scale(1.04) translateY(-4px); }
    70%     { transform: rotate(-5deg)  scale(1.02); }
    85%     { transform: rotate(3deg); }
}
@keyframes flagSpin {
    0%   { transform: rotate(0deg)   scale(1)    translateY(0); }
    35%  { transform: rotate(360deg) scale(1.12) translateY(-20px); }
    65%  { transform: rotate(660deg) scale(1.05) translateY(-7px); }
    100% { transform: rotate(720deg) scale(1)    translateY(0); }
}
@keyframes flagSquish {
    0%   { transform: scaleX(1)    scaleY(1)    translateY(0); }
    22%  { transform: scaleX(1.48) scaleY(0.16) translateY(28%); }
    42%  { transform: scaleX(0.86) scaleY(1.25) translateY(-13%); }
    60%  { transform: scaleX(1.07) scaleY(0.91) translateY(4%); }
    76%  { transform: scaleX(0.97) scaleY(1.05) translateY(-1%); }
    100% { transform: scaleX(1)    scaleY(1)    translateY(0); }
}
@keyframes flagFlip {
    0%   { transform: perspective(700px) rotateY(0deg)   scale(1); }
    32%  { transform: perspective(700px) rotateY(180deg) scale(1.1); }
    66%  { transform: perspective(700px) rotateY(320deg) scale(1.04); }
    100% { transform: perspective(700px) rotateY(360deg) scale(1); }
}
@keyframes flagJump {
    0%   { transform: translateY(0)     rotate(0deg)  scale(1); }
    18%  { transform: translateY(-52px) rotate(-6deg) scale(1.08); }
    42%  { transform: translateY(-92px) rotate(7deg)  scale(1.16); }
    63%  { transform: translateY(-36px) rotate(-4deg) scale(1.06); }
    78%  { transform: translateY(-14px) rotate(2deg)  scale(1.02); }
    90%  { transform: translateY(-4px)  rotate(0deg); }
    100% { transform: translateY(0)     rotate(0deg)  scale(1); }
}
@keyframes flagShrinkPop {
    0%   { transform: scale(1)    rotate(0deg); }
    26%  { transform: scale(0.03) rotate(-18deg); }
    54%  { transform: scale(1.6)  rotate(14deg); }
    68%  { transform: scale(0.86) rotate(-7deg); }
    80%  { transform: scale(1.14) rotate(3deg); }
    91%  { transform: scale(0.96) rotate(-1deg); }
    100% { transform: scale(1)    rotate(0deg); }
}
@keyframes flagDisco {
    0%   { filter: hue-rotate(0deg)   brightness(1)   saturate(1.5); transform: scale(1)    rotate(0deg); }
    14%  { filter: hue-rotate(52deg)  brightness(1.45) saturate(2.3); transform: scale(1.09) rotate(3deg); }
    28%  { filter: hue-rotate(105deg) brightness(0.88) saturate(2.1); transform: scale(0.96) rotate(-4deg); }
    42%  { filter: hue-rotate(162deg) brightness(1.35) saturate(2.3); transform: scale(1.08) rotate(5deg); }
    57%  { filter: hue-rotate(215deg) brightness(1.1)  saturate(2.6); transform: scale(0.95) rotate(-5deg); }
    71%  { filter: hue-rotate(272deg) brightness(1.35) saturate(2.2); transform: scale(1.09) rotate(4deg); }
    85%  { filter: hue-rotate(325deg) brightness(1.2)  saturate(2);   transform: scale(0.97) rotate(-2deg); }
    100% { filter: hue-rotate(360deg) brightness(1)    saturate(1);   transform: scale(1)    rotate(0deg); }
}
.flag-seq-wiggle    { animation: flagWiggle    0.62s ease                     both !important; }
.flag-seq-spin      { animation: flagSpin      0.82s cubic-bezier(.4,0,.2,1)  both !important; }
.flag-seq-squish    { animation: flagSquish    0.72s cubic-bezier(.4,0,.2,1)  both !important; transform-origin: center bottom !important; }
.flag-seq-flip      { animation: flagFlip      0.92s cubic-bezier(.4,0,.2,1)  both !important; }
.flag-seq-jump      { animation: flagJump      0.82s cubic-bezier(.2,.8,.2,1) both !important; }
.flag-seq-shrinkpop { animation: flagShrinkPop 0.92s cubic-bezier(.2,.8,.2,1) both !important; }
.flag-seq-disco     { animation: flagDisco     1.25s linear                   both !important; }

/* Enhanced card hover */
.product-card {
    position: relative;
    z-index: 1;
    overflow: visible;
    /* Cheaper backdrop-filter on cards — blur(12px) on 20+ simultaneous cards
       is the main scroll-jank cause; 6px looks nearly identical but renders
       ~4× faster since GPU blur cost scales roughly with radius². */
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(6px) saturate(120%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                box-shadow .35s ease;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 53, 128, 0.22);
    will-change: transform;
}
/* List view is one large glass container — use a lighter blur so DataTables
   scroll doesn't repaint an expensive full-page backdrop-filter every frame. */
#catalog-list {
    /* Always establish a stacking/containing block so that absolutely-positioned
       children (skeleton overlays) are contained within #catalog-list and cannot
       escape to a higher ancestor when buildDataTable removes its inline position. */
    position: relative;
}
#catalog-list.glass {
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(6px) saturate(110%);
    /* Keep the list below the sticky filter card; the sticky thead is offset to
       the card bottom and should never paint over the filter controls. */
    z-index: 0;
}
#catalog-grid .btn,
#catalog-list .btn {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
#catalog-grid .btn-card-action,
#catalog-list .btn-card-action {
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    max-height: 2.2rem !important;
    padding: .42rem .3rem !important;
    font-size: .87rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#catalog-grid .btn-card-action {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    justify-content: center;
}
/* Icon-only buttons in the grid card action row — flex-share, no padding */
#catalog-grid .btn-card-action.btn-card-icon {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
#catalog-grid .btn-card-action.btn-card-icon svg,
.featured-hero-card .btn-card-action.btn-card-icon svg {
    width: 18px !important;
    height: 18px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Näytä and Tuotesivu each take 50% of their shared row */
#catalog-grid .btn-card-action.js-product-view {
    flex: 1 1 0;
}
/* Hero modal cards — btn-card-action overrides (no #catalog-grid scope applies here) */
.featured-hero-card .btn-card-action {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    height: 2.2rem;
    min-height: 2.2rem;
    font-size: .87rem;
    padding: .42rem .3rem;
}
.featured-hero-card .btn-card-action.btn-card-icon {
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}
/* Favourite heart badge in DataTable name cell */
.catalog-list-fav-badge {
    display: inline-block;
    margin-left: .3rem;
    font-size: .9rem;
    line-height: 1;
    color: #e11d48;
    vertical-align: middle;
    transition: opacity .2s ease;
    cursor: default;
}
.catalog-list-fav-badge--empty {
    opacity: 0;
    pointer-events: none;
}
.catalog-list-actions-cell {
    width: 130px;
    min-width: 130px;
    padding: .4rem .3rem !important;
    vertical-align: middle;
}
.catalog-list-btns-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: fit-content;
}
.catalog-list-btns-row {
    display: grid;
    grid-template-columns: repeat(3, 38px);
    gap: 0;
}
/* Compact storefront action clusters: card, list, and pager buttons sit flush. */
#catalog-grid .product-card .flex:has(> .btn-card-action),
#catalog-grid .product-card .flex:has(> .flex > .btn-card-action),
.featured-hero-card .flex:has(> .btn-card-action),
.featured-hero-card .flex:has(> .flex > .btn-card-action),
#catalog-list .catalog-list-btns-wrap,
#catalog-list .catalog-list-btns-row,
#catalog-list .catalog-thumb-td-actions,
#catalog-list .catalog-thumb-td-row,
.site-main .catalog-list-footer__nav,
.site-main .catalog-toolbar-nav,
.site-main .view-toggle,
.site-main .catalog-collapse-btn-group,
.site-main .product-quick-view-modal-footer,
.site-main .admin-form-modal-body .flex:has(> .cqr-mode-btn),
.site-main .admin-form-modal-footer:has(> .btn),
.site-main #psm-period-bar,
.site-main #pphm-period-bar,
.site-main #pic-price-period-bar,
.site-main #activity-period-bar,
.site-main #wm-locale-btns,
.site-main #wm-theme-btns,
.site-main #wm-audio-btns,
.site-main #wm-hints-btns,
.site-main .image-source-tabs {
    gap: 0 !important;
}
/* Invisible placeholder preserves grid column position */
.catalog-list-btn-placeholder {
    width: 38px;
    height: 38px;
    visibility: hidden;
    pointer-events: none;
}
#catalog-list .catalog-list-btns-wrap .btn-card-action,
#catalog-list .catalog-list-btns-row .btn-card-action {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}
.catalog-list-btns-wrap .btn-card-action svg {
    display: block;
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
}
/* Thumb column quick-action buttons */
.catalog-thumb-td-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: .3rem;
}
.catalog-thumb-td-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
}
/* Row 2 is hidden by default; toggled open by .js-thumb-row2-toggle */
.catalog-thumb-row2 {
    display: none;
}
.catalog-thumb-row2.is-open {
    display: flex;
}
.catalog-thumb-td-row .btn-card-action svg {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Arrow icon inside the toggle button rotates 180° when row2 is open */
.js-thumb-row2-toggle .cttr-arrow {
    transition: transform .18s ease;
    display: block;
}
.js-thumb-row2-toggle.is-open .cttr-arrow {
    transform: rotate(180deg);
}
#catalog-list .catalog-thumb-td-actions .btn-card-action {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
}
.catalog-thumb-td-actions .btn-card-action svg {
    display: block;
    flex-shrink: 0;
}
/* Subtle pulse on the cart button in the thumb-column action row.
   Uses transform + filter:drop-shadow because btn-primary has box-shadow:!important. */
@keyframes catalog-cart-pulse {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(0, 82, 204, 0)); }
    4%   { transform: scale(1.22); filter: drop-shadow(0 1px 5px rgba(0, 82, 204, 0.6)); }
    8%   { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(0, 82, 204, 0)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(0, 82, 204, 0)); }
}
#catalog-list .catalog-thumb-td-actions .catalog-thumb-cart-pulse {
    animation: catalog-cart-pulse 10s ease-in-out infinite;
    transform-origin: center center;
}
#catalog-list .catalog-thumb-td-actions .catalog-thumb-cart-pulse:hover,
#catalog-list .catalog-thumb-td-actions .catalog-thumb-cart-pulse:focus,
#catalog-list .catalog-thumb-td-actions .catalog-thumb-cart-pulse:active {
    animation: none;
}
.catalog-price-stack {
    display: grid;
    gap: .2rem;
}
.catalog-price-original {
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.2;
    text-decoration: line-through;
}
.catalog-price-current {
    color: var(--finland-blue);
    font-weight: 800;
    line-height: 1.15;
}
.catalog-media-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}
#catalog-grid .product-card .catalog-media-wrap {
    height: 200px; /* fixed crop window — image fills this regardless of natural size */
    position: relative; /* ensure abs positioning context */
}
#catalog-grid .product-card .catalog-media-wrap > img.catalog-zoomable-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
    transition: filter .15s ease;
}
#catalog-list .catalog-media-wrap--thumb > img.catalog-zoomable-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
    transition: filter .15s ease;
}

#catalog-grid .product-card .catalog-media-wrap > video.catalog-primary-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
    cursor: zoom-in;
}
.catalog-primary-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.75);
    pointer-events: none;
}
/* Center the thumbnail wrap in its DataTable cell */
#catalog-list td:has(> .catalog-media-wrap--thumb) {
    text-align: center;
    vertical-align: middle;
}
.catalog-media-wrap--thumb {
    display: inline-block;
    position: relative;
    width: 60px;
    min-width: 60px;
    height: 60px;
    overflow: hidden; /* clip image so it can never push row height */
    border-radius: .5rem;
    flex-shrink: 0;
}
#catalog-list .catalog-media-wrap--thumb > img.catalog-zoomable-image {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    /* 80px × 80px image in a 60px viewport: 10px headroom each side.
       Thumb strength capped at 9px so worst shift ≤ 9px < 10px ✅
       No extra scale() needed — 80/60 ratio already provides 133% coverage. */
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    aspect-ratio: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}

#catalog-list .catalog-media-wrap--thumb > video.catalog-primary-video {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    display: block;
    object-fit: cover;
    background: #000;
    cursor: zoom-in;
}
.catalog-primary-video-play--thumb {
    font-size: 1rem;
}
/* Transform-based ImageFX images: reset to normal fill layout so animation starts
   from a clean baseline. The [data-fx-transform] attribute is toggled by
   ImageFX.apply() / ImageFX.clear(). */
#catalog-grid .product-card .catalog-media-wrap > img.catalog-zoomable-image[data-fx-transform],
#catalog-list .catalog-media-wrap--thumb > img.catalog-zoomable-image[data-fx-transform] {
    width: 100%;
    height: 100%;
    min-width: unset;
    max-width: unset;
    min-height: unset;
    max-height: unset;
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    object-fit: cover;
}

/* DataTables FixedHeader — animate vertical repositioning when the catalog
   filter bar changes height (collapse / expand / secondary row toggle).
   Animation is applied inline via JS FLIP (read old top → plugin sets new top →
   snap back → reflow → transition to new top). The inline transition is cleaned
   up by JS after it completes so scroll-driven repositioning stays instant.
   The .dtfh-floatingparent class is the plugin's wrapper div; the actual table
   gets .fixedHeader-floating when the header is in sticky/floating mode. */
/* Dedicated expand-arrow column — zero footprint, just holds the dtr-control arrow */
#catalog-table th#catalog-col-expand,
#catalog-table td.dtr-control {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
/* .dtfh-animate is no longer used for transitions — FLIP animation is driven
   inline by syncCatalogListFixedHeader() in shop/index.php. */

/* Sale card scroll-in shake */
@keyframes catalog-sale-shake {
    0%   { transform: translateY(0) rotate(0deg); }
    15%  { transform: translateY(-3px) rotate(-2deg); }
    30%  { transform: translateY(0) rotate(2deg); }
    45%  { transform: translateY(-2px) rotate(-1.5deg); }
    60%  { transform: translateY(0) rotate(1.5deg); }
    75%  { transform: translateY(-1px) rotate(-0.8deg); }
    90%  { transform: translateY(0) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
/* Persistent orange border on sale cards */
.product-card[data-on-sale="1"] {
    border: 1px solid #f97316 !important;
    box-shadow: 0 0 0 1px rgba(249,115,22,0.12), 0 1px 14px rgba(249,115,22,0.9) !important;
}
.product-card.sale-shake {
    animation: catalog-sale-shake 0.55s ease 4;
    border: 3px solid #f97316 !important;
    box-shadow: 0 0 0 2px #f97316, 0 1px 14px rgba(249, 115, 22, 0.45), 0 0 24px rgba(255, 255, 255, 0.72) !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Sale row shake — admin products DataTable */
@keyframes dt-row-sale-shake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-4px); }
    30%  { transform: translateX(4px); }
    45%  { transform: translateX(-3px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-1.5px); }
    90%  { transform: translateX(1.5px); }
    100% { transform: translateX(0); }
}
/* Persistent orange outline on sale rows */
tr.dt-row-on-sale > td:first-child {
    border-left: 2px solid #f97316;
}
tr.dt-row-on-sale.sale-shake {
    outline: 3px solid #f97316;
    outline-offset: -1px;
    box-shadow: 0 0 0 2px #f97316, 0 4px 20px rgba(249, 115, 22, 0.4), 0 0 22px rgba(255, 255, 255, 0.68);
    transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}
tr.dt-row-on-sale.sale-shake > td {
    animation: dt-row-sale-shake 0.5s ease 3;
    will-change: transform;
}
.catalog-sale-badge-wrap {
    display: flex;
    align-items: center;
}
.catalog-sale-badge-wrap--overlay {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    pointer-events: none;
}
.catalog-sale-badge,
.catalog-flag-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: fit-content;
    padding: .25rem .5rem;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.catalog-sale-badge,
.catalog-flag-badge--sale {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.18);
    color: #b91c1c;
}
.catalog-sale-badge--overlay {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    box-shadow: 0 12px 26px rgba(185, 28, 28, 0.3);
    padding: .38rem .65rem;
}
.catalog-flag-badge--featured {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.2);
    color: #b45309;
}
.catalog-flag-badge--cat {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: var(--finland-blue-600);
}
button.catalog-flag-badge--cat {
    cursor: pointer;
}
button.catalog-flag-badge--cat:hover {
    background: rgba(99, 102, 241, 0.16);
    text-decoration: underline;
}

/* ======================================================================= */
/*  * ◀ End of   §04  Keyframe Animations                                  */

/* ======================================================================= */
/* Shared storefront modal/header/form sections moved out of singles.css. */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §28  Cart Backorder Warnings                              */
/* ======================================================================= */

/* ---- Cart backorder warnings ---- */
.cart-backorder-banner,
.cart-backorder-note {
    color: #b91c1c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* ---------- Site header: golden-ratio column layout ----------
 * The header is split so the actions group always begins at the φ (61.8%)
 * mark of the total width:
 *   brand  — shrinks to its natural content width
 *   nav    — fills the major segment (everything up to 61.8%)
 *   actions — anchored to start at 61.8%, occupying the minor segment (38.2%)
 */
.site-header-inner {
    width: 100%;
    gap: 0;
}
.site-header-brand {
    flex: 0 0 auto;
    min-width: 0;
    padding-right: 1.5rem;
}
.site-header-nav {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-start;
    margin-right: .75rem;
}
/* Active category filter badge strip. Empty/default state matches the 38px
   header controls; active filters can use a fixed two-row area. */
.header-cat-badges {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    gap: .35rem;
    overflow: hidden;
    padding: .15rem .5rem;
    height: 38px;
    max-height: 38px;
}
.header-cat-badges.has-badges {
    height: 52px;
    max-height: 52px;
}
.header-cat-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .25rem;
    padding: .18rem .45rem .18rem .6rem;
    background: rgba(0,53,128,.11);
    border: 1px solid rgba(0,53,128,.22);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 600;
    color: currentColor;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s;
    max-width: 9rem;
    line-height: 1.2;
}
.header-cat-badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7rem;
    display: inline-block;
    vertical-align: middle;
}
.header-cat-badge__x {
    font-size: .8rem;
    opacity: .55;
    line-height: 1;
    flex-shrink: 0;
    margin-top: -1px;
}
.header-cat-badge:hover {
    background: rgba(0,53,128,.2);
    border-color: rgba(0,53,128,.38);
}
.header-cat-badge--more {
    padding: .18rem .55rem;
    background: var(--finland-blue);
    border-color: transparent;
    color: #fff;
    font-size: .65rem;
    gap: 0;
}
.header-cat-badge--more:hover {
    background: var(--finland-blue-600);
    border-color: transparent;
}
.site-header-actions {
    flex: 0 0 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: .55rem;
    border: none;
}
/* Uniform height for the interactive controls in the header actions cluster:
   theme toggle, locale select, tooltip switch (and any future sibling). */
.site-header-actions .site-header-ctrl,
.site-header-actions .site-header-ctrl-form {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    background: rgba(0,0,0,0);
    border: none;
}
.site-header-actions .site-header-ctrl:hover,
.site-header-actions .site-header-ctrl-form:hover {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ink);
    box-shadow: 0 0 4px var(--ink);
    background: rgba(255,255,255,0.16);
}
.site-header-actions .site-header-ctrl-form .site-header-ctrl {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
}
.site-header-actions select.site-header-ctrl {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}
.site-header-actions .theme-toggle:hover {
    border: 1px solid var(--ink);
    box-shadow: 0 0 4px var(--ink);
}
/* Bold locale badge text (FI / EN) in every language selector site-wide */
select[name="locale"] {
    font-weight: 700;
}
.site-header-actions button.site-header-ctrl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.site-header-cart-link {
    color: var(--header-accent);
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0,0,0,0);
    box-shadow: 0 0 1px var(--ink);
    height: 37.1875px;
}

.site-header-account-link{
    color: var(--header-accent);
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0,0,0,0);
    box-shadow: 0 0 1px var(--ink);
    height: 37.1875px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.site-header-profile-thumb {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    object-fit: cover;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.45);
    flex-shrink: 0;
    cursor: zoom-in;
}
.profile-image-preview-backdrop {
    background: rgba(10,18,32,0.28);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
}
.profile-image-preview-panel {
    position: relative;
    width: min(92vw, 420px);
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem 1.25rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0);
    border: 1px solid rgba(255,255,255,0);
    box-shadow: 0 18px 44px rgba(0,0,0,0);
}
.profile-image-preview-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.86);
    color: #111827;
    font-size: 1.6rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.profile-image-preview-close:hover,
.profile-image-preview-close:focus-visible {
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.34);
}
.profile-image-preview-img {
    object-fit: contain;
    border-radius: 0.375rem;
    box-shadow: 0 10px 26px rgba(0,0,0,0);
}
.profile-image-preview-modal--full .profile-image-preview-panel {
    width: min(96vw, 1280px);
    min-height: auto;
}
.profile-image-preview-img--full {
    width: auto;
    height: auto;
    max-width: calc(96vw - 2.5rem);
    max-height: calc(90vh - 4rem);
    aspect-ratio: auto;
    object-fit: contain;
}

/* ---------- Full-bleed site header ----------
 * The top header sits edge-to-edge across the viewport. `.site-header-panel`
 * overrides the default `.glass` rounding + border and replaces the floating
 * border with a single hairline under the bar, so the header reads as a
 * continuous band instead of a floating card.
 */
.site-header-panel {
    border-radius: 0 !important;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    /* Pre-promote to compositor layer: the header is sticky — telling the
       GPU upfront avoids the promotion overhead on the first scroll frame. */
    will-change: transform;
    contain: layout style;
}
/* Sea page: header must be opaque to avoid compositing glitch with canvas */
body.page-sea .site-header-panel {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ======================================================================= */
/*  * ◀ End of   §28  Cart Backorder Warnings                              */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §44b  Category Links in Quick-view                        */
/* ======================================================================= */

/* ---- Category links inside quick-view modal ---- */
.pm-cat-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    color: var(--finland-blue-400) !important;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.pm-cat-link:hover,
.pm-cat-link:focus-visible {
    color: #7dd3fc !important;
    text-decoration-color: #7dd3fc !important;
    outline: none;
}

/* ======================================================================= */
/*  * ◀ End of   §44b  Category Links in Quick-view                        */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §47  Product Quick-view Attachments                       */
/* ======================================================================= */

/* ---- Product quick-view attachments / downloads ---- */
#product-modal .pm-attachments {
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 1rem;
    padding-top: .75rem;
}
#product-modal .pm-attachments__title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,0.55);
    margin-bottom: .4rem;
}
#product-modal .pm-attachments__list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
#product-modal .pm-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #93c5fd;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: .6rem;
    padding: .25rem .65rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
#product-modal .pm-attachment-link:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}
/* Admin product-edit modal attachment row */
.pf-attachment-item {
    font-size: .78rem;
}
.pf-attachment-upload-row {
    margin-top: .5rem;
}
/* Storefront product page downloads */
.product-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: .6rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
    transition: background .15s;
}
.product-attachment-link:hover {
    background: rgba(255,255,255,0.22);
}
#account-product-modal .pm-review-readonly__edit-btn,
#product-modal .pm-review-readonly__edit-btn {
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(15, 23, 42, 1) !important;
    margin-top: 0.5rem !important;
}
#account-product-modal .pm-review-readonly__edit-btn:hover,
#product-modal .pm-review-readonly__edit-btn:hover {
    background: rgba(15, 23, 42, 1) !important;
    color: #ffffff !important;
}
#account-product-modal .pm-review-readonly__delete-btn,
#product-modal .pm-review-readonly__delete-btn {
    color: #ffffff !important;
    background: rgba(127, 17, 17, 0.88) !important;
    border-color: rgba(127, 17, 17, 1) !important;
    margin-top: 0.5rem !important;
}
#account-product-modal .pm-review-readonly__delete-btn:hover,
#product-modal .pm-review-readonly__delete-btn:hover {
    background: rgba(127, 17, 17, 1) !important;
    color: #ffffff !important;
}
/* Reply-to author chip: --finland-blue-400 in glass modals */
#product-modal .pm-thread-at,
#product-comments-modal .pm-thread-at,
#product-reviews-modal .pm-thread-at,
#product-review-detail-modal .pm-thread-at,
#product-comment-detail-modal .pm-thread-at,
#card-comments-modal .pm-thread-at {
    color: var(--finland-blue-400) !important;
    background: rgba(75, 140, 240, 0.10) !important;
    border-color: rgba(75, 140, 240, 0.25) !important;
}
/* Edit button (non-danger) uses finland-blue-400 in glass modals */
#product-modal .comment-action-btn:not(.comment-action-btn--danger),
#product-comments-modal .comment-action-btn:not(.comment-action-btn--danger),
#product-reviews-modal .comment-action-btn:not(.comment-action-btn--danger),
#product-review-detail-modal .comment-action-btn:not(.comment-action-btn--danger),
#product-comment-detail-modal .comment-action-btn:not(.comment-action-btn--danger) {
    color: var(--finland-blue-400) !important;
    border-color: rgba(75, 140, 240, 0.55);
    background: rgba(75, 140, 240, 0.12);
    box-shadow: 0 0 0 1px rgba(75, 140, 240, 0.12), 0 1px 4px rgba(75, 140, 240, 0.14);
}
#product-modal .comment-action-btn:not(.comment-action-btn--danger):hover,
#product-comments-modal .comment-action-btn:not(.comment-action-btn--danger):hover,
#product-reviews-modal .comment-action-btn:not(.comment-action-btn--danger):hover,
#product-review-detail-modal .comment-action-btn:not(.comment-action-btn--danger):hover,
#product-comment-detail-modal .comment-action-btn:not(.comment-action-btn--danger):hover {
    background: rgba(75, 140, 240, 0.25);
    border-color: rgba(75, 140, 240, 0.75);
}
/* Edited badge: white in glass modals */
#product-modal .comment-edited-badge,
#product-comments-modal .comment-edited-badge,
#product-reviews-modal .comment-edited-badge,
#product-review-detail-modal .comment-edited-badge,
#product-comment-detail-modal .comment-edited-badge {
    color: rgba(255, 255, 255, 0.75);
}
/* Edit/delete review buttons: subtle light border in product-modal */
#product-modal .pm-review-readonly__edit-btn {
    border-color: rgba(255, 255, 255, 0.22) !important;
}
#product-modal .pm-review-readonly__delete-btn {
    border-color: rgba(255, 180, 180, 0.32) !important;
}
/* Quick-review modal — blue glass treatment matching product-modal */
#quick-review-modal .modal-panel {
    background: rgba(11, 29, 58, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(142, 174, 226, 0.28) !important;
    box-shadow: 0 24px 56px rgba(4, 12, 32, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
#quick-review-modal .modal-panel .text-flag-blue {
    color: #e2e8f0 !important;
}
#quick-review-modal .modal-panel .input,
#quick-review-modal .modal-panel .textarea {
    background: rgba(11, 29, 58, 0.55) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    color: #ffffff !important;
}
#quick-review-modal .modal-panel .input::placeholder,
#quick-review-modal .modal-panel .textarea::placeholder {
    color: rgba(226, 232, 240, 0.55) !important;
}
#quick-review-modal .pm-review-readonly__title { color: #e2e8f0 !important; }
#quick-review-modal .pm-review-readonly__body  { color: #ffffff !important; }
#quick-review-modal .pm-review-readonly__stars { color: #fbbf24 !important; }
#quick-review-modal .pm-write-review__title    { color: #93c5fd !important; }
#quick-review-modal .pm-star-btn               { color: rgba(255, 255, 255, 0.22) !important; }
#quick-review-modal .pm-star-btn.is-active,
#quick-review-modal .pm-star-btn.is-hovered,
#quick-review-modal .pm-star-btn:hover         { color: #fbbf24 !important; }
#quick-review-modal .pm-write-review__status--ok  { color: #34d399 !important; }
#quick-review-modal .pm-write-review__status--err { color: #f87171 !important; }
#quick-review-modal .pm-review-readonly__edit-btn {
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(15, 23, 42, 1) !important;
    margin-top: 0.5rem !important;
}
#quick-review-modal .pm-review-readonly__edit-btn:hover {
    background: rgba(15, 23, 42, 1) !important;
    color: #ffffff !important;
}
#quick-review-modal .pm-review-readonly__delete-btn {
    color: #ffffff !important;
    background: rgba(127, 17, 17, 0.88) !important;
    border-color: rgba(127, 17, 17, 1) !important;
    margin-top: 0.5rem !important;
}
#quick-review-modal .pm-review-readonly__delete-btn:hover {
    background: rgba(127, 17, 17, 1) !important;
    color: #ffffff !important;
}
/* Both product modals — price always white with a soft white glow on dark bg */
#account-product-modal .catalog-price-current,
#product-modal .catalog-price-current {
    color: #ffffff !important;
    text-shadow: 0 0 1px black !important;
}
#account-product-modal .catalog-price-original,
#product-modal .catalog-price-original {
    color: rgba(226, 232, 240, 0.62) !important;
    text-shadow: none;
}
/* Storefront DataTable list-view — white glow behind the price to lift it off the glass bg */
#catalog-list .catalog-price-current {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.382), 1px 1px 0 rgba(255, 255, 255, 0.16);
}
#catalog-list .catalog-price-original {
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}
.modal-panel {
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    position: relative;
    /* native scrollbar styled per theme */
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 130, 180, 0.40) transparent;
    -ms-overflow-style: auto;
}
.modal-panel::-webkit-scrollbar { display: block; width: 6px; }
.modal-panel::-webkit-scrollbar-thumb { background: rgba(100, 130, 180, 0.40); border-radius: 3px; }
.modal-panel::-webkit-scrollbar-track { background: transparent; }
/* Login/register modals must appear above product-modal (both use --z-overlay=50;
   login/register open on top of an already-open product-modal) */
#login-modal.open,
#register-modal.open {
    z-index: calc(var(--z-toast) - 10) !important;
}
#login-modal .modal-panel,
#register-modal .modal-panel {
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 25px;
    background: rgba(11, 29, 58, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(142, 174, 226, 0.28) !important;
    box-shadow: 0 24px 56px rgba(4, 12, 32, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}
#login-modal .modal-panel .text-black,
#login-modal .modal-panel .text-flag-blue,
#register-modal .modal-panel .text-black,
#register-modal .modal-panel .text-flag-blue,
#register-modal .modal-panel .text-gray-700 {
    color: #e2e8f0 !important;
}
#login-modal .modal-panel .input,
#register-modal .modal-panel .input {
    background: rgba(11, 29, 58, 0.55) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    color: #ffffff !important;
}
#login-modal .modal-panel .input::placeholder,
#register-modal .modal-panel .input::placeholder {
    color: rgba(226, 232, 240, 0.55) !important;
}
/* Welcome modal — explicit text colours per theme so labels are always readable */
#welcome-modal .modal-panel { color: var(--ink); background-color: rgba(0, 34, 157, 0.1); }
/* ── User-settings modal ───────────────────────────────────────────────────── */
.usm-panel {
    max-width: 820px;
    width: 95vw;
    padding: 1.35rem 1.4rem 1.2rem;
    box-sizing: border-box;
}
.usm-title { font-size: 1.05rem; }
.usm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}
.usm-col {
    min-width: 0;
}
.usm-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .55;
    margin-bottom: .55rem;
}
.usm-rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.usm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.2rem;
}
.usm-row__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    opacity: .85;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
}
.usm-row__icon { flex-shrink: 0; opacity: .65; }
.usm-toggle-pair,
.usm-theme-btns,
.usm-locale-btns {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.usm-toggle-pair {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.usm-opt-btn {
    font-size: .78rem;
    font-weight: 600;
    padding: .28rem .72rem;
    border-radius: .45rem;
    border: 2.5px solid rgba(15,23,42,.68);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .13s, border-color .13s, color .13s;
    opacity: .7;
}
.usm-opt-btn:hover { opacity: 1; border-color: rgba(15,23,42,.9); }
.usm-opt-btn.is-active {
    background: var(--finland-blue, #003580);
    border-color: var(--finland-blue, #003580);
    color: #fff;
    opacity: 1;
}
.usm-info-rows {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.usm-info-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    opacity: .7;
}
.usm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(148,163,184,.2);
}
.usm-status { font-size: .8rem; flex: 1; }
.usm-status--ok  { color: #16a34a; }
.usm-status--err { color: #dc2626; }
/* Password change form */
.usm-pw-form { display: flex; flex-direction: column; gap: .45rem; margin-top: .25rem; }
.usm-pw-input { font-size: .82rem !important; padding: .38rem .6rem !important; }
.usm-pw-footer { display: flex; align-items: center; gap: .75rem; margin-top: .2rem; }
.usm-pw-footer .usm-status { flex: 1; font-size: .78rem; }

/* Custom scrollbar for Select2 results list — see .select2-custom-scrollbar below */
/* Modal custom scrollbar rail — kept in DOM to avoid JS errors but hidden */
.modal-scrollbar {
    display: none !important;
}
/* Processor custom scrollbar rail (queue list + detail panel) */
.proc-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.10) 0%, rgba(15, 23, 42, 0.16) 100%);
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: pointer;
    pointer-events: auto;
}
.proc-scrollbar.is-hidden { display: none; }
.order-modal-panel {
    width: min(95vw, 1600px);
    max-width: 95vw;
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
    border: 1px solid rgba(142, 174, 226, 0.28) !important;
    box-shadow:
        0 24px 56px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
}
.order-modal-header,
.order-modal-footer {
    flex: 0 0 auto;
    padding: 1.25rem 1.5rem;
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
}
.order-modal-header {
    border-bottom: 1px solid rgba(142, 174, 226, 0.24);
}
.order-modal-header-main {
    width: 100%;
}
.order-modal-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
}
.order-modal-header-group {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
}
.order-modal-header-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted-600);
}
.order-modal-header-buttons {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.js-quick-fulfilment {
    position: relative;
}
.js-quick-fulfilment.is-loading {
    pointer-events: none;
}
.quick-fulfilment-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--finland-blue);
    border-right-color: transparent;
    border-radius: 50%;
    animation: quick-fulfilment-spin .7s linear infinite;
}
@keyframes quick-fulfilment-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.order-modal-body {
    flex: 1 1 auto;
    position: relative;
    overflow-y: auto;
    padding: 1.5rem;
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.order-modal-body::-webkit-scrollbar { display: none; width: 0; }
.order-modal-footer {
    border-top: 1px solid rgba(142, 174, 226, 0.24);
}
.order-modal-panel .text-gray-500,
.order-modal-panel .text-gray-600,
.order-modal-panel .text-gray-700,
.order-modal-panel .text-flag-blue,
.order-modal-panel .text-finland-blue,
.order-modal-panel label {
    color: #e2e8f0 !important;
}
.order-modal-panel .input,
.order-modal-panel .select,
.order-modal-panel .textarea,
.order-modal-panel .select2-container--default .select2-selection--single {
    background: rgba(11, 29, 58, 0.55) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    color: #ffffff !important;
}
.order-modal-panel table thead th,
.order-modal-panel .dataTable thead th,
.order-modal-panel .dataTable thead td {
    color: #ffffff !important;
    border-bottom-color: rgba(191, 219, 254, 0.28) !important;
}
.order-modal-panel #order-items-table {
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}
.order-modal-panel #order-items-table tbody tr {
    background: rgba(11, 29, 58, 0.38) !important;
}
.order-modal-panel #order-items-table tbody td {
    color: #f8fafc !important;
    background: rgba(11, 29, 58, 0.38) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
    vertical-align: middle;
}
.order-modal-panel #order-items-table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0.65rem 0 0 0.65rem;
}
.order-modal-panel #order-items-table tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 0 0.65rem 0.65rem 0;
}
.order-modal-panel #order-items-table tbody tr:hover td {
    background: rgba(15, 23, 42, 0.52) !important;
}
.order-modal-panel #order-items-table tbody td .text-gray-500,
.order-modal-panel #order-items-table tbody td .text-gray-600,
.order-modal-panel #order-items-table tbody td .text-gray-700,
.order-modal-panel #order-items-table tbody td .font-mono,
.order-modal-panel #order-items-table tbody td div,
.order-modal-panel #order-items-table tbody td span {
    color: inherit !important;
}
.order-modal-panel #order-items-table .catalog-thumb-placeholder {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}
.modal-close {
    background: transparent; border: 0; font-size: 1.5rem; cursor: pointer;
    color: rgba(255, 255, 255, 1) !important;
    transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
    transform: scale(1);
    margin: 0.618rem;
    text-shadow: 0 0 4px black !important;
}
.modal-close:hover,
.modal-close:focus-visible {
    transform: scale(1.28);
}
.pm-buttons {
    color: white !important;
    text-shadow: 0 0 1px black !important;
}
.pm-image-main {
    cursor: zoom-in;
    border-radius: 1px !important;
}
#product-image-wrap {
    border-radius: 1px !important;
}
#product-modal .product-quick-view-modal-media {
    border-radius: 1px;
}
/* Inline QR code under the product image in the quick-view modal. */
/* filter: invert(1) turns the white-on-black QR into a negative (dark bg, white modules). */
.pm-qr-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.pm-qr-wrap:hover { opacity: 1; }
.pm-qr-canvas img {
    filter: invert(1);
    border-radius: 3px;
    display: block;
}
.pm-image-nav {
    position: fixed;
    top: 50%;
    width: 3.75rem;
    min-width: 3.75rem;
    height: 3.75rem;
    min-height: 3.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
    background: rgba(2, 8, 23, 0.48);
    color: #fff !important;
    z-index: var(--z-image-modal);
    transform: translateY(-50%);
    box-shadow: 0 18px 42px rgba(2, 8, 23, 0.38);
}
.pm-image-nav:hover,
.pm-image-nav:focus-visible {
    transform: translateY(-50%) scale(1.06);
    background: rgba(2, 8, 23, 0.66);
}
.pm-image-nav svg {
    width: 2.25rem;
    height: 2.25rem;
}
.pm-image-nav--prev {
    left: max(1rem, env(safe-area-inset-left));
}
.pm-image-nav--next {
    right: max(1rem, env(safe-area-inset-right));
}
.product-image-modal-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(98vw, 1600px);
    max-width: 98vw;
    max-height: 98vh;
    padding: 1rem;
    background: transparent;
    box-shadow: none;
    border: 0;
    overflow: hidden;
}
.product-image-modal-actions {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-image-modal);
}
.product-image-modal-actions .modal-close {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff !important;
    text-shadow: 0 4px 18px rgba(2, 6, 23, 0.55);
}
.image-preview-close svg {
    width: 3rem;
    height: 3rem;
    display: block;
    stroke: currentColor;
}
.product-video-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(96vw, 1280px);
    max-height: 96vh;
    padding: 0.75rem;
    background: rgba(2, 8, 23, 0.86);
    border: 1px solid rgba(142, 174, 226, 0.28);
    box-shadow: 0 24px 80px rgba(2, 8, 23, 0.72);
    overflow: hidden;
}
#product-video-modal.open {
    z-index: var(--z-image-modal) !important;
}
.product-video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0 0.6rem;
}
.product-video-modal-title {
    min-width: 0;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-video-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.product-video-modal-actions .modal-close {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: #fff !important;
}
.product-video-modal-actions .modal-close svg {
    width: 2.1rem;
    height: 2.1rem;
}
.product-video-modal-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 0.35rem;
    overflow: hidden;
}
.product-video-modal-video {
    display: block;
    width: 100%;
    max-width: 1280px;
    aspect-ratio: 16 / 9;
    max-height: min(72vh, 720px);
    background: #000;
    object-fit: contain;
}
.product-video-modal-panel:fullscreen {
    width: 100vw;
    max-height: 100vh;
    padding: 1rem;
    border: 0;
    border-radius: 0;
}
.product-video-modal-panel:fullscreen .product-video-modal-video {
    max-height: calc(100vh - 4.5rem);
}
.pm-image-full {
    display: block;
    max-width: 98vw;
    max-height: calc(98vh - 4rem);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 1px;
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0);
}

/* ======================================================================= */
/*  * ◀ End of   §47  Product Quick-view Attachments                       */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §52c  Scheduled Price Form                                */
/* ======================================================================= */

/* ---- Scheduled price form ---- */
.admin-scheduled-price-form {
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: .6rem;
}

/* ======================================================================= */
/*  * ◀ End of   §52c  Scheduled Price Form                                */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §29  Cart Submodal                                        */
/* ======================================================================= */

/* ---- Cart submodal ---- */
/* Force a dark glass panel in every theme — same approach as #product-modal */
#cart-submodal .modal-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(8, 20, 46, 0.82) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(142, 174, 226, 0.22) !important;
    box-shadow: 0 24px 56px rgba(4, 12, 32, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 1rem 1rem 1.618rem 1.618rem;
    /* override modal-panel scrollbar suppression: panel itself doesn't need to scroll */
    overflow-y: hidden !important;
}
/* The panel itself is overflow-y:hidden so the JS-injected panel-level rail
   would be a phantom scrollbar. Only the sub-rail for #csm-items should show. */
#cart-submodal .modal-scrollbar:not(.modal-scrollbar--sub) {
    display: none !important;
}
/* Hide native scrollbar on the inner items list — custom rail from JS */
#csm-items {
    padding-left: 0.618rem;
    padding-bottom: 0.618rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#csm-items::-webkit-scrollbar { display: none; width: 0; }
/* Item rows */
.csm-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.csm-item:last-child {
    border-bottom: none;
}
/* Thumbnail */
.csm-item-img {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: .5rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}
.csm-item-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .08);
}
/* Info column */
.csm-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.csm-item-name {
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csm-item-controls {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
/* Qty +/- buttons — always white-on-dark */
.csm-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .4rem;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .88);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
    flex-shrink: 0;
}
.csm-qty-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .6);
}
.csm-qty-btn--down {
    color: rgba(255, 200, 200, .92);
    border-color: rgba(255, 180, 180, .38);
    background: rgba(255, 180, 180, .1);
}
.csm-qty-btn--down:hover {
    background: rgba(255, 180, 180, .22);
    border-color: rgba(255, 180, 180, .65);
}
.csm-qty-value {
    min-width: 1.25rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
}
/* Price + remove */
.csm-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
    flex-shrink: 0;
}
.csm-item-price {
    font-size: .9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}
.csm-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    border-radius: .3rem;
    transition: color .15s, background .15s;
    line-height: 1;
}
.csm-remove-btn:hover {
    color: #fca5a5;
    background: rgba(252, 165, 165, .14);
}
/* Subtotal */
#cart-submodal .csm-title {
    color: rgba(255, 255, 255, .95) !important;
}
#csm-subtotal {
    color: rgba(255, 255, 255, .95) !important;
}
#cart-submodal #csm-footer .csm-subtotal-label {
    color: rgba(255, 255, 255, .55) !important;
}
/* Empty state */
#cart-submodal .csm-empty-label {
    color: rgba(255, 255, 255, .45);
}
/* Footer divider */
#csm-footer {
    padding-left: 0.618rem;
    padding-bottom: 0.618rem;
    border-top-color: rgba(255, 255, 255, .15);
}
/* ---- /Cart submodal ---- */
/* csm-add-btn: square icon button — equal padding on all sides gives same height
   as sibling .btn-ghost buttons and a naturally square shape */
.csm-icon-btn {
    padding: .6rem !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    min-height: unset !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
}
#csm-continue-btn {
    padding: .6rem !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    font-size: 0.888rem !important;
}
/* Cart recommendation strip */
.cart-recommendations {
    padding: 1rem;
    border-radius: 2px !important;
}
.cart-recommendations--in-panel {
    margin-bottom: 1rem;
    border: 1px solid var(--glass-border);
    background: var(--surface-soft);
}
.cart-recommendations__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.cart-recommendations__controls {
    flex: 0 0 auto;
}
.cart-recommendations__nav {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.cart-recommendations__nav span {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-.06rem);
}
.cart-recommendations__nav:disabled {
    opacity: .42;
    pointer-events: none;
}
.cart-recommendations__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    margin-bottom: .35rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: rgba(43, 90, 168, 0.12);
    color: var(--finland-blue);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1;
}
.cart-recommendations__title {
    margin: 0;
    color: var(--finland-blue);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.15;
}
.cart-recommendations__subtitle {
    max-width: 45rem;
    margin: .25rem 0 0;
    color: var(--muted-600);
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.35;
}
.cart-recommendations__grid {
    display: flex;
    overflow-x: auto;
    gap: .75rem;
    scroll-behavior: smooth;
    scroll-padding-inline: .25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.cart-recommendations__grid button,
.cart-recommendations__grid a {
    cursor: pointer;
}
.cart-recommendations__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}
.cart-recommendations__grid.is-dragging .cart-rec-card {
    pointer-events: none;
}
.cart-recommendations__grid:focus-visible {
    outline: 2px solid rgba(43, 90, 168, 0.55);
    outline-offset: .25rem;
}
.cart-recommendations__grid::after {
    content: "";
    flex: 0 0 .25rem;
}
.cart-recommendations__grid::-webkit-scrollbar {
    height: .45rem;
}
.cart-recommendations__grid::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(43, 90, 168, 0.32);
}
.cart-recommendations__grid::-webkit-scrollbar-track {
    background: rgba(43, 90, 168, 0.08);
}
.cart-rec-card {
    display: flex;
    flex: 0 0 clamp(10.75rem, 22vw, 13.5rem);
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    scroll-snap-align: start;
    border: 1px solid rgba(43, 90, 168, 0.14);
    border-radius: 2px !important;
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
}
@media (min-width: 1200px) {
    .cart-recommendations:not(.cart-recommendations--in-panel) .cart-rec-card {
        flex-basis: clamp(11rem, 17vw, 14rem);
    }
}
.cart-rec-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
.cart-rec-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 0;
    border-radius: 0 !important;
    background: rgba(226, 232, 240, 0.66);
}
.cart-rec-card__media img,
.cart-rec-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-rec-card__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 0 !important;
}
.cart-rec-card__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .4rem;
    padding: .72rem;
}
.cart-rec-card__badges {
    display: flex;
    min-height: 1.35rem;
    flex-wrap: wrap;
    gap: .3rem;
}
.cart-rec-card__badges:empty {
    display: none;
}
.cart-rec-card__name {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.35em;
    margin: 0;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.cart-rec-card__category,
.cart-rec-card__desc {
    margin: 0;
    color: var(--muted-600);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
}
.cart-rec-card__category {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-rec-card__desc {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.5em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.cart-rec-card__footer {
    display: grid;
    gap: .65rem;
    margin-top: auto;
}
.cart-rec-card__actions {
    width: 100%;
}
.cart-rec-card__actions .btn-card-action {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.35rem;
    padding: .55rem .45rem;
    justify-content: center;
    border-radius: 2px !important;
    font-size: .75rem;
    line-height: 1;
    white-space: nowrap;
}
.cart-rec-card .catalog-price-stack {
    min-height: 2rem;
}
.catalog-flag-badge--new {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.14);
}
@media (max-width: 640px) {
    .cart-recommendations {
        padding: .82rem;
    }
    .cart-recommendations__header {
        align-items: flex-start;
    }
    .cart-recommendations__grid {
        gap: .6rem;
    }
    .cart-rec-card {
        flex-basis: min(78vw, 18rem);
    }
    .cart-rec-card__body {
        padding: .62rem;
    }
    .cart-rec-card__actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}
/* Cart page quick-add product picker — now lives inside the summary aside */
.cart-quick-add-card {
    position: relative;
    overflow: visible;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cart-quick-add-layout {
    display: grid;
    grid-template-columns: 7fr 1fr;
    gap: .55rem;
    align-items: end;
}
.cart-quick-add-product-field,
.cart-quick-add-qty-field {
    min-width: 0;
}
.cart-quick-add-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--muted-600);
}
.cart-quick-add-qty {
    height: 3.25rem;
    border-radius: 8px !important;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
}
.cart-quick-add-button {
    grid-column: 1 / -1;
    min-height: 3.25rem;
    width: 100%;
    border-radius: 1px !important;
    justify-content: center;
}
.cart-quick-add-card .cart-quick-add-select2.select2-container {
    width: 100% !important;
    min-width: 0;
}
.cart-quick-add-card .cart-quick-add-select2 .select2-selection--single {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(43, 90, 168, 0.26) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.52),
        0 10px 24px rgba(15, 23, 42, 0.08);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cart-quick-add-card .cart-quick-add-select2.select2-container--open .select2-selection--single,
.cart-quick-add-card .cart-quick-add-select2.select2-container--focus .select2-selection--single {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(43, 90, 168, 0.62) !important;
    box-shadow:
        0 0 0 3px rgba(43, 90, 168, 0.16),
        0 12px 26px rgba(15, 23, 42, 0.12);
}
.cart-quick-add-card .cart-quick-add-select2 .select2-selection__rendered,
.cart-quick-add-card .cart-quick-add-select2 .select2-selection__placeholder {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
    color: var(--ink) !important;
    font-size: .95rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}
.cart-quick-add-card .cart-quick-add-select2 .select2-selection__placeholder {
    color: var(--muted-500) !important;
}
.cart-quick-add-card .cart-quick-add-select2 .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 2.05rem;
    z-index: 2;
    margin-right: 0;
    transform: translateY(-50%);
    color: var(--muted-600);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.cart-quick-add-card .cart-quick-add-select2 .select2-selection__arrow {
    top: 0 !important;
    right: .55rem !important;
    height: 3.25rem !important;
}
.cart-quick-add-dropdown.select2-dropdown {
    overflow: hidden;
    margin-top: .35rem;
    border-radius: 8px !important;
    background: rgba(248, 251, 255, 0.96) !important;
    border: 1px solid rgba(43, 90, 168, 0.24) !important;
    box-shadow:
        0 24px 52px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}
.cart-quick-add-dropdown .select2-search--dropdown {
    padding: .7rem .75rem .5rem;
}
.cart-quick-add-dropdown .select2-search--dropdown .select2-search__field {
    height: 2.45rem;
    border-radius: 8px !important;
    border: 1px solid rgba(43, 90, 168, 0.25) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--ink) !important;
    font-size: .9rem;
    font-weight: 650;
    padding: .45rem .7rem !important;
    outline: none;
}
.cart-quick-add-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(43, 90, 168, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(43, 90, 168, 0.14);
}
.cart-quick-add-dropdown .select2-results__options {
    max-height: min(25rem, 58vh) !important;
    padding: .3rem;
}
.cart-quick-add-dropdown .select2-results__option {
    padding: 0 !important;
    border-radius: 7px;
    color: var(--ink);
    transition: background .14s ease, color .14s ease, transform .14s ease;
}
.cart-quick-add-dropdown .select2-results__option + .select2-results__option {
    margin-top: .25rem;
}
.cart-quick-add-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(43, 90, 168, 0.12) !important;
    color: var(--ink) !important;
}
.cart-quick-add-dropdown .select2-results__option--selected,
.cart-quick-add-dropdown .select2-results__option[aria-selected="true"] {
    background: rgba(16, 185, 129, 0.13) !important;
    color: var(--ink) !important;
}
.cart-quick-add-dropdown .select2-results__message {
    padding: .9rem 1rem !important;
    color: var(--muted-600) !important;
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
}
.cart-quick-add-result {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    min-height: 4rem;
    padding: .58rem .7rem;
}
.cart-quick-add-result__image,
.cart-quick-add-result__placeholder {
    width: 3rem;
    height: 3rem;
    border-radius: 7px;
    flex: 0 0 auto;
}
.cart-quick-add-result__image {
    object-fit: cover;
    background: rgba(226, 232, 240, 0.8);
}
.cart-quick-add-result__placeholder {
    position: relative;
    background:
        linear-gradient(135deg, rgba(43, 90, 168, 0.18), rgba(16, 185, 129, 0.14)),
        rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(43, 90, 168, 0.12);
}
.cart-quick-add-result__placeholder::after {
    content: "";
    position: absolute;
    inset: 1rem;
    border-radius: 3px;
    border: 2px solid rgba(43, 90, 168, 0.36);
}
.cart-quick-add-result__body {
    min-width: 0;
}
.cart-quick-add-result__title {
    overflow: hidden;
    color: var(--ink);
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-quick-add-result__meta {
    display: flex;
    gap: .4rem;
    align-items: center;
    min-width: 0;
    margin-top: .22rem;
    color: var(--muted-600);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
}
.cart-quick-add-result__meta span {
    overflow: hidden;
    min-width: 0;
    max-width: 12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-quick-add-result__meta span + span::before {
    content: "";
    display: inline-block;
    width: .22rem;
    height: .22rem;
    margin-right: .4rem;
    vertical-align: middle;
    border-radius: 999px;
    background: rgba(43, 90, 168, 0.34);
}
.cart-quick-add-result__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    height: 1.65rem;
    padding: 0 .55rem;
    border-radius: 999px;
    background: rgba(43, 90, 168, 0.12);
    color: var(--finland-blue);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(43, 90, 168, 0.08);
}
.cart-quick-add-dropdown .select2-results__option--highlighted .cart-quick-add-result__badge {
    background: rgba(43, 90, 168, 0.2);
}
.cart-quick-add-options-modal {
    width: min(38rem, calc(100vw - 2rem));
    padding: 1rem 1.618rem !important;
    box-sizing: border-box;
}
.cart-quick-add-options-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cart-quick-add-options-title {
    color: var(--finland-blue);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.15;
}
.cart-quick-add-options-summary {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid rgba(43, 90, 168, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.42);
}
.cart-quick-add-options-image,
.cart-quick-add-options-placeholder {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 8px;
}
.cart-quick-add-options-image {
    object-fit: cover;
}
.cart-quick-add-options-placeholder {
    position: relative;
    background:
        linear-gradient(135deg, rgba(43, 90, 168, 0.18), rgba(16, 185, 129, 0.14)),
        rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(43, 90, 168, 0.12);
}
.cart-quick-add-options-placeholder::after {
    content: "";
    position: absolute;
    inset: 1.5rem;
    border-radius: 3px;
    border: 2px solid rgba(43, 90, 168, 0.36);
}
.cart-quick-add-options-copy {
    min-width: 0;
}
.cart-quick-add-options-name {
    overflow: hidden;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-quick-add-options-meta {
    overflow: hidden;
    margin-top: .25rem;
    color: var(--muted-600);
    font-size: .8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-quick-add-options-price {
    margin-top: .45rem;
    color: var(--finland-blue);
    font-size: 1.05rem;
    font-weight: 900;
}
.cart-quick-add-options-picker-wrap {
    margin-top: 1rem;
}
.cart-quick-add-options-picker {
    padding: .85rem;
    border: 1px solid rgba(43, 90, 168, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.32);
}
.cart-quick-add-options-picker .product-variant-group__label {
    color: var(--muted-600);
}
.cart-quick-add-options-picker .product-variant-group__select {
    min-height: 2.75rem;
    border-radius: 8px !important;
    font-weight: 750;
}
.cart-quick-add-options-footer {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1.1rem;
}
/* ── Product modal: variant picker sub-modal (blue glass) ─────────────────── */
.pm-variant-pick-panel {
    width: min(38rem, calc(100vw - 2rem));
    padding: 0 !important;
    box-sizing: border-box;
    border: 1px solid rgba(75, 140, 240, 0.3);
    background:
        linear-gradient(135deg,
            rgba(10, 30, 90, 0.88) 0%,
            rgba(18, 52, 130, 0.84) 55%,
            rgba(8, 24, 78, 0.90) 100%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    backdrop-filter: blur(28px) saturate(200%);
    box-shadow:
        0 24px 64px rgba(0, 16, 72, 0.52),
        inset 0 0 0 1px rgba(75, 140, 240, 0.12),
        inset 0 1px 0 rgba(140, 190, 255, 0.22);
    border-radius: 1px;
}
.pm-variant-pick-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem .85rem;
    border-bottom: 1px solid rgba(75, 140, 240, 0.18);
    background: rgba(75, 140, 240, 0.07);
}
.pm-variant-pick-title {
    color: var(--finland-blue-400);
    font-size: 1.35rem;
    font-weight: 850;
    line-height: 1.15;
    text-shadow: 0 0 24px rgba(75, 140, 240, 0.45);
}
.pm-variant-pick-summary {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(75, 140, 240, 0.05);
    border-bottom: 1px solid rgba(75, 140, 240, 0.12);
}
.pm-variant-pick-image,
.pm-variant-pick-placeholder {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 8px;
    border: 1px solid rgba(75, 140, 240, 0.28);
    flex-shrink: 0;
}
.pm-variant-pick-image {
    object-fit: cover;
}
.pm-variant-pick-placeholder {
    position: relative;
    background: linear-gradient(135deg, rgba(75, 140, 240, 0.18), rgba(20, 70, 180, 0.12));
}
.pm-variant-pick-placeholder::after {
    content: "";
    position: absolute;
    inset: 1.25rem;
    border-radius: 3px;
    border: 2px solid rgba(75, 140, 240, 0.38);
}
.pm-variant-pick-copy {
    min-width: 0;
}
.pm-variant-pick-name {
    overflow: hidden;
    color: rgba(218, 235, 255, 0.95);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-variant-pick-price {
    margin-top: .4rem;
    color: var(--finland-blue-400);
    font-size: 1.05rem;
    font-weight: 900;
}
.pm-variant-pick-picker-wrap {
    padding: 1rem 1.5rem;
}
.pm-variant-pick-picker {
    padding: .85rem;
    border: 1px solid rgba(75, 140, 240, 0.2);
    border-radius: 8px;
    background: rgba(75, 140, 240, 0.06);
}
.pm-variant-pick-picker .product-variant-group__label {
    color: rgba(155, 195, 255, 0.85);
    font-weight: 700;
}
.pm-variant-pick-picker .product-variant-group__select {
    min-height: 2.75rem;
    border-radius: 8px !important;
    font-weight: 750;
    background: rgba(14, 42, 110, 0.65) !important;
    color: rgba(218, 235, 255, 0.95) !important;
    border: 1px solid rgba(75, 140, 240, 0.38) !important;
}
.pm-variant-pick-picker .product-variant-group__select option {
    background: #122060;
    color: #cce4ff;
}
.pm-variant-pick-footer {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    padding: .9rem 1.5rem 1.1rem;
    border-top: 1px solid rgba(75, 140, 240, 0.18);
    background: rgba(75, 140, 240, 0.06);
}
.pm-variant-pick-cancel {
    color: rgba(160, 200, 255, 0.85) !important;
    border-color: rgba(75, 140, 240, 0.3) !important;
    background: rgba(75, 140, 240, 0.08) !important;
}
.pm-variant-pick-cancel:hover {
    color: rgba(210, 230, 255, 0.95) !important;
    border-color: rgba(75, 140, 240, 0.55) !important;
    background: rgba(75, 140, 240, 0.16) !important;
}
#pm-variant-pick-modal.modal-backdrop {
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    backdrop-filter: blur(14px) saturate(200%);
    background: rgba(4, 12, 40, 0.76);
}
/* ID-scoped rule ensures the dark-glass panel background survives surface-level
   .modal-panel overrides that use !important (e.g. categories page light theme).
   An ID selector (specificity 1,x,y) always outranks a class-only !important.  */
#pm-variant-pick-modal .pm-variant-pick-panel {
    background:
        linear-gradient(135deg,
            rgba(10, 30, 90, 0.88) 0%,
            rgba(18, 52, 130, 0.84) 55%,
            rgba(8, 24, 78, 0.90) 100%) !important;
    border-color: rgba(75, 140, 240, 0.3) !important;
    box-shadow:
        0 24px 64px rgba(0, 16, 72, 0.52),
        inset 0 0 0 1px rgba(75, 140, 240, 0.12),
        inset 0 1px 0 rgba(140, 190, 255, 0.22) !important;
}
#pm-variant-pick-modal .pm-variant-pick-title {
    color: var(--finland-blue-400) !important;
}
.pm-variant-pick-header .modal-close {
    color: rgba(160, 200, 255, 0.75) !important;
}
/* Cart page: editable quantity input */
.cart-qty-input {
    width: 3rem;
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    padding: .15rem .25rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: .5rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--finland-blue);
    transition: border-color .18s ease, box-shadow .18s ease;
    /* hide the browser spin arrows */
    -moz-appearance: textfield;
    appearance: textfield;
}
.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-qty-input:focus {
    outline: none;
    border-color: var(--finland-blue-400);
    box-shadow: 0 0 0 2px rgba(43, 90, 168, 0.18);
}
/* In-cart stepper on catalog cards and datatable rows */
.card-in-cart {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 600;
    flex-wrap: nowrap;
    margin-top: .5rem;
}
/* In-cart qty+stepper in list view: number on top, −/+ buttons side-by-side below */
.catalog-in-cart-cell .card-in-cart .pm-cart-qty-wrap {
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}
/* Less transparency vs the default glass theme to empty cart modal */
#empty-cart-modal-panel.glass {
    background: rgba(255,255,255,0.88);
}
/* Hero featured/sale modal — always dark-glass, force bright glowing colours */
#hero-featured-modal .card-in-cart,
#hero-sale-modal .card-in-cart {
    color: #bfdbfe;
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.7);
}
#hero-featured-modal .pm-cart-qty-btn,
#hero-sale-modal .pm-cart-qty-btn {
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.45);
    background: rgba(147, 197, 253, 0.1);
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.7);
    box-shadow: 0 0 6px rgba(147, 197, 253, 0.2);
}
#hero-featured-modal .pm-cart-qty-btn:hover,
#hero-sale-modal .pm-cart-qty-btn:hover {
    background: rgba(147, 197, 253, 0.22);
    border-color: rgba(147, 197, 253, 0.7);
    box-shadow: 0 0 12px rgba(147, 197, 253, 0.4);
}
#hero-featured-modal .pm-cart-qty-btn--down,
#hero-sale-modal .pm-cart-qty-btn--down {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.4);
    background: rgba(252, 165, 165, 0.09);
    text-shadow: 0 0 8px rgba(252, 165, 165, 0.6);
}
#hero-featured-modal .pm-cart-qty-btn--down:hover,
#hero-sale-modal .pm-cart-qty-btn--down:hover {
    background: rgba(252, 165, 165, 0.2);
    border-color: rgba(252, 165, 165, 0.7);
    box-shadow: 0 0 10px rgba(252, 165, 165, 0.3);
}
.catalog-toolbar { flex-wrap: nowrap; }
.bounce-down { animation: bounce-down .35s ease; }

.catalog-category-wrap { width: 200px; flex-shrink: 0; }
.catalog-category-wrap .select2-container { width: 100% !important; }
.catalog-subcategory-wrap { width: 200px; flex-shrink: 0; }
.catalog-subcategory-wrap .select2-container { width: 100% !important; }
.catalog-filter-toggle {
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.catalog-collapse-btn-group {
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.catalog-subcategory-bar {
    display: grid;
    gap: .8rem;
}

/* ── Catalog heading row: h2 + prominent search ─────────────────────────── */
.catalog-heading-search-wrap { position: relative; }

.catalog-heading-search-icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    line-height: 1;
}
.catalog-heading-search-input {
    font-size: 1.05rem !important;
    padding-left: 2.25rem !important;
    height: 100%;
    min-height: 2.6rem;
    border-radius: .75rem !important;
    background: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow: 0 2px 12px rgba(0,53,128,.1);
    transition: box-shadow .15s, background .15s;
}
.catalog-heading-search-input:focus {
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 0 0 3px rgba(0,91,187,.25), 0 2px 12px rgba(0,53,128,.1) !important;
    outline: none;
}
/* Inline badges shown on the same row as catalog h2 + search */
.catalog-inline-badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.catalog-inline-badge--cat {
    background: rgb(0, 53, 128);
    color: #fff;
    border: 1.5px solid rgba(0, 53, 128, 0.5);
}
.catalog-inline-badge--subcat {
    background: rgba(0, 53, 128, 0.15);
    color: rgb(0, 53, 128);
    border: 1.5px solid rgba(0, 53, 128, 0.35);
}
.catalog-subcategory-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.catalog-subcategory-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .5rem .95rem;
    border: 1px solid rgba(156, 163, 175, 0.34);
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 600;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.catalog-subcategory-chip:hover,
.catalog-subcategory-chip:focus-visible {
    border-color: rgba(0, 53, 128, 0.24);
    color: var(--finland-blue);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.catalog-subcategory-chip.is-active {
    background: var(--finland-blue);
    border-color: var(--finland-blue);
    color: #fff;
    box-shadow: 0 14px 28px rgba(0, 53, 128, 0.18);
}
/* Storefront filterbar: items hold their base width so justify-content
   space-between distributes equal gaps between them. Scoped away from admin cards. */
.site-main .catalog-filters-card .catalog-category-wrap,
.site-main .catalog-filters-card .catalog-subcategory-wrap,
.site-main .catalog-filters-card .catalog-sort-select {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: none;
}
.site-main .catalog-filters-card .catalog-category-wrap .select2-container,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-container,
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection.select2-selection--single,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection.select2-selection--single {
    width: 198.6px !important;
    min-width: 198.6px !important;
    max-width: 198.6px !important;
}
/* Prevent native <select> from resizing its wrapper based on content */
.site-main .catalog-filters-card .catalog-category-wrap select,
.site-main .catalog-filters-card .catalog-subcategory-wrap select,
.site-main .catalog-filters-card .catalog-sort-select {
    min-width: 0;
}
/* Storefront primary-row price pair: two narrow inputs side-by-side,
   roughly half the width of a dropdown (~100px total).                   */
.catalog-toolbar-price-pair {
    display: flex;
    flex: 0 0 auto;   /* do NOT grow/shrink via flex — width drives sizing so transition works */
    align-items: center;
}
.catalog-toolbar-price-pair .input {
    flex: 0 0 auto;
    padding-inline: .35rem;
    text-align: center;
    font-size: .8rem !important;
    box-sizing: border-box;
}
.catalog-toolbar-price-pair .input::placeholder {
    font-size: .75rem;
    text-align: center;
}
.catalog-reset-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
/* Sole reset button: inline with search on every breakpoint */
.catalog-reset-mobile {
    display: inline-flex;
}
/* Dedicated collapse button — inline in toolbar, visible on desktop */
.catalog-collapse-btn-group {
    display: none;
    flex-direction: row;
    gap: 0;
    flex-shrink: 0;
}
.site-main .catalog-collapse-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 1px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 5px rgba(255,255,255,0.382);
    transition: background .17s, border-color .17s, box-shadow .17s;
}
.catalog-collapse-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 1px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(9px) saturate(130%);
    backdrop-filter: blur(9px) saturate(130%);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 5px rgba(255,255,255,0.382);
    transition: background .17s, border-color .17s, box-shadow .17s;
}

.catalog-collapse-btn:hover {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(0, 53, 128, .32);
    box-shadow: 0 3px 10px rgba(15, 23, 42, .1);
    transform: scale(0.92) !important;
}
.catalog-collapse-icon {
    width: 1rem;
    height: 1rem;
    color: var(--finland-blue-600);
    transition: transform .26s linear;
    /* Default (is-collapsed): arrow points left ← */
    transform: rotate(-90deg);
}
/* When bar is expanded (not collapsed): arrow points up ↑ */
.catalog-filters-card:not(.is-collapsed) .catalog-collapse-btn .catalog-collapse-icon {
    transform: rotate(180deg);
}
/* Double-chevron icon for secondary filters toggle */
.catalog-secondary-collapse-icon {
    width: 1rem;
    height: 1rem;
    color: var(--finland-blue-600);
    transition: transform .26s linear;
    transform: rotate(0deg); /* ↕ collapsed */
}
/* When secondary is expanded: flip upward ↑↑ */
.catalog-filters-card:not(.secondary-collapsed) .catalog-secondary-collapse-btn .catalog-secondary-collapse-icon {
    transform: rotate(180deg);
}

/* ======================================================================= */
/*  * ◀ End of   §29  Cart Submodal                                        */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §05b  Storefront Page Arrival Transition                  */
/* ======================================================================= */

/* ---------- Storefront page arrival transition ---------- */
@keyframes shopPageFadeIn {
    0%   { opacity: 0.25; filter: blur(14px) saturate(0.2); transform: translateY(10px); }
    45%  { opacity: 0.8;  filter: blur(3px)  saturate(0.75); }
    100% { opacity: 1;    filter: blur(0)    saturate(1);    transform: translateY(0); }
}
body.shop-page-arriving .site-main {
    animation: shopPageFadeIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: opacity, filter, transform;
}


/* ======================================================================= */
/*  * ◀ End of   §05b  Storefront Page Arrival Transition                  */
/* ======================================================================= */

/* ======================================================================= */
/* Shared catalog filter/list primitives moved out of shop.css. */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §30b  Catalog Filter Toggle Hint                          */
/* ======================================================================= */

/* ---- Catalog filter toggle hint animation (first visit) ---- */
@keyframes catalog-toggle-hint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.382; }
}

.catalog-collapse-btn-group.hint-blink,
#catalog-filters-toggle.hint-blink {
  animation: catalog-toggle-hint 1.2s ease-in-out infinite;
}

.catalog-secondary-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .5rem;
    overflow: hidden;
}
/* Price pair: fixed compact width, never grows */
.catalog-secondary-filters > .catalog-toolbar-price-pair {
    flex: 0 0 auto;
}
/* Toggle switches: grow equally to fill the row from a zero basis */
.catalog-secondary-filters > .order-status-switch {
    flex: 1 1 0;
    justify-content: space-between;
}
/* Toggle switch component: visual base (track + thumb + active state) */
.order-status-switch__ui {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 1.85rem;
    height: 1.1rem;
    padding: .1rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.46);
    transition: background .18s ease;
    flex: 0 0 auto;
}
.order-status-switch__thumb {
    width: .9rem;
    height: .9rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
    transform: translateX(0);
    transition: transform .18s ease;
}
.order-status-switch.is-active .order-status-switch__ui {
    background: rgba(0, 53, 128, 0.84);
}
.order-status-switch.is-active .order-status-switch__thumb {
    transform: translateX(.75rem);
}


/* ======================================================================= */
/*  * ◀ End of   §30b  Catalog Filter Toggle Hint                          */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §30c  Storefront Filterbar                                */
/* ======================================================================= */

/* ---- Storefront filterbar: uniform height + uniform gap/margin ---- */
/* Every interactive element in the primary toolbar and secondary filters
   row shares a single height (`--fb-height`) and the two rows share the
   same inter-item gap. Scoped to `.site-main` so admin filter cards keep
   their own sizing. */
/* Expose the variable on the shared sticky row so #catalog-search-wrap
   (a sibling of .catalog-filters-card) can also inherit it. */
#sticky-filter-row {
    --catalog-search-control-height: 28px;
    display: flex;
    align-items: stretch;
    gap: 0;
}
.site-main .catalog-filters-card {
    --fb-height: 28px;
    --catalog-search-control-height: 28px;
    --catalog-search-base-width: 175;
    --catalog-search-expanded-width: 240;
    --catalog-search-sticky-width: 265;
    --catalog-sort-base-width: 160;
    --catalog-sort-sticky-width: 160;
    --catalog-taxonomy-base-width: 236;
    --catalog-taxonomy-sticky-width: 252;
    --catalog-price-base-width: 60;
    --catalog-price-sticky-width: 60;
    border: solid thin rgba(255,255,255,0.382);
    /* Explicit values so transitions from non-sticky → sticky have concrete start points */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
/* When fully collapsed the border disappears — the card becomes a transparent strip */
.site-main .catalog-filters-card.is-collapsed {
    border: none;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
body main.site-main .catalog-filters-card.secondary-collapsed:not(.is-sticky).catalog-filters-card.secondary-collapsed:not(.is-sticky)#catalog-filters-card {
    padding-left: 2rem;
}
.site-main .catalog-filters-card .catalog-toolbar,
.site-main .catalog-filters-card .catalog-toolbar-body,
.site-main .catalog-filters-card .catalog-secondary-filters {
    gap: 0.2rem;
    align-items: center;
    row-gap: 0.2rem;
    flex-wrap: nowrap;
}
.site-main .catalog-filters-card .catalog-toolbar-body {
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-start;
    /* Flex items with an explicit z-index stack above siblings that have none.
       Without this, the reset button (later in DOM, no z-index) paints over
       any toolbar-body content that overflows into its area. */
    z-index: 1;
}
.site-main .catalog-filters-card .catalog-toolbar {
    margin-bottom: 0;
}
/* Reset button: auto left margin pushes it to the right wall in all states
   (collapsed toolbar-body shrinks to near-zero, margin-left:auto absorbs the gap).
   In sticky mode add 16px clearance from the viewport edge. */
.site-main .catalog-filters-card .catalog-toolbar > *,
.site-main .catalog-filters-card .catalog-toolbar-body > *,
.site-main .catalog-filters-card .catalog-secondary-filters > * {
    height: var(--fb-height);
    min-height: var(--fb-height);
    box-sizing: border-box;
    margin: 0;
}
.site-main .catalog-filters-card .catalog-secondary-filters > * {
    min-width: 0;
}
.site-main .catalog-filters-card .catalog-secondary-filters > .order-status-switch {
    flex: 1 1 0;
    justify-content: space-between;
}
/* Native controls and buttons inside the rows */
.site-main .catalog-filters-card .catalog-toolbar .input,
.site-main .catalog-filters-card .catalog-toolbar .select,
.site-main .catalog-filters-card .catalog-toolbar-body .input,
.site-main .catalog-filters-card .catalog-toolbar-body .select,
.site-main .catalog-filters-card .catalog-secondary-filters .input {
    height: var(--fb-height);
    min-height: var(--fb-height);
    padding-top: 0;
    padding-bottom: 0;
    line-height: calc(var(--fb-height) - 2px);
    box-sizing: border-box;
}
/* Select2 single wraps a <select>; match the rendered pill to the row */
.site-main .catalog-filters-card .select2-container--default .select2-selection--single {
    height: var(--fb-height);
    min-height: var(--fb-height);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple {
    min-height: var(--fb-height);
    max-height: var(--fb-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 .35rem 0 .3rem;
    box-sizing: border-box;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .2rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0 !important;
    scrollbar-width: none;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar {
    display: none;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    max-width: 100%;
    line-height: 1.1;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-search--inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple .select2-search__field {
    margin: 0 !important;
    height: calc(var(--fb-height) - 8px);
}
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection--multiple .select2-search--inline:only-child,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection--multiple .select2-search--inline:only-child {
    flex: 1 1 auto;
    width: 100%;
}
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection--multiple .select2-search--inline:only-child .select2-search__field,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection--multiple .select2-search--inline:only-child .select2-search__field {
    width: 100% !important;
    text-align: center !important;
}
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection--multiple .select2-search--inline:only-child .select2-search__field::placeholder,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection--multiple .select2-search--inline:only-child .select2-search__field::placeholder {
    text-align: center;
    opacity: 1;
}
/* Select2 4.x renders the placeholder as a <li class="select2-selection__placeholder">
   (not an input[placeholder]) — flex: 1 fills the row and text-align centers the label. */
.site-main .catalog-filters-card .catalog-category-wrap .select2-selection__rendered .select2-selection__placeholder,
.site-main .catalog-filters-card .catalog-subcategory-wrap .select2-selection__rendered .select2-selection__placeholder {
    flex: 1;
    text-align: center;
    padding: 0;
}

/* Reset buttons: override Tailwind !py-2 so they align with the row — desktop only */
.site-main .catalog-filters-card .catalog-toolbar .catalog-reset-wrap,
.site-main .catalog-filters-card .catalog-toolbar-body .catalog-reset-wrap {
    display: none;
}
/* Reset button sits at the end; toolbar-body (flex:1) pushes it right */
.site-main .catalog-filters-card .catalog-toolbar .catalog-reset-wrap {
    flex: 0 0 auto;
    margin-left: auto;
}
/* When fully collapsed the toolbar-body children are hidden, so the reset
   button would otherwise claim the entire remaining width. Cap it at half. */
.site-main .catalog-filters-card.is-collapsed .catalog-toolbar .catalog-reset-wrap {
    width: 16%;
}
/* When expanded the reset button is always 267px — CSS owns this once the
   collapse animation strips the original HTML inline style from the element. */
.site-main .catalog-filters-card:not(.is-collapsed) .catalog-toolbar .catalog-reset-wrap {
    width: 267px;
    max-width: 267px;
}
/* Collapse button group stays a single row-height element — desktop only */
.site-main .catalog-filters-card .catalog-collapse-btn-group {
    display: none;
}
.site-main .catalog-filters-card .catalog-collapse-btn {
    height: var(--fb-height);
    min-height: var(--fb-height);
    width: var(--fb-height);
    min-width: var(--fb-height);
}
/* View toggle: parent matches row height, inner buttons fill vertically */
.site-main .catalog-filters-card .view-toggle {
    height: var(--fb-height) !important;
    min-height: var(--fb-height) !important;
    display: inline-flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}
.site-main .catalog-filters-card .view-toggle-btn {
    box-shadow: 0 0 5px var(--header-accent);
    padding: 0 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Toggle switches: fill the row height */
.site-main .catalog-filters-card .order-status-switch {
    height: var(--fb-height);
    min-height: var(--fb-height);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}
.site-main .catalog-filters-card .catalog-toolbar-price-pair {
    flex: 0 0 calc((var(--catalog-price-base-width) * 2px) + 1px);
    width: calc((var(--catalog-price-base-width) * 2px) + 1px);
    min-width: calc((var(--catalog-price-base-width) * 2px) + 1px);
    max-width: calc((var(--catalog-price-base-width) * 2px) + 1px);
}
.site-main .catalog-filters-card .price-width {
    flex: 0 0 calc(var(--catalog-price-base-width) * 1px);
    width: calc(var(--catalog-price-base-width) * 1px);
    min-width: calc(var(--catalog-price-base-width) * 1px);
    max-width: calc(var(--catalog-price-base-width) * 1px);
    height: var(--fb-height);
    min-height: var(--fb-height);
}
.site-main .catalog-filters-card .price-width .input {
    height: var(--fb-height);
    min-height: var(--fb-height);
    padding-top: 0;
    padding-bottom: 0;
}
/* When JS hides these scroll-dependent elements, win over the flex !important */
#catalog-reset-filters-mobile.is-scroll-hidden,
#catalog-collapse-btn.is-scroll-hidden,
#catalog-filters-toggle.is-scroll-hidden,
#catalog-search-duplicate-reset.is-scroll-hidden {
    display: none !important;
}
#catalog-search-duplicate-reset {
    font-size: .7rem;
}
/* Collapsed + idle (no timing data yet): hide without taking space */
.site-main .catalog-filters-card.is-collapsed .catalog-toolbar #catalog-mode-badge.catalog-mode-badge--idle,
.site-main .catalog-filters-card.is-collapsed .catalog-toolbar #catalog-db-badge.catalog-mode-badge--idle {
    max-width: 0 !important;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    margin-left: 0 !important;
    pointer-events: none;
}
/* ── Minified state — only collapse button (+) and badges visible ─────────── */
.site-main .catalog-filters-card.is-minified {
    border: none;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
/* Hide everything in the toolbar when minified, except the collapse button and badges */
.site-main .catalog-filters-card.is-minified .catalog-toolbar > *:not(.catalog-collapse-btn-group):not(#catalog-mode-badge):not(#catalog-db-badge),
.site-main .catalog-filters-card.is-minified .catalog-toolbar-body,
.site-main .catalog-filters-card.is-minified .catalog-secondary-filters,
.site-main .catalog-filters-card.is-minified .catalog-reset-wrap {
    display: none !important;
}
/* Also hide the secondary toggle button inside the collapse btn group */
.site-main .catalog-filters-card.is-minified .catalog-collapse-btn-group #catalog-filters-toggle {
    display: none !important;
}
/* Show the + icon in the collapse button when minified (hidden otherwise) */
.site-main .catalog-filters-card .catalog-collapse-btn .catalog-collapse-plus {
    display: none;
}
.site-main .catalog-filters-card.is-minified .catalog-collapse-btn .catalog-collapse-plus {
    display: inline-flex;
    color: #111 !important;
    stroke: #111 !important;
}
.site-main .catalog-filters-card.is-minified .catalog-collapse-btn .catalog-collapse-icon {
    display: none;
}
/* Idle badges hidden in minified too */
.site-main .catalog-filters-card.is-minified .catalog-toolbar #catalog-mode-badge.catalog-mode-badge--idle,
.site-main .catalog-filters-card.is-minified .catalog-toolbar #catalog-db-badge.catalog-mode-badge--idle {
    max-width: 0 !important;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    margin-left: 0 !important;
    pointer-events: none;
}
/* Base (non-sticky) widths */
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) #catalog-sort {
    display: inline-flex;
    width: calc(var(--catalog-sort-base-width) * 1px) !important;
    min-width: calc(var(--catalog-sort-base-width) * 1px) !important;
    max-width: calc(var(--catalog-sort-base-width) * 1px) !important;
}
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-category-wrap,
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-subcategory-wrap,
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-category-wrap .select2-container,
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-subcategory-wrap .select2-container,
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-category-wrap .select2-selection.select2-selection--single,
.site-main .catalog-filters-card:not(.is-collapsed):not(.is-sticky) .catalog-subcategory-wrap .select2-selection.select2-selection--single {
    width: calc(var(--catalog-taxonomy-base-width) * 1px) !important;
    min-width: calc(var(--catalog-taxonomy-base-width) * 1px) !important;
    max-width: calc(var(--catalog-taxonomy-base-width) * 1px) !important;
}

/* Sticky widths */
.site-main .catalog-filters-card.is-sticky #catalog-sort {
    display: inline-flex;
    width: calc(var(--catalog-sort-sticky-width) * 1px) !important;
    min-width: calc(var(--catalog-sort-sticky-width) * 1px) !important;
    max-width: calc(var(--catalog-sort-sticky-width) * 1px) !important;
}
/* During sticky animation sort and price pair track the JS-animated CSS vars
   so they shrink/grow in sync with the card instead of snapping at the end. */
.site-main .catalog-filters-card.is-sticky-animating #catalog-sort {
    display: inline-flex;
    width: var(--catalog-sort-width, calc(var(--catalog-sort-sticky-width) * 1px)) !important;
    min-width: var(--catalog-sort-width, calc(var(--catalog-sort-sticky-width) * 1px)) !important;
    max-width: var(--catalog-sort-width, calc(var(--catalog-sort-sticky-width) * 1px)) !important;
    transition: none !important;
}
.site-main .catalog-filters-card.is-sticky-animating #catalog-min-price,
.site-main .catalog-filters-card.is-sticky-animating #catalog-max-price {
    width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    min-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    max-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    transition: none !important;
}
.site-main .catalog-filters-card.is-sticky-animating .catalog-toolbar-price-pair {
    flex: 0 0 calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    min-width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    max-width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    transition: none !important;
}
/* During sticky animation the .price-width wrappers also track the animated var
   so they don't snap to the settled sticky width before the rAF loop finishes. */
.site-main .catalog-filters-card.is-sticky-animating .price-width {
    flex: 0 0 var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    min-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    max-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    transition: none !important;
}
/* Sort expands after the card has finished going sticky */
.catalog-filters-card.sort-price-expanding .catalog-sort-select.filter-bar-element {
    transition: max-width 0.22s ease-in-out !important;
}
.catalog-filters-card.sort-price-expanding .catalog-price-preset-select {
    transition: max-width 0.5s ease-in-out !important;
}
/* Category filter */
.site-main .catalog-filters-card.is-sticky .select.js-select2.filter-bar-element.select2-hidden-accessible,
.site-main .catalog-filters-card.is-sticky .catalog-category-wrap,
.site-main .catalog-filters-card.is-sticky .catalog-category-wrap .select2-container,
.site-main .catalog-filters-card.is-sticky .catalog-category-wrap .select2-selection.select2-selection--single {
    width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
    min-width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
    max-width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
}
/* Subcategory filter */
.site-main .catalog-filters-card.is-sticky .catalog-subcategory-wrap,
.site-main .catalog-filters-card.is-sticky .catalog-subcategory-wrap .select2-container,
.site-main .catalog-filters-card.is-sticky .catalog-subcategory-wrap .select2-selection.select2-selection--single,
.site-main .catalog-filters-card.is-sticky span.select2-selection.select2-selection--single {
    width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
    min-width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
    max-width: calc(var(--catalog-taxonomy-sticky-width) * 1px) !important;
}

/* ─── Price preset dropdown ──────────────────────────────────────────────── */
.catalog-price-preset-select {
    font-size: 0.78rem;
    height: var(--fb-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 1.6rem !important; /* room for custom span arrow */
    line-height: 1;
    cursor: pointer;
    background-image: none !important; /* suppress .select SVG chevron — span provides the arrow */
}
/* Page size select also has a custom span arrow; suppress the .select chevron */
.catalog-page-size-select {
    background-image: none !important;
}
.catalog-price-preset-select option {
    font-size: 0.78rem;
}
/* When a band or new-arrivals is selected, highlight the dropdown */
.catalog-price-preset-wrap:has(select:not([value=""])) select,
.catalog-price-preset-select.has-value {
    color: var(--color-primary, #2563eb) !important;
    font-weight: 600;
}

/* ─── Availability tier pill ─────────────────────────────────────────────── */
.catalog-availability-tier {
    display: inline-flex;
    align-items: stretch;
    width: 215px;
    min-width: 0;
    max-width: 215px;
    border-radius: 1px;
    overflow: hidden;
    border: 1px solid var(--finland-blue-600) !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    background-color: var(--finland-blue-400) !important;
    padding-left: 2px;
}
.catalog-avail-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    background: transparent;
    border: none;
    border-right: 1px solid var(--finland-blue-400) !important;;
    border-radius: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, letter-spacing 0.15s, transform 0.15s;
    color: var(--finland-blue-400);
    max-width: 72px !important;
}
.catalog-avail-btn:last-child {
    border-right: none;
}
.catalog-avail-btn:hover {
    color: var(--finland-blue);
    background: rgba(25, 54, 131, 0.09);
    box-shadow: inset 0 -2px 0 var(--finland-blue), inset 0 0 0 1px rgba(25,54,131,0.12);
    letter-spacing: 0.014em;
    transform: scaleY(1.07);
    z-index: 1;
}
.catalog-avail-btn.is-active {
    background: var(--finland-blue);
    color: #fff;
    font-weight: 900;
    box-shadow: inset 0 -2px 0 var(--finland-blue-400);
}
.catalog-avail-btn.is-active:hover {
    background: var(--finland-blue-400);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
    transform: scaleY(1.07);
    z-index: 1;
}

/* ─── Min star rating widget ─────────────────────────────────────────────── */
.catalog-min-rating {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
    height: var(--fb-height);
    flex-shrink: 0;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.site-main #catalog-filters-card.is-sticky .catalog-min-rating {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.catalog-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 3px;
    color: var(--color-text-muted, #9ca3af);
    transition: color 0.12s, transform 0.1s;
}
.catalog-star-btn:hover,
.catalog-min-rating:hover .catalog-star-btn {
    color: #b45309;
}
.catalog-star-btn.is-filled,
.catalog-star-btn.is-active {
    color: #d97706;
}
/* On hover, fill up to the hovered star */
.catalog-min-rating:hover .catalog-star-btn:hover ~ .catalog-star-btn {
    color: var(--color-text-muted, #9ca3af);
}
.catalog-star-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--color-text-muted, #9ca3af);
    padding: 0 2px;
    line-height: 1;
    transition: color 0.12s;
}
.catalog-star-clear:hover {
    color: #b45309;
}

/* ─── Primary-row toggle (Bought before) ────────────────────────────────── */
.catalog-primary-switch {
    font-size: 0.73rem !important;
    height: var(--fb-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex-shrink: 0;
}

/* Centered text across every control in the filterbar */
.site-main .catalog-filters-card .input,
.site-main .catalog-filters-card .select,
.site-main .catalog-filters-card .catalog-reset-wrap,
.site-main .catalog-filters-card .view-toggle-btn {
    text-align: center;
}
.site-main .catalog-filters-card .select {
    text-align-last: center;
}
.site-main .catalog-filters-card .select option {
    text-align: left;
}
.site-main .catalog-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.site-main .catalog-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    text-align: center;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}
.site-main .catalog-filters-card .view-toggle-btn {
    justify-content: center;
}
.site-main .catalog-filters-card .order-status-switch {
    justify-content: center;
    gap: 0.35rem;
}
.site-main .catalog-filters-card .order-status-switch__label {
    flex: 1 1 auto;
    text-align: center;
    font-size: .62rem !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
}
.site-main .catalog-filters-card .catalog-media-switch {
    flex: 1.05 0 150px;
    min-width: 150px;
    gap: 0.25rem;
    padding: 0 0.25rem;
    justify-content: space-between;
}
.site-main .catalog-filters-card.secondary-collapsed #catalog-has-variants {
    display: none;
}
/* Two-line label for the can_review and bought-before switches */
.catalog-can-review-label,
.catalog-bought-before-label,
.catalog-new-price-label {
    white-space: normal !important;
    line-height: 1.1 !important;
    font-size: .62rem !important;
    text-align: center;
    max-width: 3.6rem;
}
.catalog-new-price-label {
    max-width: 2.9rem;
}

.site-main .catalog-filters-card .catalog-media-switch__main {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
}
.site-main .catalog-filters-card .catalog-media-switch__modes {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    flex: 0 0 auto;
}
.site-main .catalog-filters-card .catalog-media-mode {
    height: calc(var(--fb-height) - 12px);
    min-width: 1.35rem;
    padding: 0 0.18rem;
    border: 1px solid rgba(156, 163, 175, 0.38);
    background: rgba(255, 255, 255, 0.42);
    color: var(--ink);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}
.site-main .catalog-filters-card .catalog-media-mode.is-active {
    background: var(--finland-blue);
    border-color: var(--finland-blue);
    color: #fff;
}
.catalog-filters-card .input,
.catalog-filters-card .select,
.catalog-filters-card .textarea,
.catalog-filters-card .catalog-filter-toggle,
.catalog-filters-card .catalog-filter-tile,
.catalog-filters-card .select2-container--default .select2-selection--single {
    border-width: 1px !important;
    border-color: rgba(156, 163, 175, 0.38) !important;
}
/* Smaller, bolder text in toolbar selects & inputs */
.catalog-filters-card .select,
.catalog-filters-card .catalog-sort-select,
.catalog-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.catalog-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: .78rem !important;
    font-weight: 700 !important;
}
/* Native select option text keeps normal weight */
.catalog-filters-card .select option {
    font-weight: 400;
}
/* Page-size select: no hover/focus colour change at all */
#catalog-page-size-select,
#catalog-page-size-select:hover,
#catalog-page-size-select:focus,
#catalog-page-size-select:active {
    border-color: rgba(156, 163, 175, 0.38) !important;
    box-shadow: none !important;
    background-color: var(--surface-soft) !important;
    outline: none !important;
}
#catalog-page-pagination-group {
    position: relative;
    z-index: 21;
    flex-shrink: 0;
    align-items: stretch !important;
}
#catalog-page-size-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
}
#catalog-page-nav-wrap {
    display: inline-flex;
    align-items: center;
    position: relative;
}
/* Left border gives the nav group a divider from the select */
#catalog-page-nav-wrap .catalog-page-nav {
    border-left: 1px solid rgba(156,163,175,0.38);
}
.catalog-page-size-inner {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.catalog-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.catalog-load-more-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.catalog-page-nav-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(156, 163, 175, 0.38);
    background: var(--surface-soft);
    color: var(--ink);
    box-shadow: 0 0 5px var(--header-accent);
    position: relative;
    pointer-events: auto;
    transition: background .17s, border-color .17s, color .17s, opacity .17s, transform .17s;
}
.catalog-page-nav-btn:hover:not(:disabled),
.catalog-page-nav-btn:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 53, 128, 0.3);
}
.catalog-page-nav-btn:disabled,
.catalog-page-nav-btn.is-disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}
.catalog-page-nav-btn:not(:disabled):not(.is-disabled),
#catalog-page-size-select,
.catalog-sort-select,
.catalog-category-overlay-toggle {
    cursor: pointer;
}
/* In list view only: shift sticky filter-row lower so it sits close to the table */
body.view-list .sticky-filter-row {
    top: var(--sticky-header-height, 64px);
    margin-bottom: 0;
}
/* Mode badge fade-out: use max-width+opacity so siblings reclaim space */
#catalog-mode-badge,
#catalog-db-badge {
    overflow: hidden;
    flex-shrink: 0;
    white-space: nowrap;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
    padding: 2px .2em !important;
    transition: background .25s, color .25s, border-color .25s, max-width .25s ease, opacity .25s ease, padding .25s ease, margin .25s ease, border-width .25s ease;
}
#catalog-mode-badge .cmb-num,
#catalog-db-badge .cmb-num {
    font-size: .65rem;
    font-weight: 900;
    line-height: 1.1;
    display: block;
}
#catalog-mode-badge .cmb-unit,
#catalog-db-badge .cmb-unit {
    font-size: .48rem;
    font-weight: 700;
    line-height: 1;
    display: block;
    opacity: .8;
}


/* ======================================================================= */
/*  * ◀ End of   §30c  Storefront Filterbar                                */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §30e  Subcategory Select Dim                              */
/* ======================================================================= */

/* ---- Dim Alakategoriat (subcategory) select2 when disabled (no main category chosen) ---- */
.site-main .catalog-filters-card .catalog-subcategory-wrap:has(select:disabled) .select2-container--default .select2-selection--single,
.site-main .catalog-filters-card .catalog-subcategory-wrap:has(select:disabled) .select2-container--default .select2-selection--multiple {
    background: rgba(156, 163, 175, 0.18) !important;
    opacity: 0.55;
}
.site-main .catalog-filters-card .catalog-subcategory-wrap:has(select:disabled) .select2-container--default .select2-selection--single .select2-selection__rendered,
.site-main .catalog-filters-card .catalog-subcategory-wrap:has(select:disabled) .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.site-main .catalog-filters-card .catalog-subcategory-wrap:has(select:disabled) .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(107, 114, 128, 0.65) !important;
    font-weight: 400 !important;
}
.admin-product-filters-card .catalog-toolbar-body {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.admin-order-filters-card .catalog-toolbar-body {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
.admin-category-filters-card .catalog-toolbar-body,
.admin-customer-filters-card .catalog-toolbar-body,
.admin-subscriber-filters-card .catalog-toolbar-body {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
/* Uniform height for all first-row filter bar elements */
.admin-product-filters-card .catalog-toolbar-body > *,
.admin-order-filters-card .catalog-toolbar-body > *,
.admin-category-filters-card .catalog-toolbar-body > *,
.admin-customer-filters-card .catalog-toolbar-body > *,
.admin-subscriber-filters-card .catalog-toolbar-body > * {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
}
/* Always-visible search input — stays in the toolbar row at all times,
   even when the bar is collapsed. Sits directly in .catalog-toolbar,
   not inside .catalog-toolbar-body. */
.admin-order-filters-card .admin-filters-always-visible,
.admin-category-filters-card .admin-filters-always-visible,
.admin-product-filters-card .admin-filters-always-visible,
.admin-customer-filters-card .admin-filters-always-visible,
.admin-subscriber-filters-card .admin-filters-always-visible,
.catalog-filters-card:not(.admin-order-filters-card):not(.admin-category-filters-card):not(.admin-product-filters-card):not(.admin-customer-filters-card):not(.admin-subscriber-filters-card) .admin-filters-always-visible {
    flex: 1 1 0%;
    min-width: 140px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    display: flex !important; /* always shown, even when .is-collapsed */
    /* Always fully opaque — floats over the transparent glass card */
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: rgba(156, 163, 175, 0.5) !important;
    box-shadow: 0 2px 8px rgba(50, 50, 60, 0.45) !important;
}
/* Orders expanded: push search to the end of the row so it fills only the
   space remaining after the status filters. The toolbar-body must not shrink
   or wrap (it's the "rigid" part); the search flexes into whatever's left. */
.admin-order-filters-card:not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.admin-order-filters-card:not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    order: 1;
    min-width: 0;
}
.admin-order-filters-card:not(.is-collapsed) .catalog-toolbar-body .order-status-filter-switches {
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
}
.admin-order-filters-card .order-status-filter-switches .order-status-switch {
    flex: 1 1 auto;
    min-width: 8.5rem;
    max-width: none;
    justify-content: space-between;
}
.admin-order-filters-card:not(.is-collapsed) .admin-filters-always-visible {
    order: 2;
    flex: 1 1 0%;
    min-width: 6rem;
    max-width: none;
}
/* Products expanded: same treatment — toolbar-body is rigid, search fills
   whatever space remains to the right of the category selects and toggles. */
.admin-product-filters-card:not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.admin-product-filters-card:not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    order: 1;
    min-width: 0;
}
.admin-product-filters-card:not(.is-collapsed) .admin-filters-always-visible {
    order: 2;
    flex: 1 1 0%;
    min-width: 6rem;
    max-width: none;
}
/* Customers expanded: search stays visible, toggle-body sits to the right */
.admin-customer-filters-card:not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.admin-customer-filters-card:not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    order: 1;
    min-width: 0;
}
.admin-customer-filters-card:not(.is-collapsed) .admin-filters-always-visible {
    order: 2;
    flex: 1 1 0%;
    min-width: 6rem;
    max-width: none;
}
.admin-customer-search-input {
    flex: 1 1 8rem;
    min-width: 7rem;
}
/* Customer filter switches: override the global 198.6 px / 214 px fixed widths
   so the 5 toggles stay compact and leave room for the search field. */
.admin-customer-filters-card .customer-filter-switches .order-status-switch {
    width: auto !important;
    max-width: 10.5rem;
    min-width: 8rem;
}
.admin-customer-bulk-bar {
    top: var(--admin-customer-bulk-top, calc(3.25rem + 54px));
    z-index: 9;
    border: 1px solid var(--glass-border);
    border-radius: 1px;
    box-shadow:
        0 18px 34px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(1px);
}
/* Subscribers expanded: search stays visible, dropdowns sit to the right */
.admin-subscriber-filters-card:not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.admin-subscriber-filters-card:not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    order: 1;
    min-width: 0;
}
.admin-subscriber-filters-card:not(.is-collapsed) .admin-filters-always-visible {
    order: 2;
    flex: 1 1 0%;
    min-width: 6rem;
    max-width: none;
}
.admin-subscriber-search-input {
    flex: 1 1 8rem;
    min-width: 7rem;
}

/* ── Subscriber filter-bar collapse / expand animations ─────────────────── */
@keyframes subFilterFlyOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-28px); }
}
@keyframes subFilterFlyInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes subFilterBodySlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(22px); }
}
@keyframes subFilterBodySlideIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Collapsing — fly search+reset out to the left */
.admin-subscriber-filters-card.is-collapsing .admin-filters-always-visible,
.admin-subscriber-filters-card.is-collapsing #subscriber-reset-filters,
.admin-category-filters-card.is-collapsing .admin-filters-always-visible,
.admin-category-filters-card.is-collapsing #cat-reset-filters,
.admin-product-filters-card.is-collapsing .admin-filters-always-visible,
.admin-product-filters-card.is-collapsing #product-reset-filters {
    will-change: transform, opacity;
    animation: subFilterFlyOutLeft 0.15s ease-in both;
}
/* Collapsing — slide body out to the right */
.admin-subscriber-filters-card.is-collapsing .catalog-toolbar-body,
.admin-category-filters-card.is-collapsing .catalog-toolbar-body,
.admin-product-filters-card.is-collapsing .catalog-toolbar-body {
    will-change: transform, opacity;
    animation: subFilterBodySlideOut 0.13s ease-in both;
}

/* Expanding — body slides in from the left */
.admin-subscriber-filters-card.is-expanding .catalog-toolbar-body,
.admin-category-filters-card.is-expanding .catalog-toolbar-body,
.admin-product-filters-card.is-expanding .catalog-toolbar-body {
    will-change: transform, opacity;
    animation: subFilterBodySlideIn 0.22s 0.05s ease-out both;
}
/* Expanding — search+reset fade in from left after body starts moving */
.admin-subscriber-filters-card.is-expanding .admin-filters-always-visible,
.admin-subscriber-filters-card.is-expanding #subscriber-reset-filters,
.admin-category-filters-card.is-expanding .admin-filters-always-visible,
.admin-category-filters-card.is-expanding #cat-reset-filters,
.admin-product-filters-card.is-expanding .admin-filters-always-visible,
.admin-product-filters-card.is-expanding #product-reset-filters {
    will-change: transform, opacity;
    animation: subFilterFlyInLeft 0.2s 0.08s ease-out both;
}

/* Search crossfade during collapse: after it flies out it reappears at new
   position — handled by JS adding/removing .is-search-crossfade */
.admin-subscriber-filters-card.is-search-crossfade .admin-filters-always-visible,
.admin-subscriber-filters-card.is-search-crossfade #subscriber-reset-filters,
.admin-category-filters-card.is-search-crossfade .admin-filters-always-visible,
.admin-category-filters-card.is-search-crossfade #cat-reset-filters,
.admin-product-filters-card.is-search-crossfade .admin-filters-always-visible,
.admin-product-filters-card.is-search-crossfade #product-reset-filters {
    will-change: transform, opacity;
    animation: subFilterFlyInLeft 0.18s ease-out both;
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Categories expanded: same treatment — toolbar-body is rigid, search fills
   whatever space remains to the right of the parent select and toggles. */
.admin-category-filters-card:not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.admin-category-filters-card:not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    order: 1;
    min-width: 0;
}
.admin-category-filters-card:not(.is-collapsed) .admin-filters-always-visible {
    order: 2;
    flex: 1 1 0%;
    min-width: 6rem;
    max-width: none;
}
/* Shop catalog filter card expanded: DOM order is the visual order —
   [Arrows] [Toggle] [Search grows] [Category] [Subcategory] [Sort] [Reset].
   toolbar-body is rigid; search fills the gap between the toggle and the selects. */
.catalog-filters-card:not(.admin-order-filters-card):not(.admin-category-filters-card):not(.admin-product-filters-card):not(.is-collapsed) .catalog-toolbar {
    flex-wrap: nowrap;
}
.catalog-filters-card:not(.admin-order-filters-card):not(.admin-category-filters-card):not(.admin-product-filters-card):not(.is-collapsed) .catalog-toolbar-body {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap !important;
    min-width: 0;
}
.catalog-filters-card:not(.admin-order-filters-card):not(.admin-category-filters-card):not(.admin-product-filters-card):not(.is-collapsed) .admin-filters-always-visible {
    flex: 1 1 0%;
    max-width: none;
}
/* When bar is fully collapsed keep the always-visible input + view toggle displayed */
.catalog-filters-card.is-collapsed .admin-filters-always-visible,
.catalog-filters-card.is-collapsed .catalog-view-toggle-always-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.admin-product-filters-card .catalog-toolbar-body .admin-product-category-wrap,
.admin-product-filters-card .catalog-toolbar-body .admin-product-subcategory-wrap {
    height: 2.85rem;
}
.admin-product-filters-card .catalog-toolbar-body .admin-product-category-wrap .select,
.admin-product-filters-card .catalog-toolbar-body .admin-product-subcategory-wrap .select {
    height: 100%;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
    text-align-last: center;
    box-sizing: border-box;
}
/* Disabled subcategory select: grey text + reduced opacity to signal unavailability */
.admin-product-filters-card .catalog-toolbar-body .admin-product-subcategory-wrap .select:disabled {
    color: rgba(107, 114, 128, 0.75) !important;
    opacity: 0.65;
    cursor: not-allowed;
}
.admin-product-filters-card .catalog-toolbar-body .admin-product-category-wrap .select2-container,
.admin-product-filters-card .catalog-toolbar-body .admin-product-subcategory-wrap .select2-container {
    height: 100% !important;
}
.admin-product-filters-card .catalog-toolbar-body .admin-product-category-wrap .select2-selection,
.admin-product-filters-card .catalog-toolbar-body .admin-product-subcategory-wrap .select2-selection {
    display: flex !important;
    align-items: center !important;
}
/* Push the DataTables wrapper away from the sticky filter card */
#admin-product-filters-card ~ .dt-container,
#admin-order-filters-card ~ .dt-container,
#admin-category-filters-card ~ .dt-container,
#products-table_wrapper,
#orders-table_wrapper,
#categories-table_wrapper {
    margin-top: 1.5rem;
}
/* Shop catalog filter bar sticky: width, margin-left, and padding-left/right
   are all animated by the JS rAF loop in index.php — no layout rules here. */
/* View toggle always visible alongside search and arrow icons */
.catalog-view-toggle-always-visible {
    display: flex !important;
    flex-shrink: 0;
}
.order-quick-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.admin-order-search-input {
    flex: 1 1 8rem;
    min-width: 7rem;
}
/* Uniform width shared by the stale-panel action buttons and the order search field */
.stale-uniform-width {
    width: 102px;
    min-width: 102px;
    max-width: 102px;
    flex: 0 0 102px !important;
    box-sizing: border-box;
}
/* Order secondary filters row: status select + customer select */
.admin-order-secondary-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
}
.admin-order-customer-wrap .select2-container {
    width: 100% !important;
}
.admin-order-sort-wrap .select,
.admin-order-secondary-filters .order-status-filter-select-wrap .select {
    width: 100%;
}
.admin-product-search-input {
    flex: 1 1 6rem;
    min-width: 4rem;
    margin-top: 2px;
}
.admin-product-category-wrap {
    flex: 0 0 11rem;
    min-width: 11rem;
    max-width: 11rem;
    box-sizing: border-box;
}
.admin-product-category-wrap .select2-container {
    width: 100% !important;
}
.admin-product-subcategory-wrap {
    flex: 0 0 11rem;
    min-width: 11rem;
    max-width: 11rem;
    box-sizing: border-box;
}
.admin-product-subcategory-wrap .select2-container {
    width: 100% !important;
}
.admin-product-sort-select {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin-top: 8px;
}
/* Sort wrapper: fixed 11rem slot, works in both toolbar and secondary row */
.admin-product-secondary-sort-wrap {
    flex: 0 0 11rem;
    min-width: 11rem;
    max-width: 11rem;
    height: 2.85rem;
    min-height: 2.85rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.admin-product-secondary-sort-wrap .select {
    width: 100%;
    height: 2.85rem;
    box-sizing: border-box;
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
    text-align-last: center;
}
.admin-product-secondary-sort-wrap .select option {
    text-align: left;
    font-weight: 400;
}
/* Price pair in toolbar: same height as selects */
.admin-product-filters-card .catalog-toolbar-body .admin-product-price-pair {
    height: 2.85rem;
    min-height: 2.85rem;
    align-items: center;
}

/* ======================================================================= */
/*  * ◀ End of   §30e  Subcategory Select Dim                              */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §34  Catalog List Thumbnails                              */
/* ======================================================================= */

/* ---------- Catalog list view thumbnails ---------- */
.catalog-thumb {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    object-fit: cover;
    border-radius: .5rem;
    display: block;
    aspect-ratio: 1 / 1;
}
.catalog-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,53,128,0.1), rgba(0,53,128,0.02));
    color: rgba(0,53,128,0.5);
    font-size: 1.25rem;
}
.img-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,53,128,0.4); font-weight: 700; font-size: 2rem;
    background: linear-gradient(135deg, rgba(0,53,128,0.1), rgba(0,53,128,0.02));
}
.audit-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}
.audit-action-badge--create {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}
.audit-action-badge--update {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}
.audit-action-badge--delete {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
#audit-modal .modal-panel,
#behavior-audit-modal .modal-panel,
#iv2-session-modal .modal-panel {
    padding: 1.5rem;
}
.js-iv2-session-drill {
    cursor: pointer;
}

.audit-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .9rem;
}
.audit-summary-card,
.audit-change-card,
.audit-meta-item,
.audit-snapshot {
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: .95rem;
}
.audit-summary-card {
    padding: 1rem 1.05rem;
}
.audit-summary-card__label,
.audit-value-card__label,
.audit-meta-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: .35rem;
}
.audit-summary-card__value {
    color: var(--ink);
    font-weight: 600;
    word-break: break-word;
}
.audit-summary-card__meta {
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 500;
    color: #64748b;
    word-break: break-word;
}
.audit-change-list {
    display: grid;
    gap: 1rem;
}
.audit-change-card__header {
    padding: .9rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-weight: 700;
    color: var(--ink);
}
.audit-change-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: 1rem;
}
.audit-value-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: .85rem;
    padding: .85rem .95rem;
    min-height: 100%;
}
.audit-value-card--after {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}
.audit-value-card__value,
.audit-meta-value {
    color: var(--ink);
    word-break: break-word;
}
.audit-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
}
.audit-meta-item {
    padding: .9rem 1rem;
}
.audit-meta-empty,
.audit-empty-state {
    padding: 1rem 1.1rem;
    border-radius: .9rem;
    background: rgba(255, 255, 255, 0.46);
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: #64748b;
}
.audit-snapshot-stack {
    display: grid;
    gap: .85rem;
}
.audit-snapshot summary {
    cursor: pointer;
    padding: .9rem 1rem;
    font-weight: 700;
    color: var(--ink);
}
.audit-snapshot[open] summary {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.audit-snapshot-content {
    padding: 1rem;
}
.audit-structured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
}
.audit-structured-grid--nested {
    grid-template-columns: 1fr;
}
.audit-structured-item,
.audit-structured-array-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: .85rem;
    padding: .9rem 1rem;
}
.audit-structured-item__label,
.audit-structured-array-card__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: .45rem;
}
.audit-structured-item__value,
.audit-structured-primitive {
    color: var(--ink);
    word-break: break-word;
}
.audit-structured-list {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: .35rem;
}
.audit-structured-array {
    display: grid;
    gap: .75rem;
}
.audit-json {
    margin: 0;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.72);
    border-radius: 0 0 .95rem .95rem;
}
/* ── Multi-option variant blocks (option 2 & 3) ──────────────────────── */
.pv-option-block {
    border-radius: 3px !important;
}
.pv-option-block[data-pv-option-collapsed="1"] {
    opacity: .55;
    border-style: dashed;
    background: transparent;
}
.pv-option-block[data-pv-option-collapsed="1"] .grid {
    display: none;
}
.pv-option-block[data-pv-option-collapsed="1"]:focus-within,
.pv-option-block[data-pv-option-collapsed="1"]:hover {
    opacity: 1;
    border-style: solid;
    background: rgba(255,255,255,.2);
}
.pv-option-block[data-pv-option-collapsed="1"]:focus-within .grid,
.pv-option-block[data-pv-option-collapsed="1"]:hover .grid {
    display: grid;
}

/* ── Admin Settings page ─────────────────────────────────────────────────── */

:root {
    --admin-sf-save-bar-top: 3.25rem;
    --admin-sf-save-bar-min-height: 2.75rem;
    --admin-sf-sticky-gap: 1rem;
    --admin-sf-nav-sticky-top: calc(var(--admin-sf-save-bar-top) + var(--admin-sf-save-bar-min-height) + var(--admin-sf-sticky-gap));
}

/* Sticky save bar */
.admin-sf-save-bar {
    position: sticky;
    top: var(--admin-sf-save-bar-top); /* sit just below the admin header (height: 3.25rem, sticky top-0) */
    z-index: 9;   /* below the header (z-10) so it never overlaps it */
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    margin: 0 0 1.25rem;
}
.admin-sf-save-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: var(--admin-sf-save-bar-min-height);
    flex-wrap: wrap;
}
.admin-sf-save-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-600, #6b7280);
}
.admin-sf-save-bar__status--saved {
    color: #16a34a;
}
.admin-sf-save-bar__status--error {
    color: #dc2626;
}
.admin-sf-save-bar__status--hint {
    color: var(--muted-600, #9ca3af);
    font-weight: 400;
}
.admin-sf-save-bar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Two-column layout */
.admin-sf-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Left nav */
.admin-sf-nav {
    position: sticky;
    top: var(--admin-sf-nav-sticky-top);
    width: 12.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem;
    border-radius: 1px;
    max-height: calc(100dvh - var(--admin-sf-nav-sticky-top) - var(--admin-sf-sticky-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
}
.admin-sf-nav__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 1px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink, #111827);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    position: relative;
}
.admin-sf-nav__item:hover {
    background: rgba(0, 53, 128, 0.07);
    color: var(--flag-blue, #003580);
    text-decoration: none;
}
.admin-sf-nav__item.is-active {
    background: rgba(0, 53, 128, 0.11);
    color: var(--flag-blue, #003580);
    font-weight: 600;
}
.admin-sf-nav__icon {
    flex-shrink: 0;
    color: var(--muted-600, #9ca3af);
    display: inline-flex;
}
.admin-sf-nav__item:hover .admin-sf-nav__icon,
.admin-sf-nav__item.is-active .admin-sf-nav__icon {
    color: var(--flag-blue, #003580);
}
.admin-sf-nav__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-sf-nav__err-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    margin-left: auto;
}
.admin-sf-nav__item--error { color: #dc2626; }

/* Content column */
.admin-sf-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Section card */
.admin-sf-section {
    border-radius: 1px;
    overflow: hidden;
    scroll-margin-top: calc(var(--admin-sf-nav-sticky-top) + var(--admin-sf-sticky-gap));
}
.admin-sf-section--error {
    border-color: rgba(239, 68, 68, 0.5) !important;
}
.admin-sf-section__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(0, 53, 128, 0.03);
}
.admin-sf-section__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 53, 128, 0.09);
    border-radius: 1px;
    color: var(--flag-blue, #003580);
    margin-top: 0.1rem;
}
.admin-sf-section__heading { flex: 1; min-width: 0; }
.admin-sf-section__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--flag-blue, #003580);
    line-height: 1.3;
}
.admin-sf-section__desc {
    font-size: 0.8rem;
    color: var(--muted-600, #6b7280);
    margin-top: 0.2rem;
    line-height: 1.45;
}
.admin-sf-section__body { padding: 0; }

/* Collapsed state */
.admin-sf-section.is-collapsed .admin-sf-section__body { display: none; }
.admin-sf-section.is-collapsed .admin-sf-section__header {
    border-bottom: none;
    cursor: pointer;
}
.admin-sf-section.is-collapsed .admin-sf-section__header:hover {
    background: rgba(0, 53, 128, 0.06);
}

/* Toggle button */
.admin-sf-section__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--glass-border, rgba(0,0,0,0.1));
    background: rgba(0, 53, 128, 0.06);
    color: var(--flag-blue, #003580);
    cursor: pointer;
    transition: background 0.15s, transform 0.2s;
    margin-top: 0.1rem;
}
.admin-sf-section__toggle:hover { background: rgba(0, 53, 128, 0.13); }
.admin-sf-section__toggle[aria-expanded="true"] .admin-sf-toggle-icon line:first-child {
    opacity: 0;
}
.admin-sf-toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: opacity 0.15s;
}

/* Field row — label left, control right */
.admin-sf-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0.8rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(0,0,0,0.055));
}
.admin-sf-row:last-child { border-bottom: none; }
.admin-sf-row__meta { flex: 1; min-width: 0; }
.admin-sf-row__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink, #111827);
    line-height: 1.35;
    cursor: pointer;
}
.admin-sf-row__desc {
    font-size: 0.775rem;
    color: var(--muted-600, #6b7280);
    margin-top: 0.2rem;
    line-height: 1.45;
}
.admin-sf-row__control {
    flex-shrink: 0;
    width: 17rem;
}
.admin-sf-row__input,
.admin-sf-row__select,
.admin-sf-row__textarea {
    width: 100%;
}
.admin-sf-row__error {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 600;
    margin-top: 0.3rem;
}
.admin-sf-row--error .admin-sf-row__input,
.admin-sf-row--error .admin-sf-row__select,
.admin-sf-row--error .admin-sf-row__textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* Toggle row */
.admin-sf-row--toggle { align-items: center; }
.admin-sf-row--toggle .admin-sf-row__control {
    width: auto;
    flex-shrink: 0;
}

/* Sub-setting indentation */
.admin-sf-row--indent-1 { padding-left: 1.5rem; border-left: 2px solid rgba(100,116,139,0.18); margin-left: 0.5rem; }
.admin-sf-row--indent-2 { padding-left: 2.75rem; border-left: 2px solid rgba(100,116,139,0.12); margin-left: 1rem; }
.admin-sf-row--indent-3 { padding-left: 4rem;    border-left: 2px solid rgba(100,116,139,0.08); margin-left: 1.5rem; }

/* Pill toggle switch */
.admin-sf-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.admin-sf-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.admin-sf-toggle__track {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
    position: relative;
    transition: background 0.18s;
    flex-shrink: 0;
}
.admin-sf-toggle__track::after {
    content: '';
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.18s;
}
.admin-sf-toggle__input:checked + .admin-sf-toggle__track {
    background: #2563eb;
}
.admin-sf-toggle__input:checked + .admin-sf-toggle__track::after {
    transform: translateX(1.25rem);
}
.admin-sf-toggle__input:focus-visible + .admin-sf-toggle__track {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.admin-sf-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.3rem 0;
}
.admin-sf-checkbox-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--ink, #111827);
}
.admin-sf-checkbox-item__input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Readonly copy widget (cron command display) */
.admin-sf-row--readonly-copy { align-items: flex-start; }
.admin-sf-copy-block {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.55rem;
    flex-wrap: wrap;
}
.admin-sf-copy-code {
    flex: 1 1 auto;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 0.35rem;
    padding: 0.35rem 0.6rem;
    word-break: break-all;
    color: var(--ink, #111827);
    line-height: 1.55;
    min-width: 0;
}

button.js-apsm-period.is-active {
    background: rgba(0,0,0,0.382) !important;
    color: white !important;
}
/* Storefront sales chart modal — mirror admin js-apsm-period rules exactly */
button.js-psm-period.is-active {
    background: rgba(0,0,0,0.382) !important;
    color: white !important;
}
button.btn-danger{
    text-shadow: 0 0 1px black !important;
    border: 1px solid (255,255,255,0,382) !important;
}
button.btn-danger:hover{
    background-color: lightcoral !important;
    color: white !important;
    text-shadow: 1px 1px 2px black !important;
    transition: background-color 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.382) !important;
    transform: translateY(1px);
}
aside.admin-sidebar .admin-nav-link{
    transition: background 0.075s ease;
    text-shadow: 1px 1px 1px black !important;
    color: white;
}
aside.admin-sidebar .admin-nav-link.is-active{
    background: var(--finland-blue) !important;
}
aside#admin-sidebar .admin-nav-link.is-active{
    background: var(--finland-blue) !important;
}
aside.admin-sidebar .admin-nav-link:hover{
    background: rgba(255, 255, 255, 0.1) !important;
}
.admin-sidebar--desktop nav {
    gap: 0.225rem;
    font-size: 0.9rem;
}
.admin-sidebar--desktop a[data-admin-nav] {
    padding: 0.45rem 0.675rem !important;
    line-height: 1.2;
}
/* Left border reveal for desktop sidebar nav links */
aside.admin-sidebar a[data-admin-nav] {
    position: relative;
    overflow: hidden;
}
aside.admin-sidebar a[data-admin-nav]::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: #fff;
    border-radius: 3px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
aside.admin-sidebar a[data-admin-nav]:hover::before,
aside.admin-sidebar a[data-admin-nav].is-active::before {
    transform: scaleY(1);
}
/* Same left-bar reveal for parent group toggle buttons */
aside.admin-sidebar .admin-nav-parent-btn {
    position: relative;
    overflow: hidden;
}
aside.admin-sidebar .admin-nav-parent-btn::before {
    content: "";
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: #fff;
    border-radius: 3px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
aside.admin-sidebar .admin-nav-parent-btn:hover::before,
aside.admin-sidebar .admin-nav-parent-btn.is-active::before,
aside.admin-sidebar .admin-nav-parent-btn[aria-expanded="true"]::before {
    transform: scaleY(1);
}
/* ── Desktop sidebar collapse ──────────────────────────────────────────── */
aside.admin-sidebar {
    transition: width 300ms cubic-bezier(.4,0,.2,1),
                min-width 300ms cubic-bezier(.4,0,.2,1),
                margin-left 300ms cubic-bezier(.4,0,.2,1),
                margin-right 300ms cubic-bezier(.4,0,.2,1),
                opacity 240ms ease;
    overflow: hidden;
}
body.admin-sidebar-collapsed aside.admin-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0;
    pointer-events: none;
}
/* Close button inside desktop sidebar */
#admin-desktop-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#admin-desktop-sidebar-close:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.38);
}
/* Show-sidebar button in the header (desktop only) */
#admin-desktop-sidebar-show {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 1px;
    border: 1px solid lightgray;
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.618);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
#admin-desktop-sidebar-show:hover {
    transform: scale(1.1);
}
body.admin-sidebar-collapsed #admin-desktop-sidebar-show {
    display: flex;
}
.btn.btn-primary.text-xs.is-active {
    background: var(--finland-blue-400) !important;
    color: white !important;
    box-shadow: 0 0 3px white !important;
}
.btn.btn-primary.text-xs.is-active:hover {
    background: var(--finland-blue) !important;
    color: white !important;
    text-shadow: 0 0 1px white !important;
    box-shadow: 0 0 4px white !important;
}
/* ── Recent-orders sub-modal (product view) – row hover ─────────────────── */
.js-aprom-row:hover td {
    background: rgba(128, 128, 128, 0.12);
    transition: background 0.1s;
}
.auth-register {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-register:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ── Collapsible admin nav groups ─────────────────────────────────────── */
/* Level-visibility is handled by .admin-nav-item rules further below.
   The .admin-nav-expand2-btn is still hidden until level-1 is active.  */
.admin-nav-collapsible .admin-nav-expand2-btn { display: none; }
.admin-nav-collapsible.is-level-1 .admin-nav-expand2-btn { display: flex; }
.admin-nav-collapsible.is-level-2 .admin-nav-expand2-btn { display: flex; }

.admin-nav-expand-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.38rem 0.675rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
}
.admin-nav-expand-btn:hover {
    color: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
}
.admin-nav-expand-btn svg { flex-shrink: 0; opacity: 0.7; }
/* Rotate the + icon into × when expanded */
.admin-nav-collapsible.is-level-1 .admin-nav-expand-btn[data-nav-expand="1"] svg,
.admin-nav-collapsible.is-level-2 .admin-nav-expand-btn[data-nav-expand="1"] svg,
.admin-nav-collapsible.is-level-2 .admin-nav-expand-btn[data-nav-expand="2"] svg {
    transform: rotate(45deg);
    opacity: 1;
}
.admin-nav-expand-btn svg { transition: transform 0.2s ease; }

/* ── Admin nav items + flyout submenus ────────────────────────────────────
   .admin-nav-item wraps one parent button/link + optional flyout.
   Flyouts slide open on .is-open (toggled by JS on click).
   On desktop the sidebar is wide enough that flyouts expand inline
   (no absolute positioning needed).
   Level visibility: .admin-nav-collapsible hides items with
   data-nav-level="1" until .is-level-1, etc.
   ─────────────────────────────────────────────────────────────────────── */
.admin-nav-item { position: relative; }
.admin-nav-item[data-nav-level="1"] { display: none; }
.admin-nav-collapsible.is-level-1 .admin-nav-item[data-nav-level="1"] { display: block; }
.admin-nav-bottom { margin-top: auto; }
.admin-nav-expand-row { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.25rem; }
#admin-sidebar-mobile-nav {
    --admin-quick-settings-max-height: calc((100dvh - 22rem) * 0.675);
}
#admin-desktop-nav {
    --admin-quick-settings-max-height: calc((100dvh - 28rem) * 0.825);
}

/* Parent toggle button — matches admin-nav-link look */
.admin-nav-parent-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 0.375rem;
    padding: 0.45rem 0.675rem;
    line-height: 1.2;
    transition: background 0.075s ease, color 0.075s ease;
}
.admin-nav-parent-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.admin-nav-parent-btn.is-active,
.admin-nav-parent-btn.flyout-open { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Chevron rotates when flyout open */
.admin-nav-chevron { flex-shrink: 0; transition: transform 0.2s ease; opacity: 0.6; }
.admin-nav-parent-btn[aria-expanded="true"] .admin-nav-chevron { transform: rotate(180deg); opacity: 1; }

/* Flyout container — inline expand, not absolute */
.admin-nav-flyout {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease;
    overflow: hidden;
}
.admin-nav-flyout.is-open { grid-template-rows: 1fr; }
.admin-nav-flyout-inner { min-height: 0; }

/* Child links inside flyout */
.admin-nav-child-link {
    display: block;
    padding: 0.3rem 0.675rem 0.3rem 1.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255,255,255,0.12);
    margin-left: 0.675rem;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    border-radius: 0 4px 4px 0;
}
.admin-nav-child-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.06);
}
.admin-nav-child-link.is-active {
    color: #fff;
    border-color: var(--finland-blue, #003580);
    background: rgba(0, 53, 128, 0.25);
    font-weight: 600;
}

.admin-quick-settings {
    margin-top: 0.25rem;
}

.admin-quick-settings-scroll {
    max-height: min(27rem, max(12rem, var(--admin-quick-settings-max-height, 54vh)));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.35rem 0.25rem 0.5rem 0.675rem;
    scrollbar-width: thin;
    scrollbar-color: var(--finland-blue, #003580) rgba(255, 255, 255, 0.12);
}

.admin-quick-settings-scroll::-webkit-scrollbar {
    width: 8px;
}

.admin-quick-settings-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.admin-quick-settings-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, var(--finland-blue, #003580));
    border-radius: 999px;
}

.admin-quick-settings-status {
    min-height: 1rem;
    margin: 0 0.45rem 0.25rem 0;
    font-size: 0.68rem;
    line-height: 1rem;
    color: rgba(255, 255, 255, 0.62);
}

.admin-quick-settings-status[data-state="saved"] {
    color: #bfdbfe;
}

.admin-quick-settings-status[data-state="error"] {
    color: #fecaca;
}

.admin-quick-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.15rem;
    margin: 0 0.35rem 0.25rem 0;
    padding: 0.35rem 0.45rem;
    border-left: 2px solid rgba(59, 130, 246, 0.42);
    border-radius: 0 4px 4px 0;
    background: rgba(255, 255, 255, 0.05);
}

.admin-quick-setting-row:hover {
    background: rgba(255, 255, 255, 0.09);
}

.admin-quick-setting-label {
    min-width: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.admin-quick-setting-control {
    width: 5.75rem;
    min-height: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.25rem 0.35rem;
}

.admin-quick-setting-control--number {
    width: 4.35rem;
}

.admin-quick-setting-control:disabled {
    opacity: 0.62;
}

.admin-quick-setting-switch {
    position: relative;
    display: inline-flex;
    width: 2.4rem;
    height: 1.3rem;
    flex: 0 0 auto;
}

.admin-quick-setting-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-quick-setting-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.62);
    transition: background 0.16s ease;
}

.admin-quick-setting-switch span::after {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: 0.18rem;
    width: 0.94rem;
    height: 0.94rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.16s ease;
}

.admin-quick-setting-switch input:checked + span {
    background: var(--finland-blue, #003580);
}

.admin-quick-setting-switch input:checked + span::after {
    transform: translateX(1.1rem);
}

/* ── Filter bar fly animations ───────────────────────────────────────────── */
@keyframes filterFlyIn {
    0%   { opacity: 0; transform: translateX(-16px) scale(0.94); }
    72%  { opacity: 1; transform: translateX(3px)   scale(1.025); }
    100% { opacity: 1; transform: translateX(0)     scale(1); }
}
/* Search bar flies across the full bar from left (collapsed) to right (expanded) */
@keyframes filterSearchFlyRight {
    0%   { opacity: 0.7; transform: translateX(-52vw) scale(0.96); }
    68%  { opacity: 1;   transform: translateX(5px)   scale(1.02); }
    100% { opacity: 1;   transform: translateX(0)     scale(1); }
}
/* Reverse: search bar flies from right (expanded) back to left (collapsed) */
@keyframes filterSearchFlyLeft {
    0%   { opacity: 0.7; transform: translateX(40vw)  scale(0.96); }
    68%  { opacity: 1;   transform: translateX(-5px)  scale(1.02); }
    100% { opacity: 1;   transform: translateX(0)     scale(1); }
}
/* Secondary filter row: collapses upward, so expand flies DOWN from above */
@keyframes filterFlyInFromAbove {
    0%   { opacity: 0; transform: translateY(-14px) scale(0.9); }
    72%  { opacity: 1; transform: translateY(3px)   scale(1.025); }
    100% { opacity: 1; transform: translateY(0)     scale(1); }
}

/* ── Page loader bar ─────────────────────────────────────────────────────── */
/* Geometry, colour, and shadow only. All transitions/opacity are controlled  */

/* via inline styles by PageLoader in app.js so there are no specificity      */
/* conflicts between CSS classes and inline overrides.                        */
#page-loader-bar {
    background: linear-gradient(90deg, #2563eb 0%, #6366f1 60%, #a855f7 100%);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}
.site-main .catalog-collapse-btn {
    transform: scale(1);
}
.site-main .catalog-collapse-btn:hover {
    transform: scale(0.92);
}
.catalog-collapse-btn .is-collapsed {
    margin-top: 0;
}
.site-main .catalog-collapse-btn {
    margin-top: 2px !important;
}
.js-new-customer {
    max-height: 38px !important;
    height: 38px !important;
    margin-bottom: 5px !important;
}
.datatable-toolbar .dt-buttons .dt-button {
    max-height: 38px !important;
    height: 38px !important;
}
/* ── Admin page-transition overlay ───────────────────────────────────────── */
/* Starts fully opaque on every page load (FOUC/DataTables cover).
   JS dissolves it after $(document).ready; re-covers on nav-link click.
   On admin pages the overlay sits inside .admin-page-shell (position:relative)
   so it covers only the content area — the sidebar is never touched.         */
#page-transition-overlay {
    position: fixed;        /* storefront default: full-page */
    inset: 0;
    z-index: 9985;          /* below modals (9990+), above content */
    pointer-events: all;    /* blocks interaction while opaque */
    opacity: 1;             /* opaque by default — the CSS reset for "not ready" */
    background: #e8f0fa;    /* light-theme near-white blue tint ≈ page background */
    transition: none;
}
/* On admin pages the overlay lives inside .admin-page-shell (position:relative),
   so absolute positioning keeps it within the content column only.            */
.admin-shell #page-transition-overlay {
    position: absolute;
    height: 100vh;
}
/* Scanline texture — subtle horizontal lines visible as the overlay dissolves,
   giving the "scramble" visual that masks the raw column-header flash.       */
#page-transition-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 3px,
        rgba(0, 30, 80, 0.024) 3px, rgba(0, 30, 80, 0.024) 4px
    );
}
/* Steady state after dissolve: transparent and non-interactive */
#page-transition-overlay.is-ready {
    opacity: 0;
    pointer-events: none;
    transition: none;
}
/* Scramble-out animation — opacity fades 1→0 while scanline texture shows  */
@keyframes adminPageScrambleOut {
    0%   { opacity: 1;    }
    16%  { opacity: 0.91; }
    38%  { opacity: 0.67; }
    62%  { opacity: 0.35; }
    84%  { opacity: 0.10; }
    100% { opacity: 0;    }
}
#page-transition-overlay.is-dissolving {
    pointer-events: none;
    animation: adminPageScrambleOut 100ms cubic-bezier(.3, 0, .55, 1) forwards;
}
/* Re-cover on navigate-away: transition from is-ready (opacity:0) → opacity:1 */
#page-transition-overlay.is-covering {
    opacity: 1;
    pointer-events: all;
    transition: opacity 100ms ease-in;
    animation: none;
}

/* ── Spinner keyframe (shared by all spinner rings) ──────────────────────── */
@keyframes spinnerRing {
    to { transform: rotate(360deg); }
}

/* ── Spinner inside page-transition overlay (visible during page load) ────── */
.pt-spinner-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(0, 40, 120, 0.14);
    border-top-color: rgba(0, 60, 180, 0.62);
    animation: spinnerRing 0.82s linear infinite;
}
/* ── General loading overlay (AJAX / form submits / long operations) ──────── */
/* Shows as a frosted-glass card with a spinning ring, centred on the viewport.
   Created lazily by LoadingOverlay.show() in app.js.                         */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-loading-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.10);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}
#loading-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}
#loading-overlay__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.75rem 2.25rem;
    border-radius: 1.25rem;
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    min-width: 110px;
}
#loading-overlay__ring {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-top-color: var(--ink);
    animation: spinnerRing 0.76s linear infinite;
    flex-shrink: 0;
}
#loading-overlay__msg {
    display: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.85;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 200px;
    line-height: 1.4;
}
#loading-overlay__msg.has-text { display: block; }
/* Hover effect driven by JS (see app.js imgHover handler)
   so the starting scale is read from the element's current transform. */
body img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}


/* ======================================================================= */
/*  * ◀ End of   §34  Catalog List Thumbnails                              */
/* ======================================================================= */

/* ── Cookie consent — banner + modal container ───────────────────────────
   These rules must live in base.css so they apply on every shop page
   (the partial is always included via layouts/main.php).
   ─────────────────────────────────────────────────────────────────────── */
.cookie-consent-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 0.5rem;
    background: rgba(9, 24, 48, 0.92);
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
}

.cookie-consent-banner[hidden] {
    display: none;
}

.cookie-consent-banner__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 58rem;
    font-size: 0.9rem;
}

.cookie-consent-banner__copy strong {
    font-size: 1rem;
}

.cookie-consent-banner__actions,
.cookie-consent-modal__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.cookie-consent-modal__panel {
    width: min(48rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1.25rem;
}

.cookie-consent-modal__lead,
.cookie-consent-status {
    color: var(--muted-600);
    font-size: 0.9rem;
}

@media (max-width: 760px) {
    .cookie-consent-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent-banner__actions,
    .cookie-consent-modal__footer {
        justify-content: stretch;
    }

    .cookie-consent-banner__actions .btn,
    .cookie-consent-modal__footer .btn {
        flex: 1 1 auto;
    }

    .cookie-consent-options {
        grid-template-columns: 1fr;
    }
}