/* Dataveli Cart — shop.css
 * Catalog and product-discovery bundle loaded on shop overview pages and
 * richer shop browsing surfaces. Keep product card, catalog toolbar, category
 * directory, product quick-view polish, list/grid view, and categories-tree UI here.
 * Shared primitives used by admin or standalone views belong in base.css.
 *
 * TABLE OF CONTENTS
 * -----------------
 *  §52b Price History
 *  §27b Featured Modal Image Display Fix
 *  §37  Featured & Sale Badges
 *  §38  Stock Text
 *  §41  Category Chip Background Thumbnails
 *  §41b Category Directory
 *  §43  Compact Category Chips
 *  §35  Catalog List Scramble Overlay
 *  §32  Catalog Meta Row
 *  §36  Sticky Load-more Bar
 *  §36b Load-more Slide Toggle
 *  §39  Bought-before Badge
 *  §46b Reply Nesting
 *  §44c Product Modal Prev/Next Nav
 *  §31  Catalog View Toggle
 *  §33c Catalog Preload Blur Reveal
 *  §06  Catalog Product Modal / Product Card / Categories Page UI
 *  §33b Catalog Small Grid
 *  §34  Shop Section Banner
 *  §35b POTD Carousel
 *  §50  Favourites Page: Button Group & Help Text Animations
 *  §51  News / Uutiset Page
 *  §52  Category landing pages (/en/category/{slug}, /fi/kategoria/{slug})
 */

/* ======================================================================= */
/*  * ▶ Start of §52b  Price History                                       */
/* ======================================================================= */

/* Price history period selector: active button */
#pphm-period-bar .js-pphm-period.is-active {
    color: var(--finland-blue) !important;
    border-color: var(--finland-blue) !important;
    font-weight: 600;
}
.theme-dark #pphm-period-bar .js-pphm-period.is-active {
    color: var(--finland-blue-400) !important;
    border-color: var(--finland-blue-400) !important;
}

/* Sale modal title — use finland-blue-400 accent */
#hero-sale-modal .featured-hero-modal-title {
    color: #e0f2fe !important;
    text-shadow: 0 0 18px rgba(147, 197, 253, 0.70);
}
#hero-sale-modal .featured-hero-modal-counter {
    color: rgba(186, 230, 253, 0.90);
}
#hero-sale-modal .featured-hero-modal-header {
    border-bottom-color: rgba(147, 197, 253, 0.30);
}
#hero-sale-modal .fh-footer-close {
    border-top-color: rgba(147, 197, 253, 0.25);
}
#hero-featured-modal .fh-footer-close-btn,
#hero-sale-modal .fh-footer-close-btn,
#hero-new-modal .fh-footer-close-btn,
#hero-shop-modal .fh-footer-close-btn {
    font-size: .84rem;
}
#hero-sale-modal .fh-footer-close-btn {
    border-color: rgba(147, 197, 253, 0.50);
    background: rgba(255, 255, 255, 0.10);
}
#hero-sale-modal .fh-footer-close-btn:hover {
    border-color: rgba(186, 230, 253, 0.80);
    background: rgba(255, 255, 255, 0.18);
}
#hero-sale-modal .fh-cat-pill {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(147, 197, 253, 0.45);
}
#hero-sale-modal .fh-cat-pill.is-active {
    background: rgba(255, 255, 255, 0.22);
    border-color: #bfdbfe;
    color: #fff;
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.50);
}
/* ── Sale modal: glass nav arrows, fixed to panel centre ── */
#hero-sale-modal .featured-hero-modal-stage { position: static; }
#hero-sale-modal .featured-hero-modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 30;
    margin: 0;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    background: rgba(28, 74, 180, 0.28) !important;
    border: 1px solid rgba(147, 197, 253, 0.60) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 24px rgba(56, 130, 246, 0.35), inset 0 0 0 1px rgba(186, 230, 253, 0.14) !important;
}
#hero-sale-modal .featured-hero-modal-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(28, 74, 180, 0.52) !important;
    border-color: rgba(186, 230, 253, 0.85) !important;
    box-shadow: 0 10px 32px rgba(56, 130, 246, 0.55), inset 0 0 0 1px rgba(186, 230, 253, 0.24) !important;
}
#hero-sale-modal .featured-hero-modal-nav--prev { left: 0.618rem; right: auto; }
#hero-sale-modal .featured-hero-modal-nav--next { right: 0.618rem; left: auto; }
#hero-sale-modal .featured-hero-modal-viewport { margin-left: 3.2rem; margin-right: 3.2rem; }
/* ── Sale modal: custom scrollbar (CSS-native, themed to match palette) ── */
#hero-sale-modal .fh-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 197, 253, 0.50) transparent;
}
#hero-sale-modal .fh-content-scroll::-webkit-scrollbar {
    display: block !important;
    width: 6px;
}
#hero-sale-modal .fh-content-scroll::-webkit-scrollbar-thumb {
    background: rgba(147, 197, 253, 0.50);
    border-radius: 3px;
}
#hero-sale-modal .fh-content-scroll::-webkit-scrollbar-track {
    background: transparent;
}


.hero-fav-btn {
    /* Suosikit shortcut — continuous synced zoom+glow so scale and shadow stay in phase */
    animation: hero-fav-sync 3s ease-in-out infinite;
}
.hero-fav-btn:hover {
    animation-play-state: paused;
    filter: none;
}
@keyframes hero-fav-sync {
    0%, 100% {
        transform: scale(0.93);
        filter: drop-shadow(0 3px 5px rgba(0,0,0,0.82)) drop-shadow(0 1px 2px rgba(0,0,0,0.60));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 10px rgba(253,224,71,0.92)) drop-shadow(0 0 24px rgba(245,158,11,0.72));
    }
}
.hero-new-wrap {
    align-items: center;
    margin-left: 2.5rem;
}
#hero-new-open {
    position: relative;
    /* Wave colour: blue on light/mixed, white on dark */
    --hero-wave-color: var(--finland-blue-600);
    animation: hero-btn-kb-new 7.2s ease-in-out infinite;
    isolation: isolate;
    overflow: visible;
    z-index: 0;
}
#hero-new-open::after {
    content: '';
    position: absolute;
    inset: -3px;
    outline: 3px solid var(--hero-wave-color);
    outline-offset: 0;
    border: 0;
    border-radius: inherit;
    opacity: 0;
    animation: none;
    transform: translateZ(0) scale(1);
    transform-origin: center;
    pointer-events: none;
    z-index: -1;
}
/* New button: fresh-arrival skip with two soft outline broadcasts */
@keyframes hero-btn-kb-new {
    0%, 100% { transform: translateZ(0) scale(1)     translateY(0);   }
    42%      { transform: translateZ(0) scale(1.10)  translateY(-3px); }
    68%      { transform: translateZ(0) scale(1.115) translateY(2.5px); }
}
@keyframes hero-new-ring {
    0%    { opacity: .72; outline-offset: 0;    transform: translateZ(0) scale(.98) rotate(.8deg); }
    12%   { opacity: .24; outline-offset: 9px;  transform: translateZ(0) scale(1.06) rotate(-.2deg); }
    20%   { opacity: 0;   outline-offset: 14px; transform: translateZ(0) scale(1.09) rotate(-.4deg); }
    20.1% { opacity: 0;   outline-offset: 0;    transform: translateZ(0) scale(1.00) rotate(-.7deg); }
    34%   { opacity: .60; outline-offset: 0;    transform: translateZ(0) scale(1.015) rotate(-.7deg); }
    48%   { opacity: .18; outline-offset: 11px; transform: translateZ(0) scale(1.085) rotate(.5deg); }
    56%   { opacity: 0;   outline-offset: 16px; transform: translateZ(0) scale(1.11) rotate(.6deg); }
    56.1% { opacity: 0;   outline-offset: 0;    transform: translateZ(0) scale(1.01) rotate(.5deg); }
    69%   { opacity: .48; outline-offset: 0;    transform: translateZ(0) scale(1.025) rotate(.5deg); }
    86%   { opacity: .10; outline-offset: 13px; transform: translateZ(0) scale(1.12) rotate(-.2deg); }
    100%  { opacity: 0;   outline-offset: 19px; transform: translateZ(0) scale(1.16) rotate(0deg); }
}
#hero-new-open.hero-seq-pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    outline: 3px solid var(--hero-wave-color);
    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: hero-new-ring var(--pulse-duration, 3900ms) linear 1 forwards;
}
#hero-new-open.hero-seq-pulse::after {
    animation: none;
}
#hero-new-open:hover {
    outline: none;
    box-shadow: none;
    filter: brightness(1.12);
}
#hero-new-open:hover::before,
#hero-new-open:hover::after {
    animation-play-state: paused;
}
/*
 * Double-pulse broadcast keyframe.
 * Two rings per element per 3.2 s cycle (0 % and 50 %).
 * Combined with the ::after delayed 0.8 s (¼ period) this gives
 * 4 evenly-spaced rings: 0 / 0.8 / 1.6 / 2.4 s.
 * The 49.9 % / 99.9 % holds keep the ring invisible until the snap
 * so the transform never visibly travels backwards.
 */
@keyframes hero-new-broadcast-double {
    0%    { opacity: .78; transform: translateZ(0) scale(1); }
    44%   { opacity: 0; transform: translateZ(0) scale(1.34); }
    49.9% { opacity: 0; transform: translateZ(0) scale(1.34); }
    50%   { opacity: .78; transform: translateZ(0) scale(1); }
    94%   { opacity: 0; transform: translateZ(0) scale(1.34); }
    99.9% { opacity: 0; transform: translateZ(0) scale(1.34); }
    100%  { opacity: .78; transform: translateZ(0) scale(1); }
}
#hero-new-modal .modal-panel {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 1.75rem 1.75rem 0;
    background: rgba(5, 80, 40, 0.50) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    border-color: rgba(134, 239, 172, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(167, 243, 208, 0.18) inset,
        0 28px 64px rgba(2, 30, 15, 0.35),
        0 0 100px rgba(34, 197, 94, 0.30) !important;
    color: #ffffff;
}
.new-hero-orbs .featured-hero-orb { opacity: 0; }
.new-hero-orb--1 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(134,239,172,.32) 0%, rgba(34,197,94,.14) 50%, transparent 80%);
    top: -10%; left: -8%;
    animation: fh-orb-drift-1 14s ease-in-out infinite alternate;
}
.new-hero-orb--2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(74,222,128,.28) 0%, rgba(21,128,61,.12) 50%, transparent 80%);
    bottom: -12%; right: -6%;
    animation: fh-orb-drift-2 17s ease-in-out infinite alternate;
    animation-delay: -5s;
}
.new-hero-orb--3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(167,243,208,.22) 0%, rgba(6,95,70,.10) 50%, transparent 80%);
    top: 40%; right: 15%;
    animation: fh-orb-drift-3 12s ease-in-out infinite alternate;
    animation-delay: -3s;
}
#hero-new-modal .featured-hero-modal-title {
    color: #dcfce7 !important;
    text-shadow: 0 0 18px rgba(134, 239, 172, 0.60);
}
#hero-new-modal .featured-hero-modal-counter { color: rgba(167, 243, 208, 0.90); }
#hero-new-modal .featured-hero-modal-header  { border-bottom-color: rgba(134, 239, 172, 0.28); }
#hero-new-modal .fh-footer-close             { border-top-color: rgba(134, 239, 172, 0.22); }
#hero-new-modal .fh-footer-close-btn {
    border-color: rgba(134, 239, 172, 0.45);
    background: rgba(255, 255, 255, 0.08);
}
#hero-new-modal .fh-footer-close-btn:hover {
    border-color: rgba(167, 243, 208, 0.75);
    background: rgba(255, 255, 255, 0.16);
}
#hero-new-modal .fh-cat-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(134, 239, 172, 0.40);
}
#hero-new-modal .fh-cat-pill.is-active {
    background: rgba(255, 255, 255, 0.20);
    border-color: #86efac;
    color: #fff;
    box-shadow: 0 0 10px rgba(134, 239, 172, 0.45);
}
/* ── New modal: glass nav arrows, fixed to panel centre ── */
#hero-new-modal .featured-hero-modal-stage { position: static; }
#hero-new-modal .featured-hero-modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 30;
    margin: 0;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    background: rgba(5, 120, 60, 0.26) !important;
    border: 1px solid rgba(134, 239, 172, 0.60) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.32), inset 0 0 0 1px rgba(167, 243, 208, 0.14) !important;
}
#hero-new-modal .featured-hero-modal-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(5, 120, 60, 0.50) !important;
    border-color: rgba(167, 243, 208, 0.85) !important;
    box-shadow: 0 10px 32px rgba(34, 197, 94, 0.52), inset 0 0 0 1px rgba(167, 243, 208, 0.24) !important;
}
#hero-new-modal .featured-hero-modal-nav--prev { left: 0.618rem; right: auto; }
#hero-new-modal .featured-hero-modal-nav--next { right: 0.618rem; left: auto; }
#hero-new-modal .featured-hero-modal-viewport { margin-left: 3.2rem; margin-right: 3.2rem; }
#hero-featured-modal .featured-hero-modal-stage,
#hero-sale-modal .featured-hero-modal-stage,
#hero-new-modal .featured-hero-modal-stage,
#hero-shop-modal .featured-hero-modal-stage {
    /* Let stage grow with tall cards so fh-content-scroll can actually scroll. */
    flex: 0 0 auto;
    padding-top: 0.7rem;
}
#hero-featured-modal .featured-hero-modal-viewport,
#hero-sale-modal .featured-hero-modal-viewport,
#hero-new-modal .featured-hero-modal-viewport,
#hero-shop-modal .featured-hero-modal-viewport {
    /* Avoid clipping tall card content inside viewport; scrolling is handled by .fh-content-scroll. */
    overflow: visible;
}
#hero-featured-modal .featured-hero-modal-track,
#hero-sale-modal .featured-hero-modal-track,
#hero-new-modal .featured-hero-modal-track,
#hero-shop-modal .featured-hero-modal-track {
    align-items: center;
}
#hero-new-modal .fh-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(134, 239, 172, 0.50) transparent;
}
#hero-new-modal .fh-content-scroll::-webkit-scrollbar { display: block !important; width: 6px; }
#hero-new-modal .fh-content-scroll::-webkit-scrollbar-thumb { background: rgba(134, 239, 172, 0.50); border-radius: 3px; }
#hero-new-modal .fh-content-scroll::-webkit-scrollbar-track { background: transparent; }
#hero-new-modal .product-card {
    background: rgba(3, 22, 12, 0.60) !important;
    border-color: rgba(134, 239, 172, 0.28) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: none !important;
}
#hero-new-modal .product-card .js-product-open-name,
#hero-new-modal .product-card .text-flag-blue,
#hero-new-modal .product-card .text-finland-blue,
#hero-new-modal .product-card .text-gray-500,
#hero-new-modal .product-card .text-gray-600,
#hero-new-modal .product-card .text-gray-700,
#hero-new-modal .product-card .catalog-price-current,
#hero-new-modal .product-card .catalog-price-original,
#hero-new-modal .product-card .btn-ghost {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none !important;
}
#hero-shop-modal .modal-panel {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 1.75rem 1.75rem 0;
    background: rgba(30, 20, 60, 0.55) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    border-color: rgba(192, 162, 255, 0.40) !important;
    box-shadow:
        0 0 0 1px rgba(220, 200, 255, 0.14) inset,
        0 28px 64px rgba(10, 5, 30, 0.38),
        0 0 100px rgba(140, 100, 255, 0.22) !important;
    color: #ffffff;
}
.shop-all-orbs .featured-hero-orb { opacity: 0; }
.shop-all-orb--1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(167,139,250,.28) 0%, rgba(109,40,217,.12) 50%, transparent 80%);
    top: -10%; left: -6%;
    animation: fh-orb-drift-1 15s ease-in-out infinite alternate;
}
.shop-all-orb--2 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(196,181,253,.24) 0%, rgba(76,29,149,.10) 50%, transparent 80%);
    bottom: -10%; right: -5%;
    animation: fh-orb-drift-2 18s ease-in-out infinite alternate;
    animation-delay: -6s;
}
#hero-shop-modal .featured-hero-modal-title {
    color: #e9d5ff !important;
    text-shadow: 0 0 18px rgba(167, 139, 250, 0.55);
}
#hero-shop-modal .featured-hero-modal-counter { color: rgba(221, 214, 254, 0.88); }
#hero-shop-modal .featured-hero-modal-header  { border-bottom-color: rgba(167, 139, 250, 0.28); }
#hero-shop-modal .fh-footer-close             { border-top-color: rgba(167, 139, 250, 0.22); }
#hero-shop-modal .fh-footer-close-btn {
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(255, 255, 255, 0.08);
}
#hero-shop-modal .fh-footer-close-btn:hover {
    border-color: rgba(196, 181, 253, 0.75);
    background: rgba(255, 255, 255, 0.16);
}
/* Filter bar inside the header */
.sam-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 0;
    min-width: 0;
    z-index: 1;
}
.sea-canvas {
    position: relative;
    z-index: 1;
}
.sam-search-input {
    flex: 1 1 0%;
    min-width: 0;
    height: 2.1rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.82rem;
    outline: none;
    transition: border-color .2s ease, background .2s ease;
}
.sam-search-input::placeholder { color: rgba(255,255,255,0.45); }
.sam-search-input:focus {
    border-color: rgba(196, 181, 253, 0.70);
    background: rgba(255, 255, 255, 0.13);
}
.sam-sort-select {
    height: 2.1rem;
    padding: 0 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(167, 139, 250, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}
.sam-sort-select option { background: #1e1040; color: #fff; }
/* ── Shop modal: glass nav arrows, fixed to panel centre ── */
#hero-shop-modal .featured-hero-modal-stage { position: static; }
#hero-shop-modal .featured-hero-modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 30;
    margin: 0;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    background: rgba(91, 52, 200, 0.26) !important;
    border: 1px solid rgba(196, 181, 253, 0.60) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.35), inset 0 0 0 1px rgba(221, 214, 254, 0.14) !important;
}
#hero-shop-modal .featured-hero-modal-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(91, 52, 200, 0.50) !important;
    border-color: rgba(221, 214, 254, 0.85) !important;
    box-shadow: 0 10px 32px rgba(139, 92, 246, 0.55), inset 0 0 0 1px rgba(221, 214, 254, 0.24) !important;
}
#hero-shop-modal .featured-hero-modal-nav--prev { left: 0.618rem; right: auto; }
#hero-shop-modal .featured-hero-modal-nav--next { right: 0.618rem; left: auto; }
#hero-shop-modal .featured-hero-modal-viewport { margin-left: 3.2rem; margin-right: 3.2rem; }
#hero-shop-modal .fh-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 181, 253, 0.50) transparent;
}
#hero-shop-modal .fh-content-scroll::-webkit-scrollbar { display: block !important; width: 6px; }
#hero-shop-modal .fh-content-scroll::-webkit-scrollbar-thumb { background: rgba(196, 181, 253, 0.50); border-radius: 3px; }
#hero-shop-modal .fh-content-scroll::-webkit-scrollbar-track { background: transparent; }
#hero-shop-modal .product-card {
    background: rgba(12, 6, 32, 0.62) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    text-shadow: none !important;
}
#hero-shop-modal .product-card .js-product-open-name,
#hero-shop-modal .product-card .text-flag-blue,
#hero-shop-modal .product-card .text-finland-blue {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none !important;
}
#hero-shop-modal .product-card .text-gray-500,
#hero-shop-modal .product-card .text-gray-600,
#hero-shop-modal .product-card .text-gray-700 {
    color: rgba(255, 255, 255, 0.68) !important;
    text-shadow: none !important;
}
#hero-shop-modal .product-card .catalog-price-current {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
}
#hero-shop-modal .product-card .catalog-price-original {
    color: rgba(255, 255, 255, 0.52) !important;
    text-shadow: none !important;
}
#hero-shop-modal .product-card .btn-ghost {
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: none !important;
}
/* (sam-product-grid / sam-product-cell / #sam-sort removed — shop modal is now a slideshow) */
.featured-hero-modal-panel {
    position: relative;
    width: min(92vw, 72rem);
    max-width: 72rem;
    height: min(98vh, 72rem);
    max-height: min(98vh, 72rem);
    padding: 1.25rem 1.5rem 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
    /* Deep navy blue-glass — same palette as #product-modal */
    background: rgba(11, 29, 58, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(142, 174, 226, 0.28) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 28px 64px rgba(2, 6, 23, 0.55),
        0 0 80px rgba(0, 53, 128, 0.28);
    color: #ffffff;
}
/* Prevent .modal-panel { overflow-y: auto } from adding a scroll axis to
   the featured hero modal panel — the ID selector wins the cascade. */
#hero-featured-modal .modal-panel {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding: 1.75rem 1.75rem 0;
}
/* ── Featured-modal ambient orbs ──────────────────────────────────────────── */
.featured-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.featured-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(68px);
    opacity: 0;
    animation-fill-mode: both;
}
.featured-hero-orb--1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(56,130,246,.55) 0%, rgba(0,53,128,.28) 50%, transparent 80%);
    top: -15%; left: -12%;
    animation: fh-orb-drift-1 11s ease-in-out infinite alternate;
    animation-delay: 0s;
}
.featured-hero-orb--2 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(99,163,255,.48) 0%, rgba(30,80,180,.22) 50%, transparent 80%);
    bottom: -18%; right: -10%;
    animation: fh-orb-drift-2 14s ease-in-out infinite alternate;
    animation-delay: -4s;
}
.featured-hero-orb--3 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(167,139,250,.42) 0%, rgba(91,52,200,.18) 50%, transparent 80%);
    top: 30%; right: 8%;
    animation: fh-orb-drift-3 9s ease-in-out infinite alternate;
    animation-delay: -2s;
}
.featured-hero-orb--4 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(34,211,238,.36) 0%, rgba(6,130,150,.16) 50%, transparent 80%);
    bottom: 10%; left: 20%;
    animation: fh-orb-drift-4 13s ease-in-out infinite alternate;
    animation-delay: -7s;
}
@keyframes fh-orb-drift-1 {
    0%   { opacity: .6;  transform: translate(0,    0)   scale(1);    }
    50%  { opacity: .92; transform: translate(3%,   3%)  scale(1.07); }
    100% { opacity: .72; transform: translate(6%,   5%)  scale(1.12); }
}
@keyframes fh-orb-drift-2 {
    0%   { opacity: .55; transform: translate(0,    0)   scale(1);    }
    50%  { opacity: .85; transform: translate(-4%, -2%)  scale(1.05); }
    100% { opacity: .65; transform: translate(-7%, -4%)  scale(1.08); }
}
@keyframes fh-orb-drift-3 {
    0%   { opacity: .48; transform: translate(0,    0)   scale(1);    }
    50%  { opacity: .78; transform: translate(-2%,  4%)  scale(1.09); }
    100% { opacity: .55; transform: translate(-4%,  8%)  scale(1.15); }
}
@keyframes fh-orb-drift-4 {
    0%   { opacity: .42; transform: translate(0,    0)   scale(1);    }
    50%  { opacity: .68; transform: translate(4%,  -3%)  scale(1.06); }
    100% { opacity: .48; transform: translate(8%,  -6%)  scale(1.10); }
}
/* Keep all modal content above the orb layer.
   Exclude .modal-scrollbar so the JS-injected rail keeps position:absolute. */
.featured-hero-modal-panel > *:not(.featured-hero-orbs):not(.modal-scrollbar) {
    position: relative;
    z-index: 1;
}
/* Inner scroll wrapper — scrolls real content while the panel stays
   overflow:hidden so the absolute orbs can't inflate scrollHeight */
.fh-content-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    position: relative;
    /* reserve space so stage bottom never hides behind the glass footer */
    padding-bottom: 1.5rem;
}
.fh-content-scroll.fh-stage-has-visible-stage {
    justify-content: center;
    padding-top: clamp(0.7rem, 1.8vh, 1.25rem);
}
.fh-content-scroll::-webkit-scrollbar { display: none; width: 0; }
/* ── Featured-modal image zoom overlay ───────────────────────────────────── */
.fh-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(4, 10, 26, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity .22s ease;
}
.fh-zoom-overlay.is-visible {
    opacity: 1;
}
.fh-zoom-img {
    display: block;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .75rem;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 28px 64px rgba(2, 6, 23, 0.62),
        0 0 80px rgba(0,53,128,.22);
    transform: scale(0.94);
    transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.fh-zoom-overlay.is-visible .fh-zoom-img {
    transform: scale(1);
}
/* Make images inside featured-hero cards show a zoom cursor */
.featured-hero-card .catalog-zoomable-image {
    cursor: zoom-in !important;
}
/* Fav button: top-right corner of content area below image */
.featured-hero-card .catalog-card-fav-above-body {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
/* Hero modal card button row 2 collapse/expand */
.featured-hero-card .card-row-1 {
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr) 2.3rem;
    align-items: stretch;
}
.featured-hero-card .card-row-1 .js-product-page-link {
    min-width: 0;
}
.featured-hero-card .card-row-1 .js-product-view {
    min-width: 0;
}
.featured-hero-card .card-row-2 {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows 0.28s ease, opacity 0.18s ease;
}
.featured-hero-card .card-row-2.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
}
.featured-hero-card .card-row-2 > * {
    min-height: 0;
    overflow: hidden;
}
.featured-hero-card .card-row-2 > .flex {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.featured-hero-card .card-row-2 .btn-card-action {
    width: 100% !important;
}

/* Hero modal card icon buttons: match catalog grid/list micro-interactions */
#hero-featured-modal .featured-hero-card .btn-card-action:not(:disabled),
#hero-sale-modal .featured-hero-card .btn-card-action:not(:disabled),
#hero-new-modal .featured-hero-card .btn-card-action:not(:disabled),
#hero-shop-modal .featured-hero-card .btn-card-action:not(:disabled) {
    transition: transform .18s ease, background .15s ease, border-color .15s ease;
}
#hero-featured-modal .featured-hero-card .btn-card-action:not(:disabled):hover,
#hero-sale-modal .featured-hero-card .btn-card-action:not(:disabled):hover,
#hero-new-modal .featured-hero-card .btn-card-action:not(:disabled):hover,
#hero-shop-modal .featured-hero-card .btn-card-action:not(:disabled):hover {
    transform: translateY(-2px);
}
#hero-featured-modal .featured-hero-card .btn-card-action:not(:disabled):active,
#hero-sale-modal .featured-hero-card .btn-card-action:not(:disabled):active,
#hero-new-modal .featured-hero-card .btn-card-action:not(:disabled):active,
#hero-shop-modal .featured-hero-card .btn-card-action:not(:disabled):active {
    transform: translateY(1px) scale(0.93);
    transition: transform .08s ease;
}

@keyframes heroEyeRandomBlink {
    0%   { transform: scaleY(1);    }
    32%  { transform: scaleY(1);    }
    48%  { transform: scaleY(0.08); }
    66%  { transform: scaleY(1.08); }
    100% { transform: scaleY(1);    }
}
#hero-featured-modal .featured-hero-card .js-product-view:hover svg,
#hero-sale-modal .featured-hero-card .js-product-view:hover svg,
#hero-new-modal .featured-hero-card .js-product-view:hover svg,
#hero-shop-modal .featured-hero-card .js-product-view:hover svg {
    animation: listEyeOpen 0.36s ease both;
    transform-origin: center;
}
#hero-featured-modal .featured-hero-card .js-product-view.is-idle-blink svg,
#hero-sale-modal .featured-hero-card .js-product-view.is-idle-blink svg,
#hero-new-modal .featured-hero-card .js-product-view.is-idle-blink svg,
#hero-shop-modal .featured-hero-card .js-product-view.is-idle-blink svg {
    animation: heroEyeRandomBlink 0.68s ease both;
    transform-origin: center;
}
#hero-featured-modal .featured-hero-card .js-product-page-link:hover svg,
#hero-sale-modal .featured-hero-card .js-product-page-link:hover svg,
#hero-new-modal .featured-hero-card .js-product-page-link:hover svg,
#hero-shop-modal .featured-hero-card .js-product-page-link:hover svg {
    animation: listLinkNudge 0.34s ease both;
}
#hero-featured-modal .featured-hero-card .js-product-price-history:hover svg,
#hero-sale-modal .featured-hero-card .js-product-price-history:hover svg,
#hero-new-modal .featured-hero-card .js-product-price-history:hover svg,
#hero-shop-modal .featured-hero-card .js-product-price-history:hover svg {
    animation: listChartSpring 0.38s ease both;
    transform-origin: bottom center;
}
#hero-featured-modal .featured-hero-card .js-open-reviews:hover svg,
#hero-sale-modal .featured-hero-card .js-open-reviews:hover svg,
#hero-new-modal .featured-hero-card .js-open-reviews:hover svg,
#hero-shop-modal .featured-hero-card .js-open-reviews:hover svg,
#hero-featured-modal .featured-hero-card .js-leave-review:hover svg,
#hero-sale-modal .featured-hero-card .js-leave-review:hover svg,
#hero-new-modal .featured-hero-card .js-leave-review:hover svg,
#hero-shop-modal .featured-hero-card .js-leave-review:hover svg {
    animation: listStarTwirl 0.40s ease both;
}
#hero-featured-modal .featured-hero-card .js-open-card-comments:hover svg,
#hero-sale-modal .featured-hero-card .js-open-card-comments:hover svg,
#hero-new-modal .featured-hero-card .js-open-card-comments:hover svg,
#hero-shop-modal .featured-hero-card .js-open-card-comments:hover svg {
    animation: listBubblePop 0.38s ease both;
}
#hero-featured-modal .featured-hero-card .js-ask-product:hover svg,
#hero-sale-modal .featured-hero-card .js-ask-product:hover svg,
#hero-new-modal .featured-hero-card .js-ask-product:hover svg,
#hero-shop-modal .featured-hero-card .js-ask-product:hover svg {
    animation: listBubbleBob 0.40s ease both;
}
#hero-featured-modal .featured-hero-card .js-open-qr:hover svg,
#hero-sale-modal .featured-hero-card .js-open-qr:hover svg,
#hero-new-modal .featured-hero-card .js-open-qr:hover svg,
#hero-shop-modal .featured-hero-card .js-open-qr:hover svg {
    animation: gridQrPulse 0.36s ease both;
}
#hero-featured-modal .featured-hero-card .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg,
#hero-sale-modal .featured-hero-card .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg,
#hero-new-modal .featured-hero-card .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg,
#hero-shop-modal .featured-hero-card .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg {
    animation: pmCartBounce 0.42s ease both;
    transform-origin: center;
}
#hero-featured-modal .featured-hero-card .js-card-favourite:hover .catalog-card-fav-icon,
#hero-sale-modal .featured-hero-card .js-card-favourite:hover .catalog-card-fav-icon,
#hero-new-modal .featured-hero-card .js-card-favourite:hover .catalog-card-fav-icon,
#hero-shop-modal .featured-hero-card .js-card-favourite:hover .catalog-card-fav-icon,
#hero-featured-modal .featured-hero-card .catalog-card-fav-btn:hover .catalog-card-fav-icon,
#hero-sale-modal .featured-hero-card .catalog-card-fav-btn:hover .catalog-card-fav-icon,
#hero-new-modal .featured-hero-card .catalog-card-fav-btn:hover .catalog-card-fav-icon,
#hero-shop-modal .featured-hero-card .catalog-card-fav-btn:hover .catalog-card-fav-icon {
    animation: listHeartPump 0.38s ease both;
}

@media (prefers-reduced-motion: reduce) {
    #hero-featured-modal .featured-hero-card .btn-card-action:hover svg,
    #hero-sale-modal .featured-hero-card .btn-card-action:hover svg,
    #hero-new-modal .featured-hero-card .btn-card-action:hover svg,
    #hero-shop-modal .featured-hero-card .btn-card-action:hover svg,
    #hero-featured-modal .featured-hero-card .js-product-view.is-idle-blink svg,
    #hero-sale-modal .featured-hero-card .js-product-view.is-idle-blink svg,
    #hero-new-modal .featured-hero-card .js-product-view.is-idle-blink svg,
    #hero-shop-modal .featured-hero-card .js-product-view.is-idle-blink svg {
        animation: none !important;
    }
}

.featured-hero-card .js-card-row2-toggle {
    flex: none !important;
    width: 2.3rem !important;
    height: 2.3rem !important;
    min-width: 2.3rem !important;
    max-width: 2.3rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    color: #000 !important;
}
.featured-hero-card .js-card-row2-toggle:hover,
.featured-hero-card .js-card-row2-toggle:focus-visible {
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 0 1px rgba(0,0,0,0) !important;
}
.featured-hero-card .js-card-row2-toggle .cttr-arrow,
.featured-hero-card .js-card-row2-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #000 !important;
    stroke: #000 !important;
    stroke-width: 3.2;
    transition: transform 0.2s ease-out;
}
.featured-hero-card .js-card-row2-toggle.is-open svg {
    transform: rotate(180deg);
}
/* Hidden everywhere except mini-grid (overridden by body.view-mini-grid rule) */
.mini-grid-expand-btn { display: none; }
.featured-hero-card .mini-grid-expand-btn {
    display: none !important;
}
#hero-featured-modal .featured-hero-card .js-card-row2-toggle,
#hero-sale-modal .featured-hero-card .js-card-row2-toggle,
#hero-new-modal .featured-hero-card .js-card-row2-toggle,
#hero-shop-modal .featured-hero-card .js-card-row2-toggle {
    color: #fff !important;
}
#hero-featured-modal .featured-hero-card .js-card-row2-toggle .cttr-arrow,
#hero-featured-modal .featured-hero-card .js-card-row2-toggle svg,
#hero-sale-modal .featured-hero-card .js-card-row2-toggle .cttr-arrow,
#hero-sale-modal .featured-hero-card .js-card-row2-toggle svg,
#hero-new-modal .featured-hero-card .js-card-row2-toggle .cttr-arrow,
#hero-new-modal .featured-hero-card .js-card-row2-toggle svg,
#hero-shop-modal .featured-hero-card .js-card-row2-toggle .cttr-arrow,
#hero-shop-modal .featured-hero-card .js-card-row2-toggle svg {
    color: #fff !important;
    stroke: #fff !important;
}
/* Ensure bottom row is always visible */
.featured-hero-card > div.flex:last-child {
    display: flex !important;
}
/* ── Footer close button ── */
.fh-footer-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    padding: .04rem 1.25rem .06rem;
    border-top: 1px solid rgba(142, 174, 226, 0.18);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: rgba(11, 29, 58, 0.52);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
.fh-footer-close-btn {
    padding: .02rem .38rem;
    font-size: .55rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.4);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.fh-footer-close-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(142, 174, 226, 0.7);
    color: #fff;
    transform: none;
}
.fh-footer-top-btn {
    padding: .02rem .28rem;
    font-size: .55rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.25);
    background: transparent;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.fh-footer-top-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(142, 174, 226, 0.5);
    color: rgba(255,255,255,0.85);
}
/* Autoplay bar — thin strip pinned to the top edge of the footer */
.fh-footer-close { position: relative; }
.fh-autoplay-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}
.fh-autoplay-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
}
.fh-autoplay-bar-fill.is-running {
    animation: fh-ap-fill var(--fh-ap-dur, 5s) linear forwards;
}
@keyframes fh-ap-fill {
    from { width: 0 }
    to   { width: 100% }
}
/* Autoplay controls in footer */
.fh-autoplay-controls {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.fh-autoplay-select {
    font-size: .5rem;
    padding: .02rem .18rem;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    outline: none;
}
.fh-autoplay-select:hover {
    border-color: rgba(142, 174, 226, 0.6);
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.fh-autoplay-toggle {
    font-size: .52rem;
    padding: .02rem .22rem;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.3);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.fh-autoplay-toggle:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
/* Full-screen button (base, kept for any footer remnants) */
.fh-fullscreen-btn {
    font-size: .58rem;
    padding: .02rem .28rem;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.25);
    background: transparent;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.fh-fullscreen-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border-color: rgba(142, 174, 226, 0.5);
}
/* Header controls group */
.fh-header-controls {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: .6rem;
}
/* Larger header variants */
.fh-autoplay-select--header {
    font-size: .75rem;
    padding: 0;
    width: 1.48rem;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    outline: none;
    transition: background .15s, border-color .15s, color .15s;
}
.fh-autoplay-select--header:hover {
    border-color: rgba(142, 174, 226, 0.6);
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.fh-autoplay-toggle--header {
    font-size: .95rem;
    padding: .15rem .32rem;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.fh-autoplay-toggle--header:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.fh-fullscreen-btn--header {
    font-size: .95rem;
    padding: .15rem .32rem;
    height: 1.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}
.fh-fullscreen-btn--header:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(142, 174, 226, 0.6);
}
/* ── Full-screen overlay ─────────────────────────────────────────────────── */
.fh-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(4, 10, 26, 0.96);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.fh-fullscreen-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}
.fhfs-counter {
    position: absolute;
    top: .85rem;
    left: 1.1rem;
    font-size: .65rem;
    color: rgba(148, 163, 184, 0.5);
    pointer-events: none;
    user-select: none;
}
.fhfs-close-btn {
    position: absolute;
    top: .65rem;
    right: .9rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: .85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s, color .15s;
}
.fhfs-close-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.fhfs-back-btn {
    position: absolute;
    top: .65rem;
    left: .9rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: .22rem .75rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .3rem;
    z-index: 2;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.4;
}
.fhfs-back-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
}
.fhfs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    color: rgba(255,255,255,0.65);
    border-radius: 50%;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    line-height: 1;
    transition: background .15s, color .15s, border-color .15s;
}
.fhfs-nav:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.fhfs-nav--prev { left: .65rem; }
.fhfs-nav--next { right: .65rem; }
.fhfs-content {
    max-width: min(94vw, 1380px);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    padding: 0 4.5rem;
    height: calc(100vh - 4.5rem);
    max-height: calc(100vh - 4.5rem);
    overflow: hidden;
    overflow-x: clip;
}
.fhfs-image-wrap {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding: .5rem 0;
    overflow: hidden;
}
/* Image at natural resolution, capped to viewport — no forced stretching */
.fhfs-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 5.5rem);
    object-fit: contain;
    border-radius: .9rem;
    box-shadow: 0 14px 65px rgba(0,0,0,0.7), 0 0 50px rgba(96, 165, 250, 0.07);
}
.fhfs-image-placeholder {
    font-size: 4rem;
    opacity: .3;
}
.fhfs-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    padding-top: .6rem;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(142,174,226,0.35) transparent;
    padding-right: .5rem;
}
.fhfs-category {
    font-size: .68rem;
    color: #7dd3fc;
    text-transform: uppercase;
    letter-spacing: .09em;
    text-shadow: 0 0 10px rgba(125, 211, 252, 0.55);
}
.fhfs-name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.16;
}
/* Needs two-class specificity + !important to beat: h2 { color: var(--finland-blue) !important } */
.fh-fullscreen-overlay .fhfs-name {
    color: #f8fafc !important;
    text-shadow: 0 0 32px rgba(248, 250, 252, 0.35), 0 0 10px rgba(186, 230, 253, 0.22) !important;
}
.fhfs-rating { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
.fhfs-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.fhfs-price {
    font-size: 1.1rem;
}
.fhfs-price .catalog-price-current {
    color: #e2e8f0 !important;
    text-shadow: 0 0 14px rgba(226, 232, 240, 0.3);
    font-size: 1.2rem;
    font-weight: 700;
}
.fhfs-price .catalog-price-original {
    color: rgba(148, 163, 184, 0.6) !important;
    text-decoration: line-through;
    font-size: .88rem;
}
/* Active sale — highlight price in orange */
.fhfs-price .catalog-price-current:not(:only-child) {
    color: #fb923c !important;
    text-shadow: 0 0 14px rgba(251, 146, 60, 0.45) !important;
}
.fhfs-stock { font-size: .82rem; }
.fh-fullscreen-overlay .catalog-stock-text--good {
    color: #4ade80 !important;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.55) !important;
}
.fh-fullscreen-overlay .catalog-stock-text--bad {
    color: #f87171 !important;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.55) !important;
}
.fh-fullscreen-overlay .catalog-featured-badge {
    background: rgba(251, 146, 60, 0.3) !important;
    border-color: rgba(251, 191, 36, 0.65) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.45), inset 0 0 5px rgba(251, 191, 36, 0.1) !important;
}
.fh-fullscreen-overlay .catalog-sale-badge,
.fh-fullscreen-overlay .catalog-sale-badge--overlay {
    background: rgba(239, 68, 68, 0.28) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #fca5a5 !important;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.45) !important;
}
.fh-fullscreen-overlay .catalog-bought-before {
    color: #67e8f9 !important;
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.5) !important;
}
.fhfs-desc {
    font-size: .8rem;
    color: rgba(186, 230, 253, 0.72);
    line-height: 1.6;
    text-shadow: 0 0 8px rgba(186, 230, 253, 0.15);
}
.fhfs-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .4rem;
}
.fhfs-action-btn { font-size: .92rem; padding: .45rem .78rem; width: 50% !important; text-align: center; display: block !important; }
/* Fullscreen favourite heart button */
.fhfs-fav-btn {
    background: rgba(248,113,113,0.1);
    border: 1px solid rgba(248,113,113,0.45);
    border-radius: 50%;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: #f87171;
    text-shadow: 0 0 8px rgba(248,113,113,0.65);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    padding: 0;
    margin-top: .25rem;
    flex-shrink: 0;
}
.fhfs-fav-btn:hover { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.75); box-shadow: 0 0 10px rgba(248,113,113,0.35); }
.fhfs-fav-btn.is-favourite { color: #4ade80; border-color: rgba(74,222,128,0.55); background: rgba(74,222,128,0.1); text-shadow: 0 0 8px rgba(74,222,128,0.65); }
.fhfs-fav-btn.is-favourite:hover { background: rgba(74,222,128,0.2); border-color: rgba(74,222,128,0.75); box-shadow: 0 0 10px rgba(74,222,128,0.35); }
/* Fullscreen quick comment form */
.fhfs-comment-wrap {
    margin-top: .75rem;
    border-top: 1px solid rgba(142,174,226,0.18);
    padding-top: .65rem;
}
.fhfs-comment-form { display: flex; flex-direction: column; gap: .4rem; }
.fhfs-comment-textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(142,174,226,0.25);
    border-radius: .45rem;
    color: #e2e8f0;
    font-size: .78rem;
    padding: .4rem .55rem;
    resize: vertical;
    min-height: 3.5rem;
    outline: none;
    transition: border-color .15s;
}
.fhfs-comment-textarea::placeholder { color: rgba(186,230,253,0.45); }
.fhfs-comment-textarea:focus { border-color: rgba(147,197,253,0.55); }
.fhfs-comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.fhfs-comment-status { font-size: .72rem; flex: 1; }
.fhfs-comment-status--ok  { color: #6ee7b7; }
.fhfs-comment-status--err { color: #f87171; }
.fhfs-comment-submit { font-size: .72rem; padding: .25rem .65rem; }
.fhfs-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
}
.fhfs-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
}
.fhfs-progress-fill.is-running {
    animation: fh-ap-fill var(--fh-ap-dur, 5s) linear forwards;
}
.featured-hero-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    border-bottom: 1px solid rgba(142, 174, 226, 0.22);
    padding-bottom: .55rem;
    margin-bottom: .55rem;
    flex-shrink: 0;
}
.featured-hero-modal-header .modal-close {
    flex-shrink: 0;
    margin-top: .1rem;
    margin-left: .4rem;
}
.featured-hero-modal-title-wrap {
    min-width: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.hero-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    transition: background 0.18s ease, transform 0.15s ease;
}
.hero-modal-icon:hover { background: rgba(255,255,255,0.1); transform: scale(1.18); }
#hero-featured-modal .hero-modal-icon { color: #f9c846; filter: drop-shadow(0 1px 6px rgba(249,200,70,0.55)); }
#hero-sale-modal     .hero-modal-icon { color: #4ade80; filter: drop-shadow(0 1px 6px rgba(74,222,128,0.55)); }
#hero-new-modal      .hero-modal-icon { color: #ff6b8a; filter: drop-shadow(0 1px 6px rgba(255,107,138,0.55)); }
#hero-new-modal .js-card-favourite.is-favourite { color: #22c55e; }
/* QR modal opens on top of hero modals (hero modals use z-index 300) */
#catalog-qr-modal.open { z-index: 350 !important; }
/* #product-modal elevated above full-screen overlay (z-index 350) when it is active */
body.fhfs-is-open #product-modal { z-index: var(--z-hero-product-modal) !important; }
/* ── Hero filter area (category + subcategory selects, toggled by + button) ── */
.fh-filters-area {
    display: none;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.fh-filters-area.is-open { display: flex; }
/* ── Filter toggle button (⊞ icon in header controls) ── */
.fh-filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.48rem;
    font-size: .95rem;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(255,255,255,0.07);
    cursor: pointer;
    padding: .15rem .32rem;
    border-radius: 6px;
    color: rgba(255,255,255,0.75);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fh-filter-toggle-btn:hover { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(142, 174, 226, 0.6); }
.fh-filter-toggle-btn.is-active { color: #fff; background: rgba(255,255,255,0.16); }
/* ── Load more button (inline beside product counter) ── */
.fh-load-more-btn {
    display: inline-flex;
    align-items: center;
    height: 1.2rem;
    padding: 0 0.45rem;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    color: rgba(255,255,255,0.82);
    font-size: 0.67rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
    vertical-align: middle;
}
.fh-load-more-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.52); }
/* ── Category filter pills ── */
.fh-cat-pills-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    gap: .2rem;
}
.featured-hero-cat-pills {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    padding: 0 .1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.featured-hero-cat-pills::-webkit-scrollbar { display: none; }
.fh-cat-scroll-btn {
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(142, 174, 226, 0.32);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, border-color .14s, opacity .14s;
}
.fh-cat-scroll-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(142,174,226,0.62);
    color: #fff;
}
.fh-cat-scroll-btn--hidden {
    opacity: 0;
    pointer-events: none;
}
.fh-cat-pill {
    flex-shrink: 0;
    padding: .22rem .65rem;
    border-radius: 999px;
    border: 1.5px solid rgba(142,174,226,0.35);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.5;
}
.fh-cat-pill:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(142,174,226,0.6);
    color: #fff;
}
.fh-cat-pill.is-active {
    background: rgba(59,130,246,0.35);
    border-color: #60a5fa;
    color: #fff;
    box-shadow: 0 0 10px rgba(96,165,250,0.45);
}

.featured-hero-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(99, 163, 255, 0.55);
}
.featured-hero-modal-counter {
    margin: .2rem 0 0;
    color: rgba(255,255,255,0.7);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.featured-hero-modal-status {
    min-height: 22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
}
/* Stage: sits at its natural card height, centred vertically in the scroll area */
.featured-hero-modal-stage {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
}
.featured-hero-modal-viewport {
    flex: 1 1 0%;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    border-radius: 1rem;
    padding: 0.5rem 0.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-hero-modal-viewport.is-dragging {
    cursor: grabbing;
}
/* Track holds exactly 3 visible slots at all times via CSS grid */
.featured-hero-modal-track {
    display: grid;
    grid-template-columns: 1fr 1.62fr 1fr;
    gap: 0.6rem;
    align-items: center;
    perspective: 900px;
    perspective-origin: 50% 42%;
    will-change: transform;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    zoom: 0.82;
}
/* Each slot: one card, always visible */
.featured-hero-modal-slide {
    padding: .15rem .15rem .2rem;
    transform-style: preserve-3d;
    transition: transform .48s cubic-bezier(.22, 1, .36, 1),
                opacity .38s ease,
                box-shadow .38s ease;
}
/* Side cards — receded in 3-D space, tilted away */
.featured-hero-modal-slide--prev {
    opacity: 0.48;
    transform: scale(0.78) rotateY(22deg) translateX(-6%) translateZ(-80px);
    cursor: pointer;
    filter: brightness(0.78) saturate(0.7);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1),
                opacity .3s ease, filter .3s ease, box-shadow .3s ease;
    box-shadow:
        0 0 24px 5px rgba(56, 139, 253, 0.34),
        0 0 60px 10px rgba(0, 53, 128, 0.28),
        0 16px 36px rgba(0, 0, 0, 0.30);
}
.featured-hero-modal-slide--next {
    opacity: 0.48;
    transform: scale(0.78) rotateY(-22deg) translateX(6%) translateZ(-80px);
    cursor: pointer;
    filter: brightness(0.78) saturate(0.7);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1),
                opacity .3s ease, filter .3s ease, box-shadow .3s ease;
    box-shadow:
        0 0 24px 5px rgba(56, 139, 253, 0.34),
        0 0 60px 10px rgba(0, 53, 128, 0.28),
        0 16px 36px rgba(0, 0, 0, 0.30);
}
.featured-hero-modal-slide--prev:hover {
    opacity: 0.82;
    transform: scale(0.84) rotateY(12deg) translateX(-3%) translateZ(-40px);
    filter: brightness(0.92) saturate(0.88);
    box-shadow:
        0 0 34px 8px rgba(56, 139, 253, 0.50),
        0 0 80px 16px rgba(0, 53, 128, 0.40),
        0 22px 48px rgba(0, 0, 0, 0.34);
}
.featured-hero-modal-slide--next:hover {
    opacity: 0.82;
    transform: scale(0.84) rotateY(-12deg) translateX(3%) translateZ(-40px);
    filter: brightness(0.92) saturate(0.88);
    box-shadow:
        0 0 34px 8px rgba(56, 139, 253, 0.50),
        0 0 80px 16px rgba(0, 53, 128, 0.40),
        0 22px 48px rgba(0, 0, 0, 0.34);
}
/* Centre card — fully forward, no tilt, prominent shadow + blue glow */
.featured-hero-modal-slide--active {
    opacity: 1;
    transform: scale(1.03) rotateY(0deg) translateZ(40px);
    z-index: 2;
    filter: brightness(1) saturate(1);
    box-shadow:
        0 0 32px 6px rgba(56, 139, 253, 0.45),
        0 0 80px 12px rgba(0, 53, 128, 0.38),
        0 24px 60px rgba(0, 0, 0, 0.32);
}

/* ======================================================================= */
/*  * ◀ End of   §52b  Price History                                       */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §27b  Fix: Image Display in Featured Modal Cards          */
/* ======================================================================= */

/* ---- Fix image display inside featured modal cards ---- */
/* The product-card:hover translateY lift fights the slide scale transform */
#hero-featured-modal .product-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 53, 128, 0.18);
}
/* Keep modal card images contained instead of inheriting grid-card cover crops. */
#hero-featured-modal .catalog-media-wrap {
    height: auto !important;
    position: relative !important;
    overflow: hidden;
}
#hero-featured-modal .catalog-media-wrap > img.catalog-zoomable-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 4/3 !important;
    background: rgba(255,255,255,0.06) !important;
    cursor: zoom-in !important;
}
/* Nav arrows — positioned beside the viewport */
.featured-hero-modal-nav {
    flex: 0 0 auto;
    z-index: 2;
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    padding: 0 !important;
    border-radius: 999px;
    font-size: 1.65rem;
    line-height: 1;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22);
    position: static;
    transform: none;
    /* Kill the .btn-ghost:hover translateY nudge for nav arrows */
    margin: 0 !important;
}
.featured-hero-modal-nav:hover {
    transform: none !important;
    margin: 0 !important;
}
/* ── Featured modal: pin arrows + custom scrollbar ── */
#hero-featured-modal .fh-cat-pill {
    color: #bfdbfe;
    border-color: rgba(147, 197, 253, 0.45);
    background: rgba(255,255,255,0.09);
}
#hero-featured-modal .fh-cat-pill:hover {
    color: #eff6ff;
    border-color: rgba(147, 197, 253, 0.75);
    background: rgba(255,255,255,0.16);
}
#hero-featured-modal .fh-cat-pill.is-active {
    background: rgba(29, 78, 216, 0.52);
    border-color: #2563eb;
    color: #eff6ff;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.55);
}
div.featured-hero-modal-slide .catalog-flag-badge {
    color: var(--finland-blue-400) !important;
}
/* ── Featured modal: glass nav arrows, fixed to panel centre ── */
#hero-featured-modal .featured-hero-modal-stage { position: static; }
#hero-featured-modal .featured-hero-modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 30;
    margin: 0;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    background: rgba(37, 99, 235, 0.28) !important;
    border: 1px solid rgba(99, 163, 255, 0.60) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.38), inset 0 0 0 1px rgba(147, 197, 253, 0.14) !important;
}
#hero-featured-modal .featured-hero-modal-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(37, 99, 235, 0.52) !important;
    border-color: rgba(147, 197, 253, 0.85) !important;
    box-shadow: 0 10px 32px rgba(37, 99, 235, 0.58), inset 0 0 0 1px rgba(147, 197, 253, 0.24) !important;
}
#hero-featured-modal .featured-hero-modal-nav--prev { left: 0.618rem; right: auto; }
#hero-featured-modal .featured-hero-modal-nav--next { right: 0.618rem; left: auto; }
#hero-featured-modal .featured-hero-modal-viewport { margin-left: 3.2rem; margin-right: 3.2rem; }
#hero-featured-modal .fh-content-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 163, 255, 0.50) transparent;
}
#hero-featured-modal .fh-content-scroll::-webkit-scrollbar { display: block !important; width: 6px; }
#hero-featured-modal .fh-content-scroll::-webkit-scrollbar-thumb { background: rgba(99, 163, 255, 0.50); border-radius: 3px; }
#hero-featured-modal .fh-content-scroll::-webkit-scrollbar-track { background: transparent; }
/* Card text on dark bg — mirror #product-modal overrides */
#hero-featured-modal .text-gray-500,
#hero-featured-modal .text-gray-600,
#hero-featured-modal .text-gray-700 { color: #cbd5e1 !important; }
#hero-featured-modal .text-flag-blue,
#hero-featured-modal .text-finland-blue { color: #e2e8f0 !important; }
#hero-featured-modal .catalog-price-current { color: #ffffff !important; text-shadow: 0 0 10px rgba(99,163,255,.5); }
#hero-featured-modal .catalog-price-original { color: rgba(255,255,255,0.52) !important; }
#hero-featured-modal .catalog-featured-badge {
    background: rgba(251, 146, 60, 0.38) !important;
    border-color: rgba(251, 191, 36, 0.75) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.55), inset 0 0 6px rgba(251, 191, 36, 0.15) !important;
}
#hero-featured-modal .catalog-flag-badge--sale,
#hero-featured-modal .catalog-sale-badge {
    background: rgba(248, 113, 113, 0.32) !important;
    border-color: rgba(251, 113, 133, 0.75) !important;
    color: #fb7185 !important;
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.55), inset 0 0 6px rgba(251, 113, 133, 0.15) !important;
}
#hero-featured-modal .catalog-flag-badge--cat {
    background: rgba(99, 163, 255, 0.14) !important;
    border-color: rgba(99, 163, 255, 0.35) !important;
    color: var(--finland-blue-400) !important;
}
#hero-featured-modal button.catalog-flag-badge--cat:hover {
    background: rgba(99, 163, 255, 0.24) !important;
    color: #bfdbfe !important;
}
#hero-featured-modal .catalog-sale-badge--overlay {
    background: #e11d48 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.7) !important;
}
#hero-featured-modal .catalog-stock-text--good {
    color: #4ade80 !important;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.7) !important;
}
#hero-featured-modal .catalog-stock-text--bad {
    color: #f87171 !important;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.7) !important;
}
#hero-featured-modal .catalog-bought-before {
    color: #67e8f9 !important;
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.65) !important;
}
/* Hide ♡ outline char and replace with filled ♥ via ::before */
#hero-featured-modal .catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon {
    font-size: 0 !important;
    color: transparent !important;
}
#hero-featured-modal .catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon::before {
    content: '♥';
    font-size: 1.05rem;
    color: rgba(251, 113, 133, 0.65);
    display: inline-block;
    transition: color .18s ease, filter .18s ease;
}
#hero-featured-modal .catalog-card-fav-btn:not(.is-favourite):hover .catalog-card-fav-icon::before {
    color: #fb7185;
    filter: drop-shadow(0 0 5px rgba(251, 113, 133, 0.8));
}
#hero-featured-modal .catalog-card-fav-btn.is-favourite .catalog-card-fav-icon {
    color: #4ade80 !important;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.85)) !important;
}
#hero-featured-modal .catalog-rating-summary,
#hero-featured-modal .catalog-rating-summary span { color: #ffffff !important; }
#hero-featured-modal .catalog-rating-summary .text-amber-500 { color: #fcd34d !important; }
/* Product card inside modal — dark glass on deep navy panel */
#hero-featured-modal .product-card {
    background: rgba(2, 8, 28, 0.42) !important;
    border-color: rgba(99, 163, 255, 0.22) !important;
}
/* Nav close button */
#hero-featured-modal .modal-close {
    color: rgba(255,255,255,0.75) !important;
    border-color: rgba(142, 174, 226, 0.3) !important;
}
#hero-featured-modal .modal-close:hover {
    color: #ffffff !important;
}
/* ── Sale hero modal — card color overrides (same dark-on-dark pattern) ── */
#hero-sale-modal .product-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 53, 128, 0.18);
}
#hero-sale-modal .catalog-media-wrap {
    height: auto !important;
    position: relative !important;
    overflow: hidden;
}
#hero-sale-modal .catalog-media-wrap > img.catalog-zoomable-image {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    aspect-ratio: 4/3 !important;
    background: rgba(255,255,255,0.06) !important;
    cursor: zoom-in !important;
}
#hero-sale-modal .text-gray-500,
#hero-sale-modal .text-gray-600,
#hero-sale-modal .text-gray-700 { color: #dbeafe !important; }
#hero-sale-modal .text-flag-blue,
#hero-sale-modal .text-finland-blue { color: #e0f2fe !important; }
#hero-sale-modal .catalog-price-current { color: #ffffff !important; text-shadow: 0 0 10px rgba(147,197,253,.6); }
#hero-sale-modal .catalog-price-original { color: rgba(255,255,255,0.58) !important; }
#hero-sale-modal .catalog-featured-badge {
    background: rgba(251, 146, 60, 0.38) !important;
    border-color: rgba(251, 191, 36, 0.75) !important;
    color: #fbbf24 !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.55), inset 0 0 6px rgba(251, 191, 36, 0.15) !important;
}
#hero-sale-modal .catalog-flag-badge--sale,
#hero-sale-modal .catalog-sale-badge {
    background: rgba(248, 113, 113, 0.32) !important;
    border-color: rgba(251, 113, 133, 0.75) !important;
    color: #fb7185 !important;
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.55), inset 0 0 6px rgba(251, 113, 133, 0.15) !important;
}
#hero-sale-modal .catalog-sale-badge--overlay {
    background: #e11d48 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.7) !important;
}
#hero-sale-modal .catalog-stock-text--good {
    color: #4ade80 !important;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.7) !important;
}
#hero-sale-modal .catalog-stock-text--bad {
    color: #f87171 !important;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.7) !important;
}
#hero-sale-modal .catalog-bought-before {
    color: #67e8f9 !important;
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.65) !important;
}
/* Hide ♡ outline char and replace with filled ♥ via ::before */
#hero-sale-modal .catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon {
    font-size: 0 !important;
    color: transparent !important;
}
#hero-sale-modal .catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon::before {
    content: '♥';
    font-size: 1.05rem;
    color: rgba(251, 113, 133, 0.65);
    display: inline-block;
    transition: color .18s ease, filter .18s ease;
}
#hero-sale-modal .catalog-card-fav-btn:not(.is-favourite):hover .catalog-card-fav-icon::before {
    color: #fb7185;
    filter: drop-shadow(0 0 5px rgba(251, 113, 133, 0.8));
}
#hero-sale-modal .catalog-card-fav-btn.is-favourite .catalog-card-fav-icon {
    color: #4ade80 !important;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.85)) !important;
}
#hero-sale-modal .catalog-rating-summary,
#hero-sale-modal .catalog-rating-summary span { color: #ffffff !important; }
#hero-sale-modal .catalog-rating-summary .text-amber-500 { color: #fcd34d !important; }
#hero-sale-modal .product-card {
    background: rgba(5, 15, 80, 0.38) !important;
    border-color: rgba(147, 197, 253, 0.22) !important;
}
#hero-sale-modal .modal-close {
    color: rgba(255,255,255,0.80) !important;
    border-color: rgba(147, 197, 253, 0.35) !important;
}
#hero-sale-modal .modal-close:hover {
    color: #ffffff !important;
}

/* ======================================================================= */
/*  * ◀ End of   §27b  Fix: Image Display in Featured Modal Cards          */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §37  Featured & Sale Badges                               */
/* ======================================================================= */

/* ---- Featured badge (card / table overlay) ---- */
.catalog-featured-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;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.22);
    color: #b45309;
}
.catalog-featured-badge--overlay {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    box-shadow: 0 12px 26px rgba(180, 83, 9, 0.28);
    padding: .38rem .65rem;
}
/* Position the featured badge wrap to the right so it doesn't clash with the sale badge */
.catalog-featured-badge-wrap--overlay {
    position: absolute;
    top: .7rem;
    right: .7rem;
    left: auto;
    z-index: 2;
    pointer-events: none;
}
/* In the datatable list-view thumbnail, stack badges vertically and halve them */
.catalog-media-wrap--thumb .catalog-sale-badge-wrap--overlay,
.catalog-media-wrap--thumb .catalog-featured-badge-wrap--overlay {
    top: .25rem;
    left: .25rem;
    right: auto;
    transform-origin: top left;
    transform: scale(0.5);
    pointer-events: none;
}
.catalog-media-wrap--thumb .catalog-featured-badge-wrap--overlay {
    top: calc(.25rem + 1.35rem); /* offset below the sale badge at 50% scale */
    left: .25rem;
    right: auto;
}

/* ======================================================================= */
/*  * ◀ End of   §37  Featured & Sale Badges                               */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §38  Stock Text                                           */
/* ======================================================================= */

/* ---- Stock text on PHP-rendered cards (CSS class replaces inline style) ---- */
.catalog-stock-text--good { color: #047857; }
.catalog-stock-text--bad  { color: #b91c1c; }

/* ======================================================================= */
/*  * ◀ End of   §38  Stock Text                                           */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §41  Category Chip Background Thumbnails                  */
/* ======================================================================= */

/* ---- Category chip: 350x280 thumbnail as background with gradient overlay ---- */
/* Chips that have --chip-card-url set get the product photo as bg, */
/* with a semi-transparent blue gradient on top so text stays legible.        */
.category-chip {
    --chip-overlay: rgba(0, 35, 90, 0.68);
    background-color: var(--finland-blue);
    background-image: linear-gradient(var(--chip-overlay), var(--chip-overlay)), var(--chip-card-url, none);
    background-size: cover;
    background-position: center;
}
.stock-pill {
    display: inline-block;
    padding: 0 .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.stock-pill--ok   { background: #dcfce7; color: #166534; }
.stock-pill--low  { background: #fef9c3; color: #854d0e; }
.stock-pill--zero { background: #fee2e2; color: #991b1b; }

/* ======================================================================= */
/*  * ◀ End of   §41  Category Chip Background Thumbnails                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §41b  Category Directory (department-style columns)       */
/* ======================================================================= */

/*
 * Department-style "Category Directory" rendered above the catalog. One
 * column per root category; each column lists its top subcategories with
 * inclusive product counts. Click a header (or sub row) to filter the
 * catalog and smooth-scroll down. Replaces the legacy chip grid + floating
 * overlay UI. Active state mirrors the catalog filter so users keep their
 * bearings as they scroll.
 *
 * Layout / box model / typography / visual / action.
 */

.cat-dir {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 2px;
    color: var(--ink);
}

.catalog-heading-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    position: relative;
}

.catalog-heading-row__main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.catalog-cat-heading-label {
    margin: 0;
    white-space: nowrap;
    text-decoration: none;
}

.cat-simple-view-link {
    --cat-simple-accent: var(--finland-blue, #003580);
    display: inline-grid;
    grid-template-columns: 3.65rem minmax(0, auto);
    align-items: center;
    gap: 0.62rem;
    min-height: 3.25rem;
    max-width: 17rem;
    padding: 0.34rem 0.7rem 0.34rem 0.4rem;
    border: 1px solid rgba(0, 53, 128, 0.18);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 22px -18px rgba(0, 53, 128, 0.45);
    transform-origin: left center;
    transition: max-width .22s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cat-simple-view-link:hover,
.cat-simple-view-link:focus-visible {
    max-width: 22rem;
    border-color: rgba(0, 53, 128, 0.38);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 34px -22px rgba(0, 53, 128, 0.55);
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

.cat-simple-view-link__preview {
    position: relative;
    display: block;
    width: 3.65rem;
    height: 2.45rem;
    overflow: hidden;
    border: 1px solid rgba(0, 53, 128, 0.14);
    border-radius: 0.48rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.9));
    transform-origin: left center;
    transition: transform .22s ease, border-color .18s ease;
}

.cat-simple-view-link__preview::before {
    content: "";
    position: absolute;
    inset: 0.38rem 0.42rem;
    border-left: 1px solid rgba(0, 53, 128, 0.22);
    opacity: 0.8;
}

.cat-simple-view-link__tree {
    position: absolute;
    inset: 0.38rem 0.46rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.catalog-root-rail {
    width: 100vw;
    max-width: none;
    max-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.32s ease, opacity 0.22s ease;
}
.catalog-root-rail.is-visible {
    max-height: 8rem;
    opacity: 1;
    pointer-events: auto;
}

.catalog-root-rail__track {
    display: flex;
    gap: 0.48rem;
    width: 100%;
    max-width: none;
    padding-inline: max(1rem, calc((100vw - var(--container, 1200px)) / 2));
    padding-block: 0.1rem 0.42rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
}

.catalog-root-rail__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.catalog-root-rail__chip {
    flex: 0 0 9.6rem;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    min-height: 3.65rem;
    padding: 0.32rem 0.48rem 0.32rem 0.32rem;
    border: 1px solid rgba(0, 53, 128, 0.22);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    text-align: left;
    scroll-snap-align: start;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.catalog-root-rail__chip:hover,
.catalog-root-rail__chip:focus-visible {
    border-color: rgba(0, 53, 128, 0.38);
    background: #fff;
    color: var(--finland-blue, #003580);
    outline: none;
}

.catalog-root-rail__chip.is-active {
    border-color: rgba(0, 53, 128, 0.72);
    background: rgba(0, 53, 128, 0.1);
    color: var(--finland-blue, #003580);
}

.catalog-root-rail__chip.is-empty {
    opacity: 0.68;
}

.catalog-root-rail__thumb {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(0, 53, 128, 0.12);
    border-radius: 2px;
    background: rgba(0, 53, 128, 0.06);
    object-fit: cover;
    pointer-events: none;
}

.catalog-root-rail__thumb--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 53, 128, 0.78);
    font-size: 1.05rem;
    font-weight: 800;
}

.catalog-root-rail__thumb--virtual {
    color: var(--finland-blue, #003580);
}

.catalog-root-rail__thumb--virtual svg {
    width: 2rem;
    height: 2rem;
}

.catalog-root-rail__fallback-symbol {
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1;
}

.catalog-root-rail__name {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.16;
    text-overflow: ellipsis;
}

.cat-simple-view-link__root,
.cat-simple-view-link__branch {
    display: block;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(0, 53, 128, 0.72);
}

.cat-simple-view-link__root {
    width: 1.55rem;
}

.cat-simple-view-link__branch {
    width: 2.45rem;
    margin-left: 0.52rem;
    background: rgba(0, 53, 128, 0.38);
}

.cat-simple-view-link__branch--short {
    width: 1.9rem;
}

.cat-simple-view-link__branch--tiny {
    width: 1.25rem;
}

.cat-simple-view-link__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.cat-simple-view-link:hover .cat-simple-view-link__preview,
.cat-simple-view-link:focus-visible .cat-simple-view-link__preview {
    border-color: rgba(0, 53, 128, 0.28);
    transform: scale(1.08);
}

.cat-simple-view-link__title {
    color: var(--cat-simple-accent);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.cat-simple-view-link__text {
    max-width: 0;
    overflow: hidden;
    color: var(--muted-2, #6b7280);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .22s ease, opacity .18s ease;
}

.cat-simple-view-link:hover .cat-simple-view-link__text,
.cat-simple-view-link:focus-visible .cat-simple-view-link__text {
    max-width: 12rem;
    opacity: 1;
}

.cat-dir__topbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.cat-dir__search-wrap {
    position: relative;
    width: min(100%, 34rem);
    display: flex;
    align-items: center;
}

.cat-dir__search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    width: 16px;
    height: 16px;
    color: var(--muted-2, #6b7280);
    pointer-events: none;
    transform: translateY(-50%);
}

.cat-dir__search {
    width: 100%;
    height: 2.42rem;
    padding: 0 2rem 0 2rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.35));
    border-radius: 0.55rem;
    background: var(--glass-bg, rgba(255, 255, 255, 0.55));
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.2;
    text-align: center;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.cat-dir__search:focus-visible {
    border-color: var(--finland-blue, #003580);
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.15);
}

.cat-dir__search::-webkit-search-decoration,
.cat-dir__search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.cat-dir__search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted-2, #6b7280);
    font-size: 1.1rem;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.cat-dir__search-clear:hover,
.cat-dir__search-clear:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    outline: none;
}

.cat-dir__meta {
    width: 100%;
    min-width: 0;
    color: var(--muted-2, #6b7280);
    font-size: 0.83rem;
    line-height: 1.3;
    text-align: center;
}

/* ─── Sort + filter chip groups ─── */

.cat-dir__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    min-width: 0;
}

.cat-dir__controls-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    color: var(--muted-2, #6b7280);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cat-dir__chips-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.cat-dir__chips-label {
    color: var(--muted-2, #6b7280);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cat-dir__chips {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cat-dir__chips[hidden] {
    display: none;
}

.cat-dir__chips-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    min-height: 1.9rem;
    padding: 0.22rem 0.52rem;
    border: 1px solid rgba(0, 53, 128, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .14s ease;
}

.cat-dir__chips-toggle svg {
    width: 0.82rem;
    height: 0.82rem;
    color: var(--finland-blue, #003580);
    transition: transform .18s ease;
}

.cat-dir__chips-toggle:hover,
.cat-dir__chips-toggle:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.35);
    outline: none;
}

.cat-dir__chips-toggle.is-open {
    background: rgba(0, 53, 128, 0.1);
    border-color: rgba(0, 53, 128, 0.38);
}

.cat-dir__chips-toggle.is-open svg {
    transform: rotate(45deg);
}

.cat-dir__chip {
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(0, 53, 128, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}

.cat-dir__chip:hover,
.cat-dir__chip:focus-visible {
    background: rgba(0, 53, 128, 0.1);
    border-color: rgba(0, 53, 128, 0.4);
    outline: none;
}

.cat-dir__chip.is-active {
    background: var(--finland-blue, #003580);
    border-color: var(--finland-blue, #003580);
    color: #fff;
}

.cat-dir__chip:active {
    transform: scale(0.97);
}

.cat-dir__chip--filter.is-active {
    box-shadow: 0 0 0 2px rgba(0, 53, 128, 0.16);
}

.cat-dir__chip--onsale.is-active {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.18);
}

.cat-dir__chip--featured.is-active {
    background: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}

.cat-dir__chip--new.is-active {
    background: #047857;
    border-color: #047857;
    box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.18);
}

.cat-dir__chip--recent.is-active {
    background: #0891b2;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.18);
}

.cat-dir__chip--popular.is-active {
    background: #b45309;
    border-color: #b45309;
    box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.18);
}

/* ─── Category directory header search ─── */

.cat-dir__search-wrap--header {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    gap: 0;
}

.cat-dir__search-wrap--header .cat-dir__search {
    flex: 1;
    min-width: 0;
    border: 1px solid #d1d5db;
    background: rgba(255, 255, 255, 0.95);
}

/* ─── Filter chips group visibility ─── */

/* ─── Sort chips group ─── */
/* Hidden in collapsed state (is-dir-collapsed); appears below SUODATA when expanded. */

/* ─── 5-row cap & overflow ─── */

.cat-dir__col[data-row-hidden="1"] {
    display: none;
}

.cat-dir__col[data-page-hidden="1"] {
    display: none;
}

.cat-dir__col-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.cat-dir__overflow {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
}

.cat-dir__show-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid rgba(0, 53, 128, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--finland-blue, #003580);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
}

.cat-dir__show-more:hover,
.cat-dir__show-more:focus-visible {
    background: rgba(0, 53, 128, 0.12);
    border-color: rgba(0, 53, 128, 0.4);
    outline: none;
}

.cat-dir__show-more svg {
    width: 14px;
    height: 14px;
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-dir__show-more.is-expanded svg {
    transform: rotate(180deg);
}

/* ─── Sub flag-filtered state ─── */

.cat-dir__sub-item[data-flag-hidden="1"] {
    display: none;
}

/* ─── Column filter-chip hidden state ─── */

.cat-dir__col[data-filter-hidden="1"] {
    display: none;
}

.cat-dir__meta-empty {
    font-style: italic;
}

.cat-dir__reset {
    flex: 0 0 auto;
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(0, 53, 128, 0.18);
    border-radius: 0.5rem;
    background: rgba(0, 53, 128, 0.06);
    color: var(--finland-blue, #003580);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

.cat-dir__reset:hover,
.cat-dir__reset:focus-visible {
    background: rgba(0, 53, 128, 0.13);
    border-color: rgba(0, 53, 128, 0.32);
    outline: none;
}

.cat-dir__reset:active {
    transform: translateY(1px);
}

.cat-dir__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.cat-dir__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--muted-2, #6b7280);
    font-size: 0.95rem;
}

.cat-dir__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.22rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, padding .2s ease;
}

.cat-dir__col.is-expanded {
    order: 1;
    padding: 0.65rem 0.6rem 0.55rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.36);
    cursor: default;
}

.cat-dir__col:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 53, 128, 0.18);
}

.cat-dir__col.is-active {
    position: relative;
    background: rgba(0, 53, 128, 0.07);
    border-color: rgba(0, 53, 128, 0.42);
    box-shadow: 0 1px 0 rgba(0, 53, 128, 0.05), 0 8px 36px -6px rgba(0, 53, 128, 0.65);
}

.cat-dir__col.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(to bottom, transparent, rgba(0, 40, 100, 0.16));
    border-radius: 0 0 0.65rem 0.65rem;
    pointer-events: none;
    z-index: 1;
}

.cat-dir__col.is-empty {
    opacity: 0.55;
}

.cat-dir__col[data-filter-hidden="1"] {
    display: none;
}

.cat-dir__col[data-search-hidden="1"] {
    display: none;
}

/* Body, shop button, and expand indicator hidden in chip view; shown when column is expanded */
.cat-dir__body { display: none; }
.cat-dir__header-shop { display: none; }
.cat-dir__indicator--toggle { display: none; }

.cat-dir__col.is-expanded .cat-dir__body {
    display: flex;
    flex-direction: column;
}

.cat-dir__col.is-expanded .cat-dir__header-shop {
    display: flex;
}

.cat-dir__col.is-expanded .cat-dir__indicator--toggle {
    display: flex;
}

.cat-dir__header {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    padding: 0.16rem 0.2rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    min-height: auto;
    transition: background .15s ease;
}

.cat-dir__col.is-expanded .cat-dir__header {
    gap: 0.6rem;
    padding: 0.4rem 0.45rem;
    border-radius: 0.5rem;
}

.cat-dir__header:hover,
.cat-dir__header:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    outline: none;
}

.cat-dir__col.is-active .cat-dir__header {
    background: rgba(0, 53, 128, 0.1);
}

/* "Shop all" icon button that sits beside the expand toggle header */
.cat-dir__header-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.cat-dir__header-row .cat-dir__header {
    flex: 1 1 auto;
    min-width: 0;
}

.cat-dir__header-shop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0.2rem 0.3rem 0.2rem 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--muted-fg, #6b7280);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cat-dir__header-shop svg {
    width: 15px;
    height: 15px;
}

.cat-dir__header-shop:hover,
.cat-dir__header-shop:focus-visible {
    background: rgba(0, 53, 128, 0.1);
    color: var(--finland-blue, #003580);
    border-color: rgba(0, 53, 128, 0.2);
    outline: none;
}

.cat-dir__col.is-active--root .cat-dir__header-shop {
    color: var(--finland-blue, #003580);
    background: rgba(0, 53, 128, 0.1);
    border-color: rgba(0, 53, 128, 0.25);
}


.cat-dir__thumb {
    flex: 0 0 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.cat-dir__col.is-expanded .cat-dir__thumb {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.cat-dir__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-dir__title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.cat-dir__name {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    word-break: break-word;
}

.cat-dir__col.is-expanded .cat-dir__name {
    font-size: 0.97rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

.cat-dir__count {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.04rem 0.24rem;
    border-radius: 999px;
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.2;
}

.cat-dir__indicator {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580);
    transition: background .18s ease, transform .25s cubic-bezier(0.22, 1, 0.36, 1), color .18s ease;
}

.cat-dir__indicator svg {
    width: 14px;
    height: 14px;
}

.cat-dir__indicator--shop svg {
    width: 16px;
    height: 16px;
}

.cat-dir__header:hover .cat-dir__indicator,
.cat-dir__header:focus-visible .cat-dir__indicator {
    background: rgba(0, 53, 128, 0.16);
}

.cat-dir__col.is-expanded .cat-dir__indicator--toggle {
    background: rgba(0, 53, 128, 0.14);
    transform: rotate(45deg);
}

.cat-dir__plus-h,
.cat-dir__plus-v {
    transform-origin: 10px 10px;
    transition: opacity .2s ease;
}

.cat-dir__col.is-active--root .cat-dir__indicator,
.cat-dir__col.is-active--sub .cat-dir__indicator {
    background: var(--finland-blue, #003580);
    color: #fff;
}

.cat-dir__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s ease, margin-top .2s ease;
}

.cat-dir__col.is-expanded .cat-dir__body {
    max-height: 2000px;
    opacity: 1;
    margin-top: 0.1rem;
}

.cat-dir__rule {
    margin: 0.45rem 0 0.3rem;
    height: 1px;
    border: 0;
    background: rgba(0, 53, 128, 0.12);
}

.cat-dir__sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.cat-dir__sub-item[data-search-hidden="1"] {
    display: none;
}

.cat-dir__sub {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.32rem 0.45rem 0.32rem 0.55rem;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.87rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.cat-dir__sub:hover,
.cat-dir__sub:focus-visible {
    background: rgba(0, 53, 128, 0.07);
    border-left-color: rgba(0, 53, 128, 0.4);
    outline: none;
}

.cat-dir__sub.is-active {
    background: rgba(0, 53, 128, 0.12);
    border-left-color: var(--finland-blue, #003580);
    font-weight: 600;
}

.cat-dir__sub.is-empty {
    opacity: 0.55;
}

.cat-dir__sub.is-search-match .cat-dir__sub-name {
    text-decoration: underline;
    text-decoration-color: #facc15;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.cat-dir__sub-thumb {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--glass-bg, rgba(255,255,255,0.12));
}
.cat-dir__sub-thumb--empty {
    display: inline-block;
    background: var(--muted-3, #e5e7eb);
    opacity: 0.4;
}

.cat-dir__sub-chev {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    color: var(--muted-2, #6b7280);
    opacity: 0.45;
    transition: color .12s ease, opacity .12s ease, transform .12s ease;
}

.cat-dir__sub:hover .cat-dir__sub-chev,
.cat-dir__sub:focus-visible .cat-dir__sub-chev,
.cat-dir__sub.is-active .cat-dir__sub-chev {
    color: var(--finland-blue, #003580);
    opacity: 1;
    transform: translateX(1px);
}

.cat-dir__sub-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dir__sub-count {
    flex: 0 0 auto;
    padding: 0 0.35rem;
    border-radius: 0.35rem;
    background: rgba(0, 53, 128, 0.06);
    color: var(--muted-2, #6b7280);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.4;
    transition: background .12s ease, color .12s ease;
}

.cat-dir__sub:hover .cat-dir__sub-count,
.cat-dir__sub:focus-visible .cat-dir__sub-count,
.cat-dir__sub.is-active .cat-dir__sub-count {
    background: rgba(0, 53, 128, 0.16);
    color: var(--finland-blue, #003580);
}

/* Sub-row: wraps the sub button + grandchildren toggle */
.cat-dir__sub-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.cat-dir__sub-row .cat-dir__sub {
    flex: 1 1 auto;
    min-width: 0;
}

.cat-dir__sub-row .cat-dir__gc {
    flex: 1 1 auto;
    min-width: 0;
}

/* Grandchildren toggle chevron button */
.cat-dir__gc-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0.1rem;
    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #374151;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .15s ease;
}

.cat-dir__gc-toggle svg {
    width: 13px;
    height: 13px;
    transition: transform .2s ease;
}

.cat-dir__gc-toggle.is-open svg {
    transform: rotate(180deg);
}

.cat-dir__gc-toggle:hover,
.cat-dir__gc-toggle:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    outline: none;
}

.cat-dir__gc-toggle--placeholder {
    color: var(--muted-fg, #d1d5db);
    pointer-events: none;
    cursor: default;
}

.cat-dir__gc-toggle--placeholder:hover,
.cat-dir__gc-toggle--placeholder:focus-visible {
    background: transparent;
    color: var(--muted-fg, #d1d5db);
}

/* Sub-row shop icon button (apply-sub — toggle sub and scroll to catalog) */
.cat-dir__sub-shop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: var(--muted-fg, #9ca3af);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cat-dir__sub-shop svg {
    width: 13px;
    height: 13px;
}
.cat-dir__sub-shop:hover,
.cat-dir__sub-shop:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    border-color: rgba(0, 53, 128, 0.2);
    outline: none;
}
.cat-dir__sub-item .cat-dir__sub.is-active ~ .cat-dir__sub-shop {
    color: var(--finland-blue, #003580);
}

/* Drill-down chevron rotates when a sub-item's tree is open */
.cat-dir__sub[aria-expanded="true"] .cat-dir__sub-chev {
    transform: rotate(90deg);
    opacity: 1;
    color: var(--finland-blue, #003580);
}

/* Sub-row filter button: add-to-filter icon button replacing the old gc-toggle */
.cat-dir__sub-filter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 0.1rem;
    padding: 0;
    border: 1.5px solid rgba(0, 53, 128, 0.12);
    border-radius: 0.35rem;
    background: rgba(0, 53, 128, 0.05);
    color: var(--muted-fg, #9ca3af);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cat-dir__sub-filter svg {
    width: 15px;
    height: 15px;
}
.cat-dir__sub-filter:hover,
.cat-dir__sub-filter:focus-visible {
    background: rgba(0, 53, 128, 0.12);
    color: var(--finland-blue, #003580);
    border-color: rgba(0, 53, 128, 0.3);
    outline: none;
}
.cat-dir__sub-item .cat-dir__sub.is-active ~ .cat-dir__sub-filter {
    color: var(--finland-blue, #003580);
    background: rgba(0, 53, 128, 0.1);
    border-color: rgba(0, 53, 128, 0.25);
}

/* Grandchildren list (level 3) */
.cat-dir__gc-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.15rem 0 0.1rem 1.6rem;
    padding: 0;
    list-style: none;
    border-left: 2px solid rgba(0, 53, 128, 0.12);
    padding-left: 0.5rem;
}

.cat-dir__tree-item--level-4 > .cat-dir__gc-list,
.cat-dir__tree-item--level-5 > .cat-dir__gc-list {
    margin-left: 0.9rem;
    padding-left: 0.45rem;
}

.cat-dir__gc {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.18rem 0.35rem;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.cat-dir__gc:hover,
.cat-dir__gc:focus-visible {
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580);
    outline: none;
}

.cat-dir__gc.is-active {
    background: rgba(0, 53, 128, 0.12);
    color: var(--finland-blue, #003580);
    font-weight: 600;
}

.cat-dir__gc.is-empty {
    opacity: 0.5;
}

.cat-dir__gc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dir__sub-thumb--sm {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}


.cat-dir__more {
    margin-top: 0.25rem;
    padding: 0.28rem 0.45rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--muted-2, #6b7280);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.cat-dir__more:hover,
.cat-dir__more:focus-visible {
    background: rgba(0, 53, 128, 0.06);
    color: var(--finland-blue, #003580);
    outline: none;
}

.cat-dir__col.is-expanded .cat-dir__sub-item[data-overflow="1"] {
    display: list-item;
}

.cat-dir__see-all {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.25rem;
    margin-top: 0.45rem;
    padding: 0.25rem 0.4rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--finland-blue, #003580);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}

.cat-dir__see-all svg {
    width: 12px;
    height: 12px;
    transition: transform .12s ease;
}

.cat-dir__see-all:hover,
.cat-dir__see-all:focus-visible {
    background: rgba(0, 53, 128, 0.08);
    outline: none;
}

.cat-dir__see-all:hover svg,
.cat-dir__see-all:focus-visible svg {
    transform: translateX(2px);
}

/* ── Two-column layout: category directory (left) + aside (right) ──────────── */
/*
 * Grid structure — the template outputs two siblings inside the grid wrapper:
 *   1. <div class="catalog-heading-row">  → row 1, left column only
 *   2. <section id="categories">          → row 2, left column
 * The aside is the third direct child.   → row 2, right column
 *
 * This makes the aside top-edge align with #categories (the directory panel),
 * sitting below the heading row that spans only the left column.
 */
.catalog-dir-layout-grid {
    display: grid;
    grid-template-columns: 50% 1fr;
    column-gap: 1.25rem;
    align-items: start;
    margin-bottom: 2.5rem;
}
.catalog-dir-layout-grid > .catalog-heading-row {
    grid-column: 1;
    grid-row: 1;
}
.catalog-dir-layout-grid > #categories {
    grid-column: 1;
    grid-row: 2;
}
.catalog-dir-layout-grid > .catalog-dir-layout__aside {
    grid-column: 2;
    grid-row: 2; /* top-edge aligns with the directory, not the heading */
}
.catalog-dir-layout__aside {
    min-width: 0;
}
/* When the directory is in collapsed chip mode, stretch both columns to the same
   row height so the chip strip fills the right panel's natural collapsed height.
   The chip grid uses min-height:0 so it doesn't inflate the row beyond the
   conversations panel's natural content height. */
.catalog-dir-layout-grid:has(#category-directory.is-dir-collapsed) {
    align-items: stretch;
}
.catalog-dir-layout-grid:has(#category-directory.is-dir-collapsed) > #categories {
    display: flex;
    flex-direction: column;
}
.catalog-dir-layout-grid:has(#category-directory.is-dir-collapsed) > #categories > #category-directory {
    flex: 1 1 auto;
    min-height: 0;
}
/* Conversations aside: fill height naturally, no extra margin */
.catalog-dir-layout__aside .catalog-latest-conversations {
    margin-bottom: 0;
}
/* When conversations panel is expanded, pin the directory to its natural height
   so it doesn't stretch to match the taller expanded aside. */
.catalog-dir-layout-grid:has(#catalog-latest-conversations[data-expanded="1"]) > #categories {
    align-self: start;
}

/* ── Toggle button relocated inside .cat-dir__chips-group ─────────────────── */
/* When the toggle btn lives inside the chips-group row, strip its absolute
   positioning (which was for the old .catalog-heading-row context) and size it
   to match the Suodata pill visually. */
.cat-dir__chips-group .cat-dir-toggle-btn {
    position: static;
    transform: none !important; /* override translateY(-50%) from base rule */
    width: auto;
    min-height: 1.9rem;
    height: auto;
    padding: 0.22rem 0.38rem;
    border-radius: 2px;
    flex-shrink: 0;
}
.cat-dir__chips-group .cat-dir-toggle-btn[aria-expanded="true"] svg {
    transform: rotate(180deg); /* keep the expand-state icon rotation */
}

/* ────────────────── Floating "Selected" pill ───────────────────────── */

.cat-dir-floating {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: var(--z-cat-dir-floating);
    max-width: min(360px, calc(100vw - 2.5rem));
    pointer-events: none;
    opacity: 0;
    transform: translate(20px, 20px) scale(0.96);
    transition: opacity .25s cubic-bezier(0.22, 1, 0.36, 1), transform .28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.cat-dir-floating.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0) scale(1);
}

.cat-dir-floating__inner {
    padding: 0.65rem 0.75rem 1rem;
    height: 100%;
    border: 1px solid rgba(0, 53, 128, 0.22);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 24px 48px -22px rgba(0, 53, 128, 0.45),
                0 6px 14px -6px rgba(0, 53, 128, 0.18);
}

.cat-dir-floating__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cat-dir-floating__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--finland-blue, #003580);
}

.cat-dir-floating__label {
    flex: 1 1 auto;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cat-dir-floating__clear {
    flex: 0 0 auto;
    padding: 0.18rem 0.55rem;
    border: 0;
    border-radius: 0.4rem;
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .14s ease;
}

.cat-dir-floating__clear:hover,
.cat-dir-floating__clear:focus-visible {
    background: rgba(0, 53, 128, 0.18);
    outline: none;
}

.cat-dir-floating.is-empty .cat-dir-floating__clear {
    display: none;
}

.cat-dir-floating__tokens {
    margin: 0;
    padding: 0 0 2rem 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    gap: 0.3rem;
    max-height: 50vh;
    overflow-y: auto;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.cat-dir-floating__token {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.22rem 0.35rem 0.22rem 0.6rem;
    border: 1px solid rgba(0, 53, 128, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
}

.cat-dir-floating__token--sub {
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.32);
}

.cat-dir-floating__token:hover,
.cat-dir-floating__token:focus-visible {
    background: rgba(0, 53, 128, 0.14);
    border-color: rgba(0, 53, 128, 0.42);
    outline: none;
}

.cat-dir-floating__token:active {
    transform: scale(0.97);
}

.cat-dir-floating__token-text {
    overflow: hidden;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dir-floating__token-x {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.16);
    color: var(--finland-blue, #003580);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.cat-dir-floating__token:hover .cat-dir-floating__token-x,
.cat-dir-floating__token:focus-visible .cat-dir-floating__token-x {
    background: var(--finland-blue, #003580);
    color: #fff;
}

/* ── Floating pill: + add-category button ────────────────────────────── */
.cat-dir-floating__add-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580) !important;
    cursor: pointer;
    transition: background .14s ease, transform .12s ease;
}
.cat-dir-floating__add-btn svg {
    width: 10px;
    height: 10px;
    stroke-width: 3;
    pointer-events: none;
}
.cat-dir-floating__add-btn:hover,
.cat-dir-floating__add-btn:focus-visible {
    background: rgba(0, 53, 128, 0.18);
    outline: none;
    transform: rotate(45deg);
}
.cat-dir-floating__add-btn.is-open {
    background: var(--finland-blue, #003580);
    color: #fff !important;
    transform: rotate(45deg);
}

.cat-dir-floating__close-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580) !important;
    cursor: pointer;
    transition: background .14s ease;
}
.cat-dir-floating__close-btn svg {
    width: 10px;
    height: 10px;
    stroke-width: 3;
    pointer-events: none;
}
.cat-dir-floating__close-btn:hover,
.cat-dir-floating__close-btn:focus-visible {
    background: rgba(0, 53, 128, 0.18);
    outline: none;
}

/* ── Floating pill: category picker panel ───────────────────────────── */
.cat-dir-floating__picker {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(0, 53, 128, 0.12);
}
.cat-dir-floating__picker .select2-container {
    width: 100% !important;
}
.cat-dir-floating__picker .select2-search__field {
    font-size: 0.8rem;
}

/* Result row inside the dropdown */
.cat-dir-cat-result {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.1rem 0;
}
.cat-dir-cat-result__thumb {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(0,53,128,.06);
}
.cat-dir-cat-result__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    line-height: 1.3;
}
.cat-dir-cat-result__sub-badge {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(0,53,128,.1);
    color: var(--finland-blue, #003580);
}

@media (prefers-reduced-motion: reduce) {
    .cat-dir-floating,
    .cat-dir__body,
    .cat-dir__indicator {
        transition: none;
    }
}

/* ======================================================================= */
/*  * ◀ End of   §41b  Category Directory                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §43  Compact Category Chips                               */
/* ======================================================================= */

/* ---- Smaller chip sizing: less padding, tighter font ---- */
.category-chip {
    padding: 0.3rem 0.5rem;
    min-height: 0;
}
.category-chip .category-chip-label {
    font-size: 0.72rem;
    line-height: 1.3;
}
.category-chip .category-chip-desc {
    font-size: 0.65rem;
}

/* ======================================================================= */
/*  * ◀ End of   §43  Compact Category Chips                               */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §35  Catalog List Scramble Overlay                        */
/* ======================================================================= */

/* ---- Catalog list scramble overlay (masks column-header flash on table init) ---- */
.catalog-list-scramble {
    position: absolute;
    inset: 0;
    z-index: 260;
    min-height: 220vh;
    border-radius: inherit;
    background: rgba(240, 245, 255, 0.86);
    filter: blur(1.25px);
    -webkit-backdrop-filter: blur(8px) saturate(112%);
    backdrop-filter: blur(8px) saturate(112%);
    pointer-events: none;
}
.catalog-list-scramble::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 3px,
        rgba(0, 30, 80, 0.024) 3px, rgba(0, 30, 80, 0.024) 4px
    );
}
@keyframes catalogListScrambleOut {
    0% {
        opacity: 1;
        filter: blur(1.25px);
        -webkit-backdrop-filter: blur(8px) saturate(112%);
        backdrop-filter: blur(8px) saturate(112%);
    }
    42% {
        opacity: 0.58;
        filter: blur(0.65px);
        -webkit-backdrop-filter: blur(4px) saturate(106%);
        backdrop-filter: blur(4px) saturate(106%);
    }
    100% {
        opacity: 0;
        filter: blur(0);
        -webkit-backdrop-filter: blur(0) saturate(100%);
        backdrop-filter: blur(0) saturate(100%);
    }
}
.catalog-list-scramble.is-dissolving {
    pointer-events: none;
    animation: catalogListScrambleOut 520ms cubic-bezier(.16, 1, .3, 1) forwards;
}


/* ======================================================================= */
/*  * ◀ End of   §35  Catalog List Scramble Overlay                        */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §32  Catalog Meta Row                                     */
/* ======================================================================= */

/* ---- Catalog meta row (results count + mode badge) ---- */
article.product-card {
    background: white !important;
}
/* Drag-to-cart: set by lazy/drag-to-cart.js while the card is in flight. */
article.product-card.is-dragging-to-cart {
    opacity: 0.45;
    cursor: grabbing;
}
.catalog-meta-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .55rem;
    margin-bottom: .65rem;
    min-height: 1.5rem;
}
#catalog-grid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .65rem;
}
.catalog-meta-row--bottom {
    margin-top: 1rem;
    margin-bottom: .25rem;
    justify-content: center;
}
.catalog-meta-row--bottom .catalog-results-meta {
    flex: unset;
    text-align: center;
    font-size: .76rem;
    opacity: .75;
}
.catalog-results-meta {
    font-size: .78rem;
    color: var(--color-text-muted, #64748b);
    flex: 1 1 0%;
    min-width: 0;
}
.catalog-mode-badge {
    display: inline-flex;
    align-items: center;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .025em;
    line-height: .72;
    padding: 0 .32em;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent !important;
    cursor: default;
    margin-left: 0.3rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s;
}
/* fast = < 100 ms → green */
.catalog-mode-badge--fast {
    background: rgba(5, 150, 105, .11);
    border-color: #16a34a;
    border-width: 2px;
    color: #15803d;
    font-size: .63rem;
}
/* medium = 100–299 ms → amber/yellow */
.catalog-mode-badge--medium {
    background: rgba(202, 138, 4, .11);
    border-color: #ca8a04;
    border-width: 2px;
    color: #a16207;
    font-size: .63rem;
}
/* slow = ≥ 300 ms → red */
.catalog-mode-badge--slow {
    background: rgba(185, 28, 28, .11);
    border-color: #dc2626;
    border-width: 2px;
    color: #b91c1c;
    font-size: .63rem;
}
/* idle = "Server" label — muted gray, thin 1px border */
.catalog-mode-badge--idle {
    background: transparent !important;
    border-color: rgba(100, 116, 139, .35);
    border-width: 1px;
    color: #94a3b8;
    font-size: .55rem;
}
/* Keep legacy aliases so any remaining --client/--server refs still render */
.catalog-mode-badge--client { background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.28); color: #047857; }
.catalog-mode-badge--server { background: rgba(185,28,28,.09); border-color: rgba(185,28,28,.22); color: #b91c1c; }
/* Pulsing state while a fetch is in flight */
@keyframes catalog-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}
.catalog-mode-badge--loading {
    animation: catalog-badge-pulse .75s ease-in-out infinite;
}


/* ---- Catalog list DataTable toolbar ---- */
#catalog-list .datatable-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0 .4rem;
}
#catalog-list .datatable-toolbar .catalog-toolbar-nav {
    flex: 0 0 auto;
    margin-left: 0;
}
#catalog-list .datatable-toolbar .catalog-results-meta-wrap {
    flex: 1 1 auto;
    font-size: .72rem;
    color: var(--muted-1, #6b7280);
}
#catalog-list .datatable-toolbar .datatable-toolbar__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* List table action column button rows collapsible layout */
#catalog-list .catalog-list-btns-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#catalog-list .catalog-list-btns-row {
    display: grid;
    grid-template-columns: repeat(4, 38px);
    gap: 2px;
    justify-items: center;
    align-items: center;
}

/* ── Row 2 animation wrapper — grid-trick per DR-UX-005 ─────────────────
   order: -1 places it before Row 1 buttons inside the wrapping flex row,
   appearing visually above them. grid-template-rows animates 0fr → 1fr.  */
#catalog-list .catalog-list-row2-anim {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    order: -1;
    width: 100%;
    transition: grid-template-rows 0.13s ease-out;
    will-change: grid-template-rows;
}

#catalog-list .catalog-list-btns-row.catalog-list-btns-row2 {
    display: grid;
    grid-template-columns: repeat(4, 38px);
    gap: 2px;
    justify-items: center;
    align-items: center;
    min-height: 0;
    overflow: hidden;
}

#catalog-list .js-list-row2-toggle {
    border: none !important;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0.2s ease;
    color: #000;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#catalog-list .js-list-row2-toggle .cttr-arrow {
    stroke: #000 !important;
}

#catalog-list .js-list-row2-toggle:hover {
    border: none !important;
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}

#catalog-list .js-list-row2-toggle:focus {
    border: none !important;
    background: rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle {
    background: rgba(0, 0, 0, 0) !important;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle:focus {
    background: rgba(0, 0, 0, 0) !important;
}

.theme-dark #catalog-list .js-list-row2-toggle {
    color: #fff;
}

.theme-dark #catalog-list .js-list-row2-toggle .cttr-arrow {
    stroke: #fff !important;
}

.theme-dark #catalog-list .js-list-row2-toggle:hover {
    border: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.theme-dark #catalog-list .js-list-row2-toggle:focus {
    border: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    outline: none !important;
}

.theme-dark #catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle {
    background: rgba(0, 0, 0, 0) !important;
}

.theme-dark #catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark #catalog-list .catalog-list-btns-wrap.is-expanded .js-list-row2-toggle:focus {
    background: rgba(0, 0, 0, 0) !important;
}

#catalog-list .js-list-row2-toggle .cttr-arrow {
    transition: transform 0.3s ease;
}

/* Product grid / small-grid secondary action row */
#catalog-grid .product-card .card-row-1 {
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr) 32px;
    align-items: stretch;
}

#catalog-grid .product-card .card-row-1 .js-product-page-link {
    min-width: 0;
}

#catalog-grid .product-card .card-row-1 .js-product-view {
    min-width: 0;
}

#catalog-grid .product-card .card-row-2 {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows 0.28s ease, opacity 0.18s ease;
}

#catalog-grid .product-card .card-row-2.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
}

#catalog-grid .product-card .card-row-2 > * {
    min-height: 0;
    overflow: hidden;
}

#catalog-grid .product-card .card-row-2 > .flex {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#catalog-grid .product-card .card-row-2 .btn-card-action {
    width: 100% !important;
}

#catalog-grid .product-card .card-row-3,
.featured-hero-card .card-row-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

#catalog-grid .product-card .card-row-3:has(.js-leave-review),
.featured-hero-card .card-row-3:has(.js-leave-review) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#catalog-grid .product-card .card-row-3 .btn-card-action,
.featured-hero-card .card-row-3 .btn-card-action {
    width: 100% !important;
    min-width: 0;
}

#catalog-grid .product-card h3 .js-product-open-name {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#catalog-grid .product-card .flex.items-start.gap-1 .font-bold.leading-tight.flex-1,
#catalog-grid .product-card .flex.items-start.gap-1 .js-product-open-name {
    cursor: pointer !important;
}

#catalog-grid .product-card .catalog-card-action-content,
#catalog-grid .product-card .catalog-card-action-icon,
.featured-hero-card .catalog-card-action-content {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: center;
}

/* Toggle arrow styles for grid/mini-grid views */
#catalog-grid .js-card-row2-toggle,
#catalog-grid .js-thumb-row2-toggle {
    border: none !important;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    outline: none !important;
    transition: background-color 0.2s ease;
    color: #000;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#catalog-grid .js-card-row2-toggle .cttr-arrow,
#catalog-grid .js-thumb-row2-toggle .cttr-arrow {
    stroke: #000 !important;
    width: 18px !important;
    height: 18px !important;
    stroke-width: 3.2 !important;
    transition: transform 0.3s ease;
}

#catalog-grid .js-card-row2-toggle.is-open .cttr-arrow,
#catalog-grid .js-thumb-row2-toggle.is-open .cttr-arrow {
    transform: rotate(180deg);
}

#catalog-grid .js-card-row2-toggle:hover,
#catalog-grid .js-thumb-row2-toggle:hover,
#catalog-grid .js-card-row2-toggle:active,
#catalog-grid .js-thumb-row2-toggle:active,
#catalog-grid .js-card-row2-toggle.is-open,
#catalog-grid .js-thumb-row2-toggle.is-open {
    border: none !important;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 1px rgba(0,0,0,0) !important;
}

#catalog-grid .product-card.is-expanded .js-card-row2-toggle,
#catalog-grid .product-card.is-expanded .js-thumb-row2-toggle {
    background: rgba(0, 0, 0, 0) !important;

}

#catalog-grid .product-card.is-expanded .js-card-row2-toggle:hover,
#catalog-grid .product-card.is-expanded .js-thumb-row2-toggle:hover {
    background: rgba(0, 0, 0, 0) !important;
}

#catalog-grid .product-card.is-expanded .js-card-row2-toggle:focus,
#catalog-grid .product-card.is-expanded .js-thumb-row2-toggle:focus {
    background: rgba(0, 0, 0, 0) !important;
}

.theme-dark #catalog-grid .js-card-row2-toggle,
.theme-dark #catalog-grid .js-thumb-row2-toggle {
    color: #000;
}

.theme-dark #catalog-grid .js-card-row2-toggle .cttr-arrow,
.theme-dark #catalog-grid .js-thumb-row2-toggle .cttr-arrow {
    stroke: #000 !important;
}

.theme-dark #catalog-grid .js-card-row2-toggle:hover,
.theme-dark #catalog-grid .js-thumb-row2-toggle:hover,
.theme-dark #catalog-grid .js-card-row2-toggle:active,
.theme-dark #catalog-grid .js-thumb-row2-toggle:active,
.theme-dark #catalog-grid .js-card-row2-toggle.is-open,
.theme-dark #catalog-grid .js-thumb-row2-toggle.is-open {
    border: none !important;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 1px rgba(0,0,0,0) !important;
}

.theme-dark #catalog-grid .js-card-row2-toggle:focus,
.theme-dark #catalog-grid .js-thumb-row2-toggle:focus {
    border: none !important;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: 0 0 1px rgba(0,0,0,0) !important;
    outline: none !important;
}

.theme-dark #catalog-grid .product-card.is-expanded .js-card-row2-toggle,
.theme-dark #catalog-grid .product-card.is-expanded .js-thumb-row2-toggle {
    background: rgba(0, 0, 0, 0) !important;
}

.theme-dark #catalog-grid .product-card.is-expanded .js-card-row2-toggle:hover,
.theme-dark #catalog-grid .product-card.is-expanded .js-thumb-row2-toggle:hover {
    background: rgba(0, 0, 0, 0) !important;
}

.theme-dark #catalog-grid .product-card.is-expanded .js-card-row2-toggle:focus,
.theme-dark #catalog-grid .product-card.is-expanded .js-thumb-row2-toggle:focus {
    background: rgba(0, 0, 0, 0) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   §32a  Catalog List View — Share Dropdown
   Portal-anchored dropdown opened by .js-product-share-toggle.
   All styling lives here; the JS emits zero inline styles.
   ───────────────────────────────────────────────────────────────────────── */

/* Toggle button — fixed 32 × 32 square */
#catalog-list .js-product-share-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}



/* Dropdown card */
#catalog-share-dropdowns-portal .catalog-share-dropdown,
#catalog-list .catalog-share-dropdown {
    position: fixed;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    box-shadow:
        0 8px 28px rgba(11, 29, 58, 0.13),
        0 2px 8px  rgba(11, 29, 58, 0.07);
    z-index: 9500;   /* below --z-tooltip (9999) so tooltips render above the menu */
    min-width: 188px;
    pointer-events: auto;
    overflow: hidden;
    animation: csdSlideIn 0.13s ease;
}

@keyframes csdSlideIn {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     }
}

/* Header label row */
#catalog-share-dropdowns-portal .csd-header,
#catalog-list .csd-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.875rem 0.42rem;
    font-size: 0.675rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted-500);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    pointer-events: none;
    user-select: none;
}

/* Method buttons — flex row, icon + label */
#catalog-share-dropdowns-portal .catalog-share-method,
#catalog-list .catalog-share-method {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.48rem 0.875rem;
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 450;
    color: var(--muted-700);
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}

#catalog-share-dropdowns-portal .catalog-share-method:first-of-type,
#catalog-list .catalog-share-method:first-of-type {
    border-top: none;
}

/* Icon cell — fixed width keeps all labels flush */
#catalog-share-dropdowns-portal .csd-icon,
#catalog-list .csd-icon {
    flex-shrink: 0;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.68;
    transition: opacity 0.12s ease;
}

#catalog-share-dropdowns-portal .catalog-share-method:hover .csd-icon,
#catalog-list .catalog-share-method:hover .csd-icon {
    opacity: 1;
}

#catalog-share-dropdowns-portal .csd-label,
#catalog-list .csd-label {
    flex: 1;
    white-space: nowrap;
}

/* Generic hover — nudge + subtle tint */
#catalog-share-dropdowns-portal .catalog-share-method:hover,
#catalog-list .catalog-share-method:hover {
    padding-left: 1.05rem;
    background: rgba(25, 54, 131, 0.05);
    color: var(--finland-blue);
}

/* Per-platform brand accents on hover */
#catalog-share-dropdowns-portal .catalog-share-method[data-method="email"]:hover,
#catalog-list .catalog-share-method[data-method="email"]:hover {
    background: rgba(234, 67, 53, 0.05);
    color: #c0392b;
}

#catalog-share-dropdowns-portal .catalog-share-method[data-method="facebook"]:hover,
#catalog-list .catalog-share-method[data-method="facebook"]:hover {
    background: rgba(24, 119, 242, 0.06);
    color: #1877F2;
}

#catalog-share-dropdowns-portal .catalog-share-method[data-method="twitter"]:hover,
#catalog-list .catalog-share-method[data-method="twitter"]:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #111;
}

#catalog-share-dropdowns-portal .catalog-share-method[data-method="whatsapp"]:hover,
#catalog-list .catalog-share-method[data-method="whatsapp"]:hover {
    background: rgba(37, 211, 102, 0.07);
    color: #128C7E;
}

#catalog-share-dropdowns-portal .catalog-share-method[data-method="pinterest"]:hover,
#catalog-list .catalog-share-method[data-method="pinterest"]:hover {
    background: rgba(230, 0, 35, 0.06);
    color: #E60023;
}

#catalog-share-dropdowns-portal .catalog-share-method:focus-visible,
#catalog-list .catalog-share-method:focus-visible {
    outline: none;
    background: rgba(25, 54, 131, 0.08);
}

/* Copied-state feedback on the toggle itself */
#catalog-list .js-product-share-toggle.is-copied {
    opacity: 0.7;
}

/* Copy-link success state on the method button inside the dropdown */
#catalog-share-dropdowns-portal .catalog-share-method.is-copied,
#catalog-list .catalog-share-method.is-copied {
    background: rgba(21, 128, 61, 0.09) !important;
    color: #15803d !important;
    padding-left: 1.05rem;
}
#catalog-share-dropdowns-portal .catalog-share-method.is-copied .csd-icon,
#catalog-list .catalog-share-method.is-copied .csd-icon {
    opacity: 1;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-row2-anim {
    grid-template-rows: 1fr;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 {
    margin-bottom: .35rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   §32b  Catalog List View — Icon Button Hover & Click Animations
   All icon buttons in the list-view action column lift on hover and press
   on click, matching the .pm-icon-btn standard in #product-modal.
   Each button type gets a small SVG micro-animation on hover.
   ───────────────────────────────────────────────────────────────────────── */

/* Base: smooth transition on all list action buttons (rows 1 + 2) + share */
#catalog-list .catalog-list-btns-row .btn-card-action:not(:disabled),
#catalog-list .catalog-list-btns-row2 .btn-card-action:not(:disabled),
#catalog-list .js-product-share-toggle {
    transition: transform .18s ease, background .15s ease, border-color .15s ease;
}

/* Hover: lift upward — standard icon-button convention (DR-UX §3) */
#catalog-list .catalog-list-btns-row .btn-card-action:not(:disabled):hover,
#catalog-list .catalog-list-btns-row2 .btn-card-action:not(:disabled):hover,
#catalog-list .js-product-share-toggle:hover {
    transform: translateY(-2px);
}

/* Active/click: elastic press-down squish */
#catalog-list .catalog-list-btns-row .btn-card-action:not(:disabled):active,
#catalog-list .catalog-list-btns-row2 .btn-card-action:not(:disabled):active,
#catalog-list .js-product-share-toggle:active {
    transform: translateY(1px) scale(0.93);
    transition: transform .08s ease;
}

/* ── Cart button: cart SVG bounces on hover (reuses pmCartBounce from §33) */
#catalog-list .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg {
    animation: pmCartBounce 0.42s ease both;
}

/* ── Eye / quick-view button: scaleY open-pulse on hover ─────────────────*/
@keyframes listEyeOpen {
    0%   { transform: scaleY(1);    }
    35%  { transform: scaleY(1.38); }
    65%  { transform: scaleY(0.82); }
    100% { transform: scaleY(1);    }
}

/* ── Eye idle blink: autonomous eye-blink with no user interaction ────────
   87% of the 10s cycle is completely still. The blink window is ~0.35s.
   nth-child staggering offsets each row so they don't all blink at once.   */
@keyframes listEyeIdleBlink {
    0%, 87%  { transform: scaleY(1);    }
    88.8%    { transform: scaleY(0.05); }   /* lid shuts  */
    90.5%    { transform: scaleY(1.07); }   /* snaps open — tiny overshoot */
    92%      { transform: scaleY(1);    }   /* settles    */
    100%     { transform: scaleY(1);    }
}
#catalog-list .js-product-view svg {
    animation: listEyeIdleBlink 10s ease infinite;
    transform-origin: center;
}
/* Stagger per row — eyes blink ~2 s apart so none sync */
#catalog-list tbody tr:nth-child(5n+2) .js-product-view svg { animation-delay: -2s; }
#catalog-list tbody tr:nth-child(5n+3) .js-product-view svg { animation-delay: -4s; }
#catalog-list tbody tr:nth-child(5n+4) .js-product-view svg { animation-delay: -6s; }
#catalog-list tbody tr:nth-child(5n+5) .js-product-view svg { animation-delay: -8s; }
/* Hover takes priority — listEyeOpen overrides the idle blink on :hover
   tbody tr raises specificity to (1,2,3) matching the stagger rules; declared
   last so it wins and the animation shorthand resets animation-delay to 0s   */
#catalog-list tbody tr .js-product-view:hover svg {
    animation: listEyeOpen 0.36s ease both;
    transform-origin: center;
}
/* Respect prefers-reduced-motion — disable the idle blink                  */
@media (prefers-reduced-motion: reduce) {
    #catalog-list .js-product-view svg {
        animation: none;
    }
}

/* ── External-link button: SVG nudges diagonally up-right on hover ───────*/
@keyframes listLinkNudge {
    0%   { transform: translate(0,  0);    }
    40%  { transform: translate(3px, -3px); }
    70%  { transform: translate(1px, -1px); }
    100% { transform: translate(0,  0);    }
}
#catalog-list .js-product-page-link:hover svg {
    animation: listLinkNudge 0.34s ease both;
}

/* ── Price-history button: chart line springs upward on hover ────────────*/
@keyframes listChartSpring {
    0%   { transform: scaleY(1);    transform-origin: bottom center; }
    38%  { transform: scaleY(1.30); transform-origin: bottom center; }
    68%  { transform: scaleY(0.86); transform-origin: bottom center; }
    100% { transform: scaleY(1);    transform-origin: bottom center; }
}
#catalog-list .js-product-price-history:hover svg {
    animation: listChartSpring 0.38s ease both;
    transform-origin: bottom center;
}

/* ── Share button: SVG scales out and snaps back on hover ────────────────*/
@keyframes listSharePing {
    0%   { transform: scale(1);    }
    38%  { transform: scale(1.28); }
    68%  { transform: scale(0.88); }
    100% { transform: scale(1);    }
}
#catalog-list .js-product-share-toggle:hover svg {
    animation: listSharePing 0.36s ease both;
}

/* ── Reviews (star) button: rotate-and-pulse on hover ───────────────────*/
@keyframes listStarPulse {
    0%   { transform: scale(1)    rotate(0deg);  }
    35%  { transform: scale(1.32) rotate(18deg); }
    65%  { transform: scale(0.88) rotate(-6deg); }
    100% { transform: scale(1)    rotate(0deg);  }
}
#catalog-list .js-open-reviews:not(:disabled):hover svg {
    animation: listStarPulse 0.38s ease both;
}

/* ── Row 2 button staggered reveal on expand ─────────────────────────────
   Buttons slide in left → right one by one as Row 2 opens.
   Smooth deceleration curve (ease-out-expo style) so they arrive gently.  */
@keyframes listRow2Reveal {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0);     }
}
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action {
    animation: listRow2Reveal 0.20s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Base offset = grid transition (0.13s); stagger 0.04s so the wave reads clearly at 2× speed */
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(1) { animation-delay: 0.13s;  }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(2) { animation-delay: 0.17s;  }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(3) { animation-delay: 0.21s;  }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(4) { animation-delay: 0.25s;  }

/* ── Row 2 SVG slide + land: trail leftward during travel, squish on impact ─
   Total = travel(0.20s) + settle(0.60s) = 0.80s. linear so % = real time.
   Impact squish at 25% = t 0.20s — exactly when the button stops.

   Travel phase (0 → 25%): button shoots right; left side of icon trails →
   scaleX grows from right anchor, left end stretches leftward.
   Impact       (25%):      button stops; rightward inertia squashes icon
   horizontally → scaleX(0.55), anchored at right so left compresses inward.
   Settle       (25→100%):  damped spring oscillation back to neutral.        */
@keyframes listRow2SvgSlide {
    /* Trail phase — left side of icon lags as button accelerates right */
    0%   { transform: scaleX(1);    }
    15%  { transform: scaleX(1.35); }   /* peak trail: button at fastest         */
    22%  { transform: scaleX(1.15); }   /* trail eases as button decelerates     */
    /* Impact at exactly 0.20 s = 25% of 0.80s */
    25%  { transform: scaleX(0.55); }   /* inertia squish against the right wall */
    /* Damped spring settle */
    45%  { transform: scaleX(1.22); }   /* rebound overshoot */
    63%  { transform: scaleX(0.88); }   /* oscillation 2 */
    79%  { transform: scaleX(1.06); }   /* oscillation 3 */
    100% { transform: scaleX(1);    }   /* at rest */
}
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action svg {
    transform-origin: right center;
    animation: listRow2SvgSlide 0.80s linear both;
}
/* SVG delays mirror button delays so trail starts the instant each button moves */
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(1) svg { animation-delay: 0.13s; }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(2) svg { animation-delay: 0.17s; }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(3) svg { animation-delay: 0.21s; }
#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 .btn-card-action:nth-child(4) svg { animation-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
    #catalog-list .catalog-list-btns-row2 .btn-card-action svg { animation: none; }
}

/* ── Row 1 icon animations: extreme stretch/squeeze as row moves ─────────
   Row 1 (arrow · fav · share · cart) is physically pushed DOWN when row 2
   opens above it, and snaps UP when it closes. Icons exaggerate that motion
   through scaleY — transform-origin: top so the bottom end stretches down
   on expand and compresses upward on collapse.

   Timing: grid transition is 0.13s ease-out. Duration = 0.54s, linear, so
   keyframe % maps 1:1 to real time → peak at 24% ≈ t=0.13s (row stops).

   The toggle arrow is excluded: its SVG carries a JS-driven rotate transform
   that would conflict with these animations.                               */
/* Two distinct names required — same name across both selectors lets the browser
   treat the transition as a continuation rather than a restart when the class
   swaps in the same JS tick, causing the collapse animation to be skipped.
   Keyframe bodies are identical; only transform-origin differs on the element. */
@keyframes listRow1SquishDown {
    0%   { transform: scaleY(1);    }
    24%  { transform: scaleY(0.28); }   /* extreme squish against the floor        */
    44%  { transform: scaleY(1.40); }   /* spring rebound overshoot                */
    62%  { transform: scaleY(0.84); }   /* damped oscillation                      */
    78%  { transform: scaleY(1.10); }
    100% { transform: scaleY(1);    }
}
@keyframes listRow1SquishUp {
    0%   { transform: scaleY(1);    }
    24%  { transform: scaleY(0.28); }   /* extreme squish against the ceiling      */
    44%  { transform: scaleY(1.40); }   /* spring rebound overshoot                */
    62%  { transform: scaleY(0.84); }   /* damped oscillation                      */
    78%  { transform: scaleY(1.10); }
    100% { transform: scaleY(1);    }
}
/* Expand: row pushed DOWN → icon squishes against the BOTTOM */
#catalog-list .catalog-list-btns-wrap.is-expanded
    .catalog-list-btns-row:not(.catalog-list-btns-row2)
    .btn-card-action:not(.js-list-row2-toggle) svg {
    transform-origin: bottom center;
    animation: listRow1SquishDown 0.54s linear both;
}
/* Collapse: row snaps UP → icon squishes against the TOP */
#catalog-list .catalog-list-btns-wrap.is-collapsing
    .catalog-list-btns-row:not(.catalog-list-btns-row2)
    .btn-card-action:not(.js-list-row2-toggle) svg {
    transform-origin: top center;
    animation: listRow1SquishUp 0.54s linear both;
}
@media (prefers-reduced-motion: reduce) {
    #catalog-list .catalog-list-btns-row:not(.catalog-list-btns-row2) .btn-card-action svg {
        animation: none !important;
    }
}

/* ── Favourites (heart) button — base style ──────────────────────────────
   No btn-primary/btn-ghost variant applied to .btn-fav-list, so full visual
   identity is defined here. Matches .pm-favourite-corner modal palette.      */
#catalog-list .btn-fav-list {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fecdd3;                              /* rose-100 — icon tint */
    border-color: #be123c !important;
    background: #be123c !important;             /* solid rose-700 — always red */
    transition: transform .18s ease, background .15s ease,
                border-color .15s ease, color .15s ease;
}

/* Hover (not favourite): lighten to show the outline-fill transition */
#catalog-list .btn-fav-list:not(.is-favourite):hover {
    background: rgba(252, 165, 165, 0.38) !important; /* rose-300 tint */
    border-color: #e11d48 !important;
    color: #e11d48;
}
/* Fill the heart on hover: target both <svg> AND <path> so CSS beats any
   fill="none" attribute set on either element by the renderer or syncCardFavBtn */
#catalog-list .btn-fav-list:not(.is-favourite):hover svg,
#catalog-list .btn-fav-list:not(.is-favourite):hover svg path {
    fill: currentColor;
}

/* Favourite (is-favourite): green — matches .pm-favourite-corner.is-favourite */
#catalog-list .btn-fav-list.is-favourite {
    color: #bbf7d0;                              /* green-200 */
    border-color: #14532d !important;
    background: #14532d !important;
}
#catalog-list .btn-fav-list.is-favourite:hover {
    background: rgba(21, 128, 61, 0.12) !important;
    border-color: #15803d !important;
    color: #15803d;
}

/* Heart pump — elastic scale on hover (both states) */
@keyframes listHeartPump {
    0%   { transform: scale(1);    }
    38%  { transform: scale(1.32); }
    68%  { transform: scale(0.87); }
    100% { transform: scale(1);    }
}
#catalog-list .btn-fav-list:hover svg {
    animation: listHeartPump 0.38s ease both;
}
/* JS-triggered 3-pulse after successful fav_add — reuses pmHeartPulse keyframe
   (defined in §33) which is timed to sync with the 3-beat fav_add sound        */
#catalog-list .btn-fav-list svg.list-fav-beating {
    animation: pmHeartPulse 1.0s ease-out both !important;
}
/* Defensive: CSS declaration beats any stray fill="none" presentation attribute
   stamped by syncCardFavBtn. The list-view heart must always be visible;
   its state is expressed via .is-favourite CSS class, not SVG fill attr.    */
#catalog-list .btn-fav-list svg path {
    fill: currentColor;
}

/* Dark theme: deeper solids keep enough contrast on dark surfaces */
.theme-dark #catalog-list .btn-fav-list {
    color: #fecdd3;
    border-color: #9f1239 !important;
    background: #9f1239 !important;             /* rose-800 */
}
.theme-dark #catalog-list .btn-fav-list:not(.is-favourite):hover {
    background: rgba(136, 19, 55, 0.44) !important;
    border-color: #e11d48 !important;
    color: #fda4af;
}
.theme-dark #catalog-list .btn-fav-list.is-favourite {
    color: #86efac;
    border-color: #166534 !important;
    background: #166534 !important;
}
.theme-dark #catalog-list .btn-fav-list.is-favourite:hover {
    background: rgba(20, 83, 45, 0.50) !important;
    border-color: #15803d !important;
    color: #bbf7d0;
}

/* ── Arrow button idle nudge: points in the direction it will expand ─────
   Left arrow (js-list-row2-toggle) nudges left while collapsed;
   Down arrow (js-thumb-row2-toggle) nudges down while collapsed.
   Scoped to :not(.is-expanded) / :not(.is-open) so the animation does not
   fight the JS-managed inline transform that runs while the row is open.   */
@keyframes listArrowNudgeLeft {
    0%, 82%  { transform: translateX(0);      }
    86%      { transform: translateX(-3px);   }
    89.5%    { transform: translateX(1.5px);  }
    92.5%    { transform: translateX(-0.8px); }
    95%      { transform: translateX(0);      }
    100%     { transform: translateX(0);      }
}
@keyframes listArrowNudgeDown {
    0%, 82%  { transform: translateY(0);      }
    86%      { transform: translateY(3px);    }
    89.5%    { transform: translateY(-1.5px); }
    92.5%    { transform: translateY(0.8px);  }
    95%      { transform: translateY(0);      }
    100%     { transform: translateY(0);      }
}
/* Only nudge while collapsed; hover suppresses the animation cleanly */
#catalog-list .catalog-list-btns-wrap:not(.is-expanded) .js-list-row2-toggle .cttr-arrow {
    animation: listArrowNudgeLeft 9s ease infinite;
}
#catalog-list .js-thumb-row2-toggle:not(.is-open) .cttr-arrow {
    animation: listArrowNudgeDown 11s ease infinite;
}
/* Row stagger: arrows in different rows nudge at different cycle positions */
#catalog-list tbody tr:nth-child(5n+2) .js-list-row2-toggle .cttr-arrow  { animation-delay: -1.8s; }
#catalog-list tbody tr:nth-child(5n+3) .js-list-row2-toggle .cttr-arrow  { animation-delay: -3.6s; }
#catalog-list tbody tr:nth-child(5n+4) .js-list-row2-toggle .cttr-arrow  { animation-delay: -5.4s; }
#catalog-list tbody tr:nth-child(5n+5) .js-list-row2-toggle .cttr-arrow  { animation-delay: -7.2s; }
#catalog-list tbody tr:nth-child(5n+2) .js-thumb-row2-toggle .cttr-arrow { animation-delay: -2.2s; }
#catalog-list tbody tr:nth-child(5n+3) .js-thumb-row2-toggle .cttr-arrow { animation-delay: -4.4s; }
#catalog-list tbody tr:nth-child(5n+4) .js-thumb-row2-toggle .cttr-arrow { animation-delay: -6.6s; }
#catalog-list tbody tr:nth-child(5n+5) .js-thumb-row2-toggle .cttr-arrow { animation-delay: -8.8s; }
/* Hover: kill the idle nudge — button lift from the base rules is enough   */
#catalog-list .js-list-row2-toggle:hover .cttr-arrow,
#catalog-list .js-thumb-row2-toggle:hover .cttr-arrow {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    #catalog-list .js-list-row2-toggle .cttr-arrow,
    #catalog-list .js-thumb-row2-toggle .cttr-arrow {
        animation: none !important;
    }
}

/* ── Thumbnail column: row-1 and row-2 buttons — lift + press base ───────
   Cart button excluded to preserve its existing catalog-cart-pulse animation. */
#catalog-list .catalog-thumb-td-row .btn-card-action:not(:disabled):not(.catalog-thumb-cart-pulse),
#catalog-list .catalog-thumb-row2 .btn-card-action:not(:disabled) {
    transition: transform .18s ease, background .15s ease, border-color .15s ease;
}
#catalog-list .catalog-thumb-td-row .btn-card-action:not(:disabled):not(.catalog-thumb-cart-pulse):hover,
#catalog-list .catalog-thumb-row2 .btn-card-action:not(:disabled):hover {
    transform: translateY(-2px);
}
#catalog-list .catalog-thumb-td-row .btn-card-action:not(:disabled):not(.catalog-thumb-cart-pulse):active,
#catalog-list .catalog-thumb-row2 .btn-card-action:not(:disabled):active {
    transform: translateY(1px) scale(0.93);
    transition: transform .08s ease;
}

/* ── Thumbnail row-2: star (reviews + leave-review) — twirl on hover ─────*/
@keyframes listStarTwirl {
    0%   { transform: rotate(0deg) scale(1);     }
    28%  { transform: rotate(22deg) scale(1.26); }
    58%  { transform: rotate(-8deg) scale(0.90); }
    80%  { transform: rotate(4deg) scale(1.04);  }
    100% { transform: rotate(0deg) scale(1);     }
}
#catalog-list .js-open-reviews:hover svg,
#catalog-list .js-leave-review:hover svg {
    animation: listStarTwirl 0.40s ease both;
}

/* ── Thumbnail row-2: write-comment bubble — pop-bounce on hover ─────────*/
@keyframes listBubblePop {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.27); }
    64%  { transform: scale(0.88); }
    82%  { transform: scale(1.06); }
    100% { transform: scale(1);    }
}
#catalog-list .js-open-card-comments:hover svg {
    animation: listBubblePop 0.38s ease both;
}

/* ── Thumbnail row-2: ask-product bubble — side-bob on hover ─────────────
   Distinct from write-comment: bobs sideways like it's chatting.           */
@keyframes listBubbleBob {
    0%   { transform: translateX(0) scale(1);      }
    26%  { transform: translateX(3px) scale(1.08); }
    54%  { transform: translateX(-2px) scale(0.96);}
    78%  { transform: translateX(1px) scale(1.02); }
    100% { transform: translateX(0) scale(1);      }
}
#catalog-list .js-ask-product:hover svg {
    animation: listBubbleBob 0.40s ease both;
}

/* ── Thumbnail row-2: staggered reveal + SVG slide animation on expand ────
   Reuses listRow2Reveal (slide left → right) and listRow2SvgSlide (trail
   leftward → squish on landing → damped settle) defined in §32b.
   SVG delays mirror button delays so the trail begins the moment each
   button starts moving — not after it lands.                              */
#catalog-list .catalog-thumb-row2.is-open .btn-card-action {
    animation: listRow2Reveal 0.20s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* No base offset — spring grid opens fast; stagger 0.04s to match 2× speed */
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(1) { animation-delay: 0s;    }
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(2) { animation-delay: 0.04s; }
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(3) { animation-delay: 0.08s; }

#catalog-list .catalog-thumb-row2.is-open .btn-card-action svg {
    transform-origin: right center;
    animation: listRow2SvgSlide 0.80s linear both;
}
/* SVG delays mirror button delays so trail starts the instant each button moves */
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(1) svg { animation-delay: 0s;    }
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(2) svg { animation-delay: 0.04s; }
#catalog-list .catalog-thumb-row2.is-open .btn-card-action:nth-child(3) svg { animation-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) {
    #catalog-list .catalog-thumb-row2 .btn-card-action,
    #catalog-list .catalog-thumb-row2 .btn-card-action svg { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   §32c  Catalog Grid / Small-Grid / Mini-Grid — Icon Button Hover & Click Animations
   All three grid modes share the same .product-card structure under
   #catalog-grid so one rule set covers all sizes; view-mode CSS classes
   only affect layout columns and visibility, not button presence.
   Keyframes are shared with §32b wherever the motions are identical.
   ───────────────────────────────────────────────────────────────────────── */

/* Base: smooth lift/press on all card-row action buttons */
#catalog-grid .card-row-1 .btn-card-action:not(:disabled),
#catalog-grid .card-row-2 .btn-card-action:not(:disabled),
#catalog-grid .card-row-3 .btn-card-action:not(:disabled) {
    transition: transform .18s ease, background .15s ease, border-color .15s ease;
}

/* Hover: lift upward — DR-UX §3 standard */
#catalog-grid .card-row-1 .btn-card-action:not(:disabled):hover,
#catalog-grid .card-row-2 .btn-card-action:not(:disabled):hover,
#catalog-grid .card-row-3 .btn-card-action:not(:disabled):hover {
    transform: translateY(-2px);
}

/* Active/click: elastic press-down squish */
#catalog-grid .card-row-1 .btn-card-action:not(:disabled):active,
#catalog-grid .card-row-2 .btn-card-action:not(:disabled):active,
#catalog-grid .card-row-3 .btn-card-action:not(:disabled):active {
    transform: translateY(1px) scale(0.93);
    transition: transform .08s ease;
}

/* ── Cart button: bounce on hover (reuses pmCartBounce from §33) ─────────*/
#catalog-grid .js-add-to-cart:not(:disabled):not(.is-dropping):hover svg {
    animation: pmCartBounce 0.42s ease both;
}

/* ── Eye / quick-view: idle blink + open-pulse on hover ─────────────────
   Reuses listEyeIdleBlink and listEyeOpen from §32b.
   nth-child stagger on .product-card so cards don't blink in sync.       */
#catalog-grid .js-product-view svg {
    animation: listEyeIdleBlink 10s ease infinite;
    transform-origin: center;
}
#catalog-grid .product-card:nth-child(5n+2) .js-product-view svg { animation-delay: -2.5s; }
#catalog-grid .product-card:nth-child(5n+3) .js-product-view svg { animation-delay: -5s;   }
#catalog-grid .product-card:nth-child(5n+4) .js-product-view svg { animation-delay: -7.5s; }
#catalog-grid .product-card:nth-child(5n+5) .js-product-view svg { animation-delay: -9s;   }
/* Hover overrides idle blink with the open-pulse; .product-card raises
   specificity to (1,3,1) matching the stagger rules — declared last wins  */
#catalog-grid .product-card .js-product-view:hover svg {
    animation: listEyeOpen 0.36s ease both;
    transform-origin: center;
}

/* ── External-link button: diagonal up-right nudge on hover ─────────────
   Reuses listLinkNudge from §32b.                                         */
#catalog-grid .js-product-page-link:hover svg {
    animation: listLinkNudge 0.34s ease both;
}

/* ── Price-history: chart line springs from baseline on hover ───────────
   Reuses listChartSpring from §32b.                                       */
#catalog-grid .js-product-price-history:hover svg {
    animation: listChartSpring 0.38s ease both;
    transform-origin: bottom center;
}

/* ── Reviews / leave-review (star): twirl on hover ─────────────────────
   Reuses listStarTwirl from §32b.                                         */
#catalog-grid .js-open-reviews:hover svg,
#catalog-grid .js-leave-review:hover svg {
    animation: listStarTwirl 0.40s ease both;
}

/* ── Comments bubble: pop-bounce on hover ───────────────────────────────
   Reuses listBubblePop from §32b.                                         */
#catalog-grid .js-open-card-comments:hover svg {
    animation: listBubblePop 0.38s ease both;
}

/* ── QR code button: scale-pulse on hover ───────────────────────────────*/
@keyframes gridQrPulse {
    0%   { transform: scale(1);    }
    36%  { transform: scale(1.24); }
    66%  { transform: scale(0.88); }
    100% { transform: scale(1);    }
}
#catalog-grid .js-open-qr:hover svg {
    animation: gridQrPulse 0.36s ease both;
}

/* ── Favourite / fav-btn (heart): pump on hover ─────────────────────────
   Reuses listHeartPump from §32b.                                         */
#catalog-grid .js-card-favourite:hover svg,
#catalog-grid .catalog-card-fav-btn:hover svg {
    animation: listHeartPump 0.38s ease both;
}

/* Reduced-motion: suppress idle eye blink only (hover animations stay) */
@media (prefers-reduced-motion: reduce) {
    #catalog-grid .js-product-view svg {
        animation: none !important;
    }
}

/* ======================================================================= */
/*  * ◀ End of   §32  Catalog Meta Row                                     */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §36  Sticky Load-more Bar                                 */
/* ======================================================================= */

/* ---- Sticky load-more bar ---- */
#catalog-load-more-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    justify-content: center;
    padding: .75rem 1rem;
    background: linear-gradient(to top, var(--color-surface, #fff) 60%, transparent);
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}
#catalog-load-more-sticky.catalog-load-more-sticky--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Lift the back-to-top button above the sticky load-more bar when it is open */
body.load-more-sticky-open .back-to-top-shell {
    bottom: 4rem;
    transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease, bottom .2s ease;
}
#catalog-load-more-sticky .btn {
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.catalog-load-more-dismiss {
    position: absolute;
    top: .4rem;
    right: .55rem;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #888);
    font-size: .75rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
    transition: opacity .15s ease, background .15s ease;
    padding: 0;
}
.catalog-load-more-dismiss:hover {
    opacity: 1;
    background: rgba(0,0,0,.08);
}
#catalog-load-more-sticky.catalog-load-more-sticky--dismissed {
    display: none !important;
}

.catalog-lm-dismiss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.25);
    background: rgba(0,0,0,0.08);
    color: #1e293b;
    cursor: pointer;
    margin-right: .5rem;
    transition: background .15s ease, opacity .15s ease;
    opacity: 0.75;
}
.catalog-lm-dismiss-btn:hover {
    background: rgba(0,0,0,0.15);
    opacity: 1;
}

/* ======================================================================= */
/*  * ◀ End of   §36  Sticky Load-more Bar                                 */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §36b  Load-more Slide Toggle                              */
/* ======================================================================= */

/* ---- Load-more sticky: two-panel slide toggle ---- */
#catalog-load-more-sticky {
    overflow: hidden; /* clip the off-screen "load all" panel */
    display: flex;
    align-items: center;
    gap: .5rem;
}
.catalog-lm-less-side {
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease;
    position: relative;
    z-index: 1;
}
.catalog-lm-all-side {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + 140px), -50%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease;
    z-index: 1;
}
#catalog-load-more-sticky.show-load-all .catalog-lm-less-side {
    transform: translateX(-140px);
    opacity: 0;
    pointer-events: none;
}
#catalog-load-more-sticky.show-load-all .catalog-lm-all-side {
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
}
.catalog-lm-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.25);
    background: rgba(0,0,0,0.08);
    color: #1e293b;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background .15s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.catalog-lm-expand-btn:hover {
    background: rgba(0,0,0,0.15);
}
#catalog-load-more-sticky.show-load-all .catalog-lm-expand-btn {
    transform: rotate(180deg);
}

/* ======================================================================= */
/*  * ◀ End of   §36b  Load-more Slide Toggle                              */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §36c  Infinite Scroll Sentinel                            */
/* ======================================================================= */

/* Invisible 1px sentinel that the IntersectionObserver watches.
   Lives inside #catalog-load-more-wrap so it appears/disappears
   together with the load-more state (only visible when there is more to load). */
.catalog-scroll-sentinel {
    display: block;
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/* When IntersectionObserver is active the button is NOT the primary trigger —
   hide it so the auto-scroll is seamless.
   body.catalog-auto-scroll is added by view-toggle.js on init. */
body.catalog-auto-scroll #catalog-load-more {
    display: none;
}

/* Fallback: show the button again when a network error occurred during
   an append fetch.  body.catalog-append-failed is added by view-toggle.js
   on the catalog:append-failed bus event and removed on the next successful
   catalog:rendered event. */
body.catalog-auto-scroll.catalog-append-failed #catalog-load-more {
    display: inline-flex;
}

/* ======================================================================= */
/*  * ◀ End of   §36c  Infinite Scroll Sentinel                            */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §39  Bought-before Badge                                  */
/* ======================================================================= */

/* ---- Bought before badge ---- */
.catalog-bought-before {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: #0369a1;
    font-weight: 600;
}
.catalog-bought-before::before {
    content: "✓";
    font-size: .75em;
    opacity: .85;
}
/* In list view, move bought-before badge to its own row */
#catalog-list .catalog-bought-before {
    flex-basis: 100%;
    margin-top: .35rem;
}

/* In list view, keep product status badges below rating/favourite rows */
#catalog-list .catalog-list-badge-row {
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: .35rem;
}

#catalog-list .catalog-list-badge-row .catalog-featured-badge {
    flex: 0 0 auto;
    width: fit-content;
    min-width: 6.75rem;
    max-width: 7.5rem;
}

/* Collapsed state reset button — visible next to page size selector when filter bar is collapsed */
.catalog-reset-collapsed-wrap {
    opacity: 0;
    visibility: hidden;
    transform: translateX(120px);
    transition: opacity 0.3s linear 0.05s,
                visibility 0.3s linear 0.05s,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    flex: 0 0 auto;
}

.catalog-reset-collapsed-wrap .catalog-reset-collapsed-btn {
    font-size: .7rem;
    white-space: nowrap;
}

/* Show and animate in when filter card is collapsed — button flies in from right */
.catalog-filters-card.is-collapsed .catalog-reset-collapsed-wrap {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Animate out when expanded — button flies out to the right */
.catalog-filters-card:not(.is-collapsed) .catalog-reset-collapsed-wrap {
    opacity: 0;
    visibility: hidden;
    transform: translateX(120px);
}

/* Keep visible in minified state (most collapsed) — no animation, just show it */
.catalog-filters-card.is-minified .catalog-reset-collapsed-wrap {
    display: inline-flex !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: none;
}

/* Hide per-page size selector when filter card is collapsed or minified.
   It is a settings-level control that belongs with the filter body; the
   prev/next page navigation stays visible in both collapsed states. */
.catalog-filters-card.is-collapsed #catalog-page-size-wrap,
.catalog-filters-card.is-minified  #catalog-page-size-wrap {
    display: none;
}

/* Kauppa catalog heading — clickable, opens shop-all modal */
#catalog-shop-heading {
    cursor: pointer;
    transition: color .15s ease, text-shadow .15s ease;
}
#catalog-shop-heading:hover {
    color: var(--finland-blue-400) !important;
    text-shadow: 0 0 12px rgba(75, 140, 240, 0.35);
    text-decoration: none !important;
}
.text-finland-blue { color: var(--finland-blue);}
.bg-flag-blue { background-color: var(--finland-blue); }
.flag-cross {
    background:
        linear-gradient(var(--finland-blue), var(--finland-blue)) center/30% 100% no-repeat,
        linear-gradient(var(--finland-blue), var(--finland-blue)) center/100% 30% no-repeat,
        var(--finland-white);
    /* Resting state: deep lifted shadow — object sitting above the page */
    box-shadow:
        0 25px 60px rgba(0, 53, 128, 0.38),
        0 10px 28px rgba(0, 53, 128, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.18);
    transform: scale(1.035) translateY(-4px);
    transition: box-shadow .3s ease, transform .3s ease;
    cursor: pointer;
}
.shop-hero-flag:hover {
    /* Hover: shadow collapses to a tight contact shadow — flag pulls toward the viewer */
    box-shadow:
        0 6px 14px rgba(0, 53, 128, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transform: scale(1.06) translateY(-10px);
}
/* Hero body text bilingual cycling — layered crossfade with subtle Ken Burns drift */
#hero-body-text {
    display: grid;
    font-weight: 700;
    line-height: 1.72;
    color: var(--ink);
    text-wrap: balance;
    --hero-body-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hero-body-in-x: 0;
    --hero-body-in-y: 0.35rem;
    --hero-body-out-x: 0;
    --hero-body-out-y: -0.3rem;
    --hero-body-in-scale: 0.982;
    --hero-body-out-scale: 1.04;
}
#hero-body-text .hero-body-layer {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translate3d(var(--hero-body-in-x), var(--hero-body-in-y), 0) scale(var(--hero-body-in-scale));
    transform-origin: 42% 58%;
    transition:
        opacity 940ms var(--hero-body-ease),
        transform 940ms var(--hero-body-ease),
        filter 940ms var(--hero-body-ease);
    will-change: opacity, transform, filter;
    filter: blur(0.35px);
}
#hero-body-text .hero-body-layer--active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}
#hero-body-text .hero-body-layer--incoming {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}
#hero-body-text .hero-body-layer--outgoing {
    opacity: 0;
    transform: translate3d(var(--hero-body-out-x), var(--hero-body-out-y), 0) scale(var(--hero-body-out-scale));
    filter: blur(0.7px);
}
#hero-body-text.hero-body-cycle--lift {
    --hero-body-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hero-body-in-y: 0.5rem;
    --hero-body-out-y: -0.45rem;
    --hero-body-in-scale: 0.976;
    --hero-body-out-scale: 1.055;
}
#hero-body-text.hero-body-cycle--drift {
    --hero-body-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --hero-body-in-x: -0.3rem;
    --hero-body-out-x: 0.34rem;
    --hero-body-in-scale: 0.986;
    --hero-body-out-scale: 1.045;
}
#hero-body-text.hero-body-cycle--focus {
    --hero-body-ease: cubic-bezier(0.45, 0, 0.1, 1);
    --hero-body-in-y: -0.18rem;
    --hero-body-out-y: 0.26rem;
    --hero-body-in-scale: 1.018;
    --hero-body-out-scale: 0.978;
}
@media (prefers-reduced-motion: reduce) {
    #hero-body-text .hero-body-layer {
        transform: none !important;
        filter: none !important;
        transition: opacity 180ms ease;
    }
}
.product-card img, .product-card .img-placeholder {
    aspect-ratio: 4/3;
    width: 100%;
    object-fit: contain;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
}
/* Parallax images override the generic rule above — aspect-ratio/border-radius
   are handled on the wrapper; the img itself must not be constrained */
.product-card .catalog-media-wrap > img.catalog-zoomable-image {
    aspect-ratio: unset;
    height: 100%;
    object-fit: contain;
    background: none;
    border-radius: 0;
}
.catalog-zoomable-image,
.js-product-page-main-image,
.js-product-page-thumb-image,
.admin-product-zoomable-image {
    cursor: var(--cursor-magnify), zoom-in !important;
}
.order-thumb-zoomable {
    cursor: zoom-in;
}
/* Shared overlay used by catalog and order-thumb image zoom.
   The image is cloned into a fixed overlay outside any backdrop-filter
   ancestor so position:fixed resolves against the viewport. */
.image-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.18);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    cursor: zoom-out;
}
.image-zoom-overlay img {
    display: block;
    width: auto;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
    object-fit: contain;
    border-radius: 1px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0);
}
/* Wrap needed by ImageFX (shimmer/spotlight ::after, ken-burns overflow) inside overlay */
.image-zoom-overlay-fx-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.image-zoom-overlay-fx-wrap > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
    object-fit: contain;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}
/* ImageFX wrap inside the product full-size image modal */
#pm-image-full-wrap {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
}
.admin-product-zoomable-image {
    position: relative;
    z-index: 1;
    transition: transform .25s ease, box-shadow .25s ease;
    transform-origin: center center;
}
.admin-product-zoomable-image.is-zoomed { cursor: zoom-out; }
.admin-product-view-top-section {
    position: relative;
    min-height: 18rem;
    padding-right: clamp(14rem, 44%, 22rem);
}
.admin-product-view-hero {
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(10rem, 26vw, 18rem);
    max-width: 36%;
}
.admin-product-view-top-section {
    overflow: clip;
}
.admin-product-view-hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.13);
}
.admin-product-image-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.18);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    cursor: zoom-out;
}
.admin-product-image-zoom-overlay > img,
.admin-product-image-zoom-overlay .admin-zoom-fx-wrap > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 98vw;
    max-height: 98vh;
    object-fit: contain;
    border-radius: 1px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0);
}
/* zoom img styling moved to .admin-zoom-fx-wrap img (in images.php inline style) */

/* ── Admin images table ───────────────────────────────────────────────────── */
.admin-images-thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: .5rem;
    cursor: zoom-in;
    transition: transform .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
}
.admin-images-thumb:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.admin-images-thumb.is-zoomed { cursor: zoom-out; }
.admin-product-video-thumb-wrap {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
}
.admin-product-primary-video-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    background: #000;
}
.admin-product-video-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 6px rgba(0,0,0,.75);
    pointer-events: none;
}
.admin-product-view-hero__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: 6px;
}
.admin-product-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.admin-product-video-card {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 6px;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.18);
}
.admin-product-video-card__title {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.admin-product-video-card__meta,
.admin-product-video-card__comment {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted-600);
    overflow-wrap: anywhere;
}
.admin-image-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: stretch;
    padding-right: 1rem;
}
.admin-img-action-btn {
    display: block;
    width: 100%;
    min-width: 6rem;
    padding: .25rem .5rem !important;
    font-size: .75rem !important;
    text-align: center;
    white-space: nowrap;
}

/* product-modal */
.product-quick-view-modal-panel {
    display: flex;
    flex-direction: column;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    margin-bottom: 16px !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 24px 56px rgba(2, 6, 23, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.product-quick-view-modal-header,
.product-quick-view-modal-footer {
    flex: 0 0 auto;
    padding: 0.618rem 1rem 0.618rem 1rem !important;
    background: #ffffff;
    max-height: 72px !important;
}
.product-quick-view-modal-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    position: relative;
    z-index: 12;
}
.product-quick-view-modal-header-actions {
    display: flex;
    align-items: flex-start;
    gap: .618rem;
    flex-shrink: 0;
    position: relative;
    z-index: 13;
}
.product-quick-view-modal-action-stack {
    display: grid;
    grid-template-columns: 60px 60px;
    grid-template-rows: repeat(2, 2.4rem);
    gap: 0.5rem 0.5rem;
    justify-content: end;
    align-items: stretch;
    position: relative;
    z-index: 14;
}
.product-quick-view-modal-header-actions .btn {
    min-width: 9rem;
}
.pm-icon-btn {
    min-width: unset !important;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex-shrink: 0;
    flex: 0 0 2.4rem;
}
#product-modal .pm-icon-btn:hover:not(.pm-go-to-favourites) {
    transform: translateY(-2px) !important;
    transition: transform .18s ease !important;
}
.pm-icon-btn.pm-icon-btn--wide,
.product-actions-row .js-add-to-cart.pm-icon-btn {
    width: 60px !important;
    flex: 0 0 4.8rem;
    padding: 0 .5rem !important;
}
.pm-btn-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pm-btn-stack svg { flex-shrink: 0; }
#pm-add .pm-btn-stack svg:first-child {
    width: 12px !important;
    height: 12px !important;
    max-width: none !important;
    flex-shrink: 0;
}
#pm-add .pm-btn-stack svg:last-child {
    width: 18px !important;
    height: 18px !important;
    max-width: none !important;
    flex-shrink: 0;
}
#pm-go-to-cart .pm-btn-stack svg {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    flex-shrink: 0;
}
#product-modal .product-quick-view-modal-header {
    max-height: none !important;
    padding: 0.618rem 1rem 0.618rem 1rem !important;
    align-items: flex-end !important;
}
/* Keep title at the top, Takaisin button at the right */
#product-modal #pm-name {
    align-self: flex-start !important;
}
/* Takaisin close button — width = 2×square + gap (2×2.4rem + 0.5rem = 5.3rem) */
.pm-takaisin-btn {
    width: 5.05rem !important;
    min-width: 5.05rem !important;
    max-width: 5.05rem !important;
    height: 2.4rem !important;
    min-height: 2.4rem !important;
    max-height: 2.4rem !important;
    flex: 0 0 5.05rem !important;
    font-size: .8rem !important;
    padding: 0 .4rem !important;
    margin-right: 0 !important;
    justify-content: center !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Takaisin + close X on the same row, pushed to the right */
#product-modal .product-quick-view-modal-header-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: .5rem !important;
}
/* Uniform square sizing for every direct child — overrides any 60px legacy rules */
#product-modal .product-quick-view-modal-header-actions > button,
#product-modal .product-quick-view-modal-header-actions > a {
    margin: 0 !important;
    width: 2.4rem !important;
    min-width: 2.4rem !important;
    max-width: 2.4rem !important;
    height: 2.4rem !important;
    min-height: 2.4rem !important;
    max-height: 2.4rem !important;
    flex: 0 0 2.4rem !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#product-modal .product-quick-view-modal-action-stack .pm-favourite-corner,
#product-modal .product-quick-view-modal-action-stack .pm-go-to-favourites {
    margin-top: 0;
}
/* Fixed square so X close matches the Takaisin button */
.product-quick-view-modal-header-actions .modal-close {
    margin: 0;
    width: 2.4rem;
    min-width: 2.4rem;
    max-width: 2.4rem;
    height: 2.4rem;
    min-height: 2.4rem;
    max-height: 2.4rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.18);
}
.product-quick-view-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background: #ffffff;
    color: #0f172a;
    scrollbar-width: thin;
    scrollbar-color: #2563eb rgba(37, 99, 235, 0.12);
    -ms-overflow-style: auto;
    position: relative;
    z-index: 1;
}
.product-quick-view-modal-body::-webkit-scrollbar { display: block; width: 6px; }
.product-quick-view-modal-body::-webkit-scrollbar-track { background: rgba(37, 99, 235, 0.08); border-radius: 3px; }
.product-quick-view-modal-body::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 3px; }
.product-quick-view-modal-body::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }
div#product-modal.modal-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pm-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0.38;
    pointer-events: none;
    z-index: 0;
}
div#product-modal.modal-backdrop .product-quick-view-modal-panel {
    position: relative;
    z-index: 1;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
}
div#product-modal.modal-backdrop {
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
    backdrop-filter: blur(10px) saturate(115%);
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 0 !important;
}
/* Product reviews/comments modals open on top of hero modals (hero modals up to z-index 300+) */
#product-reviews-modal.open,
#product-comments-modal.open,
#product-review-detail-modal.open,
#product-comment-detail-modal.open,
#card-reviews-modal.open,
#card-comments-modal.open {
    z-index: 9950 !important;
}
/* Profile avatar preview must appear above comments/reviews modals (9950) */
#profile-avatar-modal.open { z-index: 9960 !important; }
div#product-modal.modal-backdrop .admin-form-modal-panel{
    padding: 0 !important;
    overflow: hidden;
    backdrop-filter: blur(10px) saturate(115%);
    min-height: 90vh !important;
    max-height: 90vh !important;
    height: 90vh !important;
    min-width: 96vw !important;
    max-width: 96vw !important;
    width: 96vw !important;
    padding: 32px !important;
    margin: auto !important;
}
#product-modal .product-quick-view-modal-layout {
    grid-template-columns: minmax(320px, 700px) minmax(320px, 1fr);
    gap: 1rem;
    min-height: 100%;
    height: auto;
    align-items: start;
}
#product-modal .product-quick-view-modal-media {
    width: 100%;
    max-width: 700px;
    min-width: 0;
    min-height: 0;
}
button#pm-comments-open{
    color: #fff !important;
    box-shadow: 0 0 1px white !important;
    font-weight: bold !important;
    text-shadow: 0 0 1px black !important;
}


#product-modal .pm-image-main,
#product-modal .pm-image-placeholder {
    width: 100%;
    max-width: 700px;
    height: clamp(260px, calc(100vh - 15rem), 560px) !important;
    max-height: 560px;
    aspect-ratio: 5 / 4 !important;
    object-fit: contain;
}
#product-modal.has-gallery .pm-image-main,
#product-modal.has-gallery .pm-image-placeholder {
    height: clamp(240px, calc(100vh - 17rem), 480px) !important;
    max-height: 480px;
}
/* Gallery: single-row with arrow navigation */
.pm-gallery-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 700px;
}
.pm-gallery-nav {
    flex: 0 0 1.4rem;
    width: 1.4rem;
    height: 64px;
    padding: 0;
    background: rgba(11, 29, 58, 0.55);
    border: 1px solid rgba(142, 174, 226, 0.35);
    border-radius: 0.5rem;
    color: rgba(220, 235, 255, 0.92);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.pm-gallery-nav:hover {
    background: rgba(11, 29, 58, 0.85);
}
#product-modal #pm-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.5rem !important;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    scroll-behavior: smooth;
}
#product-modal #pm-gallery .pm-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 64px;
}
/* ── Product page gallery slider ────────────────────────────────────────── */
.product-media-strip-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-media-strip-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}
.product-media-strip-track {
    display: flex;
    gap: 12px;
    transition: transform 0.25s ease;
    will-change: transform;
}
.product-media-strip-track .product-thumb {
    flex-shrink: 0;
    /* Width set by JS from the viewport width */
    cursor: pointer;
    /* Animate JS-driven border-color changes and add lift on hover */
    transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-media-strip-track .product-thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 10px rgba(0, 53, 128, 0.18);
    z-index: 1;
}
.product-media-strip-track .product-thumb.is-active {
    /* Outer ring echoes the flag-blue border set by JS; CSS adds a glow halo */
    box-shadow: 0 0 0 2px rgba(0, 53, 128, 0.22), 0 2px 8px rgba(0, 53, 128, 0.14);
}
.product-strip-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.5);
    color: var(--flag-blue, #003580);
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.product-strip-arrow:hover:not(:disabled) {
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.35);
}
.product-strip-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Product review card inside the shop/product view — fixed height with scroll for comments and reviews cards */
#product-review-card{
    max-height: 900px !important;
    overflow-y: auto;
}

/* Video thumbnail play-icon overlay — quick-view gallery and product page strip */
.pm-thumb--video,
.product-thumb[data-media-type="video"] {
    position: relative;
}
.pm-thumb-video-icon,
.product-thumb-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    pointer-events: none;
    line-height: 1;
    padding-left: 2px; /* optical centre for ▶ */
}
#product-modal .product-quick-view-modal-layout > .flex.flex-col {
    min-height: 0;
    overflow: visible;
}
#product-modal #pm-short {
    min-height: 2.5rem;
    max-height: 6rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2563eb rgba(37, 99, 235, 0.12);
}
#product-modal #pm-short::-webkit-scrollbar { display: block; width: 5px; }
#product-modal #pm-short::-webkit-scrollbar-track { background: rgba(37, 99, 235, 0.08); border-radius: 3px; }
#product-modal #pm-short::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 3px; }
#product-modal #pm-short::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }
#product-modal #pm-description {
    min-height: 4.5rem;
    max-height: 10rem;
    overflow-y: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #2563eb rgba(37, 99, 235, 0.12);
}
#product-modal #pm-description::-webkit-scrollbar { display: block; width: 5px; }
#product-modal #pm-description::-webkit-scrollbar-track { background: rgba(37, 99, 235, 0.08); border-radius: 3px; }
#product-modal #pm-description::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 3px; }
#product-modal #pm-description::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }
.pm-comments {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    padding-top: 0.75rem;
}
.pm-reviews {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
#product-modal #pm-reviews {
    max-width: 100%;
}
.pm-reviews__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.pm-reviews__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: 0 0 1px black !important;
    text-transform: uppercase;
}
.pm-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
/* 2-column grid for comments and reviews inside the quick-view product modal */
#product-modal #pm-comments-list,
#product-modal #pm-reviews-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-items: start;
}
.pm-reviews__empty {
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.82);
}
.pm-review-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: rgba(11, 29, 58, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pm-review-row__head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.pm-review-row__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.3);
    padding: 0;
    background: none;
    cursor: zoom-in;
}
.pm-review-row__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pm-review-row__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(0, 48, 135, 0.35);
    cursor: default;
}
.pm-review-row__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.pm-review-row__title {
    color: #dbeafe;
    font-weight: 700;
    line-height: 1.25;
}
.pm-review-row__meta {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.82);
}
.pm-review-row__stars {
    flex-shrink: 0;
    color: #fbbf24;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
}
.pm-review-row__body {
    margin-top: 0.5rem;
    font-size: 0.84rem;
    color: #f8fafc;
    white-space: pre-line;
}
.pm-comments__header,
.pm-comment-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.pm-comments__header--divided {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.pm-comments__header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}
.pm-sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.55)'/%3E%3C/svg%3E") no-repeat right 0.45rem center;
    background-size: auto, 8px 5px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.35rem;
    color: rgba(226,232,240,0.9);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 1.4rem 0.2rem 0.5rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, background-color 0.15s;
}
.pm-sort-select:hover {
    border-color: rgba(255,255,255,0.35);
    background-color: rgba(255,255,255,0.13);
}
.pm-sort-select:focus {
    border-color: rgba(147,197,253,0.6);
    box-shadow: 0 0 0 2px rgba(147,197,253,0.18);
}
.pm-sort-select option {
    background: #0b1d3a;
    color: #f8fafc;
}
.pm-comments__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: white !important;
    text-shadow: 0 0 1px black !important;
    text-transform: uppercase;
}
#pm-comment-submit, #pm-go-to-cart {
    background: var(--finland-blue);
    color: white;
    box-shadow: 0 0 4px rgba(255,255,255,0.382);
}
/* Match comment submit button size to footer buttons; fixed 150px width */
#product-modal #pm-comment-submit {
    font-size: .78rem !important;
    padding-top: .28rem !important;
    padding-bottom: .28rem !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
}
/* Sort dropdowns in comment and review sections: 150px to align with submit */
#pm-comments-sort,
#pm-reviews-sort {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
}
#pm-comment-submit:hover{
    background: var(--finland-blue-400);
}

.pm-comments__list,
.pm-comments-list,
.product-comments-modal-list,
.product-page-comments-list,
.account-my-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.35rem;
}
.pm-comments-table.dataTable {
    margin: 0.35rem 0 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 0.35rem !important;
}
.pm-comments-table.dataTable thead th {
    border-bottom: 0 !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.68rem;
    color: rgba(71, 85, 105, 0.72);
}
.pm-comments-table.dataTable tbody td {
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    padding: 0.45rem 0.55rem !important;
    background: rgba(255, 255, 255, 0.52);
}
.pm-comments-table.dataTable tbody td:first-child {
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.65rem 0 0 0.65rem;
    width: 38%;
}
.pm-comments-table.dataTable tbody td:last-child {
    border-right: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0 0.65rem 0.65rem 0;
}
.pm-comments-table.dataTable tbody tr.pm-comment-row {
    cursor: zoom-in;
}
.pm-comment-row,
.product-page-comment-row,
.account-my-comment-row {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.65rem;
    padding: 0.55rem 0.65rem;
    background: rgba(255, 255, 255, 0.52);
    cursor: default;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pm-comment-row:hover,
.product-page-comment-row:hover,
.account-my-comment-row:hover {
    background: rgba(219, 234, 254, 0.62);
    border-color: rgba(147, 197, 253, 0.55);
    box-shadow: 0 2px 8px rgba(43, 90, 168, 0.1);
}
.pm-comment-row:hover .pm-comment-row__meta,
.product-page-comment-row:hover .product-page-comment-row__meta,
.account-my-comment-row:hover .account-my-comment-row__meta {
    color: rgba(30, 58, 138, 0.9);
}
.pm-comment-row:hover .pm-comment-row__body,
.product-page-comment-row:hover .product-page-comment-row__body,
.account-my-comment-row:hover .account-my-comment-row__body {
    color: #1e3a8a;
}
.js-product-buy-and-cart {
    max-width: 240px;
}
/* Comment rows with avatars: flex layout */
.product-page-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.product-page-comment-row__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.3);
    padding: 0;
    background: none;
    cursor: zoom-in;
}
.product-page-comment-row__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-page-comment-row__avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(0, 48, 135, 0.35);
    cursor: default;
}
.product-page-comment-row__content {
    flex: 1;
    min-width: 0;
}
#product-back-btn
{
    max-width: 90px !important;
    max-height: 40px !important;
}
.pm-comment-row {
    cursor: zoom-in;
}
.pm-comment-row__meta,
.pm-comment-meta,
.product-page-comment-row__meta,
.account-my-comment-row__meta {
    font-size: 0.72rem;
    color: rgba(71, 85, 105, 0.86);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.pm-comment-row__body,
.pm-comment-body,
.product-page-comment-row__body,
.account-my-comment-row__body {
    font-size: 0.84rem;
    color: #334155;
    white-space: pre-line;
}
.pm-comments__empty,
.pm-comments__hint,
.pm-comment-form__label,
.pm-comment-form__status {
    font-size: 0.72rem;
    color: rgba(71, 85, 105, 0.8);
}
.pm-comments__hint {
    margin-top: 0.35rem;
}
.pm-comment-form {
    margin-top: 0.65rem;
}
.pm-comment-form__textarea {
    min-height: 4.2rem;
    resize: vertical;
}
.product-quick-view-modal-panel .pm-comments {
    border-top-color: rgba(191, 219, 254, 0.24);
}
/* Light theme hover — make text clearly readable on the blue-washed bg */
.product-page-comment-row:hover .product-page-comment-row__meta {
    color: rgba(30, 58, 138, 0.9);
}
.product-page-comment-row:hover .product-page-comment-row__body {
    color: #1e3a8a;
}

/* ======================================================================= */
/*  * ◀ End of   §39  Bought-before Badge                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §46b  Reply Nesting                                       */
/* ======================================================================= */

/* ---- Reply nesting ---- */
.product-page-comment-replies {
    margin-left: 2.5rem;
    border-left: 2px solid rgba(0, 48, 135, 0.15);
    padding-left: 0.75rem;
}
.product-page-comment-row--reply {
    background: rgba(0, 48, 135, 0.04);
}
.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: rgba(0, 48, 135, 0.6);
    background: none;
    border: none;
    padding: 0.15rem 0;
    cursor: pointer;
    margin-top: 0.35rem;
    line-height: 1;
    transition: color 0.15s;
}
.comment-reply-btn:hover {
    color: rgba(0, 48, 135, 1);
}
.product-page-reply-form-wrap {
    margin-left: 2.5rem;
    margin-bottom: 0.5rem;
}
.product-page-reply-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 48, 135, 0.05);
    border-radius: 0.5rem;
    border-left: 2px solid rgba(0, 48, 135, 0.25);
}
.product-page-reply-form__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
#product-modal .pm-comments-table.dataTable thead th {
    color: rgba(226, 232, 240, 0.82);
    background: transparent;
}
#product-modal .pm-comments-table.dataTable {
    table-layout: fixed;
    width: 100% !important;
}
#product-modal .pm-comments-table.dataTable thead th:nth-child(1),
#product-modal .pm-comments-table.dataTable tbody td:nth-child(1) { width: 34px; overflow: hidden; padding-right: 0; }
#product-modal .pm-comments-table.dataTable thead th:nth-child(2),
#product-modal .pm-comments-table.dataTable tbody td:nth-child(2) { width: 7%; white-space: nowrap; }
#product-modal .pm-comments-table.dataTable thead th:nth-child(3),
#product-modal .pm-comments-table.dataTable tbody td:nth-child(3) { width: 16%; white-space: nowrap; }
#product-modal .pm-comments-table.dataTable thead th:nth-child(4),
#product-modal .pm-comments-table.dataTable tbody td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-comment-row__date {
    color: rgba(226, 232, 240, 0.6);
    font-size: 0.75rem;
    white-space: nowrap;
}
#product-modal .comment-reply-btn,
#product-comments-modal .comment-reply-btn,
#card-comments-modal .comment-reply-btn {
    color: rgba(226, 232, 240, 0.65) !important;
}
#product-modal .comment-reply-btn:hover,
#product-comments-modal .comment-reply-btn:hover,
#card-comments-modal .comment-reply-btn:hover {
    color: #f8fafc !important;
}
#product-modal .product-page-reply-form,
#product-comments-modal .product-page-reply-form {
    background: rgba(255, 255, 255, 0.04);
    border-left: none;
}
#product-modal .pm-modal-reply-textarea,
#product-comments-modal .pm-modal-reply-textarea {
    background: rgba(75, 140, 240, 0.09) !important;
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #e2e8f0 !important;
}
#product-modal .pm-modal-reply-textarea:focus,
#product-comments-modal .pm-modal-reply-textarea:focus {
    background: rgba(75, 140, 240, 0.15) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(75, 140, 240, 0.14) !important;
}
#product-modal .pm-modal-reply-textarea::placeholder,
#product-comments-modal .pm-modal-reply-textarea::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}
#product-modal .pm-comments-table.dataTable tbody td {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(11, 29, 58, 0.38);
    color: #f8fafc;
}
#product-modal .pm-comments-table.dataTable tbody tr:hover,
#product-modal .pm-comments-table.dataTable tbody tr:hover > td,
#product-modal .pm-comments-table.dataTable tbody tr.pm-comment-row:hover,
#product-modal .pm-comments-table.dataTable tbody tr.pm-comment-row:hover > td {
    background: rgba(43, 90, 168, 0.3) !important;
    color: #f8fafc !important;
}
#product-modal .pm-comments-table.dataTable tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
#product-modal .pm-comments-table.dataTable tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#product-modal .pm-comment-row {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(11, 29, 58, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#product-modal .pm-comment-row:hover {
    background: rgba(43, 90, 168, 0.28);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#product-modal .pm-comment-row__meta,
#product-modal .pm-comment-meta,
#product-comments-modal .product-page-comment-row__meta {
    color: rgba(226, 232, 240, 0.82);
}
#product-modal .pm-comment-row:hover .pm-comment-row__meta,
#product-modal .pm-comment-row:hover .pm-comment-meta,
#product-modal .pm-comments-table.dataTable tbody tr:hover .pm-comment-row__meta,
#product-comments-modal .product-page-comment-row:hover .product-page-comment-row__meta {
    color: rgba(239, 246, 255, 0.92);
}
#product-modal .pm-comment-row__body,
#product-modal .pm-comment-body,
#product-comments-modal .product-page-comment-row__body {
    color: #f8fafc;
}
#product-modal .pm-comment-row:hover .pm-comment-row__body,
#product-modal .pm-comment-row:hover .pm-comment-body,
#product-modal .pm-comments-table.dataTable tbody tr:hover .pm-comment-row__body,
#product-comments-modal .product-page-comment-row:hover .product-page-comment-row__body {
    color: #ffffff;
}
#product-modal .pm-comments__empty,
#product-modal .pm-comments__hint,
#product-modal .pm-comment-form__label,
#product-modal .pm-comment-form__status,
#product-comments-modal #pcm-empty {
    color: rgba(226, 232, 240, 0.82) !important;
}
#product-modal .pm-comment-form__textarea {
    background: rgba(75, 140, 240, 0.09) !important;
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #f8fafc !important;
}
#product-modal .pm-comment-form__textarea:focus {
    background: rgba(75, 140, 240, 0.15) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(75, 140, 240, 0.14) !important;
}
#product-modal .pm-comment-form__textarea::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}
#product-comments-modal .product-page-comment-row {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#product-comments-modal .pm-comment-row {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#product-comments-modal .product-page-comment-row:hover {
    background: rgba(43, 90, 168, 0.18);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#product-comments-modal .pm-comment-row:hover {
    background: rgba(43, 90, 168, 0.18);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#product-comments-modal .product-page-comment-row__meta {
    color: rgba(226, 232, 240, 0.82);
}
#product-comments-modal .pm-comment-row__meta,
#product-comments-modal .pm-comment-meta {
    color: rgba(226, 232, 240, 0.82);
}
#product-comments-modal .product-page-comment-row__body {
    color: #f8fafc;
}
#product-comments-modal .pm-comment-row__body,
#product-comments-modal .pm-comment-body {
    color: #f8fafc;
}
#product-comments-modal .product-page-comment-row__avatar--initials {
    background: rgba(43, 90, 168, 0.32);
}
/* ── Full-list comments / reviews modal panel (sticky header + scrollable body) ── */
.pcm-panel {
    background: rgba(8, 20, 46, 0.84) !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: #f8fafc;
    max-width: 760px;
    width: min(95vw, 760px);
    max-height: min(90vh, 820px);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}
.pcm-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(142, 174, 226, 0.2);
    flex-shrink: 0;
    background: rgba(6, 15, 38, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}
.pcm-panel__header h3 {
    color: var(--finland-blue-400) !important;
    font-size: 1.05rem;
    font-weight: 700;
    flex-shrink: 1;
    min-width: 0;
}
/* Header is always dark-glass so pin to the light shade of the variable */
body:not(.theme-dark):not(.theme-mixed) .pcm-panel__header h3 {
    color: #93c5fd !important;
}
.pcm-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.pcm-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(142, 174, 226, 0.4) transparent;
}
.pcm-panel__body::-webkit-scrollbar { width: 5px; }
.pcm-panel__body::-webkit-scrollbar-track { background: transparent; }
.pcm-panel__body::-webkit-scrollbar-thumb {
    background: rgba(142, 174, 226, 0.4);
    border-radius: 999px;
}
.pcm-panel__body::-webkit-scrollbar-thumb:hover { background: rgba(142, 174, 226, 0.7); }
.pcm-panel__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.45rem 1.5rem;
    border-top: 1px solid rgba(142, 174, 226, 0.2);
    flex-shrink: 0;
    background: rgba(6, 15, 38, 0.96);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
}
.pcm-panel__footer .btn {
    height: 38px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
}
/* Detail modals keep the original flat panel style */
/* ── Card-view comments modal product strip ── */
#card-comments-modal .pcm-panel {
    max-width: 680px;
    width: min(95vw, 680px);
}
.ccm-product-strip {
    display: flex;
    gap: 0.875rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(142, 174, 226, 0.2);
    margin-bottom: 1rem;
    align-items: flex-start;
}
.ccm-product-strip__img {
    width: 108px;
    height: 86px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(6, 15, 38, 0.6);
}
.ccm-product-strip__img--placeholder {
    background: rgba(30, 50, 90, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccm-product-strip__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ccm-product-strip__name {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    color: #93c5fd;
    text-decoration: underline dotted rgba(147, 197, 253, 0.5);
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccm-product-strip__name:hover { color: #bfdbfe; }
.ccm-product-strip__stars {
    font-size: 0.75rem;
    color: #fbbf24;
    line-height: 1.2;
}
.ccm-product-strip__price {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    margin-top: 0.1rem;
}
/* Override catalog-price-* defaults which use dark ink — inside the dark-glass
   card-comments-modal they would be invisible without these overrides. */
#card-comments-modal .catalog-price-current {
    color: #ffffff !important;
}
#card-comments-modal .catalog-price-original {
    color: rgba(255, 255, 255, 0.55) !important;
}
.ccm-product-strip__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.2rem;
}
.product-comments-modal-panel {
    -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: #f8fafc;
    padding: 1rem 1rem 1.618rem 1.618rem;
}
#product-comments-modal .product-comments-modal-panel .text-flag-blue,
#product-reviews-modal .pcm-panel .text-flag-blue {
    color: #ffffff !important;
}
#product-comments-modal .product-comments-modal-panel .text-gray-500,
#product-comments-modal .product-comments-modal-panel .text-gray-600,
#product-comments-modal .product-comments-modal-panel .text-gray-700,
#product-page-comment-modal .product-comments-modal-panel .text-gray-500,
#product-page-comment-modal .product-comments-modal-panel .text-gray-600,
#product-page-comment-modal .product-comments-modal-panel .text-gray-700 {
    color: rgba(226, 232, 240, 0.82) !important;
}
#product-page-comment-modal .product-comments-modal-panel .product-page-comment-row__body {
    color: #f8fafc;
}
#product-comments-modal .product-comments-modal-list {
    padding-left: 0.618rem;
    padding-bottom: 0.618rem;
}
/* ── #product-reviews-modal dark-glass row overrides ───────────────────── */
#product-reviews-modal .pm-review-row {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#product-reviews-modal .pm-review-row:hover {
    background: rgba(43, 90, 168, 0.18);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#product-reviews-modal #prm-empty {
    color: rgba(226, 232, 240, 0.82) !important;
}
#product-reviews-modal .comment-reply-btn {
    color: rgba(226, 232, 240, 0.65) !important;
}
/* ── card-comments-modal — match pcm dark-glass context ── */
#card-comments-modal .pm-comment-form__label,
#card-comments-modal .pm-comment-form__status,
#card-comments-modal #ccm-empty {
    color: rgba(226, 232, 240, 0.82) !important;
}
#card-comments-modal .pm-comment-form__textarea {
    background: rgba(75, 140, 240, 0.09) !important;
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #f8fafc !important;
}
#card-comments-modal .pm-comment-form__textarea:focus {
    background: rgba(75, 140, 240, 0.15) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(75, 140, 240, 0.14) !important;
}
#card-comments-modal .pm-comment-form__textarea::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}
#card-comments-modal .pm-comment-row,
#card-comments-modal .product-page-comment-row {
    cursor: default;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#card-comments-modal .product-page-comment-row {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#card-comments-modal .pm-comment-row:hover,
#card-comments-modal .product-page-comment-row:hover {
    background: rgba(43, 90, 168, 0.18);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#card-comments-modal .pm-comment-row__meta,
#card-comments-modal .pm-comment-meta,
#card-comments-modal .product-page-comment-row__meta {
    color: rgba(226, 232, 240, 0.82);
}
#card-comments-modal .pm-comment-row__body,
#card-comments-modal .pm-comment-body,
#card-comments-modal .product-page-comment-row__body {
    color: #f8fafc;
}
/* ── card-reviews-modal — use the neighbouring comments modal text palette ── */
#card-reviews-modal .pm-write-review__title,
#card-reviews-modal .pm-write-review__status,
#card-reviews-modal .pm-comments__title,
#card-reviews-modal #crm-empty,
#card-reviews-modal #crm-sign-in-note {
    color: rgba(226, 232, 240, 0.82) !important;
}
#card-reviews-modal .catalog-price-current {
    color: #ffffff !important;
}
#card-reviews-modal .catalog-price-original {
    color: rgba(255, 255, 255, 0.55) !important;
}
#card-reviews-modal .pm-review-row {
    cursor: default;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#card-reviews-modal .pm-review-row:hover {
    background: rgba(43, 90, 168, 0.18);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#card-reviews-modal .pm-review-row__meta,
#card-reviews-modal .pm-comment-meta,
#card-reviews-modal .pm-modal-reply .pm-comment-row__meta,
#card-reviews-modal .pm-modal-reply .pm-comment-meta {
    color: rgba(226, 232, 240, 0.82);
}
#card-reviews-modal .pm-review-row__title,
#card-reviews-modal .pm-review-title,
#card-reviews-modal .pm-review-row__body,
#card-reviews-modal .pm-comment-body,
#card-reviews-modal .pm-modal-reply .pm-comment-row__body,
#card-reviews-modal .pm-modal-reply .pm-comment-body {
    color: #f8fafc;
}
#card-reviews-modal .comment-reply-btn {
    color: rgba(226, 232, 240, 0.82) !important;
}
#card-reviews-modal .comment-reply-btn:hover {
    color: #f8fafc !important;
}
#card-reviews-modal .pm-review-row__stars {
    color: #fbbf24;
}
#product-reviews-modal .comment-reply-btn:hover {
    color: #f8fafc !important;
}
#product-reviews-modal .product-page-reply-form {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 255, 255, 0.15);
}
#product-reviews-modal .pm-modal-reply-textarea {
    color: #e2e8f0;
    background: rgba(15, 30, 58, 0.55);
    border-color: rgba(99, 132, 200, 0.3);
}
/* ── Reviews modal: always-dark-glass text overrides ── */
#product-reviews-modal .pm-review-row__title {
    color: #bfdbfe;
    text-shadow: 0 0 10px rgba(147, 197, 253, 0.55);
}
#product-reviews-modal .pm-review-row__meta {
    color: rgba(186, 230, 253, 0.75);
}
#product-reviews-modal .pm-review-row__body {
    color: #f0f9ff;
    text-shadow: 0 0 8px rgba(224, 242, 254, 0.25);
}
#product-reviews-modal .pm-review-row__stars {
    color: #fde047;
    text-shadow: 0 0 8px rgba(253, 224, 71, 0.65);
}
#product-reviews-modal .pm-modal-reply {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(142, 174, 226, 0.14);
}
#product-reviews-modal .pm-comment-meta {
    color: rgba(186, 230, 253, 0.75);
}
#product-reviews-modal .pm-comment-body {
    color: #f0f9ff;
}
#product-reviews-modal .pm-modal-reply .pm-comment-row__meta,
#product-reviews-modal .pm-modal-reply .pm-comment-meta {
    color: rgba(186, 230, 253, 0.65);
}
#product-reviews-modal .pm-modal-reply .pm-comment-row__body,
#product-reviews-modal .pm-modal-reply .pm-comment-body {
    color: rgba(224, 242, 254, 0.88);
}
#product-reviews-modal .comment-reply-btn {
    color: rgba(147, 197, 253, 0.7) !important;
}
#product-reviews-modal .comment-reply-btn:hover {
    color: #bfdbfe !important;
    text-shadow: 0 0 6px rgba(147, 197, 253, 0.45);
}
#product-sales-modal .product-sales-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;
    padding: 1rem 1rem 1.618rem 1.618rem;
}
#product-sales-modal .product-sales-modal-panel .text-flag-blue {
    color: #e2e8f0 !important;
}
#product-sales-modal #psm-no-data,
#product-sales-modal #psm-stats {
    color: rgba(226, 232, 240, 0.82) !important;
}
#product-sales-modal #psm-period-bar,
#product-sales-modal #psm-stats,
#product-sales-modal #psm-no-data,
#product-sales-modal #psm-chart {
    margin-left: 0.618rem;
}
#product-sales-modal #psm-no-data {
    margin-bottom: 0.618rem;
    color: rgba(15, 23, 42, 0.82) !important;
}
#product-sales-modal #psm-stats {
    color: rgba(226, 232, 240, 0.86);
}
/* Price-history modal — same glass theme as product-sales-modal */
#product-price-history-modal .product-sales-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;
    padding: 1rem 1rem 1.618rem 1.618rem;
}
#product-price-history-modal .product-sales-modal-panel .text-flag-blue {
    color: #e2e8f0 !important;
}
#product-price-history-modal #pphm-no-data {
    color: rgba(226, 232, 240, 0.82) !important;
    margin-bottom: 0.618rem;
}
#product-price-history-modal #pphm-period-bar,
#product-price-history-modal #pphm-no-data,
#product-price-history-modal #pphm-chart {
    margin-left: 0.618rem;
}
#product-price-history-modal #pphm-title {
    color: #e2e8f0 !important;
}
#product-price-history-modal .modal-close {
    color: rgba(226, 232, 240, 0.7) !important;
}
.product-comments-modal-panel,
.account-my-comments-modal-panel {
    max-width: 760px;
    width: min(95vw, 760px);
}
.account-modal-panel {
    --account-modal-body-max-height: min(90vh, 780px);
    --account-modal-header-height: 4.35rem;
    --account-modal-footer-height: 4.15rem;
    --account-modal-max-height: min(calc(100vh - 2rem), calc(var(--account-modal-body-max-height) + var(--account-modal-header-height) + var(--account-modal-footer-height)));
    display: flex;
    flex-direction: column;
    width: min(95vw, 560px);
    max-height: var(--account-modal-max-height);
    padding: 0 !important;
    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%);
}
.account-modal-panel--sm {
    width: min(95vw, 460px);
}
.account-modal-panel--form {
    width: min(95vw, 560px);
}
.account-modal-panel--wide {
    width: min(95vw, 760px);
}
#account-profile-modal.open,
#account-password-modal.open,
#account-cart-rename-modal.open,
#account-my-comments-modal.open,
#account-my-reviews-modal.open,
#account-delete-modal.open,
#account-review-modal.open,
#order-timeline-modal.open,
#product-sales-modal.open,
#profile-pic-upload-modal.open,
#order-detail-modal.open,
#product-comments-modal.open,
#product-reviews-modal.open,
#comment-pending-modal.open,
#cart-submodal.open {
    display: flex !important;
    z-index: var(--z-order-modal) !important;
}
#product-modal.open {
    display: flex !important;
    z-index: var(--z-order-edit-modal) !important;
}
#product-image-modal.open {
    display: flex !important;
    z-index: var(--z-image-modal) !important;
}
/* Sub-modals triggered from within #product-modal must sit above it */
#product-comments-modal.open,
#product-reviews-modal.open,
#product-sales-modal.open,
#comment-pending-modal.open,
#account-review-modal.open,
#cart-submodal.open,
#profile-avatar-modal.open,
#product-review-detail-modal.open,
#product-comment-detail-modal.open {
    z-index: var(--z-product-sub-modal) !important;
}
#profile-avatar-modal .modal-panel {
    padding-left: 1.25rem;
    padding-bottom: 1.25rem;
}
#profile-avatar-modal-img {
    background: transparent;
}
.pm-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    background: rgba(11, 29, 58, 0.28);
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pm-load-more-btn:hover {
    background: rgba(43, 90, 168, 0.45);
    border-color: rgba(142, 174, 226, 0.6);
}
.pm-load-more-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.5rem;
}
.pm-load-more-row .pm-load-more-btn {
    margin-top: 0;
}
.pm-load-more-btn--collapse {
    background: rgba(80, 20, 20, 0.25);
    border-color: rgba(200, 100, 100, 0.3);
    color: rgba(252, 165, 165, 0.85);
}
.pm-load-more-btn--collapse:hover {
    background: rgba(140, 30, 30, 0.45);
    border-color: rgba(240, 120, 120, 0.55);
    color: #fca5a5;
}
.pm-load-more-btn--open-all {
    background: rgba(0, 48, 135, 0.25);
    border-color: rgba(99, 149, 237, 0.4);
    color: #93c5fd;
}
.pm-load-more-btn--open-all:hover {
    background: rgba(0, 48, 135, 0.5);
    border-color: rgba(147, 197, 253, 0.65);
    color: #bfdbfe;
}
/* Product modal reply thread rows */
.pm-modal-replies {
    margin-top: 0.45rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(29, 78, 216, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
/* Depth levels — change border color and add extra indent per level */
.pm-modal-replies--depth-2 {
    padding-left: 1.25rem;
    border-left-color: rgba(13, 148, 136, 0.45);
}
.pm-modal-replies--depth-3 {
    padding-left: 1.5rem;
    border-left-color: rgba(109, 40, 217, 0.4);
}
.pm-modal-replies--depth-4 {
    padding-left: 1.75rem;
    border-left-color: rgba(180, 83, 9, 0.4);
}
/* Truncated-reply count chip shown inside quick-view modal reply lists */
.pm-replies-truncated {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(147, 197, 253, 0.75);
    padding: 0.18rem 0.45rem;
    margin-top: 0.15rem;
    border-radius: 0.3rem;
    background: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.15);
    display: inline-block;
    cursor: pointer;
}
.pm-modal-reply {
    padding: 0.3rem 0.45rem;
    border-radius: 0.4rem;
    background: rgba(29, 78, 216, 0.04);
    border: 1px solid rgba(29, 78, 216, 0.1);
}
/* ↩ @Name attribution chip */
.pm-thread-at {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #1e3a8a;
    background: rgba(0, 48, 135, 0.10);
    border: 1px solid rgba(0, 48, 135, 0.28);
    border-radius: 0.28rem;
    padding: 0.02rem 0.28rem;
    margin-right: 0.3rem;
    white-space: nowrap;
    vertical-align: middle;
}
.pm-modal-reply .pm-comment-row__meta,
.pm-modal-reply .pm-comment-meta {
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.77rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.pm-modal-reply .pm-comment-row__body,
.pm-modal-reply .pm-comment-body {
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.85);
    margin-top: 0.18rem;
}
.pm-modal-reply-form-wrap {
    margin-top: 0.5rem;
}
.pm-modal-reply-textarea {
    width: 100%;
    font-size: 0.82rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(29, 78, 216, 0.2);
    color: #0f172a;
    resize: vertical;
}

.account-my-comments-modal-panel {
    --account-modal-header-height: 5.35rem;
}
#account-review-modal .account-modal-panel {
    --account-modal-header-height: 3.7rem;
    --account-modal-footer-height: 3.35rem;
}
/* Order timeline modal and profile-pic upload modal — force a tall, simple
   layout. The base class uses a negative-margin scroll trick that only works
   when the panel has enough content-driven height. These modals need an
   explicit height so the body always has a useful scroll area, and a plain
   padding layout so nothing hides under the header or footer. */
#order-timeline-modal .account-modal-panel {
    height: min(calc(100vh - 2rem), 700px);
    min-height: 320px;
}
#order-timeline-modal .account-modal-body {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1rem 1.25rem 1.25rem;
    max-height: none;
}
#profile-pic-upload-modal .account-modal-panel {
    height: min(calc(100vh - 2rem), 540px);
    min-height: 280px;
}
#profile-pic-upload-modal .account-modal-body {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1rem 1.25rem 1.25rem;
    max-height: none;
}
.account-modal-header,
.account-modal-footer {
    flex: 0 0 auto;
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1.25rem;
    z-index: 2;
    border: none !important;
}
.account-modal-header {
    justify-content: space-between;
    border: none !important;
}
.account-modal-footer {
    justify-content: flex-end;
    border: none !important;
}
#account-review-modal .account-modal-footer {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
#account-review-modal .account-modal-header {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
#account-review-modal .account-modal-footer .btn {
    min-height: 2rem;
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
    font-size: 0.82rem;
    line-height: 1.1;
}
.account-modal-title {
    margin: 0;
    flex: 1 1 auto;
}
.account-modal-body {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--account-modal-body-max-height) + var(--account-modal-header-height) + var(--account-modal-footer-height));
    margin-top: calc(-1 * var(--account-modal-header-height));
    margin-bottom: calc(-1 * var(--account-modal-footer-height));
    overflow-y: auto;
    padding: calc(var(--account-modal-header-height) + 1rem) 1.25rem calc(var(--account-modal-footer-height) + 1rem);
    background: rgba(11, 29, 58, 0.22) !important;
    color: #ffffff !important;
    border: none !important;
}
.account-modal-panel .text-gray-500,
.account-modal-panel .text-gray-600,
.account-modal-panel .text-gray-700,
.account-modal-panel .text-flag-blue,
.account-modal-panel .text-finland-blue,
.account-modal-panel label {
    color: #e2e8f0 !important;
}
.account-modal-panel .text-red-600 {
    color: #fca5a5 !important;
}
.account-modal-panel .input,
.account-modal-panel .select,
.account-modal-panel .textarea,
.account-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;
}
.account-modal-panel .input::placeholder,
.account-modal-panel .textarea::placeholder {
    color: rgba(226, 232, 240, 0.72) !important;
}
.account-modal-panel .select option {
    background: #0b1d3a;
    color: #ffffff;
}
.account-modal-form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: var(--account-modal-max-height);
    flex-direction: column;
}
.product-comments-modal-list,
.account-my-comments-list {
    padding-right: 0.35rem;
}
.account-my-comment-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.75rem;
}
.account-my-comment-row__thumb {
    width: 56px;
    height: 56px;
    border-radius: 0.55rem;
    object-fit: cover;
    background: rgba(15, 23, 42, 0.42);
}
.account-my-comment-row__product {
    font-weight: 800;
    color: #dbeafe;
}
.account-my-comment-row--pending {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.14);
}
.account-my-comment-row--declined {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.14);
}
.account-my-comment-row__mod-note {
    margin-top: 0.35rem;
    padding: 0.35rem 0.55rem;
    background: rgba(127, 29, 29, 0.32);
    border-radius: 0.4rem;
    font-size: 0.75rem;
    color: #fecaca;
}
.account-my-comment-row__mod-note-label {
    font-weight: 700;
}
.account-modal-panel .account-my-comment-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(11, 29, 58, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-modal-panel .account-my-comment-row:hover {
    background: rgba(43, 90, 168, 0.28);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.account-modal-panel .account-my-comment-row:hover .account-my-comment-row__meta {
    color: rgba(226, 232, 240, 0.95);
}
.account-modal-panel .account-my-comment-row__meta {
    color: rgba(226, 232, 240, 0.82);
}
.account-modal-panel .account-my-comment-row__body {
    color: #f8fafc;
}
.account-modal-panel .account-my-comment-row__product,
.account-modal-panel .account-my-comment-row__product a {
    color: #dbeafe;
}
.account-modal-panel .pm-comment-row,
.account-modal-panel .product-page-comment-row {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(11, 29, 58, 0.38);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-modal-panel .pm-comment-row:hover,
.account-modal-panel .product-page-comment-row:hover {
    background: rgba(43, 90, 168, 0.28);
    border-color: rgba(142, 174, 226, 0.45);
    box-shadow: 0 2px 12px rgba(43, 90, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.account-modal-panel .pm-comment-row__meta,
.account-modal-panel .product-page-comment-row__meta {
    color: rgba(226, 232, 240, 0.82);
}
.account-modal-panel .pm-comment-row__body,
.account-modal-panel .product-page-comment-row__body {
    color: #f8fafc;
}
.account-modal-panel #timeline-content .account-my-comment-row__body {
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.34);
}
/* Quick review form inside the product detail modal */

/* Read-only existing review display */
.pm-review-readonly {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.pm-review-readonly__header {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.pm-review-readonly__edit-btn {
    font-size: .72rem !important;
    padding: .28rem .7rem !important;
    margin-top: 0.5rem !important;
    opacity: 1;
    background: rgba(15, 23, 42, 0.78) !important;
    color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.85) !important;
}
.pm-review-readonly__edit-btn:hover {
    background: rgba(15, 23, 42, 0.92) !important;
    color: #ffffff !important;
}
.pm-review-readonly__delete-btn {
    font-size: .72rem !important;
    padding: .28rem .7rem !important;
    margin-top: 0.5rem !important;
    opacity: 1;
    background: rgba(127, 17, 17, 0.82) !important;
    color: #ffffff !important;
    border-color: rgba(127, 17, 17, 0.9) !important;
}
.pm-review-readonly__delete-btn:hover {
    background: rgba(127, 17, 17, 0.95) !important;
    color: #ffffff !important;
}
.pm-review-readonly__stars {
    font-size: 1.2rem;
    color: #f59e0b;
    letter-spacing: .05em;
}
.pm-review-readonly__title {
    font-size: .82rem;
    font-weight: 700;
    color: #1e293b;
}
.pm-review-readonly__body {
    font-size: .82rem;
    color: #ffffff;
    white-space: pre-wrap;
}
/* "Leave a review" trigger button row */
.product-quick-view-modal-footer .pm-review-trigger {
    flex: 1 1 0;
    min-width: 0;
    max-width: 12rem;
}
.pm-review-trigger__btn {
    font-size: .78rem !important;
    padding: .28rem .75rem !important;
    width: 100%;
}

#product-modal #pm-write-review {
    width: min(100%, 700px);
    max-width: 700px;
    margin-top: 0.9rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(191, 219, 254, 0.24);
}

#product-modal #pm-review-form-wrap,
#product-modal #pm-review-readonly {
    width: 100%;
}

.pm-write-review__header {
    display: flex;
    align-items: center;
}
#product-modal .pm-write-review__header {
    padding: 0.35rem 0.5rem !important;
    margin-top: 0.35rem !important;
}
.pm-write-review__title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--finland-blue);
}
#product-modal .pm-write-review__title {
    font-size: .72rem;
}
.pm-write-review__form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
#product-modal .pm-write-review__form {
    gap: 0.4rem;
}
.pm-write-review__stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .15rem;
}
#product-modal .pm-write-review__stars {
    margin-top: 0.2rem;
}
.pm-star-btn {
    background: none;
    border: none;
    font-size: 1.55rem;
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0 .1rem;
    transition: color .12s ease, transform .12s ease;
}
.pm-star-btn.is-active,
.pm-star-btn.is-hovered {
    color: #f59e0b;
}
.pm-star-btn:hover ~ .pm-star-btn {
    color: #f59e0b;
}
.pm-star-btn:hover {
    color: #f59e0b;
    transform: scale(1.18);
}
#product-modal .pm-star-btn {
    font-size: 1.38rem;
}
.pm-write-review__input {
    font-size: .82rem;
}
#product-modal .pm-write-review__input {
    min-height: 2.15rem;
    padding: 0.42rem 0.68rem;
    font-size: .78rem;
    background: rgba(75, 140, 240, 0.09) !important;
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #f8fafc !important;
}
#product-modal .pm-write-review__input:focus {
    background: rgba(75, 140, 240, 0.15) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(75, 140, 240, 0.14) !important;
}
#product-modal .pm-write-review__input::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}
.pm-write-review__textarea {
    font-size: .82rem;
    resize: vertical;
    min-height: 4.5rem;
}
#product-modal .pm-write-review__textarea {
    min-height: 3.55rem;
    padding: 0.5rem 0.68rem;
    font-size: .78rem;
    background: rgba(75, 140, 240, 0.09) !important;
    border-color: rgba(142, 174, 226, 0.28) !important;
    color: #f8fafc !important;
}
#product-modal .pm-write-review__textarea:focus {
    background: rgba(75, 140, 240, 0.15) !important;
    border-color: rgba(142, 174, 226, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(75, 140, 240, 0.14) !important;
}
#product-modal .pm-write-review__textarea::placeholder {
    color: rgba(148, 163, 184, 0.55) !important;
}
.product-quick-view-modal-panel :is(.pm-comment-form__textarea, .pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#product-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#product-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#card-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#card-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea) {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.72rem;
    border: 1px solid rgba(170, 199, 242, 0.34) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)) !important;
    color: #f8fafc !important;
    font-family: var(--font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: 0.86rem !important;
    line-height: 1.45;
    padding: 0.64rem 0.76rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 10px 26px rgba(15, 23, 42, 0.16);
    outline: none;
    resize: vertical;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.product-quick-view-modal-panel :is(.pm-comment-form__textarea, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#product-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#product-reviews-modal :is(.pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#card-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea),
#card-reviews-modal :is(.pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea) {
    min-height: 4.4rem;
}
.product-quick-view-modal-panel :is(.pm-comment-form__textarea, .pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea):focus,
#product-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea):focus,
#product-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea):focus,
#card-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea):focus,
#card-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea):focus {
    border-color: rgba(186, 216, 255, 0.74) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.09)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 3px rgba(75, 140, 240, 0.18),
        0 14px 32px rgba(15, 23, 42, 0.18);
}
.product-quick-view-modal-panel :is(.pm-comment-form__textarea, .pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea)::placeholder,
#product-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea)::placeholder,
#product-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea)::placeholder,
#card-comments-modal :is(.pm-comment-form__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea)::placeholder,
#card-reviews-modal :is(.pm-write-review__input, .pm-write-review__textarea, .comment-edit-form-wrap textarea, .pm-modal-reply-form-wrap textarea)::placeholder {
    color: rgba(203, 213, 225, 0.62) !important;
}
.pm-write-review__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
#product-modal .pm-write-review__actions {
    gap: 0.55rem;
}
#product-modal .pm-write-review__actions .btn {
    min-height: 2.1rem;
    padding: 0.35rem 0.8rem !important;
    font-size: .76rem !important;
}
.pm-write-review__status {
    font-size: .78rem;
}
.pm-write-review__status--ok {
    color: #059669;
}
.pm-write-review__status--err {
    color: #dc2626;
}
.product-quick-view-modal-footer {
    display: flex;
    justify-content: center;
    gap: .5rem;
    max-height: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
}
.product-quick-view-modal-footer .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: 15rem;
}
.product-quick-view-modal-footer .btn-primary {
    border-color: rgba(148, 163, 184, 0.58);
}
.product-variant-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .8rem;
}
.product-variant-picker--modal .product-variant-picker__grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.product-variant-group {
    display: grid;
    gap: .42rem;
}
.product-variant-group__label {
    display: block;
    font-size: .72rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}
.product-variant-group__select {
    width: 100%;
}
#product-variant-picker .product-variant-group__select {
    border: 2px solid #9ca3af !important;
}
.product-variant-group__select option[disabled] {
    color: #94a3b8;
}
.pm-variant-wrap-attention {
    animation: pm-variant-shake .55s ease 3 forwards;
}
.pm-variant-wrap-attention .product-variant-group__select {
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.18);
    border-color: rgba(0, 53, 128, 0.52);
}
@keyframes pm-variant-shake {
    0% { transform: translateX(0); }
    18% { transform: translateX(-7px); }
    36% { transform: translateX(6px); }
    54% { transform: translateX(-5px); }
    72% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
/* In-cart stepper inside the product quick-view modal */
#pm-in-cart {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #1d4ed8;
    font-size: .75rem;
    font-weight: 600;
    flex-wrap: nowrap;
}
.pm-cart-qty-wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .35rem;
}
.pm-cart-qty-label {
    line-height: 1.2;
}
.pm-cart-qty-btns {
    display: inline-flex;
    gap: .25rem;
}
.pm-cart-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid rgba(29, 78, 216, .35);
    border-radius: .35rem;
    background: rgba(29, 78, 216, .07);
    color: #1d4ed8;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
    flex-shrink: 0;
}
.pm-cart-qty-btn:hover {
    background: rgba(29, 78, 216, .18);
    border-color: rgba(29, 78, 216, .65);
}
.pm-cart-qty-btn--down {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, .35);
    background: rgba(185, 28, 28, .06);
}
.pm-cart-qty-btn--down:hover {
    background: rgba(185, 28, 28, .16);
    border-color: rgba(185, 28, 28, .65);
}
/* Inside the product quick-view modal the background is always dark,
   so force light colours regardless of the page theme */
#product-modal #pm-in-cart,
#account-product-modal #pm-in-cart {
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 6px rgba(255, 255, 255, .5);
}
#product-modal .pm-cart-qty-btn,
#account-product-modal .pm-cart-qty-btn {
    color: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    text-shadow: 0 0 8px rgba(255, 255, 255, .6);
    box-shadow: 0 0 6px rgba(255, 255, 255, .15);
}
#product-modal .pm-cart-qty-btn:hover,
#account-product-modal .pm-cart-qty-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .65);
    box-shadow: 0 0 10px rgba(255, 255, 255, .3);
}
#product-modal .pm-cart-qty-btn--down,
#account-product-modal .pm-cart-qty-btn--down {
    color: rgba(255, 200, 200, .95);
    border-color: rgba(255, 180, 180, .38);
    background: rgba(255, 180, 180, .1);
    text-shadow: 0 0 8px rgba(255, 200, 200, .55);
}
#product-modal .pm-cart-qty-btn--down:hover,
#account-product-modal .pm-cart-qty-btn--down:hover {
    background: rgba(255, 180, 180, .22);
    border-color: rgba(255, 180, 180, .65);
    box-shadow: 0 0 10px rgba(255, 180, 180, .25);
}

/* ======================================================================= */
/*  * ◀ End of   §46b  Reply Nesting                                       */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §44c  Product Modal Prev/Next Nav                         */
/* ======================================================================= */

/* ---- Product modal prev/next navigation buttons ---- */
.product-quick-view-modal-panel {
    position: relative;
}
.pm-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 40px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: .72;
    transition: opacity .18s, background .18s;
    padding: 0;
    pointer-events: auto;
}
.pm-nav-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,.60);
}
.pm-nav-btn--prev {
    left: 4px;
}
.pm-nav-btn--next {
    right: 4px;
}
/* ---- Admin filter bars: unified font, size, width & centred text ----------
   Applies to .admin-order-filters-card, .admin-product-filters-card,
   .admin-category-filters-card. Rules are scoped to these three cards so
   the storefront catalog bar is unchanged.
   -------------------------------------------------------------------- */

/* ----- Admin filter-bar: expand to header width when sticky ----------------
   The admin <header> sits in .admin-page-shell with m-4 (1rem).
   <main> uses mx-4, so filter cards are already at the same horizontal
   extent. For views that wrap the filter card in a .glass.p-5 container the
   card must break out by 1.25rem each side to reach that same boundary.
   `.is-sticky` is toggled by initAdminFilterBarSticky() in app.js.         */

/* Visual locked-in state: tighter bottom margin and a connecting shadow     */
/* Reduce vertical gaps above and below sticky filter bars to 2px */
.admin-page-shell .catalog-filters-card.is-sticky {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition:
        margin .22s ease,
        box-shadow .22s ease,
        width .22s ease,
        margin-left .22s ease,
        margin-right .22s ease;
}

/* Break out of the glass p-5 wrapper (1.25rem padding each side)           */
.admin-page-shell .glass.p-5 > .catalog-filters-card.is-sticky,
.admin-page-shell .glass.p-5 > * > .catalog-filters-card.is-sticky {
    width: calc(100% + 2.5rem) !important;
    margin-left: -1.25rem !important;
    margin-right: -1.25rem !important;
    padding-left: 1.25rem !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding-right: 1.25rem !important;
}

.admin-order-filters-card .select,
.admin-product-filters-card .select,
.admin-category-filters-card .select {
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
    text-align-last: center; /* aligns selected text in Chrome/Firefox */
}
/* Options stay left-aligned */
.admin-order-filters-card .select option,
.admin-product-filters-card .select option,
.admin-category-filters-card .select option {
    text-align: left;
    font-weight: 400;
}
/* Centre the Select2 rendered text + placeholder */
.admin-order-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.admin-order-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder,
.admin-product-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.admin-product-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder,
.admin-category-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.admin-category-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
}
/* Override the storefront .78rem rule that catalog-filters-card sets on all .select */
.catalog-filters-card.admin-product-filters-card .select,
.catalog-filters-card.admin-order-filters-card .select,
.catalog-filters-card.admin-category-filters-card .select,
.catalog-filters-card.admin-product-filters-card .catalog-sort-select,
.catalog-filters-card.admin-order-filters-card .catalog-sort-select,
.catalog-filters-card.admin-category-filters-card .catalog-sort-select,
.catalog-filters-card.admin-product-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.catalog-filters-card.admin-product-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder,
.catalog-filters-card.admin-order-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.catalog-filters-card.admin-order-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder,
.catalog-filters-card.admin-category-filters-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.catalog-filters-card.admin-category-filters-card .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: .875rem !important;
    font-weight: 600 !important;
}

/* 2. Same font size on price inputs */
.admin-product-filters-card .input {
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
}
.admin-product-filters-card .input::placeholder {
    font-weight: 500;
    text-align: center;
}

/* 3. Status, customer and sort selects all share the same dynamic width —
      they flex equally to fill the available row space.                   */
.admin-order-secondary-filters .order-status-filter-select-wrap,
.admin-order-secondary-filters .admin-order-customer-wrap,
.admin-order-secondary-filters .admin-order-sort-wrap {
    flex: 1 1 8.5rem;
    min-width: 8.5rem;
    max-width: 22rem;
    box-sizing: border-box;
}
.admin-order-secondary-filters .order-status-filter-select-wrap .select,
.admin-order-secondary-filters .admin-order-sort-wrap .select {
    width: 100%;
}
/* Customer Select2 fills its wrapper */
.admin-order-customer-wrap {
    flex: 1 1 8.5rem;
    min-width: 8.5rem;
    max-width: 22rem;
}

/* 4. Two price inputs side by side = one filter-width slot (8.5rem total).
      The wrapper sits in the secondary-filters as a single cell.          */
.admin-product-price-pair,
.admin-order-price-pair {
    display: flex;
    gap: .3rem;
    flex: 0 1 8.5rem;   /* allow shrinking to prevent toolbar overflow */
    min-width: 0;
    max-width: 8.5rem;
    box-sizing: border-box;
    align-items: flex-end;
    height: 2.85rem;
    min-height: 2.85rem;
}
.admin-product-price-pair .catalog-price-filter,
.admin-order-price-pair .catalog-price-filter {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.admin-product-price-pair .catalog-price-filter .input,
.admin-order-price-pair .catalog-price-filter .input {
    width: 3.5rem;      /* explicit override — beats .input { width: 100% } */
    max-width: 3.5rem;
    min-width: 0;
    padding-inline: .35rem;
    box-sizing: border-box;
    height: 2.85rem;
    font-size: .875rem !important;
    font-weight: 600 !important;
    text-align: center;
}
.admin-product-price-pair .catalog-price-filter .input::placeholder,
.admin-order-price-pair .catalog-price-filter .input::placeholder {
    font-weight: 500;
    text-align: center;
}
/* Hide the redundant labels inside the pair */
.admin-product-price-pair .catalog-price-filter label,
.admin-order-price-pair .catalog-price-filter label {
    display: none;
}
.catalog-filter-tile {
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.catalog-filter-tile:hover,
.catalog-filter-tile:focus-within {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}
/* Admin filter cards: inputs, selects and Select2 match the toggle-switch background */
.admin-order-filters-card .input,
.admin-order-filters-card .select,
.admin-order-filters-card .select2-container--default .select2-selection--single,
.admin-category-filters-card .input,
.admin-category-filters-card .select,
.admin-category-filters-card .select2-container--default .select2-selection--single,
.admin-product-filters-card .input,
.admin-product-filters-card .select,
.admin-product-filters-card .select2-container--default .select2-selection--single,
.admin-subscriber-filters-card .input,
.admin-subscriber-filters-card .select,
.admin-subscriber-filters-card .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.56) !important;
    border-color: rgba(156, 163, 175, 0.32) !important;
}
/* ---- Storefront filterbar: inputs/selects share toggle-switch background --
   Placed here (after all admin-card and theme overrides) so nothing later
   can out-rank these !important declarations at equal specificity.          */
.site-main .catalog-filters-card .input,
.site-main .catalog-filters-card .select,
.site-main .catalog-filters-card .select2-container--default .select2-selection--single,
.site-main .catalog-filters-card .select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.56) !important;
}
.site-main .catalog-filters-card .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") !important;
    background-repeat: no-repeat !important;
    background-position: right .6rem center !important;
}

/* ======================================================================= */
/*  * ◀ End of   §44c  Product Modal Prev/Next Nav                         */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §31  Catalog View Toggle                                  */
/* ======================================================================= */

/* ---------- Catalog view toggle (cards / list) ---------- */
.view-toggle {
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(128,128,128,0.382);
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .42rem;
    border-radius: 1px;
    background: rgba(255,255,255,0);
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid rgba(128,128,128,0.16);
    cursor: pointer;
    height: 22px !important;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.view-toggle-btn:hover {
    transform: scale(0.9);
    color: #0f172a;
}
.view-toggle-btn.is-active {
    background: var(--finland-blue);
    color: #fff;
    box-shadow: 0 0 10px rgba(37,99,235,.42);
    transform: scale(0.96);
    border-color: rgba(96,165,250,.72);
}
.view-toggle-btn svg { flex-shrink: 0; }

.view-toggle-btn.is-active:hover {
    transform: scale(0.92);
}
/* ---------- Category quick-link chips ----------
 * The `Shop by category` grid at the top of the home page. The currently
 * selected filter (including the fixed "All categories" reset card on
 * page load) gets `.is-active`, which paints it in reversed Finnish-blue
 * so the user can see at a glance which filter is in effect.
 */
.category-chip {
    transition: background .22s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .22s ease, opacity .24s ease, filter .24s ease, min-height .3s cubic-bezier(0.22, 1, 0.36, 1), margin-top .3s cubic-bezier(0.22, 1, 0.36, 1);
    border: thin solid rgba(0,0,0,0.2);
    box-shadow: 0 0 1px lightgray;
    --chip-overlay: rgba(0, 35, 90, 0.68);
    background-color: var(--finland-blue) !important;
    background-image: linear-gradient(var(--chip-overlay), var(--chip-overlay)), var(--chip-card-url, none) !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--finland-white) !important;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}
/* Override theme-specific .btn-primary background shorthand (specificity 0-2-1) */
/* placed after the theme rules so it wins when both classes are present.        */
body .category-chip.btn-primary {
    background-color: var(--finland-blue) !important;
    background-image: linear-gradient(var(--chip-overlay), var(--chip-overlay)), var(--chip-card-url, none) !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--finland-white) !important;
    /* Restore full transition — .btn-primary { transition: !important } would strip min-height and margin-top */
    transition: background .22s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .22s ease, opacity .24s ease, filter .24s ease, min-height .3s cubic-bezier(0.22, 1, 0.36, 1), margin-top .3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Chip own padding */
.category-chip {
    padding: 0.75rem 0.75rem !important;
}
.category-chips {
    align-items: start;
    transform: translateZ(0);
}
.category-chips.is-animating {
    will-change: height;
    transform: translateZ(0);
}
.category-chip--overflow {
    transform: translateZ(0);
}
.category-chip--overflow.is-entering {
    opacity: 0;
    transform: translateY(16px) scale(0.96) translateZ(0);
    pointer-events: none;
    will-change: transform, opacity;
}
.category-chip--overflow.is-entering.is-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
    transition: opacity .32s ease, transform .42s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-chip--overflow.is-leaving {
    opacity: 0;
    transform: translateY(10px) scale(0.97) translateZ(0);
    pointer-events: none;
    transition: opacity .18s ease, transform .22s cubic-bezier(0.4, 0, 1, 1);
}
/* Description text: always visible, inline inside the chip flex column.
   Label has a bottom border acting as an hr divider, 1rem space below label text,
   then 0.618rem padding-top on the description so text sits 0.618rem below the hr. */
.category-chip > div.category-chip-label {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    width: 100%;
    text-align: center;
}
.category-chip > div.category-chip-desc {
    font-size: .72rem;
    line-height: 1.3;
    color: rgba(255,255,255,0.82);
    text-align: center;
    padding: 0.5rem 0.25rem 0;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
/* Description is always in the flow (height allocated) — only opacity changes on hover.
   This prevents any layout shift or row-height change when chips expand. */
.category-chip > div.text-xs {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    margin-top: 0.25rem !important;
    max-height: 4em;
    overflow: hidden;
}
.category-chip:hover > div.text-xs,
.category-chip:focus-visible > div.text-xs,
#category-chips-grid.desc-expanded .category-chip > div.text-xs {
    opacity: 1;
    pointer-events: auto;
}
/* Chip row direction is controlled by JS via chip-first-row / chip-last-row classes.
   chip-row-N numbered classes are also stamped for reference. No CSS rules needed here. */
.category-chip:hover,
.category-chip:focus-visible {
    overflow: visible;
    z-index: 5;
    box-shadow: -1px -1px 1px rgba(0,0,0,1);
    border: thin solid white;
    background-image: linear-gradient(135deg, rgba(0,35,90,.6) 0%, rgba(0,53,128,.55) 38.2%, rgba(0,53,128,.5) 61.8%, rgba(30,90,180,.65) 100%), var(--chip-card-url, none);
}
/* Reduce (–) button injected mid-grid between last visible and first hidden chip */
.category-chips-reduce-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin: .25rem 0 .5rem;
}
.category-chips-reduce-btn {
    opacity: 0.82;
    color: var(--finland-blue);
    transition: opacity .24s ease, transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-chips-reduce-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* ── Category chip toggle arrow buttons ─────────────────────────────────── */
@keyframes chip-arrow-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 83, 198, 0.42); }
    55%  { box-shadow: 0 0 0 10px rgba(0, 83, 198, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 83, 198, 0); }
}
.btn-chip-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2.5px solid var(--finland-blue);
    background: transparent;
    color: var(--finland-blue);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease, transform .22s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-chip-arrow.is-activating {
    transform: translateY(2px) scale(0.92);
    opacity: 0.72;
}
.btn-chip-arrow:hover,
.btn-chip-arrow:focus-visible {
    background: var(--finland-blue);
    color: #fff;
    transform: translateY(-2px) scale(1.08);
    animation-play-state: paused;
}
.btn-chip-arrow svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke-width: 3;
    display: block;
}
/* Category chips show-more/show-less toggle — smaller square variant */
.category-chips-toggle.btn-chip-arrow {
    flex-direction: column;
    gap: .03rem;
    width: 3.35rem;
    height: 3.35rem;
    padding: .16rem .1rem;
    border-radius: 0.3rem;
}
.category-chips-toggle.btn-chip-arrow svg {
    width: 1.66rem;
    height: 1.66rem;
    flex-shrink: 0;
}
.category-chip-arrow-label {
    display: block;
    max-width: 100%;
    font-size: .46rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: currentColor;
    white-space: nowrap;
    pointer-events: none;
}
/* Descriptions info-icon button */
.btn-chip-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    color: var(--finland-blue);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.72;
    font-size: 1.2rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.btn-chip-info:hover,
.btn-chip-info:focus-visible,
.btn-chip-info[aria-pressed="true"] {
    opacity: 1;
    background: var(--finland-blue);
    color: #fff;
    transform: scale(1.1);
}
/* ── Category product quick-search widget (inside category-selection-overlay) ── */
.cso-product-search {
    flex: 0 0 auto;
    min-width: 15rem;
    max-width: 22rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: .85rem;
    border-left: 1px solid rgba(142, 174, 226, 0.22);
}
.cso-product-search__label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: .4rem;
}
.cso-product-search__row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
#cat-product-search-wrap {
    position: relative;
}
/* Ensure the Select2 container fills the wrapper */
#cat-product-search-wrap .select2-container,
.cso-product-search .select2-container {
    width: 100% !important;
}
/* Select2 dark theme for inside the category overlay */
.cso-product-search .select2-container--default .select2-selection--single {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    height: 2.15rem;
    display: flex;
    align-items: center;
}
.cso-product-search .select2-container--default.select2-container--focus .select2-selection--single,
.cso-product-search .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(255,255,255,0.6);
}
.cso-product-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    line-height: 2.15rem;
    padding-left: .6rem;
    padding-right: 1.6rem;
}
.cso-product-search .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,0.5);
}
.cso-product-search .select2-container--default .select2-selection--single .select2-selection__clear {
    color: rgba(255,255,255,0.7);
    margin-right: .25rem;
}
.cso-product-search .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.15rem;
    top: 0;
}
.cso-product-search .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,0.55) transparent transparent transparent;
}
.cso-product-search .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent rgba(255,255,255,0.55) transparent;
}
#cat-product-search-actions {
    display: none;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}
/* Option result row */
.cat-ps-result {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .1rem 0;
}
.cat-ps-result img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    background: #f3f4f6;
}
.cat-ps-name {
    font-weight: 600;
    font-size: .85em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-ps-price {
    font-size: .75em;
    color: var(--muted-500, #6b7280);
}
.category-chips-toggle {
    /* Match the category card title colour exactly, auto-adapts in dark mode */
    color: var(--finland-blue);
    transition: transform .26s cubic-bezier(0.22, 1, 0.36, 1), opacity .22s ease, box-shadow .26s ease, background .22s ease, color .22s ease;
}
.category-chips-toggle.is-hidden,
.category-chips-toggle.is-entering {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
}
.category-chips-toggle.is-label-swapping {
    opacity: 0.72;
    transform: translateY(2px) scale(0.985);
}
.category-chips-toggle.is-expanded {
    box-shadow: 0 14px 30px rgba(0, 53, 128, 0.18);
}
.catalog-heading-reset {
    min-width: 0;
    padding: .52rem .9rem;
    border-radius: 1px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(0,53,128,.16);
    color: var(--finland-blue);
    box-shadow: 0 10px 22px rgba(15,23,42,.08);
    transition: opacity .22s ease, transform .26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .24s ease;
}
.catalog-heading-reset:hover,
.catalog-heading-reset:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15,23,42,.12);
}
.catalog-heading-reset.is-hidden {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    pointer-events: none;
}
.category-header-controls {
    position: fixed;
    top: calc(var(--sticky-header-offset, 96px) - .9rem);
    left: 50%;
    z-index: 35;
    width: 1.6rem;
    height: 1.6rem;
    overflow: visible;
    opacity: 0;
    transform: translate(-50%, -8px) scale(.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-header-controls.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}
.category-header-overlay-toggle {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(0,0,0,0);
    box-shadow: 0px 0px 1px rgba(255, 255, 255, 0.9);
    border: solid 2px var(--finland-blue-400);
    padding: 0;
    text-shadow: 0 0 1px rgba(255,255,255,0.82);
    color: var(--finland-blue-400) !important;
}
.category-header-clear {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: unset;
    height: auto;
    min-height: unset;
    padding: .1rem;
    border: none;
    background: transparent;
    color: var(--finland-blue);
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
    transform: translate(1.1rem, -100%);
    cursor: pointer;
    transition: opacity .18s ease;
}
.category-header-clear:hover,
.category-header-clear:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: translate(1.1rem, -100%);
    opacity: .65;
}
.category-header-overlay-toggle__label {
    position: absolute;
    left: 50%;
    z-index: 1;
    color: var(--finland-blue-400) !important;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .2s ease;
}
.category-header-overlay-toggle__label--shop {
    top: -6px;
    transform: translate(-50%, -100%);
    opacity: 1;
}
.category-header-overlay-toggle__label--categories {
    bottom: -.6rem;
    transform: translate(-50%, 70%);
}
.category-header-overlay-toggle.is-up .category-header-overlay-toggle__label--shop {
    opacity: 0;
}
.category-header-overlay-toggle.is-up .category-header-overlay-toggle__label--categories {
    opacity: 1;
}
.category-header-overlay-toggle .category-header-overlay-toggle__icon {
    width: 1.6rem;
    height: 1.6rem;
    stroke-width: 3;
}
.category-header-overlay-toggle .category-header-overlay-toggle__icon--up {
    display: none;
}
.category-header-overlay-toggle.is-up .category-header-overlay-toggle__icon--down {
    display: none;
}
.category-header-overlay-toggle.is-up .category-header-overlay-toggle__icon--up {
    display: block;
}
@keyframes arrow-nudge-down {
    0%, 78%, 100% { top: 0; }
    86%            { top: 10px; }
    96%            { top: 0; }
}
.category-header-controls.is-visible .btn-chip-arrow {
    position: relative;
    animation: arrow-nudge-down 6s ease-in-out 2s infinite;
}
.category-header-controls.is-visible .btn-chip-arrow:hover,
.category-header-controls.is-visible .btn-chip-arrow:focus-visible {
    animation-play-state: paused;
    top: 0;
}
.category-selection-overlay {
    position: fixed;
    top: calc(var(--sticky-header-offset, 96px) - 2.35rem);
    left: 50%;
    width: fit-content;
    min-width: min(28rem, calc(100vw - 1.5rem));
    max-width: min(54rem, calc(100vw - 1.5rem));
    z-index: 36;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 0 0 0 0;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,0);
    background: linear-gradient(135deg, rgba(0,53,128,.94), rgba(13,89,185,.9));
    color: #fff;
    box-shadow: 0 22px 46px rgba(0,53,128,0);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate(-50%, -12px) scale(.98);
    pointer-events: none;
    transition: opacity .24s ease, transform .32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .24s ease, max-height .32s cubic-bezier(0.22, 1, 0.36, 1), padding .24s ease, border-color .2s ease;
}
.category-selection-overlay.is-visible {
    overflow: visible;
    padding: .95rem 1.05rem .7rem 1rem;
    border-color: rgba(255,255,255,.34);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.25),
        0 22px 46px rgba(0, 0, 0, 0.35),
        0 48px 96px rgba(0, 0, 0, 0.28),
        0 2px 4px rgba(0,53,128,0.4);
    max-height: 24rem;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}
.category-selection-overlay__dismiss {
    display: none !important;
}
.category-selection-overlay__meta {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.category-selection-overlay__controls {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: .5rem;
    margin: .25rem 0 .4rem;
}
.category-selection-overlay__controls--category-only {
    grid-template-columns: minmax(0, 1fr);
}
.category-selection-overlay__select-wrap {
    min-width: 0;
    position: relative;
}
.category-selection-overlay__select-wrap--subcategory {
    min-width: 8.5rem;
}
.category-selection-overlay__controls--category-only .category-selection-overlay__select-wrap:not(.category-selection-overlay__select-wrap--subcategory) {
    grid-column: 1 / -1;
}
/* Inline clear button — positioned OUTSIDE the right edge of the select-wrap
   so it never shrinks the Select2 container width. */
.category-selection-overlay__select-clear {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,35,100,0.82);
    color: rgba(255,255,255,.9);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, background .15s ease, transform .15s ease;
}
/* Show only when the select-wrap has a selection */
.category-selection-overlay__select-wrap.has-value .category-selection-overlay__select-clear {
    opacity: 1;
    pointer-events: auto;
}
.category-selection-overlay__select-clear:hover,
.category-selection-overlay__select-clear:focus-visible {
    background: rgba(0,53,160,0.95);
    border-color: rgba(255,255,255,.5);
    color: #fff;
    transform: scale(1.15);
}
/* Do NOT apply padding-right on the container when has-value — button is now outside */
.category-selection-overlay__select-wrap.has-value .category-selection-overlay-select2-container {
    padding-right: 0;
}
.category-selection-overlay__select {
    width: 100%;
}
.category-selection-overlay__label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.76);
}
.category-selection-overlay__value {
    min-width: 0;
    max-width: 54rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
}
.category-selection-overlay__empty {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}
.category-selection-overlay__token {
    appearance: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    min-height: 2rem;
    max-width: 100%;
    padding: .28rem .55rem .28rem .32rem;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.36);
    background: rgba(0,35,100,0.72);
    color: #fff;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.28);
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), background .18s ease, border-color .18s ease, box-shadow .2s ease;
}
.category-selection-overlay__token:hover,
.category-selection-overlay__token:focus-visible {
    transform: translateY(-1px);
    background: rgba(0,53,140,0.88);
    border-color: rgba(255,255,255,.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 18px rgba(0,0,0,.22);
}
.category-selection-overlay__token--subcategory {
    background: rgba(0,25,72,0.72);
}
.category-selection-overlay__token-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-selection-overlay__token-remove {
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    min-height: 1.25rem;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    font-size: .95rem;
    line-height: 1;
}
.category-selection-overlay-select2-container {
    width: 100% !important;
}
.category-selection-overlay-select2-container .select2-selection--multiple {
    position: relative;
    min-height: 2.85rem;
    border-radius: 1px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    padding: .2rem .35rem !important;
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: 2.25rem;
    padding: .25rem .35rem !important;
    position: relative;
}
/* Suppress summary text when chips are already showing */
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__choice)::before {
    display: none;
}
/* Show placeholder text via ::before only when nothing is selected and dropdown is closed */
.category-selection-overlay-select2-container:not(.select2-container--open) .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice))::before {
    content: attr(data-selection-summary);
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    color: rgba(255,255,255,.72);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 0%;
}
/* Downward chevron arrow after the placeholder text */
.category-selection-overlay-select2-container:not(.select2-container--open):not(.select2-container--disabled) .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice))::after {
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-left: .38rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.72)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: .85;
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center;
    gap: .28rem;
    padding: .18rem .45rem;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 2rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff !important;
    max-width: 12rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    flex-shrink: 0;
    color: rgba(255,255,255,.82) !important;
    border-right: none !important;
    font-size: .9rem;
    line-height: 1;
    border-radius: 3px;
    transition: background .15s ease, color .15s ease;
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__choice__remove:hover,
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
    background: var(--finland-blue-600) !important;
    color: #fff !important;
    outline: none;
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-selection__choice__display,
.category-selection-overlay-select2-container .select2-selection--multiple .select2-search__field,
.category-selection-overlay-select2-container .select2-selection__placeholder,
.category-selection-overlay-select2-container .select2-selection__rendered {
    color: #fff !important;
}
.category-selection-overlay-select2-container .select2-selection--multiple .select2-search__field::placeholder {
    color: rgba(255,255,255,.72);
}
.category-selection-overlay-select2-container:not(.select2-container--open) .select2-selection--multiple .select2-search--inline {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.category-selection-overlay-select2-container:not(.select2-container--open) .select2-selection--multiple .select2-search__field {
    width: 100% !important;
    min-width: 100% !important;
    opacity: 0;
}
.category-selection-overlay-select2-container.select2-container--open .select2-selection--multiple .select2-search--inline {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    flex: 1 1 auto;
}
.category-selection-overlay-select2-container.select2-container--focus .select2-selection--multiple,
.category-selection-overlay-select2-container .select2-selection--multiple:hover {
    border-color: rgba(255,255,255,.42) !important;
    background: rgba(255,255,255,.2) !important;
}
/* Disabled state — shown when subcategory field has no options (no category selected) */
.category-selection-overlay-select2-container.select2-container--disabled .select2-selection--multiple {
    opacity: .42;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: none !important;
}
.category-selection-overlay-select2-container.select2-container--disabled .select2-selection--multiple .select2-selection__rendered::before {
    color: rgba(255,255,255,.38);
}
#category-selection-overlay-value {
    display: none !important;
}
.select2-dropdown.category-selection-overlay-select2-dropdown {
    position: relative;
    border-radius: 1px;
    border: 1px solid rgba(142, 174, 226, 0.28) !important;
    background: rgba(11, 29, 58, 0.96) !important;
    color: #fff !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.38) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    overflow: hidden;
    /* Make dropdown 30px narrower than the container above it */
    width: calc(100% - 30px) !important;
    margin-left: 15px !important;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-dropdown-close-btn {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 10;
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 2px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-dropdown-close-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-search--dropdown {
    padding: .45rem;
    background: rgba(255,255,255,.06);
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-search__field {
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(255,255,255,.14);
    color: #fff;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-search__field::placeholder {
    color: rgba(255,255,255,.72);
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-results__option {
    color: #fff;
    padding: .35rem .8rem;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(142, 174, 226, 0.22);
    color: #fff;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-results__option--selected {
    background: rgba(142, 174, 226, 0.32);
    color: #fff;
}
.select2-dropdown.category-selection-overlay-select2-dropdown .select2-results > .select2-results__options {
    max-height: min(460px, 55vh) !important;
}
/* Thumbnail + label row inside overlay category dropdown */
.s2-cat-opt {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.s2-cat-opt img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}
/* Arrow shown on category options that have subcategories */
.cat-has-children-arrow {
    font-size: 1rem;
    line-height: 1;
    opacity: .55;
    flex-shrink: 0;
}
.select2-results__option--highlighted .cat-has-children-arrow,
.select2-results__option--selected .cat-has-children-arrow {
    opacity: .8;
}
.category-selection-overlay__jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    margin-left: 0.75rem;
    border-radius: 1px;
    border: 1px solid rgba(200, 210, 230, 0.55);
    background: rgba(220, 225, 235, 0.82);
    color: var(--finland-blue-400);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 12px 24px rgba(0,0,0,.16);
    animation: jump-arrow-nudge 4s ease-in-out infinite;
    transition: background .2s ease, box-shadow .24s ease;
}
/* Arrow points up when viewport is below the catalog section */
.category-selection-overlay__jump.is-below-catalog svg {
    transform: rotate(180deg);
}
/* Periodic nudge: quick tap down-and-back, then a long rest */
@keyframes jump-arrow-nudge {
    0%    { transform: translateY(0); }
    6%    { transform: translateY(7px); }
    13%   { transform: translateY(0); }
    100%  { transform: translateY(0); }
}
.category-selection-overlay__jump.is-below-catalog {
    animation-name: jump-arrow-nudge-up;
}
@keyframes jump-arrow-nudge-up {
    0%    { transform: translateY(0); }
    6%    { transform: translateY(-7px); }
    13%   { transform: translateY(0); }
    100%  { transform: translateY(0); }
}
.category-selection-overlay:not(.is-visible) .category-selection-overlay__clear {
    display: none;
}
.category-selection-overlay__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: 0;
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 24px rgba(0,0,0,.14);
    transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), background .2s ease, box-shadow .24s ease, opacity .2s ease;
}
.category-selection-overlay__jump:hover,
.category-selection-overlay__jump:focus-visible,
.category-selection-overlay__clear:hover,
.category-selection-overlay__clear:focus-visible {
    transform: translateY(-2px);
    background: rgba(235, 239, 248, 0.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 28px rgba(0,0,0,.2);
}
.category-selection-overlay__jump:hover,
.category-selection-overlay__jump:focus-visible {
    animation-play-state: paused;
    transform: translateY(4px);
}
.category-selection-overlay__jump.is-below-catalog:hover,
.category-selection-overlay__jump.is-below-catalog:focus-visible {
    transform: translateY(-4px);
}
.category-selection-overlay__jump svg {
    width: 2rem;
    height: 2rem;
}
/* ── Jump button directional labels ── */
.cso-jump-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    animation: cso-label-pulse 2.2s ease-in-out infinite;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
}
.cso-jump-label--shop {
    top: -1.1rem;
    /* pointer-events: none inherited from .cso-jump-label — same as --cats */
}
/* Force Kategoriat label to never show any text-decoration regardless of source */
.cso-jump-label--cats,
.cso-jump-label--cats:hover,
.cso-jump-label--cats:focus,
.category-selection-overlay__jump .cso-jump-label--cats,
.category-selection-overlay__jump:hover .cso-jump-label--cats {
    bottom: -1.1rem;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
}
/* Kategoriat is non-interactive — remove the animated underline bar */
.cso-jump-label--cats::after {
    display: none;
}
.category-selection-overlay__jump:not(.is-below-catalog) .cso-jump-label--shop {
    opacity: 1;
}
.category-selection-overlay__jump.is-below-catalog .cso-jump-label--cats {
    opacity: 1;
}
.category-selection-overlay__jump:hover,
.category-selection-overlay__jump:focus-visible {
    text-decoration: none;
}
@keyframes cso-label-pulse {
    0%, 100% { color: rgba(255,255,255,0.92); }
    50%       { color: rgba(140,200,255,0.88); }
}
/* ── Mini filter-bar placeholder in sticky row ── */
.sticky-mini-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 0.75rem;
    border-radius: 6px;
    position: relative;
    z-index: 20;
    opacity: 0.6;
    box-sizing: border-box;
}
.catalog-category-overlay-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: 0 .55rem;
    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%);
    color: var(--ink);
    box-shadow: 0 0 5px var(--header-accent);
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.catalog-category-overlay-toggle__icon {
    flex-shrink: 0;
    width: 12px !important;
    height: 12px !important;
}
.catalog-category-overlay-toggle__text {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.catalog-category-overlay-toggle:hover,
.catalog-category-overlay-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(0, 53, 128, 0.3);
    background: rgba(255,255,255,.82);
    color: rgb(0, 53, 128);
}
.catalog-category-overlay-toggle.is-active {
    border-color: rgba(0, 53, 128, 0.72);
    background: rgb(0, 53, 128);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,53,128,.18);
}
@keyframes catalog-cat-btn-glow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(0,53,128,.25),
                    0 0 8px  rgba(0,53,128,.22),
                    0 0 0    rgba(0,53,128,0);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(0,53,128,.35),
                    0 0 16px rgba(0,53,128,.38),
                    0 0 28px rgba(0,53,128,.18);
    }
}
@keyframes catalog-cat-btn-glow-dark {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(96,165,250,.28),
                    0 0 8px  rgba(96,165,250,.22),
                    0 0 0    rgba(96,165,250,0);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(96,165,250,.42),
                    0 0 18px rgba(96,165,250,.38),
                    0 0 30px rgba(96,165,250,.18);
    }
}
.catalog-category-overlay-toggle.has-selection {
    border: 3px solid #0035a0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(219,234,254,.9)) !important;
    color: rgb(0, 53, 128) !important;
    animation: catalog-cat-btn-glow 2.4s ease-in-out infinite !important;
}
.catalog-category-overlay-toggle.has-selection.is-active {
    border: 3px solid rgba(255,255,255,.9) !important;
    animation: none !important;
    box-shadow: 0 10px 22px rgba(0,53,128,.18) !important;
}
/* ── Category Directory grid collapse ── */
.cat-dir-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 53, 128, 0.25);
    background: transparent;
    color: var(--finland-blue, #003580);
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.cat-dir-toggle-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
}
.cat-dir-toggle-btn:hover {
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.5);
}
.cat-dir-toggle-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.cat-dir.is-dir-collapsed .cat-dir__overflow,
.cat-dir.is-dir-collapsed .cat-dir__empty {
    display: none;
}
.cat-dir.is-dir-collapsed {
    justify-content: center;
    min-height: 3rem;
    padding: 0.4rem 0.75rem 0.45rem;
    gap: 0.4rem;
    overflow: hidden;
    position: relative;
    transition: min-height .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-dir.is-dir-collapsed .cat-dir__topbar {
    gap: 0;
    justify-content: center;
}
.cat-dir.is-dir-collapsed .cat-dir__grid {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    padding-bottom: 1.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 53, 128, 0.22) transparent;
}
.cat-dir.is-dir-collapsed .cat-dir__grid::-webkit-scrollbar { width: 4px; }
.cat-dir.is-dir-collapsed .cat-dir__grid::-webkit-scrollbar-thumb { background: rgba(0, 53, 128, 0.22); border-radius: 2px; }
.cat-dir.is-dir-collapsed .cat-dir__grid::-webkit-scrollbar-track { background: transparent; }
.cat-dir.is-dir-collapsed .cat-dir__chips-group--sort {
    display: none;
}
.cat-dir.is-dir-collapsed .cat-dir__col {
    padding: 0;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.48);
    order: 0;
}
.cat-dir.is-dir-collapsed .cat-dir__header {
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.24rem 0.35rem 0.24rem 0.32rem;
    border-radius: 1px;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-active--root .cat-dir__header-shop {
    display: flex;
}
.cat-dir.is-dir-collapsed .cat-dir__thumb {
    flex-basis: 1.65rem;
    width: 1.65rem;
    height: 1.65rem;
    font-size: 0.78rem;
}
.cat-dir.is-dir-collapsed .cat-dir__name {
    font-size: 0.88rem;
}
.cat-dir.is-dir-collapsed .cat-dir__count {
    padding: 0.08rem 0.38rem;
    font-size: 0.68rem;
}
.cat-dir.is-dir-collapsed .cat-dir__indicator {
    width: 1.35rem;
    height: 1.35rem;
}
.cat-dir.is-dir-collapsed .cat-dir__indicator--toggle {
    display: flex;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded .cat-dir__body,
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded .cat-dir__sub-list {
    width: max-content;
    max-width: 100%;
}
.cat-dir.is-dir-collapsed .cat-dir__meta {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
/* Truncation indicator — fades over the last chip row when collapsed content is clipped */
.cat-dir__collapsed-more {
    display: none;
}
.cat-dir.is-dir-collapsed .cat-dir__collapsed-more {
    display: flex;
    position: absolute;
    inset: auto 0 0;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    padding-bottom: 0.5rem;
    border: 0;
    background: linear-gradient(to bottom, transparent, rgba(248, 251, 255, 0.95) 55%);
    pointer-events: auto;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    color: var(--finland-blue, #003580);
    opacity: 0.7;
    z-index: 1;
    transition: opacity .15s ease;
}
.cat-dir.is-dir-collapsed .cat-dir__collapsed-more:hover {
    opacity: 1;
}
/* Hide truncation indicator while a chip body is revealed */
.cat-dir.is-dir-collapsed.has-expanded-chip .cat-dir__collapsed-more { display: none; }
/* Toggle button icon states — 2-phase: chevron down = collapsed, rotated = expanded */
.cat-dir-toggle-icon--grid-4 { display: none; }
.cat-dir-toggle-icon--grid { display: none; }
#cat-dir-toggle-btn[data-dir-phase="1"] { border-color: rgba(0, 53, 128, 0.45); }
.category-selection-overlay.is-updated {
    animation: category-selection-overlay-pulse .55s ease;
}
@keyframes category-selection-overlay-pulse {
    0% {
        transform: translate(-50%, 0) scale(1);
        box-shadow: 0 0 0 rgba(0, 53, 128, 0);
    }
    45% {
        transform: translate(-50%, -2px) scale(1.01);
        box-shadow: 0 16px 34px rgba(0, 53, 128, 0.28);
    }
    100% {
        transform: translate(-50%, 0) scale(1);
        box-shadow: 0 0 0 rgba(0, 53, 128, 0);
    }
}
section#categories .category-chip.is-active {
    background-color: var(--finland-blue-400) !important;
    background-image: linear-gradient(135deg, rgba(0,95,180,0.82) 0%, rgba(0,95,180,0.82) 61.8%, rgba(0,53,128,0.82) 100%), var(--chip-card-url, none);
    background-size: cover;
    background-position: center;
    border: 3px solid #15803d !important;
    outline: 2px solid #4ade80;
    outline-offset: 1px;
    color: #fff;
    text-shadow: 0 0 1px black !important;
}
section#categories .category-chip.is-active:hover {
    box-shadow: -1px  -1px 1px black !important;
    background-color: var(--finland-blue) !important;
    background-image: linear-gradient(135deg, rgba(0,53,128,0.82) 0%, rgba(0,53,128,0.82) 61.8%, rgba(0,95,180,0.82) 100%), var(--chip-card-url, none);
    background-size: cover;
    background-position: center;
}
section#categories .category-chip.is-active.glass.p-5.text-center.cursor-pointer.category-chip.is-active.reveal.visible > div.text-lg.font-semibold.text-flag-blue {
    color: white;
    text-shadow: 0 0 1px black !important;
}
section#categories .category-chip.is-active > div + div {
    text-shadow: 0 0 1px black !important;
    color: white !important;
}
section#categories .category-chip:hover > div + div {
    color: white !important;
    text-shadow: 0 0 1px black !important;
}
section#categories .category-chip > div.text-lg.font-semibold.text-flag-blue {
    text-shadow: 0 0 1px white !important;
}
section#categories .category-chip:hover > div.text-lg.font-semibold.text-flag-blue {
    text-shadow: 0 0 1px black !important;
    color: white !important;
}
section#categories .category-chip > div + div {
    text-shadow: 0 0 1px black !important;
    color: white !important;
}

/* ---------- Product image source tabs (URL / Upload) ----------
 * Two-button chooser inside the product modal. The active tab uses the
 * same Finnish-blue solid treatment as the catalog view toggle so the
 * admin sees at a glance which input path they're using.
 */
.image-source-tabs [data-src] {
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.image-source-tabs [data-src].is-active {
    background: var(--finland-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,53,128,.25);
}

.checkout-payment-element {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* ── Order confirmation action buttons — equal-width, full-container ── */
.pay-confirmation-actions {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
}
.pay-confirmation-actions .btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
}

.dashboard-kpi-card {
    display: block;
    width: 100%;
    text-align: center;
}

a.dashboard-kpi-card,
button.dashboard-kpi-card {
    text-decoration: none;
}

button.dashboard-kpi-card {
    border: 0;
    background: var(--glass-bg);
}

.dashboard-kpi-card--interactive {
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.dashboard-kpi-card--interactive:hover,
.dashboard-kpi-card--interactive:focus-visible {
    transform: translateY(1px);
    box-shadow: 0 14px 34px rgba(0, 53, 128, 0.18);
}

.dashboard-kpi-modal-panel {
    max-width: 1100px;
}

.report-summary-card {
    text-align: center;
}
.report-page-grid {
    align-items: stretch;
}
.report-summary-card {
    min-height: 6.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.report-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.report-card-header {
    flex-wrap: wrap;
}
.report-card-header > div:first-child {
    min-width: 0;
    flex: 1 1 15rem;
}
.report-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}
.report-card-actions .btn {
    min-width: 4.4rem;
}
.report-chart-shell {
    position: relative;
    width: 100%;
    min-height: 0;
}
.report-chart-shell--md {
    height: 18rem;
}
.report-chart-shell--lg {
    height: 20rem;
}
.report-chart-shell--xl {
    height: 24rem;
}
.report-summary-modal-panel {
    max-width: 720px;
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
}
.report-zoom-modal-panel {
    width: min(96vw, 1600px);
    max-width: none;
    height: min(92vh, 1040px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.report-zoom-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
}
.interaction-report-status {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}
.interaction-report-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
}
.interaction-report-pill--ok {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.22);
    color: #047857;
}
.interaction-report-pill--muted {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--muted-2);
}
.interaction-report-range {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.interaction-report-range__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: .55rem .95rem;
    border-radius: .85rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.52);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.interaction-report-range__link:hover,
.interaction-report-range__link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(0, 53, 128, 0.28);
    box-shadow: 0 14px 30px rgba(0, 53, 128, 0.10);
}
.interaction-report-range__link.is-active {
    background: rgba(0, 53, 128, 0.12);
    border-color: rgba(0, 53, 128, 0.22);
    color: var(--finland-blue);
}
.interaction-summary-card__meta {
    margin-top: .4rem;
    color: var(--muted-2);
    font-size: .8rem;
    font-weight: 600;
}
.interaction-report-note,
.interaction-report-empty,
.interaction-chart-empty {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.58);
    color: var(--ink);
}
.interaction-report-note {
    font-weight: 600;
}
.interaction-report-note--muted {
    color: var(--muted-2);
}
.interaction-report-empty,
.interaction-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 1rem 1.25rem;
    text-align: center;
    color: var(--muted-2);
    font-weight: 600;
}
.interaction-heatmap-legend {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--muted-2);
    font-size: .82rem;
    font-weight: 700;
}
.interaction-heatmap-legend__scale {
    width: 7.5rem;
    height: .65rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 53, 128, 0.08), rgba(0, 53, 128, 0.88));
}
.interaction-heatmap-shell {
    overflow-x: auto;
    padding-bottom: .25rem;
}
.interaction-heatmap {
    display: grid;
    grid-template-columns: minmax(3rem, auto) repeat(24, minmax(1.35rem, 1fr)) minmax(3rem, auto);
    gap: .35rem;
    min-width: 880px;
    align-items: center;
}
.interaction-heatmap__corner,
.interaction-heatmap__hour,
.interaction-heatmap__day,
.interaction-heatmap__total-label,
.interaction-heatmap__row-total {
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted-2);
}
.interaction-heatmap__hour,
.interaction-heatmap__total-label {
    text-align: center;
}
.interaction-heatmap__day {
    padding-right: .35rem;
}
.interaction-heatmap__row-total {
    text-align: center;
    color: var(--ink);
}
.interaction-heatmap__cell {
    height: 1.6rem;
    border-radius: .45rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(0, 53, 128, calc(0.04 + (var(--heat, 0) * 0.84)));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(0.18 + (var(--heat, 0) * 0.10)));
}
.admin-form-modal-panel {
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 100%);
    width: 50vw;
    padding: 0;
    overflow: hidden;
    /* Suppress the base .modal-panel scroll — inner body handles it */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.admin-form-modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.admin-form-modal-header,
.admin-form-modal-footer {
    flex: 0 0 auto;
    padding: 1.25rem 1.5rem !important;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    max-height: 80px;
    height: 80px;
}
.admin-form-modal-header {
    border-bottom: 1px solid var(--line-soft);
}
.admin-form-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
    padding-left: 2rem;
    padding-bottom: 2.5rem;
    min-height: 0;
    background: var(--glass-bg);
    /* Single backdrop-filter on the body only — not nested */
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    /* Native scrollbar styled per theme */
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 130, 180, 0.40) transparent;
    -ms-overflow-style: auto;
}
.admin-form-modal-body::-webkit-scrollbar { display: block; width: 6px; }
.admin-form-modal-body::-webkit-scrollbar-thumb { background: rgba(100, 130, 180, 0.40); border-radius: 3px; }
.admin-form-modal-body::-webkit-scrollbar-track { background: transparent; }
/* Wide-format overrides for the category-products and cat-conflict modals */
#category-products-modal .admin-form-modal-panel {
    width: min(1280px, 97vw);
    max-width: min(1280px, 97vw);
    min-height: 72vh;
}
#cat-conflict-modal .admin-form-modal-panel {
    width: min(900px, 97vw);
    max-width: min(900px, 97vw);
}
/* Reusable admin blue-glass modal layer. Add this class to modal panels that
   use admin-form-modal-* or admin-view-modal-* sections. */
.admin-blue-glass-modal {
    background: rgba(11, 29, 58, 0.74) !important;
    -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
    backdrop-filter: blur(22px) saturate(165%) !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: rgba(226, 232, 240, 0.92) !important;
}
.admin-blue-glass-modal .admin-form-modal-header,
.admin-blue-glass-modal .admin-form-modal-body,
.admin-blue-glass-modal .admin-form-modal-footer,
.admin-blue-glass-modal .admin-view-modal-header,
.admin-blue-glass-modal .admin-view-modal-body,
.admin-blue-glass-modal .admin-view-modal-footer {
    background: rgba(0, 0, 0, 0) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: rgba(226, 232, 240, 0.92) !important;
}
.admin-blue-glass-modal .admin-form-modal-header,
.admin-blue-glass-modal .admin-form-modal-footer {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
.admin-blue-glass-modal .admin-form-modal-header,
.admin-blue-glass-modal .admin-view-modal-header {
    border-bottom: 1px solid rgba(142, 174, 226, 0.22) !important;
}
.admin-blue-glass-modal .admin-form-modal-footer,
.admin-blue-glass-modal .admin-view-modal-footer {
    border-top: 1px solid rgba(142, 174, 226, 0.22) !important;
}
.admin-blue-glass-modal .admin-form-modal-body,
.admin-blue-glass-modal .admin-view-modal-body {
    background: rgba(7, 18, 42, 0.42) !important;
}
.admin-blue-glass-modal h1,
.admin-blue-glass-modal h2,
.admin-blue-glass-modal h3,
.admin-blue-glass-modal h4,
.admin-blue-glass-modal .text-flag-blue {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}
.admin-blue-glass-modal label,
.admin-blue-glass-modal p,
.admin-blue-glass-modal dt,
.admin-blue-glass-modal dd,
.admin-blue-glass-modal .text-gray-400,
.admin-blue-glass-modal .text-gray-500,
.admin-blue-glass-modal .text-gray-600,
.admin-blue-glass-modal .text-gray-700,
.admin-blue-glass-modal .admin-image-details-grid dt,
.admin-blue-glass-modal .admin-image-details-grid dd {
    color: rgba(226, 232, 240, 0.84) !important;
}
.admin-blue-glass-modal .input,
.admin-blue-glass-modal .select,
.admin-blue-glass-modal .textarea,
.admin-blue-glass-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
.admin-blue-glass-modal select:not(.select2-hidden-accessible),
.admin-blue-glass-modal textarea {
    background: rgba(8, 24, 52, 0.66) !important;
    border-color: rgba(142, 174, 226, 0.32) !important;
    color: #f8fafc !important;
}
.admin-blue-glass-modal .input::placeholder,
.admin-blue-glass-modal .textarea::placeholder,
.admin-blue-glass-modal input::placeholder,
.admin-blue-glass-modal textarea::placeholder {
    color: rgba(226, 232, 240, 0.48) !important;
}
.admin-blue-glass-modal .select2-container--default .select2-selection--single,
.admin-blue-glass-modal .select2-container--default .select2-selection--multiple {
    background: rgba(8, 24, 52, 0.66) !important;
    border-color: rgba(142, 174, 226, 0.32) !important;
    color: #f8fafc !important;
}
.admin-blue-glass-modal .select2-container--default .select2-selection--single .select2-selection__rendered,
.admin-blue-glass-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered,
.admin-blue-glass-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(248, 250, 252, 0.92) !important;
}
.admin-blue-glass-modal .modal-close {
    color: rgba(226, 232, 240, 0.86) !important;
}
.admin-blue-glass-modal .modal-close:hover {
    color: #ffffff !important;
}
.admin-blue-glass-modal .dt-container,
.admin-blue-glass-modal .dt-container .dt-info,
.admin-blue-glass-modal .dt-container .dt-length,
.admin-blue-glass-modal .dt-container .dt-search,
.admin-blue-glass-modal .dt-container .dt-paging {
    color: rgba(226, 232, 240, 0.82) !important;
}
.admin-blue-glass-modal table.dataTable thead th {
    background: rgba(10, 31, 68, 0.72) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(142, 174, 226, 0.22) !important;
}
.admin-blue-glass-modal table.dataTable tbody tr,
.admin-blue-glass-modal table.dataTable tbody td {
    background: rgba(8, 24, 52, 0.54) !important;
    color: rgba(226, 232, 240, 0.9) !important;
    border-color: rgba(142, 174, 226, 0.16) !important;
}
.admin-blue-glass-modal table.dataTable tbody tr:hover,
.admin-blue-glass-modal table.dataTable tbody tr:hover > td {
    background: rgba(21, 48, 91, 0.72) !important;
    color: #ffffff !important;
    filter: none !important;
}
.admin-blue-glass-modal .dt-empty,
.admin-blue-glass-modal .dt-container .dt-processing {
    color: rgba(226, 232, 240, 0.78) !important;
}
.admin-blue-glass-modal .dt-container .dt-search input,
.admin-blue-glass-modal .dt-container .dt-length select {
    background: rgba(8, 24, 52, 0.66) !important;
    border-color: rgba(142, 174, 226, 0.32) !important;
    color: #f8fafc !important;
}
.admin-blue-glass-modal .dt-container .dt-button,
.admin-blue-glass-modal .dt-container button.dt-button,
.admin-blue-glass-modal .dt-container div.dt-button,
.admin-blue-glass-modal .dt-container a.dt-button,
.admin-blue-glass-modal .dt-container .dt-paging .paginate_button {
    background: rgba(8, 24, 52, 0.66) !important;
    border-color: rgba(142, 174, 226, 0.32) !important;
    color: rgba(226, 232, 240, 0.9) !important;
}
.admin-blue-glass-modal .dt-container .dt-button:hover,
.admin-blue-glass-modal .dt-container button.dt-button:hover,
.admin-blue-glass-modal .dt-container div.dt-button:hover,
.admin-blue-glass-modal .dt-container a.dt-button:hover,
.admin-blue-glass-modal .dt-container .dt-paging .paginate_button:hover,
.admin-blue-glass-modal .dt-container .dt-paging .paginate_button.current {
    background: rgba(21, 48, 91, 0.82) !important;
    border-color: rgba(142, 174, 226, 0.46) !important;
    color: #ffffff !important;
}
.admin-blue-glass-modal table.dataTable a {
    color: #bfdbfe !important;
}

/* ── DT pagination: arrow-only prev/next (storefront) ───────────────────────
   Strips the button frame from ‹ prev and next › so only the symbol shows.
   Scoped to .site-main to leave admin DataTables untouched.
   ─────────────────────────────────────────────────────────────────────────── */
.site-main .dt-paging .paginate_button.previous,
.site-main .dt-paging .paginate_button.next {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    transition: transform .26s cubic-bezier(.34,1.56,.64,1), opacity .17s !important;
}
.site-main .dt-paging .paginate_button.previous:hover,
.site-main .dt-paging .paginate_button.previous:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    transform: translateX(-3px);
}
.site-main .dt-paging .paginate_button.next:hover,
.site-main .dt-paging .paginate_button.next:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    transform: translateX(3px);
}
.site-main .dt-paging .paginate_button.previous:active {
    transform: translateX(-5px) scale(0.85) !important;
    transition: transform .08s ease-out !important;
}
.site-main .dt-paging .paginate_button.next:active {
    transform: translateX(5px) scale(0.85) !important;
    transition: transform .08s ease-out !important;
}
.site-main .dt-paging .paginate_button.previous.disabled,
.site-main .dt-paging .paginate_button.next.disabled {
    opacity: 0.35 !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Centre the selected value text in Select2 single-select fields inside the product form modal */
.admin-form-modal-body .select2-container--default .select2-selection--single .select2-selection__rendered,
.admin-form-modal-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    text-align: center;
}


/* ======================================================================= */
/*  * ◀ End of   §31  Catalog View Toggle                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §33c Catalog Preload Blur Reveal                          */
/* ======================================================================= */

/* Catalog initial page-load blur that lifts once card images have loaded. */
/* The inline script adds .catalog-preloading to <body> immediately;       */
/* the JS preloader removes it after images load (max 1.8 s fallback).     */

#catalog { position: relative; }

#catalog-preload-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 5rem;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 10;
}

body.catalog-preloading #catalog-preload-overlay {
    opacity: 1;
}

/* Apply blur immediately (no transition) when class is present */
body.catalog-preloading #catalog-grid {
    filter: blur(12px);
    pointer-events: none;
    user-select: none;
}

/* Smooth reveal when class is removed */
body:not(.catalog-preloading) #catalog-grid {
    filter: blur(0);
    transition: filter 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-preload-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--line-soft);
    border-top-color: var(--brand, #3b82f6);
    border-radius: 50%;
    animation: catalog-preload-spin 0.75s linear infinite;
    opacity: 0.7;
}

@keyframes catalog-preload-spin {
    to { transform: rotate(360deg); }
}

/* ======================================================================= */
/*  * ◀ End of   §33c Catalog Preload Blur Reveal                          */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §06  Cursor Glow                                          */
/* ======================================================================= */

/* ----- Cursor glow -------------------------------------------------------- */
@keyframes cursorGlowPulse {
    0%, 100% {
        width: 340px;
        height: 340px;
        opacity: 1;
    }
    50% {
        width: 380px;
        height: 380px;
        opacity: 0.75;
    }
}
#cursor-glow {
    pointer-events: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    border-radius: 61.8%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.035) 30%, rgba(255,255,255,0.012) 60%, transparent 100%);
    transition: opacity 0.4s ease;
    will-change: transform, width, height, opacity;
    animation: cursorGlowPulse 3s ease-in-out infinite;
}
#cursor-glow.is-hidden {
    opacity: 0;
    animation-play-state: paused;
}

/* Favourite controls used inside the product quick-view modal body */
.pm-favourite-corner {
    position: static;
    z-index: auto;
    width: auto;
    height: 2.4rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    font-size: 1.2rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: #be123c !important;
    border: 1.5px solid #be123c !important;
    color: #fecdd3 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}
.pm-favourite-corner .pm-fav-icon {
    color: #fecdd3 !important;
}
.pm-favourite-corner#pm-favourite:hover {
    background: rgba(252, 165, 165, 0.38) !important;
    border: 1.5px solid #e11d48 !important;
    color: #e11d48 !important;
    transform: translateY(-1px);
}
.pm-favourite-corner#pm-favourite:hover .pm-fav-icon {
    color: #e11d48 !important;
}
.pm-favourite-corner.is-favourite {
    background: #14532d !important;
    border-color: #14532d !important;
    color: #bbf7d0 !important;
}
.pm-favourite-corner.is-favourite .pm-fav-icon { color: #bbf7d0 !important; }
.pm-favourite-corner.is-favourite#pm-favourite:hover {
    background: rgba(21, 128, 61, 0.12) !important;
    border-color: #15803d !important;
    color: #15803d !important;
    transform: translateY(-1px);
}
.pm-favourite-corner.is-favourite#pm-favourite:hover .pm-fav-icon {
    color: #15803d !important;
}
/* Plus falls into cart — triggered by JS-added .is-dropping class on click */
@keyframes pmPlusFall {
    0%   { transform: translateY(0)     scale(1);    opacity: 1; }
    55%  { transform: translateY(9px)   scale(0.55); opacity: 0.5; }
    72%  { transform: translateY(14px)  scale(0.2);  opacity: 0;   }
    73%  { transform: translateY(-8px)  scale(0.2);  opacity: 0;   }
    100% { transform: translateY(0)     scale(1);    opacity: 1;   }
}
@keyframes pmCartCatch {
    0%   { transform: translateY(0);    }
    68%  { transform: translateY(3px);  }
    82%  { transform: translateY(-2px); }
    100% { transform: translateY(0);    }
}
@keyframes pmCartBounce {
    0%   { transform: translateY(0);    }
    28%  { transform: translateY(-4px); }
    55%  { transform: translateY(0);    }
    76%  { transform: translateY(-2px); }
    100% { transform: translateY(0);    }
}
/* #pm-add hover: cart bounces up/down; plus stays put. Suppressed while .is-dropping. */
#pm-add:not(.is-dropping):hover .pm-btn-stack svg:last-child {
    animation: pmCartBounce 0.42s ease both;
}
/* #pm-add click: plus falls into cart, cart catches */
#pm-add.is-dropping .pm-btn-stack svg:first-child {
    animation: pmPlusFall 0.58s cubic-bezier(.4,0,.6,1) both;
}
#pm-add.is-dropping .pm-btn-stack svg:last-child {
    animation: pmCartCatch 0.58s ease both;
}
/* csm-add-btn hover: same cart bounce only */
#csm-add-btn:not(.is-dropping):hover svg:last-child {
    animation: pmCartBounce 0.42s ease both;
}
/* csm-add-btn click: plus falls, cart catches */
#csm-add-btn.is-dropping svg:first-child {
    animation: pmPlusFall 0.58s cubic-bezier(.4,0,.6,1) both;
}
#csm-add-btn.is-dropping svg:last-child {
    animation: pmCartCatch 0.58s ease both;
}
/* csm-checkout-btn — cart + arrow sprint right toward checkout */
@keyframes pmCheckoutSprint {
    0%   { transform: translateX(0);    }
    15%  { transform: translateX(-3px); }
    65%  { transform: translateX(9px);  }
    82%  { transform: translateX(7px);  }
    100% { transform: translateX(0);    }
}
#csm-checkout-btn:hover svg {
    animation: pmCheckoutSprint 0.48s cubic-bezier(.36,.07,.19,.97) both;
}
/* Cart sprint — #pm-go-to-cart: triggered by .is-open-cart on click */
@keyframes pmCartSprint {
    0%   { transform: translateX(0);    }
    15%  { transform: translateX(-4px); }
    65%  { transform: translateX(12px); }
    82%  { transform: translateX(9px);  }
    100% { transform: translateX(0);    }
}
/* Hover: cart bounces up/down (suppressed while .is-open-cart) */
#pm-go-to-cart:not(.is-open-cart):hover .pm-btn-stack {
    animation: pmCartBounce 0.42s ease both;
}
/* Click: cart sprints right */
#pm-go-to-cart.is-open-cart .pm-btn-stack {
    animation: pmCartSprint 0.52s cubic-bezier(.36,.07,.19,.97) both;
}
/* Heart pulse — #pm-favourite pulses on hover */
@keyframes pmHeartPulse {
    0%   { transform: scale(1);    }
    18%  { transform: scale(1.38); }
    34%  { transform: scale(1);    }
    50%  { transform: scale(1.26); }
    66%  { transform: scale(1);    }
    82%  { transform: scale(1.12); }
    100% { transform: scale(1);    }
}
#pm-favourite:hover .pm-fav-icon {
    animation: pmHeartPulse 1.0s ease-out both;
}
/* Triggered by JS after a successful add-to-favourites */
.pm-fav-beating {
    animation: pmHeartPulse 1.0s ease-out both !important;
}
/* X close — product-modal close button grows slowly on hover */
.modal-close[data-modal-close="product-modal"] {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.modal-close[data-modal-close="product-modal"]:hover {
    transform: scale(1.45) !important;
}
/* "Go to favourites" button — sits just left of the heart button */
.pm-go-to-favourites {
    font-size: 1.1rem;
    text-decoration: none;
    color: #c2410c !important;
    background: rgba(254, 243, 199, 0.96) !important;
    border: 1px solid rgba(217, 119, 6, 0.42) !important;
}
.pm-go-to-favourites:hover {
    background: rgba(249, 115, 22, 0.96) !important;
    border-color: rgba(194, 65, 12, 0.72) !important;
    color: #facc15 !important;
}
@keyframes pmStarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.pm-fav-star {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    transform-origin: center;
}
.pm-go-to-favourites:hover .pm-fav-star {
    animation: pmStarSpin 0.55s ease forwards;
}
.btn.btn-primary.admin-header__text-btn {
    background-color: red !important;
    color: white !important;
    border: 1px solid rgba(148, 163, 184, 0.618) !important;
}
.btn.btn-primary.admin-header__text-btn:hover {
    background-color: rgba(0, 0, 0, 0.07) !important;
    color: red !important;
    border: 1x red!important;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.618) !important;
}
.btn.favourites-link{
    max-width: 49% !important;
}
 /* end @supports Safari */

/* ═══════════════════════════════════════════════════════════════════════════
   Image FX — CSS animation keyframes and classes applied by ImageFX engine
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes: Motion ───────────────────────────────────────────────────── */
@keyframes imgfx-kb-in  { from { transform: scale(1);    } to { transform: scale(1.15); } }
@keyframes imgfx-kb-out { from { transform: scale(1.15); } to { transform: scale(1);    } }
@keyframes imgfx-kb-pan {
  0%   { transform: scale(1.10) translateX( 3%); }
  50%  { transform: scale(1.12) translateX(-3%); }
  100% { transform: scale(1.10) translateX( 3%); }
}
/* Drift: ultra-slow horizontal pan; scale prevents edge exposure */
@keyframes imgfx-drift {
  0%   { transform: scale(1.04) translateX(-1.5%); }
  50%  { transform: scale(1.05) translateX( 1.5%); }
  100% { transform: scale(1.04) translateX(-1.5%); }
}
@keyframes imgfx-float   { from { transform: translateY(0);    } to { transform: translateY(-5px);  } }
@keyframes imgfx-breathe { from { transform: scale(1);         } to { transform: scale(1.02);       } }
@keyframes imgfx-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes imgfx-tilt {
  0%, 100% { transform: perspective(600px) rotateY(-4deg); }
  50%       { transform: perspective(600px) rotateY( 4deg); }
}
@keyframes imgfx-rock { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }

/* ── Keyframes: Filter ───────────────────────────────────────────────────── */
@keyframes imgfx-color-boost {
  from { filter: saturate(1)         brightness(1);    }
  to   { filter: saturate(1.3)       brightness(1.02); }
}
@keyframes imgfx-warm {
  from { filter: hue-rotate(  0deg)  saturate(1);               }
  to   { filter: hue-rotate( 18deg)  saturate(1.08) brightness(1.03); }
}
@keyframes imgfx-cool {
  from { filter: hue-rotate(  0deg)  saturate(1);    }
  to   { filter: hue-rotate(-20deg)  saturate(1.08); }
}
@keyframes imgfx-sepia {
  from { filter: sepia(0); }
  to   { filter: sepia(0.4) brightness(1.04); }
}

/* ── Keyframes: Overlay ──────────────────────────────────────────────────── */
/* Shimmer: slow diagonal light sweep across the image */
@keyframes imgfx-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}
/* Glare: single sharp sweep once per cycle, long rest between passes.
   With a 16 s duration: sweep is visible for ~2.5 s, then rests ~13.5 s. */
@keyframes imgfx-glare {
  0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  3%   { opacity: 1; }
  14%  { opacity: 1; }
  17%  { transform: translateX( 220%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX( 220%) skewX(-12deg); opacity: 0; }
}
/* Spotlight: roaming soft glow that traces a slow rectangular path */
@keyframes imgfx-spotlight {
  0%, 100% { transform: translate(  0%,   0%); }
  25%       { transform: translate( 55%,   5%); }
  50%       { transform: translate( 50%,  55%); }
  75%       { transform: translate(  5%,  50%); }
}
/* Vignette: dark edge frame that breathes slowly */
@keyframes imgfx-vignette {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}

/* ── Motion effects (applied to <img>) ──────────────────────────────────── */
.img-fx-ken-burns-in  { animation: imgfx-kb-in   10s ease-in-out infinite alternate; transform-origin: center; }
.img-fx-ken-burns-out { animation: imgfx-kb-out  10s ease-in-out infinite alternate; transform-origin: center; }
.img-fx-ken-burns-pan { animation: imgfx-kb-pan  12s ease-in-out infinite;           transform-origin: center; }
.img-fx-drift         { animation: imgfx-drift   18s ease-in-out infinite;           transform-origin: center; }
.img-fx-float         { animation: imgfx-float    6s ease-in-out infinite alternate; }
.img-fx-breathe       { animation: imgfx-breathe  5s ease-in-out infinite alternate; }
.img-fx-pulse         { animation: imgfx-pulse    4s ease-in-out infinite;           }
.img-fx-tilt          { animation: imgfx-tilt     8s ease-in-out infinite;           }
.img-fx-rock          { animation: imgfx-rock     5s ease-in-out infinite alternate; }

/* ── Filter effects (applied to <img>) ──────────────────────────────────── */
.img-fx-color-boost { animation: imgfx-color-boost  5s ease-in-out infinite alternate; }
.img-fx-warm-shift  { animation: imgfx-warm          9s ease-in-out infinite alternate; }
.img-fx-cool-shift  { animation: imgfx-cool         10s ease-in-out infinite alternate; }
.img-fx-sepia       { animation: imgfx-sepia          8s ease-in-out infinite alternate; }

/* ── Overlay effects (wrap requires overflow:hidden, applied via ::after) ── */
.img-fx-wrap { position: relative; overflow: hidden; }

/* Shimmer: barely-there diagonal sweep; opacity kept low for subtlety */
.img-fx-wrap-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255,255,255,0.09) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: imgfx-shimmer 12s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* Glare: narrow diagonal beam; fires once then rests the majority of the cycle */
.img-fx-wrap-glare::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -15%;
  width: 30%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.14) 50%,
    transparent 100%
  );
  animation: imgfx-glare 16s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Spotlight: soft radial glow that roams slowly around the image */
.img-fx-wrap-spotlight::after {
  content: '';
  position: absolute;
  top: -5%; left: -5%;
  width: 55%; height: 55%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.16) 0%,
    transparent 70%
  );
  animation: imgfx-spotlight 12s ease-in-out infinite;
  pointer-events: none;
}

/* Vignette: pulsing dark frame around the image perimeter */
.img-fx-wrap-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 45%,
    rgba(0,0,0,0.22) 100%
  );
  animation: imgfx-vignette 10s ease-in-out infinite alternate;
  pointer-events: none;
  border-radius: inherit;
}

/* Ken Burns wrap — ensures overflow:hidden so scaled image doesn't bleed */
.img-fx-wrap-kb { position: relative; overflow: hidden; }

/* Pause: freeze all CSS animations on this wrap (set by ImageFX.pause()) */
.img-fx-paused img,
.img-fx-paused::after { animation-play-state: paused !important; }

/* Reduced-motion: suppress large-transform animations when OS flag is set */
.img-fx-reduced-motion .img-fx-ken-burns-in,
.img-fx-reduced-motion .img-fx-ken-burns-out,
.img-fx-reduced-motion .img-fx-ken-burns-pan,
.img-fx-reduced-motion .img-fx-drift,
.img-fx-reduced-motion .img-fx-float,
.img-fx-reduced-motion .img-fx-breathe,
.img-fx-reduced-motion .img-fx-pulse,
.img-fx-reduced-motion .img-fx-tilt,
.img-fx-reduced-motion .img-fx-rock { animation: none; transform: none; }

/* Effects picker in admin image details */
.image-fx-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* Admin images table — thumb cell with live effects */
.admin-images-thumb-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 4px;
    width: 56px;
    height: 56px;
    background: rgba(0,0,0,.04);
}
.admin-images-thumb-wrap > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbnail regeneration settings modal */
.thumb-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.thumb-settings-group {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: .875rem 1rem;
}
.thumb-settings-group h4 {
    font-size: .75rem;
    font-weight: 700;
    color: var(--flag-blue, #0053a0);
    margin: 0 0 .6rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.thumb-fit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .3rem .7rem; border-radius: 6px; font-size: .72rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07); color: var(--ink);
    transition: background .15s, border-color .15s; user-select: none;
}
.thumb-fit-btn:hover  { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.thumb-fit-btn.active { background: rgba(59,130,246,.3); border-color: rgba(99,171,255,.7); color: #fff; }
.image-fx-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.image-fx-chip:hover  { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.image-fx-chip.active {
  background: rgba(0, 48, 135, 0.82);
  border-color: rgba(99,171,255,.9);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(99,171,255,.35);
}
#image-attach-mode-note {
    color: var(--ink) !important;
}
.image-fx-chip {
    color: white !important;
}
/* light / mixed themes: glass panel is near-white, so boost contrast more */
body:not(.theme-dark) .image-fx-chip {
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.15);
  color: var(--ink);
}
body:not(.theme-dark) .image-fx-chip:hover {
  background: rgba(0,48,135,.1);
  border-color: rgba(0,48,135,.3);
}
body:not(.theme-dark) .image-fx-chip.active {
  background: var(--finland-blue, #003087);
  border-color: var(--finland-blue, #003087);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0,48,135,.25);
}
.btn-favourite {
width: 120px !important;
height: 38px !important;
}
.btn-favourite:hover {
    background: var(--finland-blue) !important;
}
.btn-account {
  width: 140px;
  padding: 0.5rem 0.5rem !important;
}
.btn-account#disable-autosave {
  width: auto !important;
  padding: 0 0.55rem !important;
}
.btn-sm{
    width: 80px !important;
    height: 20px !important;
    font-size: 0.618rem !important;
    border: thin solid 1px lightgray;
}
div#pm-comments p, div#pm-comments label, div#pm-comments th {
    color: rgba(226, 232, 240, 0.82);
}
#product-modal .flex.flex-col#the-flex-col {
    padding-left: 1.618rem;
    padding-right: 1.618rem;
}
#image-details.modal .modal-panel.glass.admin-view-modal-panel {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.filter-bar-element {
    border: 1px solid rgba(0,0,0,0.382) !important;
    background-color: rgba(0,0,0,0) !important;
}
/* Storefront catalog filter bar:
   first row = blue / white  / glass
   second row toggle switches = green */
.site-main #catalog-filters-card .catalog-toolbar .filter-bar-element,
.site-main #catalog-filters-card .catalog-toolbar-body .filter-bar-element {
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(191,219,254,0.08)) !important;
    color: #eff6ff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 10px 22px rgba(2, 6, 23, 0.12);
    text-shadow: none !important;
}
.site-main #catalog-filters-card .catalog-toolbar .filter-bar-element:hover,
.site-main #catalog-filters-card .catalog-toolbar .filter-bar-element:focus-visible,
.site-main #catalog-filters-card .catalog-toolbar-body .filter-bar-element:hover,
.site-main #catalog-filters-card .catalog-toolbar-body .filter-bar-element:focus-visible {
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(96,165,250,0.16)) !important;
    border-color: rgba(96, 165, 250, 0.58) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 12px 28px rgba(0, 53, 128, 0.18);
    text-shadow: none !important;
}
.site-main #catalog-filters-card .catalog-toolbar .filter-bar-element.is-active,
.site-main #catalog-filters-card .catalog-toolbar-body .filter-bar-element.is-active {
    border: 1px solid rgba(191, 219, 254, 0.92) !important;
    background: linear-gradient(135deg, rgba(0,53,128,0.96) 0%, rgba(15,76,154,0.94) 52%, rgba(59,130,246,0.88) 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 1px rgba(96,165,250,0.25),
        0 16px 34px rgba(0, 53, 128, 0.24) !important;
    text-shadow: none !important;
}
.site-main #catalog-filters-card .catalog-toolbar .filter-bar-element.is-active:hover,
.site-main #catalog-filters-card .catalog-toolbar-body .filter-bar-element.is-active:hover {
    border-color: rgba(255,255,255,0.98) !important;
    background: linear-gradient(135deg, rgba(0,53,128,1) 0%, rgba(26,86,160,0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(191,219,254,0.32),
        0 18px 38px rgba(0, 53, 128, 0.28) !important;
    color: #ffffff !important;
    transition: background .17s, border-color .17s, color .17s, box-shadow .17s !important;
}

.site-main #catalog-filters-card .catalog-toolbar-body #catalog-category-overlay-toggle.filter-bar-element:not(.is-active),
.site-main #catalog-filters-card .catalog-toolbar #catalog-category-overlay-toggle.filter-bar-element:not(.is-active) {
    color: rgb(0, 53, 128) !important;
}
.site-main #catalog-filters-card .catalog-toolbar .input,
.site-main #catalog-filters-card .catalog-toolbar-body .input,
.site-main #catalog-filters-card .catalog-toolbar .select,
.site-main #catalog-filters-card .catalog-toolbar-body .select,
.site-main #catalog-filters-card .catalog-toolbar .select2-container--default .select2-selection--single,
.site-main #catalog-filters-card .catalog-toolbar-body .select2-container--default .select2-selection--single {
    color: #0f172a !important;
}
.site-main #catalog-filters-card #catalog-sort,
.site-main #catalog-filters-card #catalog-sort:hover,
.site-main #catalog-filters-card #catalog-sort:focus,
.site-main #catalog-filters-card #catalog-sort:focus-visible,
.site-main #catalog-filters-card #catalog-sort.is-active,
.site-main #catalog-filters-card #catalog-sort.is-active:hover {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}
.site-main #catalog-filters-card .catalog-toolbar .input::placeholder,
.site-main #catalog-filters-card .catalog-toolbar-body .input::placeholder {
    color: rgba(51, 65, 85, 0.72) !important;
}
.site-main #catalog-filters-card .catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered,
.site-main #catalog-filters-card .catalog-toolbar .select2-container--default .select2-selection--single .select2-selection__placeholder,
.site-main #catalog-filters-card .catalog-toolbar-body .select2-container--default .select2-selection--single .select2-selection__rendered,
.site-main #catalog-filters-card .catalog-toolbar-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #0f172a !important;
}
.site-main #catalog-filters-card .catalog-toolbar #catalog-min-price,
.site-main #catalog-filters-card .catalog-toolbar #catalog-max-price,
.site-main #catalog-filters-card .catalog-toolbar-body #catalog-min-price,
.site-main #catalog-filters-card .catalog-toolbar-body #catalog-max-price {
    color: #0f172a !important;
    caret-color: rgb(0, 53, 128);
}
.site-main #catalog-filters-card .catalog-toolbar .catalog-price-preset-select,
.site-main #catalog-filters-card .catalog-toolbar-body .catalog-price-preset-select {
    color: #0f172a !important;
}
.site-main #catalog-filters-card .catalog-toolbar .catalog-price-preset-select.has-value,
.site-main #catalog-filters-card .catalog-toolbar-body .catalog-price-preset-select.has-value {
    color: rgb(0, 53, 128) !important;
}

/* Slideshow admin preview dots & arrows */
.pf-slideshow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    display: inline-block;
    transition: background .2s;
}
.pf-slideshow-dot.is-active {
    background: rgba(255,255,255,1);
}
.pf-slideshow-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.35); color: #fff; border: none;
    border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 18px; line-height: 1;
    z-index: 2;
}
.pf-slideshow-arrow--prev { left: 4px; }
.pf-slideshow-arrow--next { right: 4px; }
.pf-ss-chip.is-active, .pf-ss-img-fx-chip.is-active, .pf-ss-img-trans-chip.is-active {
    background: var(--finland-blue, #003580) !important;
    color: #fff !important;
    border-color: var(--finland-blue, #003580) !important;
}
.pf-ss-apply-all-row {
    background: rgba(255,255,255,.04);
}
.pf-ss-apply-all-trans:hover, .pf-ss-apply-all-fx:hover {
    background: rgba(0,91,187,.18) !important;
    color: #fff !important;
}
.pf-ss-img-row {
    background: rgba(255,255,255,.03);
}


#pm-name {
    text-shadow: 0 0 1px rgba(0, 0, 0, 1) !important;
    color: var(--finland-white) !important;
}

.wm-locale-btn.btn-ghost:hover, #wm-theme-btns.btn-ghost:hover, .wm-theme-btn.btn-ghost:hover, .wm-audio-btn.btn.btn-ghost:hover, .wm-hints-btn.btn-ghost:hover, #welcome-get-started.btn-ghost:hover {
    color: white !important;
    border: 2px solid rgba(255,255,255,0.618);
    text-shadow: 0 0 1px black !important;
    box-shadow: -1px -1px 4px black !important;
}

.wm-locale-btn.btn-ghost, #wm-theme-btns.btn-ghost, .wm-theme-btn.btn-ghost, .wm-audio-btn.btn.btn-ghost, .wm-hints-btn.btn-ghost, #welcome-get-started.btn-ghost {
    color: white !important;
    border: 1px solid rgba(255,255,255,0.382);
    text-shadow: 0 0 1px black !important;
}

.wm-locale-btn.btn-primary:hover, #wm-theme-btns.btn-primary:hover, .wm-theme-btn.btn-primary:hover, .wm-audio-btn.btn.btn-primary:hover, .wm-hints-btn.btn-primary:hover, #welcome-get-started.btn-primary:hover {
    color: white !important;
    border: 1px solid rgba(255,255,255,0.618);
    text-shadow: 0 0 1px black !important;
    box-shadow: -1px -1px 4px black !important;
}

.wm-locale-btn.btn-primary, #wm-theme-btns.btn-primary, .wm-theme-btn.btn-primary, .wm-audio-btn.btn.btn-primary, .wm-hints-btn.btn-primary, #welcome-get-started.btn-primary {
    color: white !important;
    border: 1px solid rgba(255,255,255,0.382);
    text-shadow: 0 0 1px black !important;
}
#catalog-reset-filters-mobile.catalog-reset-mobile {
    background: var(--finland-blue) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.382);
    text-shadow: 0 0 1px black !important;
}
#catalog-reset-filters-mobile.catalog-reset-mobile:hover {
    background: var(--finland-blue-400) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.382);
    text-shadow: 0 0 1px black !important;
}
#pm-stock{
    color: white !important;
}

/* ── Favourites grid & cards ─────────────────────────────────────────────── */
.fav-card__stack-add-btn,
.fav-card__footer-remove {
    height: 32px !important;
    min-height: 32px !important;
}
.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.1rem;
    align-items: start;
}
.fav-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    border-radius: 2px;
    height: 102px;
}
.fav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 53, 128, 0.18);
}
.fav-card--unavailable {
    opacity: 0.72;
}

/* Collapsed summary (details header) */
.fav-card__summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    min-height: 2.4rem;
    width: 100%;
    box-sizing: border-box;
}
.fav-card__summary::-webkit-details-marker { display: none; }

.fav-card__summary-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.fav-card__summary-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-card__summary-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.67rem;
}

.fav-card__summary-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Image */
.fav-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-soft);
    flex-shrink: 0;
}
.fav-card__img-link {
    display: block;
    width: 100%;
    height: 100%;
}
.fav-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    display: block;
}
.fav-card:hover .fav-card__img {
    transform: scale(1.04);
}
.fav-card__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-ink);
    opacity: 0.4;
}
/* Rank badge */
.fav-card__rank {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.2rem 0.42rem;
    border-radius: 2px;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 2;
}
/* Move controls */
.fav-card__controls {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 3;
}
.fav-card__control-form {
    display: contents;
}
.fav-card__control-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    padding: 0;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.fav-card__control-btn:hover:not(:disabled) {
    background: rgba(0, 53, 128, 0.88);
}
.fav-card__control-btn:disabled {
    opacity: 0.22;
    cursor: default;
}
.fav-card__control-btn svg {
    width: 14px !important;
    height: 14px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Hover "View" overlay */
.fav-card__view-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 53, 128, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.22s ease, background 0.22s ease;
    z-index: 1;
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.fav-card:hover .fav-card__view-overlay {
    opacity: 1;
    background: rgba(0, 53, 128, 0.38);
}
/* Unavailable overlay */
.fav-card__unavailable-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 2;
}
/* Body */
.fav-card__body {
    padding: 0.7rem 0.75rem 0.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.fav-card__name-link {
    text-decoration: none;
    color: inherit;
}
.fav-card__name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin: 0;
}
.fav-card__name-link:hover .fav-card__name {
    color: var(--finland-blue);
}
.fav-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}
.fav-card__price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--finland-blue);
    line-height: 1;
}
.fav-card__stock {
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    color: var(--muted-ink);
}
.fav-card__stock::before {
    content: '●';
    font-size: 0.55rem;
}
.fav-card__stock--in::before  { color: #16a34a; }
.fav-card__stock--low::before { color: #d97706; }
.fav-card__stock--out::before { color: #dc2626; }
.fav-card__date {
    font-size: 0.67rem;
    color: var(--muted-ink);
    margin-top: 0.25rem;
}
/* Note */
.fav-card__note {
    border-top: 1px solid var(--line-soft);
    margin: 0;
}
.fav-card__note-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.73rem;
    color: var(--muted-ink);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: color 0.15s;
}
.fav-card__note-toggle::-webkit-details-marker { display: none; }
.fav-card__note-toggle:hover { color: var(--ink); }
.fav-card__note-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-style: italic;
}
.fav-card__note-hint {
    flex: 1;
    opacity: 0.65;
}
.fav-card__note-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0 0.75rem 0.65rem;
}
.fav-card__note-textarea {
    font-size: 0.78rem;
    min-height: 76px;
    resize: vertical;
    width: 100%;
}
.fav-card__note-save {
    align-self: flex-end;
    font-size: 0.78rem;
    padding: 0.3rem 0.9rem !important;
}
/* Footer */
.fav-card__footer {
    padding: 0.5rem 0.75rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    border-top: 1px solid var(--line-soft);
}
.fav-card__footer-view,
.fav-card__footer-add {
    flex: 1;
    font-size: 0.78rem;
    padding: 0.32rem 0.7rem !important;
    text-align: center;
}
.fav-card__remove-form {
    flex-shrink: 0;
}
.fav-card__footer-remove {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.fav-card__footer-remove svg {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Stack-add-btn (layers icon + plus badge) */
.fav-card__stack-add-btn svg:first-child {
    width: 14px !important;
    height: 14px !important;
    max-width: none !important;
    flex-shrink: 0;
}
.fav-card__stack-add-btn svg:last-child {
    width: 10px !important;
    height: 10px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Sea-stack section buttons */
.js-stack-buy-all svg,
.js-stack-rename svg,
.js-stack-delete svg {
    width: 14px !important;
    height: 14px !important;
    max-width: none !important;
    flex-shrink: 0;
}
/* Sea-stack card mini-buttons */
.js-fav-add-cart svg,
.js-stack-card-view svg,
.js-stack-card-comment svg,
.js-stack-card-promote svg,
.js-stack-card-remove svg {
    width: 13px !important;
    height: 13px !important;
    max-width: none !important;
    flex-shrink: 0;
}
.fav-card__price-watch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    min-height: 0;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-color: rgba(99, 102, 241, 0.35);
    color: rgba(99, 102, 241, 0.75);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.fav-card__price-watch-btn .fav-pw-label {
    display: none;
}
.fav-card__price-watch-btn.is-active {
    border-color: rgba(99, 102, 241, 0.65);
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
}
.fav-card__price-watch-btn:hover,
.fav-card__price-watch-btn:focus-visible {
    border-color: rgba(99, 102, 241, 0.65);
    color: #4f46e5;
}

/* Empty state */
.fav-empty-icon {
    font-size: 4rem;
    line-height: 1;
    opacity: 0.35;
}
/* ── Favourites: two-column layout ─────────────────────────────────────── */
.fav-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.fav-layout__table {
    flex: 0 0 38.2vw;
    width: 38.2vw;
    min-width: 0;
    overflow: hidden;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: .85rem 1rem;
    border-radius: 2px;
}
.fav-layout__cards {
    flex: 1 1 0;
    min-width: 0;
    min-height: 110px;
}
/* DataTable inside fav-layout */
.fav-layout__table .dt-search { margin-bottom: .5rem; }
.fav-layout__table .dt-search input { width: 100%; box-sizing: border-box; }
/* Table rows */
.fav-tbl__row { cursor: pointer; transition: background .12s; }
.fav-tbl__row:hover { background: rgba(0, 53, 128, 0.08) !important; }
.fav-tbl__rank { font-size: .72rem; font-weight: 700; color: var(--muted-ink); text-align: center; }
.fav-tbl__product-wrap { display: flex; align-items: center; gap: .55rem; }
.fav-tbl__thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--surface-soft);
    display: block;
}
.fav-tbl__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-ink);
    opacity: .35;
}
.fav-tbl__product-info { min-width: 0; }
.fav-tbl__name {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
a.fav-tbl__name:hover { color: var(--finland-blue); }
.fav-tbl__price { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.fav-tbl__stock { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.fav-tbl__stock--in  { color: #16a34a; }
.fav-tbl__stock--low { color: #d97706; }
.fav-tbl__stock--out { color: #dc2626; }
.fav-tbl__date { font-size: .7rem; color: var(--muted-ink); white-space: nowrap; }
/* Cross-highlight */
.fav-card--highlighted {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 53, 128, 0.28) !important;
}
.fav-card--dragging {
    opacity: 0.45;
    transform: scale(0.97);
    cursor: grabbing;
}
.fav-card--drag-over {
    outline: 2px dashed #3b82f6;
    outline-offset: 3px;
    background: rgba(59, 130, 246, 0.06) !important;
}
.fav-tbl__row--dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.fav-tbl__row--drag-over {
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
}
/* Stack group highlighted as drop target when a fav card/row is dragged over it */
.fav-stack-group--fav-drop {
    outline: 2px dashed #3b82f6;
    outline-offset: 3px;
    background: rgba(59, 130, 246, 0.07) !important;
    transition: background 0.15s, outline 0.15s;
}
/* Fav layout highlighted as drop target when a stack card is dragged over it */
.fav-layout--stack-drop {
    outline: 2px dashed #10b981;
    outline-offset: 4px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 8px;
    transition: background 0.15s, outline 0.15s;
}
/* ── /Favourites ─────────────────────────────────────────────────────────── */

/* ── Hero modals: remove backdrop padding so panels fill nearly full height ── */
#hero-featured-modal.modal-backdrop,
#hero-sale-modal.modal-backdrop,
#hero-new-modal.modal-backdrop,
#hero-shop-modal.modal-backdrop {
    padding: 0;
}
#hero-featured-modal .modal-panel,
#hero-sale-modal .modal-panel,
#hero-new-modal .modal-panel,
#hero-shop-modal .modal-panel {
    max-height: 98vh;
}

/* ── Featured modal: extra-small phones (≤480px) ───────────────────────── */

#hero-featured-modal.modal-backdrop {
    overflow: hidden;
}
/* ── /Featured modal mobile ─────────────────────────────────────────────── */
#quick-review-modal .modal-panel.glass {
    padding-left: calc(16px + 1.5rem) !important;
    padding-right: calc(16px + 1.5rem) !important;
    padding-bottom: 1.5rem !important;
}

/* ── Product-page pending-comment modal — blue glass ────────────────────── */
#product-page-comment-pending-modal .modal-panel {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    background: rgba(11, 29, 58, 0.76) !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;
}
#product-page-comment-pending-modal .modal-panel h3.text-flag-blue {
    color: #93c5fd !important;
}
#product-page-comment-pending-modal .modal-panel p {
    color: rgba(226, 232, 240, 0.9) !important;
}
#product-page-comment-pending-modal .modal-close {
    color: rgba(226, 232, 240, 0.7) !important;
}
#product-page-comment-pending-modal .modal-close:hover {
    color: #ffffff !important;
}
/* ── /Product-page pending-comment modal ─────────────────────────────────── */

/* ── Maintenance page ────────────────────────────────────────────────────── */
.maintenance-body {
    background: var(--body-bg, #e8eef8);
}
.maintenance-panel {
    max-width: 32rem;
    width: 90%;
    padding: 3rem 2.5rem;
    text-align: center;
    border-radius: 1px;
}
.maintenance-icon {
    color: var(--flag-blue, #003580);
    opacity: 0.55;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: center;
}
.maintenance-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--flag-blue, #003580);
    margin-bottom: 0.75rem;
}
.maintenance-message {
    font-size: 0.9375rem;
    color: var(--muted-600, #6b7280);
    line-height: 1.6;
}

/* ── Admin confirm modal — deep navy blue glass ─────────────────────────── */
#admin-confirm-modal .modal-panel {
    padding: 1.75rem 1.75rem 1.75rem 1.75rem;
    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;
    min-width: min(420px, 90vw);
    max-width: min(520px, 92vw);
}
#admin-confirm-modal #acm-title {
    color: var(--finland-blue-400) !important;
    text-shadow: none !important;
}
#admin-confirm-modal #acm-message {
    display: block;
    padding: 0.35rem 0.1rem;
    color: #cbd5e1 !important;
    text-shadow: none !important;
}
#admin-confirm-modal .btn-ghost {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(142, 174, 226, 0.35) !important;
    color: #ffffff !important;
}
#admin-confirm-modal .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(142, 174, 226, 0.6) !important;
    color: #ffffff !important;
}
/* ── /Maintenance page ───────────────────────────────────────────────────── */

/* ── Comments / reviews moderation modals — blue glass ─────────────────── */
#comment-detail-modal .admin-view-modal-panel,
#comment-detail-modal .admin-view-modal-header,
#comment-detail-modal .admin-view-modal-body,
#comment-detail-modal .admin-view-modal-footer {
    background: rgba(11, 29, 58, 0.72) !important;
    background-color: rgba(11, 29, 58, 0.72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    color: #ffffff !important;
}
#comment-detail-modal .admin-view-modal-panel {
    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;
}
#comment-detail-modal .admin-view-modal-header {
    border-bottom: 1px solid rgba(142, 174, 226, 0.22) !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
}
#comment-detail-modal .admin-view-modal-footer {
    border-top: 1px solid rgba(142, 174, 226, 0.22) !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    padding: 0.875rem 1.618rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
    display: flex !important;
}
#comment-detail-modal .admin-view-modal-footer .btn {
    width: auto !important;
    min-width: 100px;
}
/* Title / accent */
#comment-detail-modal .text-flag-blue,
#comment-detail-modal .text-xl.font-bold,
#comment-detail-modal #cdm-title {
    color: var(--finland-blue-400) !important;
}
/* Secondary labels — light gray */
#comment-detail-modal .text-gray-500,
#comment-detail-modal .text-gray-600,
#comment-detail-modal .text-gray-700,
#comment-detail-modal .text-xs,
#comment-detail-modal label,
#comment-detail-modal .admin-view-grid dt {
    color: #cbd5e1 !important;
}
/* Body / data text — white */
#comment-detail-modal .admin-view-grid dd,
#comment-detail-modal #cdm-action-status,
#comment-detail-modal #cdm-review-title,
#comment-detail-modal #cdm-rating-stars,
#comment-detail-modal #cdm-moderated-by,
#comment-detail-modal p {
    color: #ffffff !important;
}
#comment-detail-modal #cdm-body {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(142, 174, 226, 0.2) !important;
    color: #ffffff !important;
}
#comment-detail-modal #cdm-existing-note-text {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
}
#comment-detail-modal .textarea {
    background: rgba(11, 29, 58, 0.55) !important;
    border-color: rgba(142, 174, 226, 0.45) !important;
    color: #ffffff !important;
}
#comment-detail-modal .textarea::placeholder {
    color: rgba(203, 213, 225, 0.45) !important;
}
#comment-detail-modal .btn-ghost {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(142, 174, 226, 0.35) !important;
    color: #ffffff !important;
}
#comment-detail-modal .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(142, 174, 226, 0.6) !important;
    color: #ffffff !important;
}
#comment-detail-modal #cdm-reply-section {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
#comment-detail-modal #cdm-reply-section,
#comment-detail-modal #cdm-reply-label {
    color: #a7f3d0 !important;
}
/* Confirm-delete sub-modal */
#comment-confirm-modal .modal-panel {
    padding: 1.75rem !important;
    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;
    min-width: min(380px, 90vw);
}
#comment-confirm-modal .text-flag-blue,
#comment-confirm-modal .text-lg.font-bold {
    color: var(--finland-blue-400) !important;
}
#comment-confirm-modal #comment-confirm-msg {
    color: #cbd5e1 !important;
}
#comment-confirm-modal .btn-ghost {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(142, 174, 226, 0.35) !important;
    color: #ffffff !important;
}
#comment-confirm-modal .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(142, 174, 226, 0.6) !important;
    color: #ffffff !important;
}
/* ── /Comments moderation modals ────────────────────────────────────────── */

/* ── Comment-pending modals — blue glass ───────────────────────────────── */
#comment-pending-modal .modal-panel,
#product-page-comment-pending-modal .modal-panel {
    padding: 1.75rem 1.75rem 1.75rem 1.75rem;
    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;
}
#comment-pending-modal .text-flag-blue,
#product-page-comment-pending-modal .text-flag-blue {
    color: var(--finland-blue-400) !important;
}
#comment-pending-modal p,
#product-page-comment-pending-modal p {
    color: #cbd5e1 !important;
}
#comment-pending-modal .btn-ghost,
#product-page-comment-pending-modal .btn-ghost {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(142, 174, 226, 0.35) !important;
    color: #ffffff !important;
}
#comment-pending-modal .btn-ghost:hover,
#product-page-comment-pending-modal .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(142, 174, 226, 0.6) !important;
    color: #ffffff !important;
}
/* ── /Comment-pending modals ────────────────────────────────────────────── */
#comment-bulk-deselect-btn {
    width: 120px !important;
}
/* ── Catalog filter bar: Kategoriat button narrower (no icon) ───────────── */
.catalog-category-overlay-toggle__icon {
    display: none !important;
}
.catalog-category-overlay-toggle {
    padding: 0 .4rem !important;
}

/* ── Admin comments/reviews moderation badges ───────────────────────────── */
/* Light theme (default) — dark text on lightly tinted bg */
.admin-mod-badge--approved {
    background: rgba(16, 185, 129, 0.11);
    border-color: rgba(16, 185, 129, 0.42);
    color: #065f46;
}
.admin-mod-badge--pending {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.48);
    color: #78350f;
}
.admin-mod-badge--declined {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.4);
    color: #991b1b;
}
.admin-mod-badge--deleted {
    background: rgba(107, 114, 128, 0.10);
    border-color: rgba(107, 114, 128, 0.3);
    color: #374151;
}
.admin-mod-badge--type-review {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.45);
    color: #78350f;
}
.admin-mod-badge--type-comment {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.36);
    color: #312e81;
}
.admin-mod-badge--type-reply {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.36);
    color: #065f46;
    font-size: 0.68rem;
}

/* Compact admin action clusters: keep list/media buttons flush. */
.admin-shell .dt-container .dt-buttons,
.admin-shell .dt-container .datatable-toolbar__right,
.admin-shell .dt-row-actions-grid,
.admin-shell .admin-product-actions,
.admin-shell .admin-product-actions-row,
.admin-shell .admin-image-actions,
.admin-shell .admin-image-actions--videos,
.admin-shell .admin-media-action-grid,
.admin-shell .admin-media-action-grid--videos,
.admin-shell .comment-quick-actions,
.admin-shell .ct-node-actions,
.admin-shell .ct-prod-actions,
.admin-shell table.dataTable tbody td div:has(> .admin-table-action-btn),
.admin-shell table.dataTable tbody td div:has(> .admin-img-action-btn),
.admin-shell table.dataTable tbody td div:has(> .admin-product-action-btn),
.admin-shell table.dataTable tbody td div:has(> .cqa-btn) {
    gap: 0 !important;
}
/* ── /Admin comments/reviews moderation badges ──────────────────────────── */

/* Quick-action button row inside DataTable actions cell */
.comment-quick-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
}
/* cqa-btn: standalone badge-style button — does NOT inherit .btn base padding/background */
.cqa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.38rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    border-radius: 0.28rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
    white-space: nowrap;
    background: none;
}
.cqa-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}
/* Light theme — mirrors admin-mod-badge colours exactly */
.cqa-btn--approve {
    background: rgba(16,185,129,0.11);
    border-color: rgba(16,185,129,0.42);
    color: #065f46;
}
.cqa-btn--approve:hover:not(:disabled) { background: rgba(16,185,129,0.24); }
.cqa-btn--decline {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.40);
    color: #991b1b;
}
.cqa-btn--decline:hover:not(:disabled) { background: rgba(239,68,68,0.22); }
/* ── Admin table/modal inline links ────────────────────────────────────── */
.admin-table-link {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}
.admin-table-link:hover {
    color: #1e40af;
    text-decoration: underline;
}
/* ── Review/comment single-item detail modals — white text ──────────────── */
#product-review-detail-modal .modal-panel,
#product-comment-detail-modal .modal-panel {
    color: #ffffff !important;
}
#product-review-detail-modal .text-flag-blue,
#product-comment-detail-modal .text-flag-blue {
    color: #ffffff !important;
}
#product-review-detail-modal .pm-review-row__title,
#product-review-detail-modal .pm-review-row__meta,
#product-review-detail-modal .pm-review-row__body,
#product-review-detail-modal .pm-review-row__stars,
#product-review-detail-modal .pm-comment-row__meta,
#product-review-detail-modal .pm-comment-meta,
#product-review-detail-modal .pm-comment-row__body,
#product-review-detail-modal .pm-comment-body,
#product-review-detail-modal .pm-modal-reply,
#product-review-detail-modal .pm-modal-replies,
#product-comment-detail-modal .pm-review-row__title,
#product-comment-detail-modal .pm-review-row__meta,
#product-comment-detail-modal .pm-review-row__body,
#product-comment-detail-modal .pm-review-row__stars,
#product-comment-detail-modal .pm-comment-row__meta,
#product-comment-detail-modal .pm-comment-meta,
#product-comment-detail-modal .pm-comment-row__body,
#product-comment-detail-modal .pm-comment-body,
#product-comment-detail-modal .pm-modal-reply,
#product-comment-detail-modal .pm-modal-replies {
    color: #ffffff !important;
}
#product-review-detail-modal .comment-reply-btn,
#product-comment-detail-modal .comment-reply-btn {
    color: rgba(255,255,255,0.75) !important;
}
#product-review-detail-modal .comment-reply-btn:hover,
#product-comment-detail-modal .comment-reply-btn:hover {
    color: #ffffff !important;
}
#product-review-detail-modal .modal-close,
#product-comment-detail-modal .modal-close {
    color: rgba(255,255,255,0.7) !important;
}
#product-review-detail-modal .textarea,
#product-comment-detail-modal .textarea {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
/* Give each comment/review row inside the detail modals an explicit blue-glass card so
   they never inherit a gray or white background from theme variables */
#product-review-detail-modal .pm-comment-row,
#product-comment-detail-modal .pm-comment-row {
    background: rgba(12, 30, 66, 0.55) !important;
    border: 1px solid rgba(142, 174, 226, 0.18) !important;
    border-radius: 0.55rem;
    padding: 0.6rem 0.75rem 0.5rem;
    color: #f1f5f9 !important;
}
#product-review-detail-modal .pm-review-row,
#product-comment-detail-modal .pm-review-row {
    background: rgba(12, 30, 66, 0.55) !important;
    border-color: rgba(142, 174, 226, 0.22) !important;
}
#product-review-detail-modal .pm-modal-reply,
#product-comment-detail-modal .pm-modal-reply {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(142, 174, 226, 0.14) !important;
}
#product-review-detail-modal .pm-comment-row__meta,
#product-review-detail-modal .pm-comment-row__body,
#product-comment-detail-modal .pm-comment-row__meta,
#product-comment-detail-modal .pm-comment-row__body {
    color: inherit !important;
}
#product-review-detail-modal .product-page-reply-form,
#product-comment-detail-modal .product-page-reply-form {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.45rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(142, 174, 226, 0.12);
}

/* ── Catalog card favourite heart button ─────────────────────────────────── */
.catalog-card-fav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease, transform 0.15s ease;
    margin-top: -0.125rem;
}
.catalog-card-fav-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.15);
}
.catalog-card-fav-icon {
    font-size: 1.05rem;
    line-height: 1;
    transition: color 0.18s ease, filter 0.18s ease;
    user-select: none;
}
/* Non-favourite: transparent bg, red ♥ */
.catalog-card-fav-btn:not(.is-favourite) {
    background: transparent;
    border-radius: 50%;
}.catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon {
    font-size: 0;
    color: transparent;
}
.catalog-card-fav-btn:not(.is-favourite) .catalog-card-fav-icon::before {
    content: '♥';
    font-size: 1.05rem;
    color: #ef4444;
    display: inline-block;
    transition: color 0.18s ease, filter 0.18s ease;
}
.catalog-card-fav-btn:not(.is-favourite):hover {
    background: rgba(0, 0, 0, 0);
}
.catalog-card-fav-btn:not(.is-favourite):hover .catalog-card-fav-icon::before {
    color: #dc2626;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.55));
}
/* Favourite: transparent bg, green ♥ */
.catalog-card-fav-btn.is-favourite {
    background: transparent;
    border-radius: 50%;
}
.catalog-card-fav-btn.is-favourite .catalog-card-fav-icon {
    color: #22c55e;
    transition: color 0.18s ease, filter 0.18s ease;
}
.catalog-card-fav-btn.is-favourite:hover {
    background: rgba(0, 0, 0, 0);
}
.catalog-card-fav-btn.is-favourite:hover .catalog-card-fav-icon {
    color: #16a34a;
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.65));
}
/* Square fav button in the card action row — matches btn-card-action height */
.catalog-card-fav-btn-sq {
    width: auto;
    height: auto;
    min-width: unset;
    aspect-ratio: 1 / 1;
    border-radius: 6px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 1.1rem;
}

/* Price filter inputs: static width in all states (no JS animation).
   68px = sticky width (larger of the two) for legibility.
   137px = 68 + 1px divider + 68.
   These rules must stay at the end of the file to beat all earlier price rules. */
.site-main .catalog-filters-card .price-width,
.site-main .catalog-filters-card.is-sticky .price-width,
.site-main .catalog-filters-card.is-sticky-animating .price-width {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    transition: none !important;
}
.site-main .catalog-filters-card .catalog-toolbar-price-pair,
.site-main .catalog-filters-card.is-sticky .catalog-toolbar-price-pair,
.site-main .catalog-filters-card.is-sticky-animating .catalog-toolbar-price-pair {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 108px !important;
    transition: none !important;
}
#category-search {
    max-width: 230px !important;
    width: 230px !important;
}
/* ================================================================
   SHOP / CATEGORIES — tree view + detail modal
   ================================================================ */

/* ── Tree container ──────────────────────────────────────────────── */
.cat-tree {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Root and child wrappers ─────────────────────────────────────── */
.cat-tree__root,
.cat-tree__child {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(255,255,255,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: box-shadow .22s ease;
}

.cat-tree__root {
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.cat-tree__child {
    margin-left: 2rem;
    background: rgba(255,255,255,0.38);
    border-color: rgba(255,255,255,0.55);
}

/* ── Row (clickable header) ──────────────────────────────────────── */
.cat-tree__row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease;
}

.cat-tree__row--root {
    font-weight: 600;
    font-size: 1rem;
}

.cat-tree__row--child {
    font-weight: 500;
    font-size: 0.925rem;
}

.cat-tree__row:hover {
    background: rgba(255,255,255,0.42);
}

.cat-tree__row:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* ── Chevron ─────────────────────────────────────────────────────── */
.cat-tree__chevron {
    font-size: 0.65rem;
    color: var(--muted-1, #6b7280);
    transition: transform .22s ease;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

/* ── Thumbnails ──────────────────────────────────────────────────── */
.cat-tree__thumb {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.04);
}

.cat-tree__thumb--product {
    border-radius: 3px;
}

.cat-tree__thumb-placeholder {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(0,0,0,0.07);
    flex-shrink: 0;
}

/* ── Name ────────────────────────────────────────────────────────── */
.cat-tree__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink, #111827);
}

/* ── Count badge ─────────────────────────────────────────────────── */
.cat-tree__count {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted-1, #6b7280);
    background: rgba(0,0,0,0.06);
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
    flex-shrink: 0;
}

/* ── Body (collapsed content) ────────────────────────────────────── */
.cat-tree__body {
    border-top: 1px solid rgba(255,255,255,0.55);
    padding: 0.4rem 0.5rem 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* ── Empty notice ────────────────────────────────────────────────── */
.cat-tree__empty {
    font-size: 0.82rem;
    color: var(--muted-2, #9ca3af);
    padding: 0.4rem 0.5rem;
}

/* ── Product link row ────────────────────────────────────────────── */
.cat-tree__product {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink, #111827);
    transition: background .15s ease;
    margin-left: 1.6rem;
}

.cat-tree__product:hover {
    background: rgba(37,99,235,0.08);
    text-decoration: none;
}

.cat-tree__product-name {
    flex: 1;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-tree__product-price {
    font-size: 0.8rem;
    color: var(--muted-1, #6b7280);
    flex-shrink: 0;
}

/* ── Product-of-the-day node ─────────────────────────────────────── */
.cat-tree__root--potd {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.38);
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.14);
}

.cat-tree__row--potd {
    font-weight: 700;
}

.cat-tree__row--potd:hover {
    background: rgba(251, 191, 36, 0.12);
}

.cat-tree__potd-star {
    color: #f59e0b;
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

/* ================================================================
   SHOP / CATEGORIES — detail modal
   ================================================================ */

.cat-detail-modal__panel {
    position: relative;
    background: var(--glass-bg, rgba(255,255,255,0.72));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-radius: 1px;
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    max-width: 620px;
    width: 95vw;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cat-detail-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.42);
    background: var(--glass-bg, rgba(255,255,255,0.72));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    position: sticky;
    top: 0;
    z-index: 1;
    border-radius: 1px 1px 0 0;
}

.cat-detail-modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink, #111827);
    margin: 0;
}

.cat-detail-modal__close {
    font-size: 1.5rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-1, #6b7280);
    padding: 0.1rem 0.4rem;
    border-radius: 1px;
    transition: background .15s;
}

.cat-detail-modal__close:hover {
    background: rgba(0,0,0,0.08);
}

.cat-detail-modal__body {
    padding: 1.2rem 1.4rem 1.4rem;
    background: var(--glass-bg, rgba(255,255,255,0.72));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-radius: 0 0 1px 1px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cat-detail-modal__image-wrap {
    display: flex;
    justify-content: center;
}

.cat-detail-modal__image {
    width: 350px;
    height: 280px;
    object-fit: cover;
    border-radius: 1px;
    max-width: 100%;
}

.cat-detail-modal__desc {
    font-size: 0.9rem;
    color: var(--muted-1, #6b7280);
    margin: 0;
    line-height: 1.55;
}

.cat-detail-modal__prod-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cat-detail-prod {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.5rem;
    border-radius: 1px;
    text-decoration: none;
    color: var(--ink, #111827);
    transition: background .15s;
}

.cat-detail-prod:hover {
    background: rgba(37,99,235,0.08);
    text-decoration: none;
}

.cat-detail-prod__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
    cursor: var(--cursor-magnify), zoom-in;
}

.cat-detail-prod__thumb-wrap {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 1px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: var(--cursor-magnify), zoom-in;
}

.cat-detail-prod__thumb-wrap .cat-detail-prod__thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.cat-detail-prod__thumb-placeholder {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 1px;
    background: rgba(0,0,0,0.07);
    flex-shrink: 0;
}

.cat-detail-prod__name {
    flex: 1;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-detail-prod__price {
    font-size: 0.8rem;
    color: var(--muted-1, #6b7280);
    flex-shrink: 0;
}

/* Modal overlay scroll lock */
body.cat-modal-open {
    overflow: hidden;
}

/* Cat detail modal overlay */
#cat-detail-modal.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 50);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg, rgba(11,29,58,0.45));
    padding: 1rem;
    outline: none;
}

#cat-detail-modal.modal-overlay[hidden] {
    display: none !important;
}

/* ================================================================
   SHOP / CATEGORIES — two-panel page layout
   ================================================================ */

.cat-page-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
}

.cat-page-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.cat-page-back {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.875rem;
}

.cat-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--flag-blue, #003580);
    margin: 0;
}

.cat-page-count {
    font-size: 0.8rem;
    color: var(--muted-1, #6b7280);
    margin-left: auto;
}

/* Two-panel layout */
.cat-page-layout {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    gap: 1.5rem;
    align-items: start;
    min-height: 60vh;
}

/* Tree panel */
.cat-page-tree-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: rgba(255,255,255,0.52);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 1px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Tree rows — active state */
.js-cat-row.is-active {
    background: rgba(0,53,128,0.12) !important;
    border-radius: 1px;
}

/* Product rows in tree */
.cat-tree__product-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.6rem 0.3rem 2.2rem;
    border-radius: 1px;
    cursor: pointer;
    transition: background .15s ease;
    user-select: none;
}

.cat-tree__product-row:hover {
    background: rgba(37,99,235,0.08);
}

/* Viewer panel */
.cat-page-viewer {
    background: rgba(255,255,255,0.52);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 1px;
    padding: 1.5rem;
    min-height: 400px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Welcome state */
.cat-viewer-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 300px;
    color: var(--muted-1, #6b7280);
}

.cat-viewer-welcome__icon {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.55;
}

.cat-viewer-welcome__text {
    font-size: 0.95rem;
    text-align: center;
    max-width: 280px;
    opacity: 0.7;
}

/* Category viewer */
.cat-viewer-cat__header {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cat-viewer-cat__image-wrap {
    flex-shrink: 0;
}

.cat-viewer-cat__image {
    width: 350px;
    height: 280px;
    object-fit: cover;
    border-radius: 1px;
    max-width: 100%;
    cursor: var(--cursor-magnify), zoom-in;
}

.cat-viewer-cat__meta {
    flex: 1;
    min-width: 0;
}

.cat-viewer-cat__name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink, #111827);
    margin: 0 0 0.5rem;
}

.cat-viewer-cat__desc {
    font-size: 0.9rem;
    color: var(--muted-1, #6b7280);
    margin: 0;
    line-height: 1.55;
}

.cat-viewer-cat__prod-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Product viewer */
.cat-viewer-prod {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    background: var(--glass-bg, rgba(255,255,255,0.07));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(148,163,184,0.22);
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.cat-viewer-prod__media,
.cat-viewer-prod__image-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Stage: image + placeholder stacked */
.cat-vp-img-stage {
    position: relative;
    width: 350px;
    height: 280px;
    max-width: 100%;
    border-radius: 1px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
}

.cat-viewer-prod__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
    display: block;
    cursor: zoom-in;
    transition: opacity .18s;
}
.cat-viewer-prod__image:hover { opacity: .9; }

.cat-vp-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: none;
}

.cat-vp-img-placeholder::before {
    content: "";
    width: 5rem;
    height: 4rem;
    border: 1px solid rgba(147, 197, 253, 0.34);
    background:
        linear-gradient(135deg, transparent 52%, rgba(147, 197, 253, 0.42) 53%, rgba(147, 197, 253, 0.42) 58%, transparent 59%),
        linear-gradient(45deg, transparent 48%, rgba(147, 197, 253, 0.28) 49%, rgba(147, 197, 253, 0.28) 54%, transparent 55%),
        rgba(15, 23, 42, 0.22);
}

/* Thumbnail gallery strip */
.cat-vp-gallery {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 2px;
    max-width: 350px;
    scrollbar-width: thin;
}
.cat-vp-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1.5px solid rgba(148,163,184,.45);
    border-radius: 1px;
    overflow: hidden;
    padding: 0;
    background: rgba(255,255,255,.3);
    cursor: pointer;
    transition: border-color .15s;
    position: relative;
}
.cat-vp-thumb:hover { border-color: var(--finland-blue, #003580); }
.cat-vp-thumb.is-active { border-color: var(--finland-blue, #003580); }

/* Play icon overlay on gallery video thumbnails */
.cat-vp-thumb-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.cat-vp-thumb-play-icon::before {
    content: '';
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(0, 40, 120, 0.76);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(147, 197, 253, 0.45);
    transition: background .15s, transform .12s;
}
.cat-vp-thumb--video:hover .cat-vp-thumb-play-icon::before {
    background: rgba(0, 53, 180, 0.92);
    transform: scale(1.1);
}
.cat-vp-thumb-play-icon svg {
    position: relative;
    z-index: 1;
    color: #fff;
    width: 0.72rem;
    height: 0.72rem;
    margin-left: 1px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

/* Main viewer play overlay button */
.cat-vp-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 4;
    padding: 0;
}
.cat-vp-play-overlay::before {
    content: '';
    position: absolute;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(0, 40, 120, 0.72);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    backdrop-filter: blur(8px) saturate(130%);
    border: 1.5px solid rgba(147, 197, 253, 0.48);
    transition: background .15s, transform .14s;
}
.cat-vp-play-overlay:hover::before {
    background: rgba(0, 53, 180, 0.9);
    transform: scale(1.1);
}
.cat-vp-play-overlay svg {
    position: relative;
    z-index: 1;
    color: #fff;
    width: 1.55rem;
    height: 1.55rem;
    margin-left: 3px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* Meta column */
.cat-viewer-prod__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Badges */
.cat-vp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Stars */
.cat-vp-rating {
    font-size: 0.94rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Name */
.cat-viewer-prod__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink, #111827);
    margin: 0;
}

/* Short description */
.cat-vp-short {
    font-size: 0.9rem;
    color: var(--muted-1, #6b7280);
    margin: 0;
    line-height: 1.5;
    max-width: 42ch;
}

/* Price */
.cat-viewer-prod__price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--flag-blue, #003580);
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

/* Action row: cart + fav + view */
.cat-vp-actions {
    --cat-vp-action-size: 2.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* QR code area — centered below the product image */
.cat-vp-actions--image {
    flex: 1 1 auto;
    width: 350px;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 0.35rem;
}

/* Bottom stack: action dock rides with the price-history panel as it expands. */
.cat-vp-bottom-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ── Action dock: collapsible row of product action buttons ── */
.cat-vp-actions-dock {
    --cat-vp-action-size: 2.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

/* Toggle button: self-contained, no .btn dependency; same pattern as account-card-toggle */
.cat-vp-actions-toggle {
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--cat-vp-action-size);
    min-width: var(--cat-vp-action-size);
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: var(--surface-soft);
    color: var(--muted-ink);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.14s ease;
}

.cat-vp-actions-toggle:hover,
.cat-vp-actions-toggle:focus-visible {
    color: var(--ink);
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.3);
    transform: translateY(1px);
}

.cat-vp-actions-toggle__icon {
    display: block;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 3.2;
    flex-shrink: 0;
    pointer-events: none;
}

.cat-vp-actions-toggle__icon--minus {
    display: none;
}

.cat-vp-actions-dock.is-expanded .cat-vp-actions-toggle__icon--plus {
    display: none;
}

.cat-vp-actions-dock.is-expanded .cat-vp-actions-toggle__icon--minus {
    display: block;
}

/* Actions row: collapsed by default, expands via .is-expanded on the dock */
.cat-vp-actions-dock .cat-vp-actions--meta {
    margin-top: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-vp-actions-dock.is-expanded .cat-vp-actions--meta {
    max-width: 26rem;
}

/* Individual button fan-in with stagger */
.cat-vp-actions-dock .cat-vp-actions--meta > * {
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5) translateX(-0.75rem);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cat-vp-actions-dock.is-expanded .cat-vp-actions--meta > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 35ms; }
.cat-vp-actions-dock.is-expanded .cat-vp-actions--meta > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 75ms; }
.cat-vp-actions-dock.is-expanded .cat-vp-actions--meta > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 115ms; }

/* Fav + cart row — in the meta column, left-aligned */
.cat-vp-actions--meta {
    margin-top: 0.55rem;
}

.cat-viewer-prod__media .cat-vp-actions {
    width: 350px;
    max-width: 100%;
    justify-content: center;
}

.cat-viewer-prod__media .cat-viewer-prod__btn {
    flex: 1 1 auto;
    min-width: min(11rem, 100%);
}

.cat-viewer-prod__btn {
    box-sizing: border-box;
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cat-vp-btn-cart {
    box-sizing: border-box;
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 1px;
    flex-shrink: 0;
}

.cat-vp-btn-fav {
    box-sizing: border-box;
    width: var(--cat-vp-action-size);
    min-width: var(--cat-vp-action-size);
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    flex-shrink: 0;
    background: transparent;
    border: 2.5px solid #991b1b;
    color: #7f1d1d;
    font-size: 1.2rem;
    transition: background .15s, color .15s, border-color .15s;
}
.cat-vp-fav-icon { color: #7f1d1d; display: inline-block; }
.cat-vp-btn-fav:hover { background: #7f1d1d; border-color: #7f1d1d; color: #fca5a5; }
.cat-vp-btn-fav:hover .cat-vp-fav-icon { color: #fca5a5; }
.cat-vp-btn-fav.cat-vp-btn-fav--active { border: 2px solid #14532d; color: #166534; background: rgba(20,83,45,.1); }
.cat-vp-btn-fav.cat-vp-btn-fav--active .cat-vp-fav-icon { color: #166534; }
.cat-vp-btn-fav.cat-vp-btn-fav--active:hover { background: #15803d; border-color: #14532d; color: #bbf7d0; }
.cat-vp-btn-fav.cat-vp-btn-fav--active:hover .cat-vp-fav-icon { color: #bbf7d0; }
/* legacy aliases kept for parity */
.cat-vp-btn-fav.is-favourite { border: 2px solid #14532d; color: #166534; background: rgba(20,83,45,.1); }
.cat-vp-btn-fav.is-favourite .cat-vp-fav-icon { color: #166534; }
.cat-vp-btn-fav.is-favourite:hover { background: #15803d; border-color: #14532d; color: #bbf7d0; }
.cat-vp-btn-fav.is-favourite:hover .cat-vp-fav-icon { color: #bbf7d0; }

/* ── PDF export button ───────────────────────────────────────────── */
#cat-vp-pdf {
    box-sizing: border-box;
    width: var(--cat-vp-action-size);
    min-width: var(--cat-vp-action-size);
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}

/* ── View-product icon button ──────────────────────────────────────── */
#cat-vp-link {
    box-sizing: border-box;
    width: var(--cat-vp-action-size);
    min-width: var(--cat-vp-action-size);
    height: var(--cat-vp-action-size);
    min-height: var(--cat-vp-action-size);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}

/* ================================================================
   SHOP / CATEGORIES — blue glass redesign
   ================================================================ */

.cat-categories-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.24), transparent 28rem),
        radial-gradient(circle at 78% 2%, rgba(14, 165, 233, 0.2), transparent 24rem),
        linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(10, 35, 78, 0.92) 48%, rgba(4, 47, 82, 0.9));
}

.cat-categories-page .site-main {
    color: rgba(239, 246, 255, 0.94);
}

.cat-page-wrap {
    padding: 1.25rem clamp(1rem, 2vw, 2rem) 4rem;
}

.cat-page-hero,
.cat-page-tree-panel,
.cat-page-viewer,
.catpage-cart-card {
    background: linear-gradient(145deg, rgba(12, 38, 82, 0.78), rgba(8, 55, 112, 0.58));
    border: 1px solid rgba(147, 197, 253, 0.26);
    border-radius: 1px;
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cat-page-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 1rem;
    padding: clamp(0.9rem, 1.618vw, 1.2rem) clamp(1rem, 2vw, 1.618rem);
    margin-bottom: 1rem;
}

.cat-page-heading {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1.618rem;
    row-gap: 0.18rem;
    align-items: end;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.cat-page-kicker {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    color: #93c5fd;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cat-page-title {
    grid-column: 1;
    grid-row: 2;
    color: #f8fafc;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.05;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.cat-page-back {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    gap: 0;
    border-radius: 50% !important;
    color: #dbeafe !important;
    border-color: rgba(147, 197, 253, 0.32) !important;
    background: rgba(15, 23, 42, 0.18) !important;
    font-size: 1rem;
    line-height: 1;
}

/* Keep text accessible but hidden visually */
.cat-page-back > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cat-page-stats,
.cat-viewer-welcome__stats,
.cat-viewer-cat__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cat-page-stats {
    grid-column: 2;
    grid-row: 1 / 3;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    min-width: 0;
    margin-left: 0;
    align-self: center;
}

.cat-page-stat {
    text-align: right;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.cat-detail-metric {
    min-width: 6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(15, 23, 42, 0.24);
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 1px;
}

.cat-page-stat__value {
    display: block;
    color: #bfdbfe;
    font-size: clamp(1.618rem, 2.5vw, 2.618rem);
    font-weight: 900;
    line-height: 1;
    text-align: right;
}

.cat-detail-metric strong {
    display: block;
    color: #bfdbfe;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.cat-page-stat__label {
    display: block;
    margin-top: 0.25rem;
    color: rgba(219, 234, 254, 0.7);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
}

.cat-detail-metric span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(219, 234, 254, 0.7);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cat-page-layout {
    grid-template-columns: minmax(260px, 38.2fr) 61.8fr;
    gap: 1rem;
}

.cat-page-tree-panel {
    top: 5rem;
    padding: 0.75rem;
    background: linear-gradient(145deg, rgba(8, 34, 78, 0.8), rgba(9, 55, 116, 0.62));
}

.cat-tree-toolbar {
    position: sticky;
    top: -0.75rem;
    z-index: 20;
    display: grid;
    gap: 0.55rem;
    margin: -0.75rem -0.75rem 0.75rem;
    padding: 0.75rem 0.75rem 0.65rem;
    background: var(--cat-page-glass, rgba(8, 34, 78, 0.92));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 1px 0 var(--cat-page-glass-line, rgba(147, 197, 253, 0.22));
}

.cat-tree-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0 0.75rem;
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(147, 197, 253, 0.22);
    border-radius: 1px;
}

.cat-tree-search__icon {
    color: #93c5fd;
    font-weight: 900;
}

.cat-tree-search__input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #f8fafc;
    outline: 0;
    font-size: 0.9rem;
}

.cat-tree-search__input::placeholder {
    color: rgba(219, 234, 254, 0.52);
}

.cat-tree-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.cat-tree-action {
    min-height: 2.2rem;
    padding: 0.35rem 0.5rem !important;
    color: #dbeafe !important;
    border-color: rgba(147, 197, 253, 0.26) !important;
    background: rgba(15, 23, 42, 0.18) !important;
    border-radius: 1px !important;
    font-size: 0.78rem !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cat-tree-action.is-active {
    background: rgba(59, 130, 246, 0.28) !important;
    border-color: rgba(147, 197, 253, 0.65) !important;
    color: #bfdbfe !important;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.3);
}

/* Sort dropdown in the sticky tree toolbar */
.cat-tree-sort {
    width: 100%;
    background: rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(147, 197, 253, 0.22);
    border-radius: 1px;
    color: #f8fafc;
    font-size: 0.84rem;
    padding: 0.42rem 0.75rem;
    min-height: 2.2rem;
    outline: 0;
    cursor: pointer;
    appearance: auto;
}
.cat-tree-sort:focus { border-color: rgba(147, 197, 253, 0.55); }
.cat-tree-sort option { background: #0f172a; color: #f8fafc; }

.cat-tree-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.cat-tree-toolbar-controls .cat-tree-sort {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.cat-tree-side-actions {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 0.3rem;
}

.cat-tree-side-actions .cat-tree-action {
    white-space: nowrap;
}

.cat-tree-empty-search {
    margin-bottom: 0.65rem;
    padding: 0.75rem;
    color: rgba(219, 234, 254, 0.72);
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(147, 197, 253, 0.16);
    border-radius: 1px;
    font-size: 0.86rem;
}

.cat-tree {
    gap: 0.35rem;
}

.cat-tree__root,
.cat-tree__child {
    background: rgba(15, 23, 42, 0.2);
    border-color: rgba(147, 197, 253, 0.18);
    border-radius: 1px;
    box-shadow: none;
}

.cat-tree__child {
    position: relative;
    margin-left: 1.2rem;
}

.cat-tree__child::before,
.cat-tree__product-row::before {
    content: "";
    position: absolute;
    left: -0.72rem;
    top: 0;
    bottom: 50%;
    width: 0.72rem;
    border-left: 1px solid rgba(147, 197, 253, 0.34);
    border-bottom: 1px solid rgba(147, 197, 253, 0.34);
}

.cat-tree__row,
.cat-tree__product-row {
    position: relative;
    color: #e0f2fe;
    border-radius: 1px;
}

.cat-tree__row:hover,
.cat-tree__product-row:hover,
.js-cat-row.is-active {
    background: rgba(96, 165, 250, 0.18) !important;
}

.cat-tree__row.is-search-match,
.cat-tree__product-row.is-search-match {
    box-shadow: inset 3px 0 0 #60a5fa;
}

.cat-tree__body {
    border-top-color: rgba(147, 197, 253, 0.16);
}

.cat-tree__text {
    display: grid;
    min-width: 0;
    flex: 1;
}

.cat-tree__name,
.cat-tree__product-name {
    color: #f8fafc;
}

.cat-tree__kind,
.cat-tree__product-price,
.cat-tree__empty {
    color: rgba(219, 234, 254, 0.62);
}

.cat-tree__kind {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cat-tree__count {
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.28);
    border: 1px solid rgba(147, 197, 253, 0.18);
    border-radius: 1px;
}

.cat-tree__thumb,
.cat-tree__thumb-placeholder,
.cat-tree__thumb--product,
.cat-detail-prod__thumb-wrap,
.cat-detail-prod__thumb,
.cat-detail-prod__thumb-placeholder {
    border-radius: 1px;
    background: rgba(15, 23, 42, 0.34);
    border: 1px solid rgba(147, 197, 253, 0.18);
}

.cat-detail-prod__thumb-wrap .cat-detail-prod__thumb {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cat-page-viewer {
    min-height: 38rem;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.cat-viewer-welcome {
    min-height: 30rem;
}

.cat-viewer-welcome__icon {
    width: 5rem;
    height: 5rem;
    opacity: 1;
    border: 1px solid rgba(147, 197, 253, 0.24);
    border-radius: 1px;
    background:
        linear-gradient(90deg, transparent 47%, rgba(147, 197, 253, 0.55) 48%, rgba(147, 197, 253, 0.55) 52%, transparent 53%),
        linear-gradient(rgba(147, 197, 253, 0.34), rgba(147, 197, 253, 0.34)) 50% 18% / 54% 1px no-repeat,
        linear-gradient(rgba(147, 197, 253, 0.34), rgba(147, 197, 253, 0.34)) 50% 50% / 78% 1px no-repeat,
        linear-gradient(rgba(147, 197, 253, 0.34), rgba(147, 197, 253, 0.34)) 50% 82% / 54% 1px no-repeat,
        rgba(15, 23, 42, 0.24);
}

.cat-viewer-welcome__text {
    color: rgba(239, 246, 255, 0.88);
}

.cat-viewer-welcome__stats {
    justify-content: center;
    color: rgba(219, 234, 254, 0.64);
    font-size: 0.78rem;
}

.cat-viewer-welcome__stats span {
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(147, 197, 253, 0.16);
    background: rgba(15, 23, 42, 0.18);
}

.cat-viewer-back {
    margin: 0 0 0.85rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.82rem !important;
    transform: none !important;
    transition: box-shadow 0.15s, background 0.15s, border-color 0.15s !important;
}

.cat-viewer-back:hover,
.cat-viewer-back:focus-visible {
    margin: 0 0 0.85rem;
    transform: none !important;
}

/* ── Product sibling nav bar (prev/next in same category) ── */
.cat-vp-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    min-height: 2.25rem;
    gap: 0.5rem;
}
.cat-vp-nav-bar .cat-viewer-back {
    margin-bottom: 0;
}
.cat-vp-sibling-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex-shrink: 0;
}
.cat-vp-sibling-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 53, 128, 0.22);
    background: rgba(255, 255, 255, 0.68);
    color: rgba(0, 53, 128, 0.65);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.14s ease;
    padding: 0;
    flex-shrink: 0;
}
.cat-vp-sibling-btn:hover {
    background: rgba(0, 53, 128, 0.08);
    border-color: rgba(0, 53, 128, 0.42);
    color: #003580;
    box-shadow: 0 2px 8px rgba(0, 53, 128, 0.12);
    transform: translateY(1px);
}
.cat-vp-sibling-btn:active {
    background: rgba(0, 53, 128, 0.14);
}
.cat-vp-sibling-pos {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 53, 128, 0.5);
    min-width: 2.8rem;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

.cat-viewer-cat__image,
.cat-vp-img-stage,
.cat-viewer-prod__image,
.cat-vp-thumb {
    border-radius: 1px;
}

.cat-viewer-cat__image-wrap,
.cat-viewer-prod__image-wrap {
    padding: 0.4rem;
    background: rgba(15, 23, 42, 0.24);
    border: 1px solid rgba(147, 197, 253, 0.18);
}

.cat-viewer-cat__eyebrow,
.cat-detail-section-title {
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cat-viewer-cat__name,
.cat-viewer-prod__name {
    color: #f8fafc;
}

.cat-viewer-cat__desc,
.cat-vp-short,
.cat-vp-rating,
.cat-viewer-prod__price {
    color: rgba(219, 234, 254, 0.78);
}

.cat-viewer-prod__price {
    color: #bfdbfe;
}

.cat-viewer-cat__meta {
    display: grid;
    gap: 0.65rem;
}

.cat-viewer-cat__branch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.cat-detail-branch__label {
    width: 100%;
    color: rgba(219, 234, 254, 0.58);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cat-detail-branch__node {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(147, 197, 253, 0.2);
    border-radius: 1px;
    font-size: 0.82rem;
}

.cat-detail-branch__thumb {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
    cursor: var(--cursor-magnify), zoom-in;
}

button.cat-detail-branch__node {
    cursor: pointer;
}

button.cat-detail-branch__node:hover {
    background: rgba(96, 165, 250, 0.18);
}

.cat-detail-branch__node.is-current {
    color: #f8fafc;
    background: rgba(37, 99, 235, 0.28);
}

.cat-detail-branch__arrow {
    color: rgba(147, 197, 253, 0.64);
}

.cat-detail-branch__subtree {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
}

.cat-viewer-cat__prod-grid {
    gap: 0.45rem;
}

.cat-detail-prod {
    width: 100%;
    border: 1px solid rgba(147, 197, 253, 0.16);
    background: rgba(15, 23, 42, 0.2);
}

.cat-detail-prod:hover {
    background: rgba(96, 165, 250, 0.16);
}

.cat-detail-prod__name {
    color: #f8fafc;
    text-align: left;
}

.cat-detail-prod__price {
    color: #bfdbfe;
}

.cat-detail-prod__action {
    color: rgba(219, 234, 254, 0.58);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.catpage-cart-card {
    position: fixed;
    top: calc(4.5rem - 5px);
    right: 1.25rem;
    z-index: 200;
    width: min(300px, calc(100vw - 2.5rem));
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.catpage-cart-card__header,
.catpage-cart-card__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem 0.55rem;
    border-bottom: 1px solid rgba(142, 174, 226, 0.18);
    background: rgba(0, 35, 90, 0.35);
}

.catpage-cart-card__title {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    flex: 1;
}

.catpage-cart-card__count {
    font-size: 0.75rem;
    min-width: 1.4em;
    text-align: center;
    background: rgba(0, 83, 198, 0.7);
    border-radius: 1px;
    padding: 0 0.45rem;
    line-height: 1.6;
}

.catpage-cart-card__collapse {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(147, 197, 253, 0.32);
    border-radius: 1px;
    background: rgba(15, 23, 42, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: none;
}

.catpage-cart-card__collapse:hover,
.catpage-cart-card__collapse:focus-visible {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(147, 197, 253, 0.5);
    outline: none;
}

.catpage-cart-card.is-collapsed .catpage-cart-card__items,
.catpage-cart-card.is-collapsed .catpage-cart-card__subtotal,
.catpage-cart-card.is-collapsed .catpage-cart-card__actions {
    display: none !important;
}

.catpage-cart-card.is-collapsed {
    width: min(300px, calc(100vw - 2.5rem));
}

.catpage-cart-card.is-collapsed .catpage-cart-card__header {
    border-bottom: 0;
}

.catpage-cart-card__items {
    flex: 1;
    overflow-y: auto;
    max-height: min(260px, 40vh);
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
}

.catpage-cart-item__thumb {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
    border: 1px solid rgba(147, 197, 253, 0.18);
}

.catpage-cart-item__thumb--empty {
    display: block;
    background: rgba(142, 174, 226, 0.12);
}

.catpage-cart-empty {
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    padding: 0.6rem 0;
}

.catpage-cart-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(142, 174, 226, 0.14);
    cursor: pointer;
}

.catpage-cart-item__name {
    flex: 1;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e2e8f0;
}

.catpage-cart-item__qty {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-1, #94a3b8);
    white-space: nowrap;
    flex-shrink: 0;
}

.catpage-cart-item__stepper {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    flex-shrink: 0;
}

.catpage-cart-item__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(142, 174, 226, 0.35);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    user-select: none;
    transition: background 0.1s;
}

.catpage-cart-item__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.17);
}

.catpage-cart-item__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.catpage-cart-item__qty-val {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted-1, #94a3b8);
    min-width: 1.3em;
    text-align: center;
}

.catpage-cart-item__price {
    white-space: nowrap;
    color: var(--finland-blue-400, #4b8cf0);
    font-weight: 700;
}

.catpage-cart-card__subtotal {
    padding: 0.45rem 0.85rem;
    border-top: 1px solid rgba(142, 174, 226, 0.18);
    font-size: 0.8rem;
    font-weight: 700;
    color: #93c5fd;
    text-align: right;
}

.catpage-cart-card__actions {
    border-bottom: 0;
    border-top: 1px solid rgba(142, 174, 226, 0.18);
    padding: 0.6rem 0.85rem;
}

.catpage-cart-card__action {
    min-height: 2.25rem;
    font-size: 0.78rem !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: 1px !important;
}

.catpage-cart-card__clear {
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem !important;
    border-radius: 1px !important;
    flex: 0 0 auto;
}

.catpage-cart-card__clear:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.catpage-empty-cart-modal-panel {
    max-width: min(28rem, calc(100vw - 2rem));
    overflow: hidden;
    background: rgba(8, 34, 78, 0.92) !important;
    border: 1px solid rgba(147, 197, 253, 0.26) !important;
    box-shadow: 0 24px 80px rgba(2, 6, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.catpage-empty-cart-modal-panel .admin-form-modal-header,
.catpage-empty-cart-modal-panel .admin-form-modal-body,
.catpage-empty-cart-modal-panel .admin-form-modal-footer {
    background: rgba(8, 34, 78, 0.78) !important;
    border-color: rgba(147, 197, 253, 0.22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.catpage-empty-cart-modal-panel .admin-form-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.catpage-empty-cart-modal-panel .admin-form-modal-header h3 {
    margin: 0;
    color: #fff !important;
}

.catpage-empty-cart-modal-panel .modal-close {
    flex: 0 0 auto;
    color: #fff !important;
}

.catpage-empty-cart-modal-panel .admin-form-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.catpage-empty-cart-modal__text {
    margin: 0;
    color: #f8fafc;
    font-size: 0.95rem;
    line-height: 1.55;
}

.catpage-cart-card__action--ghost {
    color: #e2e8f0 !important;
    border-color: rgba(142, 174, 226, 0.4) !important;
}

body.cat-categories-page .modal-backdrop {
    background: rgba(2, 6, 23, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body.cat-categories-page .modal-panel,
body.cat-categories-page .pcm-panel,
body.cat-categories-page .product-quick-view-modal-panel {
    background: linear-gradient(145deg, rgba(10, 35, 76, 0.92), rgba(8, 55, 112, 0.82)) !important;
    border: 1px solid rgba(147, 197, 253, 0.28) !important;
    border-radius: 1px !important;
    color: #e0f2fe;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    box-shadow: 0 26px 90px rgba(2, 6, 23, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.cat-categories-page .product-quick-view-modal-header,
body.cat-categories-page .product-quick-view-modal-body,
body.cat-categories-page .product-quick-view-modal-footer,
body.cat-categories-page .pcm-panel__header,
body.cat-categories-page .pcm-panel__body,
body.cat-categories-page .pcm-panel__footer {
    background: rgba(8, 39, 88, 0.48) !important;
    border-color: rgba(147, 197, 253, 0.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

body.cat-categories-page .modal-panel .rounded-xl,
body.cat-categories-page .modal-panel img,
body.cat-categories-page .modal-panel video,
body.cat-categories-page .img-placeholder,
body.cat-categories-page .pm-image-placeholder {
    border-radius: 1px !important;
}

body.cat-categories-page .modal-panel h3,
body.cat-categories-page .modal-panel h4,
body.cat-categories-page .modal-panel .text-flag-blue,
body.cat-categories-page .modal-panel .text-gray-700,
body.cat-categories-page .modal-panel .text-gray-600,
body.cat-categories-page .modal-panel .text-gray-500 {
    color: #dbeafe !important;
}

body.cat-categories-page .modal-panel .btn,
body.cat-categories-page .pm-sort-select,
body.cat-categories-page .input,
body.cat-categories-page .textarea {
    border-radius: 1px !important;
}

/* Theme tuning: default is light blue glass, mixed is deeper, dark keeps navy. */
body.cat-categories-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(191, 219, 254, 0.72), transparent 28rem),
        radial-gradient(circle at 78% 2%, rgba(125, 211, 252, 0.5), transparent 24rem),
        linear-gradient(135deg, #dbeafe, #eff6ff 48%, #bae6fd);
}

body.cat-categories-page .site-main {
    color: #0f274f;
}

body.cat-categories-page .cat-page-hero,
body.cat-categories-page .cat-page-tree-panel,
body.cat-categories-page .cat-page-viewer,
body.cat-categories-page .catpage-cart-card {
    background: linear-gradient(145deg, rgba(239, 246, 255, 0.68), rgba(186, 230, 253, 0.42));
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: 0 24px 70px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.cat-categories-page .cat-page-title {
    flex: 1;
    color: #fff !important;
    text-shadow: 0 3px 16px rgba(0, 53, 128, 0.72), 0 1px 2px rgba(0, 0, 0, 0.42);
}

body.cat-categories-page .cat-page-hero {
    padding: 0.618rem 1rem;
}

body.cat-categories-page .cat-page-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.cat-categories-page .cat-page-stat {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
}

body.cat-categories-page .cat-page-stat__label {
    margin-top: 0;
}

body.cat-categories-page .cat-page-kicker,
body.cat-categories-page .cat-page-stat__value,
body.cat-categories-page .cat-detail-metric strong,
body.cat-categories-page .cat-viewer-cat__eyebrow,
body.cat-categories-page .cat-detail-section-title,
body.cat-categories-page .cat-viewer-prod__price,
body.cat-categories-page .cat-detail-prod__price,
body.cat-categories-page .catpage-cart-card__subtotal {
    color: #1d4ed8;
}

body.cat-categories-page .cat-page-subtitle,
body.cat-categories-page .cat-page-stat__label,
body.cat-categories-page .cat-detail-metric span,
body.cat-categories-page .cat-viewer-cat__desc,
body.cat-categories-page .cat-vp-short,
body.cat-categories-page .cat-vp-rating,
body.cat-categories-page .cat-detail-branch__label,
body.cat-categories-page .cat-detail-prod__action,
body.cat-categories-page .cat-tree__kind,
body.cat-categories-page .cat-tree__product-price,
body.cat-categories-page .cat-tree__empty,
body.cat-categories-page .cat-viewer-welcome__stats {
    color: rgba(15, 39, 79, 0.66);
}

body.cat-categories-page .cat-page-back {
    color: #0f274f !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
    background: rgba(239, 246, 255, 0.46) !important;
}

body.cat-categories-page .cat-tree-action {
    background: linear-gradient(135deg, var(--finland-blue) 0%, var(--finland-blue) 61.8%, var(--finland-blue-600) 100%) !important;
    color: var(--finland-white) !important;
    border-color: rgba(255,255,255,0.5) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    text-shadow: 0 0 1px var(--ink) !important;
    position: relative;
    overflow: hidden;
    padding: 0.15rem 0.55rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
    min-height: unset !important;
    height: auto !important;
}

body.cat-categories-page .cat-tree-action:hover {
    background: linear-gradient(135deg, var(--finland-blue-600) 0%, var(--finland-blue) 61.8%, var(--finland-blue-400) 100%) !important;
}

body.cat-categories-page .cat-detail-metric,
body.cat-categories-page .cat-tree-search,
body.cat-categories-page .cat-tree-empty-search,
body.cat-categories-page .cat-tree__root,
body.cat-categories-page .cat-tree__child,
body.cat-categories-page .cat-viewer-welcome__stats span,
body.cat-categories-page .cat-viewer-cat__image-wrap,
body.cat-categories-page .cat-viewer-prod__image-wrap,
body.cat-categories-page .cat-detail-branch__node,
body.cat-categories-page .cat-detail-prod {
    background: rgba(239, 246, 255, 0.42);
    border-color: rgba(37, 99, 235, 0.18);
}

body.cat-categories-page .cat-tree__row,
body.cat-categories-page .cat-tree__product-row,
body.cat-categories-page .cat-tree__name,
body.cat-categories-page .cat-tree__product-name,
body.cat-categories-page .cat-viewer-welcome__text,
body.cat-categories-page .cat-viewer-cat__name,
body.cat-categories-page .cat-viewer-prod__name,
body.cat-categories-page .cat-detail-prod__name,
body.cat-categories-page .cat-detail-branch__node {
    color: #0f274f;
}

body.cat-categories-page .cat-tree-search__input {
    color: #0f274f;
}

body.cat-categories-page .cat-tree-search__input::placeholder {
    color: rgba(15, 39, 79, 0.5);
}

body.cat-categories-page .cat-tree__row:hover,
body.cat-categories-page .cat-tree__product-row:hover,
body.cat-categories-page .js-cat-row.is-active,
body.cat-categories-page .cat-detail-prod:hover,
body.cat-categories-page button.cat-detail-branch__node:hover {
    background: rgba(59, 130, 246, 0.16) !important;
}

body.cat-categories-page .cat-tree__count,
body.cat-categories-page .cat-detail-branch__node.is-current {
    color: #0f274f;
    background: rgba(147, 197, 253, 0.34);
    border-color: rgba(37, 99, 235, 0.22);
}

body.cat-categories-page .catpage-cart-card__header,
body.cat-categories-page .catpage-cart-card__actions {
    color: #0f274f;
    background: rgba(219, 234, 254, 0.52);
    border-color: rgba(37, 99, 235, 0.16);
}

body.cat-categories-page .catpage-cart-card__action--ghost {
    color: #0f274f !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
}

body.cat-categories-page .modal-backdrop {
    background: rgba(15, 39, 79, 0.34);
}

body.cat-categories-page .modal-panel,
body.cat-categories-page .pcm-panel,
body.cat-categories-page .product-quick-view-modal-panel {
    background: linear-gradient(145deg, rgba(239, 246, 255, 0.9), rgba(186, 230, 253, 0.76)) !important;
    border-color: rgba(37, 99, 235, 0.26) !important;
    color: #0f274f;
    box-shadow: 0 26px 80px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.cat-categories-page .product-quick-view-modal-header,
body.cat-categories-page .product-quick-view-modal-body,
body.cat-categories-page .product-quick-view-modal-footer,
body.cat-categories-page .pcm-panel__header,
body.cat-categories-page .pcm-panel__body,
body.cat-categories-page .pcm-panel__footer {
    background: rgba(239, 246, 255, 0.48) !important;
    border-color: rgba(37, 99, 235, 0.16) !important;
}

body.cat-categories-page .modal-panel h3,
body.cat-categories-page .modal-panel h4,
body.cat-categories-page .modal-panel .text-flag-blue,
body.cat-categories-page .modal-panel .text-gray-700,
body.cat-categories-page .modal-panel .text-gray-600,
body.cat-categories-page .modal-panel .text-gray-500 {
    color: #0f274f !important;
}

/* Categories page theme polish: .glass surfaces with Finland blue accents. */
body.cat-categories-page {
    --cat-page-ink: var(--finland-blue-600);
    --cat-page-muted: color-mix(in srgb, var(--finland-blue-600) 68%, transparent);
    --cat-page-accent: var(--finland-blue);
    --cat-page-accent-soft: color-mix(in srgb, var(--finland-blue-400) 18%, white);
    --cat-page-glass: rgba(255, 255, 255, 0.72);
    --cat-page-glass-strong: rgba(255, 255, 255, 0.84);
    --cat-page-glass-line: color-mix(in srgb, var(--finland-blue-400) 34%, white);
    --cat-page-glass-shadow: 0 24px 70px color-mix(in srgb, var(--finland-blue) 18%, transparent);
    background:
        radial-gradient(circle at 16% 10%, color-mix(in srgb, var(--finland-blue-400) 28%, transparent), transparent 30rem),
        radial-gradient(circle at 82% 4%, color-mix(in srgb, var(--finland-blue) 15%, transparent), transparent 24rem),
        linear-gradient(135deg, #ffffff 0%, #f7fbff 45%, color-mix(in srgb, var(--finland-blue-400) 16%, #ffffff) 100%);
}

body.cat-categories-page .cat-page-hero.glass,
body.cat-categories-page .cat-page-tree-panel.glass,
body.cat-categories-page .cat-page-viewer.glass,
body.cat-categories-page .catpage-cart-card.glass,
body.cat-categories-page .modal-panel.glass,
body.cat-categories-page .product-quick-view-modal-panel.glass {
    background: var(--cat-page-glass) !important;
    border-color: var(--cat-page-glass-line) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: var(--cat-page-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.cat-categories-page .cat-page-title {
    color: #fff !important;
    text-shadow:
        0 2px 0 var(--finland-blue-600),
        0 8px 22px color-mix(in srgb, var(--finland-blue) 58%, transparent);
}

body.cat-categories-page .cat-page-kicker,
body.cat-categories-page .cat-page-stat__value,
body.cat-categories-page .cat-detail-metric strong,
body.cat-categories-page .cat-viewer-cat__eyebrow,
body.cat-categories-page .cat-detail-section-title,
body.cat-categories-page .cat-viewer-prod__price,
body.cat-categories-page .cat-detail-prod__price,
body.cat-categories-page .catpage-cart-card__subtotal {
    color: var(--cat-page-accent) !important;
}

body.cat-categories-page .cat-page-subtitle,
body.cat-categories-page .cat-page-stat__label,
body.cat-categories-page .cat-detail-metric span,
body.cat-categories-page .cat-viewer-cat__desc,
body.cat-categories-page .cat-vp-short,
body.cat-categories-page .cat-vp-rating,
body.cat-categories-page .cat-detail-branch__label,
body.cat-categories-page .cat-detail-prod__action,
body.cat-categories-page .cat-tree__kind,
body.cat-categories-page .cat-tree__product-price,
body.cat-categories-page .cat-tree__empty,
body.cat-categories-page .cat-viewer-welcome__stats {
    color: var(--cat-page-muted) !important;
}

body.cat-categories-page .cat-page-back,
body.cat-categories-page .cat-viewer-back,
body.cat-categories-page .cat-tree__row,
body.cat-categories-page .cat-tree__product-row,
body.cat-categories-page .cat-tree__name,
body.cat-categories-page .cat-tree__product-name,
body.cat-categories-page .cat-viewer-welcome__text,
body.cat-categories-page .cat-viewer-cat__name,
body.cat-categories-page .cat-viewer-prod__name,
body.cat-categories-page .cat-detail-prod__name,
body.cat-categories-page .cat-detail-branch__node,
body.cat-categories-page .cat-tree-search__input,
body.cat-categories-page .modal-panel,
body.cat-categories-page .modal-panel h3,
body.cat-categories-page .modal-panel h4,
body.cat-categories-page .modal-panel .text-flag-blue,
body.cat-categories-page .modal-panel .text-gray-700,
body.cat-categories-page .modal-panel .text-gray-600,
body.cat-categories-page .modal-panel .text-gray-500 {
    color: var(--cat-page-ink) !important;
}

body.cat-categories-page .cat-detail-metric,
body.cat-categories-page .cat-tree-search,
body.cat-categories-page .cat-tree-empty-search,
body.cat-categories-page .cat-tree__root,
body.cat-categories-page .cat-tree__child,
body.cat-categories-page .cat-viewer-welcome__stats span,
body.cat-categories-page .cat-viewer-cat__image-wrap,
body.cat-categories-page .cat-viewer-prod__image-wrap,
body.cat-categories-page .cat-detail-branch__node,
body.cat-categories-page .cat-detail-prod,
body.cat-categories-page .product-quick-view-modal-header,
body.cat-categories-page .product-quick-view-modal-body,
body.cat-categories-page .product-quick-view-modal-footer,
body.cat-categories-page .pcm-panel__header,
body.cat-categories-page .pcm-panel__body,
body.cat-categories-page .pcm-panel__footer {
    background: var(--cat-page-glass-strong) !important;
    border-color: var(--cat-page-glass-line) !important;
}

body.cat-categories-page .cat-tree__count,
body.cat-categories-page .cat-detail-branch__node.is-current,
body.cat-categories-page .catpage-cart-card__count {
    color: #fff !important;
    background: var(--finland-blue) !important;
    border-color: var(--finland-blue-600) !important;
}

body.cat-categories-page .cat-tree__row:hover,
body.cat-categories-page .cat-tree__product-row:hover,
body.cat-categories-page .js-cat-row.is-active,
body.cat-categories-page .cat-detail-prod:hover,
body.cat-categories-page button.cat-detail-branch__node:hover {
    background: color-mix(in srgb, var(--finland-blue-400) 22%, white) !important;
}

body.cat-categories-page .cat-tree-search__input::placeholder {
    color: color-mix(in srgb, var(--finland-blue-600) 48%, transparent);
}

body.cat-categories-page .cat-viewer-prod__media {
    align-self: stretch;
}

body.cat-categories-page .catpage-cart-card__header,
body.cat-categories-page .catpage-cart-card__actions {
    background: color-mix(in srgb, var(--finland-blue-400) 16%, white) !important;
    border-color: var(--cat-page-glass-line) !important;
}

body.cat-categories-page:not(.theme-dark) .catpage-cart-card__header > svg {
    color: #071a38 !important;
}
body.cat-categories-page.theme-dark .catpage-cart-card__header > svg {
    color: #fff !important;
}

body.cat-categories-page .modal-backdrop {
    background: color-mix(in srgb, var(--finland-blue-600) 28%, transparent);
}

/* Light-mode readability tweaks requested for the categories page. */
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .cat-page-title {
    color: #0b0f19 !important;
    text-shadow: none !important;
}

body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__header,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__actions,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__title,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__items,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-empty,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-item__name {
    color: #071a38 !important;
}

body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-item__price,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__subtotal {
    color: var(--finland-blue-600, #003580) !important;
}

body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__action,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .catpage-cart-card__action--ghost {
    color: #fff !important;
}

body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .cat-page-back {
    text-shadow: none !important;
}

body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .cat-viewer-back,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .cat-viewer-back:hover,
body.cat-categories-page:not(.theme-mixed):not(.theme-dark) .cat-viewer-back:focus-visible {
    color: #fff !important;
    transform: none !important;
    text-shadow: none !important;
}

body.cat-categories-page #catpage-empty-cart-modal .catpage-empty-cart-modal-panel,
body.cat-categories-page #catpage-empty-cart-modal .admin-form-modal-header,
body.cat-categories-page #catpage-empty-cart-modal .admin-form-modal-body,
body.cat-categories-page #catpage-empty-cart-modal .admin-form-modal-footer {
    background: rgba(8, 34, 78, 0.86) !important;
    border-color: rgba(147, 197, 253, 0.24) !important;
}

body.cat-categories-page #catpage-empty-cart-modal h3,
body.cat-categories-page #catpage-empty-cart-modal .catpage-empty-cart-modal__text,
body.cat-categories-page #catpage-empty-cart-modal .modal-close {
    color: #fff !important;
}

/* ── Comments + Reviews modals on categories page: restore dark blue glass ── */
body.cat-categories-page #product-comments-modal .modal-panel,
body.cat-categories-page #product-reviews-modal .modal-panel {
    background: linear-gradient(145deg, rgba(10, 35, 76, 0.92), rgba(8, 55, 112, 0.82)) !important;
    border: 1px solid rgba(147, 197, 253, 0.28) !important;
    color: #e0f2fe !important;
    box-shadow: 0 26px 90px rgba(2, 6, 23, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
}
body.cat-categories-page #product-comments-modal .pcm-panel__header,
body.cat-categories-page #product-comments-modal .pcm-panel__body,
body.cat-categories-page #product-comments-modal .pcm-panel__footer,
body.cat-categories-page #product-reviews-modal .pcm-panel__header,
body.cat-categories-page #product-reviews-modal .pcm-panel__body,
body.cat-categories-page #product-reviews-modal .pcm-panel__footer {
    background: rgba(8, 39, 88, 0.48) !important;
    border-color: rgba(147, 197, 253, 0.18) !important;
}
body.cat-categories-page #product-comments-modal .pcm-panel__header h3,
body.cat-categories-page #product-reviews-modal .pcm-panel__header h3 {
    color: #93c5fd !important;
}
body.cat-categories-page #product-comments-modal .modal-panel h3,
body.cat-categories-page #product-comments-modal .modal-panel h4,
body.cat-categories-page #product-comments-modal .modal-panel .text-flag-blue,
body.cat-categories-page #product-comments-modal .modal-panel .text-gray-700,
body.cat-categories-page #product-comments-modal .modal-panel .text-gray-600,
body.cat-categories-page #product-comments-modal .modal-panel .text-gray-500,
body.cat-categories-page #product-reviews-modal .modal-panel h3,
body.cat-categories-page #product-reviews-modal .modal-panel h4,
body.cat-categories-page #product-reviews-modal .modal-panel .text-flag-blue,
body.cat-categories-page #product-reviews-modal .modal-panel .text-gray-700,
body.cat-categories-page #product-reviews-modal .modal-panel .text-gray-600,
body.cat-categories-page #product-reviews-modal .modal-panel .text-gray-500 {
    color: #bfdbfe !important;
}

#cat-vp-print {
width: var(--cat-vp-action-size) !important;
min-width: var(--cat-vp-action-size) !important;
max-width: var(--cat-vp-action-size) !important;
height: var(--cat-vp-action-size) !important;
min-height: var(--cat-vp-action-size) !important;
max-height: var(--cat-vp-action-size) !important;
overflow: visible;
}
#cat-vp-print svg {
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    flex-shrink: 0;
}

body.cat-categories-page .cat-vp-btn-cart {
    width: var(--cat-vp-action-size) !important;
    min-width: var(--cat-vp-action-size) !important;
    max-width: var(--cat-vp-action-size) !important;
    height: var(--cat-vp-action-size) !important;
    min-height: var(--cat-vp-action-size) !important;
    max-height: var(--cat-vp-action-size) !important;
    gap: 0.02rem;
    padding: 0 !important;
    border-radius: 1px !important;
    background: var(--finland-blue, #003580) !important;
    border-color: rgba(255,255,255,1) !important;
    color: #ffffff !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s, transform .14s ease !important;
}

body.cat-categories-page .cat-vp-btn-cart:hover,
body.cat-categories-page .cat-vp-btn-cart:focus-visible {
    background: var(--finland-blue-600, #001e5f) !important;
    border-color: rgba(255,255,255,1) !important;
    color: #ffffff !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    transform: translateY(1px) !important;
}

body.cat-categories-page .cat-vp-btn-cart svg:first-child {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    flex-shrink: 0;
    margin-right: -0.22rem;
    transform: translateX(0.12rem);
}

body.cat-categories-page .cat-vp-btn-cart svg:last-child {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    flex-shrink: 0;
    transform: translateX(-0.04rem);
}

body.cat-categories-page .cat-vp-btn-fav {
    background: #7f1d1d !important;
    border: 1px solid rgba(255,255,255,1) !important;
    color: #fecaca !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease !important;
}

body.cat-categories-page .cat-vp-btn-fav .cat-vp-fav-icon {
    color: #fecaca !important;
    transition: color .14s ease !important;
}

body.cat-categories-page .cat-vp-btn-fav:hover,
body.cat-categories-page .cat-vp-btn-fav:focus-visible {
    background: #fee2e2 !important;
    border-color: rgba(255,255,255,1) !important;
    color: #991b1b !important;
    transform: translateY(1px) !important;
}

body.cat-categories-page .cat-vp-btn-fav:hover .cat-vp-fav-icon,
body.cat-categories-page .cat-vp-btn-fav:focus-visible .cat-vp-fav-icon {
    color: #991b1b !important;
    animation: pmHeartPulse 1.0s ease-out both;
}

body.cat-categories-page .cat-vp-btn-fav--active {
    background: #dcfce7 !important;
    border: 1px solid rgba(255,255,255,1) !important;
    color: #166534 !important;
}

body.cat-categories-page .cat-vp-btn-fav--active .cat-vp-fav-icon {
    color: #166534 !important;
}

body.cat-categories-page .cat-vp-btn-fav--active:hover,
body.cat-categories-page .cat-vp-btn-fav--active:focus-visible {
    background: #14532d !important;
    border-color: rgba(255,255,255,1) !important;
    color: #bbf7d0 !important;
}

body.cat-categories-page .cat-vp-btn-fav--active:hover .cat-vp-fav-icon,
body.cat-categories-page .cat-vp-btn-fav--active:focus-visible .cat-vp-fav-icon {
    color: #bbf7d0 !important;
}


body.cat-categories-page #cat-vp-pdf {
    width: var(--cat-vp-action-size) !important;
    min-width: var(--cat-vp-action-size) !important;
    max-width: var(--cat-vp-action-size) !important;
    height: var(--cat-vp-action-size) !important;
    min-height: var(--cat-vp-action-size) !important;
    max-height: var(--cat-vp-action-size) !important;
    gap: 0.02rem;
    padding: 0 !important;
    border-radius: 1px !important;
    background: var(--finland-blue, #003580) !important;
    border: 1px solid rgba(255,255,255,1) !important;
    color: #ffffff !important;
    text-shadow: 0 0 1px black !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s, transform .14s ease !important;
}

body.cat-categories-page #cat-vp-pdf:hover,
body.cat-categories-page #cat-vp-pdf:focus-visible {
    background: var(--finland-blue-600, #001e5f) !important;
    border-color: rgba(255,255,255,1) !important;
    color: #ffffff !important;
    text-shadow: 0 0 1px black !important;
    box-shadow: -1px -1px 2px var(--ink) !important;
    transform: translateY(1px) !important;
}
body.cat-categories-page #cat-vp-pdf svg {
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    flex-shrink: 0;
}

body.cat-categories-page #cat-vp-link {
    width: var(--cat-vp-action-size) !important;
    min-width: var(--cat-vp-action-size) !important;
    max-width: var(--cat-vp-action-size) !important;
    height: var(--cat-vp-action-size) !important;
    min-height: var(--cat-vp-action-size) !important;
    max-height: var(--cat-vp-action-size) !important;
    padding: 0 !important;
    border-radius: 1px !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease !important;
}

body.cat-categories-page #cat-vp-link:hover,
body.cat-categories-page #cat-vp-link:focus-visible {
    transform: translateY(1px) !important;
}

/* ── Eye idle blink — single button, no row-stagger needed ─────────────
   Reuses listEyeIdleBlink (§32b): 87 % of the 10 s cycle is still,
   the blink window is ~0.35 s. Hover overrides it with listEyeOpen below. */
body.cat-categories-page #cat-vp-link svg {
    animation: listEyeIdleBlink 10s ease infinite;
    transform-origin: center;
}

/* ── Categories right-pane: SVG micro-animations on button hover ─────────
   Reuse existing catalog keyframes (listEyeOpen §32b, pmCartBounce §33,
   listLinkNudge §32b, listSharePing §32b). Buttons are 2.875rem tall;
   icon sizes (20–32px) leave enough headroom that overflow:hidden on
   btn-primary/btn-ghost does not visually clip these animations.
   animation-fill-mode omitted (defaults to none) → SVG returns to its
   natural CSS transform after the micro-animation completes.               */
body.cat-categories-page #cat-vp-link:hover svg {
    animation: listEyeOpen 0.36s ease;
    transform-origin: center;
}
body.cat-categories-page .cat-vp-btn-cart:not(:disabled):hover svg:last-child {
    animation: pmCartBounce 0.42s ease;
}
body.cat-categories-page #cat-vp-pdf:hover svg {
    animation: listLinkNudge 0.34s ease;
}
body.cat-categories-page #cat-vp-print:hover svg {
    animation: listSharePing 0.36s ease;
    transform-origin: center;
}
body.cat-categories-page .cat-vp-actions-toggle:hover svg {
    animation: listSharePing 0.36s ease;
    transform-origin: center;
}
body.cat-categories-page .cat-vp-price-toggle:hover svg {
    animation: listSharePing 0.36s ease;
    transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
    body.cat-categories-page #cat-vp-link svg,
    body.cat-categories-page #cat-vp-link:hover svg,
    body.cat-categories-page .cat-vp-btn-cart:hover svg:last-child,
    body.cat-categories-page #cat-vp-pdf:hover svg,
    body.cat-categories-page #cat-vp-print:hover svg,
    body.cat-categories-page .cat-vp-actions-toggle:hover svg,
    body.cat-categories-page .cat-vp-price-toggle:hover svg { animation: none; }
}

body.cat-categories-page #cat-viewer {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.65rem);
}

body.cat-categories-page #cat-viewer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--finland-blue-400) 12%, transparent), transparent 38%),
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.62), transparent 18rem);
    opacity: 0.76;
    pointer-events: none;
}

body.cat-categories-page .cat-viewer-content {
    position: relative;
    z-index: 1;
}

body.cat-categories-page .cat-viewer-prod {
    display: grid;
    grid-template-columns: fit-content(380px) minmax(18rem, 1fr);
    gap: clamp(1rem, 2.2vw, 1.75rem);
    align-items: start;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.62)),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--finland-blue-400) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--finland-blue-400) 36%, white);
    border-radius: 1px;
    box-shadow: 0 22px 58px rgba(0, 53, 128, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.cat-categories-page .cat-viewer-prod__image-wrap {
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.1), rgba(255, 255, 255, 0.72)) !important;
}

body.cat-categories-page .cat-viewer-prod__media {
    width: fit-content;
    max-width: 100%;
}

body.cat-categories-page .cat-vp-img-stage {
    width: min(350px, 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 53, 128, 0.08);
}

body.cat-categories-page .cat-viewer-prod__meta {
    gap: 0.78rem;
    align-self: stretch;
}

body.cat-categories-page .cat-viewer-prod__name {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.04;
    letter-spacing: 0;
}

body.cat-categories-page .cat-vp-short {
    max-width: 62ch;
    font-size: 0.94rem;
}

body.cat-categories-page .cat-viewer-prod__price {
    align-self: flex-start;
    padding: 0.42rem 0.7rem;
    background: color-mix(in srgb, var(--finland-blue-400) 13%, white);
    border: 1px solid color-mix(in srgb, var(--finland-blue-400) 36%, white);
    border-radius: 1px;
    font-size: 1.28rem;
    font-weight: 900;
}

body.cat-categories-page .cat-vp-actions--meta {
    padding-top: 0.2rem;
}

body.cat-categories-page .cat-vp-price-history {
    margin-top: 0;
    padding: 0.85rem;
    background:
        linear-gradient(145deg, rgba(2, 6, 23, 0.96), rgba(0, 30, 95, 0.9)),
        var(--finland-blue-600, #001e5f);
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 1px;
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.cat-categories-page .cat-vp-price-history__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}

body.cat-categories-page .cat-vp-price-history__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #dbeafe !important;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.cat-categories-page .cat-vp-price-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid rgba(147, 197, 253, 0.35);
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.32);
    color: #bfdbfe;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
body.cat-categories-page .cat-vp-price-toggle:hover,
body.cat-categories-page .cat-vp-price-toggle:focus-visible {
    color: #dbeafe;
    border-color: rgba(147, 197, 253, 0.65);
    background: rgba(0, 53, 128, 0.52);
    transform: translateY(1px);
}
body.cat-categories-page .cat-vp-price-toggle__icon {
    display: block;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 3.2;
}
body.cat-categories-page .cat-vp-price-toggle__icon--minus {
    display: none;
}
body.cat-categories-page .cat-vp-price-toggle[aria-expanded="true"] .cat-vp-price-toggle__icon--plus {
    display: none;
}
body.cat-categories-page .cat-vp-price-toggle[aria-expanded="true"] .cat-vp-price-toggle__icon--minus {
    display: block;
}

body.cat-categories-page .cat-vp-actions-toggle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink);
}

body.cat-categories-page .cat-vp-actions-toggle:hover,
body.cat-categories-page .cat-vp-actions-toggle:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--ink);
    transform: translateY(1px);
}

body.cat-categories-page .cat-vp-price-history__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

body.cat-categories-page .cat-vp-period-btn {
    min-width: 2.25rem;
    min-height: 1.72rem;
    padding: 0.18rem 0.42rem;
    color: #bfdbfe;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(147, 197, 253, 0.24);
    border-radius: 1px;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}

body.cat-categories-page .cat-vp-period-btn:hover,
body.cat-categories-page .cat-vp-period-btn:focus-visible,
body.cat-categories-page .cat-vp-period-btn.is-active {
    color: #0f172a;
    background: #bfdbfe;
    border-color: #dbeafe;
}
body.cat-categories-page .cat-vp-period-btn:hover,
body.cat-categories-page .cat-vp-period-btn:focus-visible {
    transform: translateY(1px);
}

body.cat-categories-page .cat-vp-price-history__body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.28s ease;
}

body.cat-categories-page .cat-vp-price-history__body.is-open {
    grid-template-rows: 1fr;
}

body.cat-categories-page .cat-vp-price-history__body-inner {
    min-height: 0;
    margin-top: 0.65rem;
}

body.cat-categories-page .cat-vp-price-history__chart-wrap {
    position: relative;
    height: clamp(160px, 22vh, 210px);
    padding: 0.35rem;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(147, 197, 253, 0.14);
    border-radius: 1px;
}

body.cat-categories-page .cat-vp-price-history__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.65rem;
}

body.cat-categories-page .cat-vp-price-history__stats > span {
    min-width: 0;
    padding: 0.45rem 0.5rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(147, 197, 253, 0.16);
    border-radius: 1px;
}

body.cat-categories-page .cat-vp-price-history__stats strong,
body.cat-categories-page .cat-vp-price-history__stats span span {
    display: block;
}

body.cat-categories-page .cat-vp-price-history__stats strong {
    color: #f8fafc;
    font-size: 0.88rem;
    font-weight: 900;
}

body.cat-categories-page .cat-vp-price-history__stats span span {
    margin-top: 0.12rem;
    color: #93c5fd;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
}

body.cat-categories-page .cat-vp-price-history__empty {
    display: none;
    margin: 0.55rem 0 0;
    color: #bfdbfe;
    font-size: 0.82rem;
    font-weight: 700;
}

@media (max-width: 820px) {
    body.cat-categories-page .cat-viewer-prod {
        grid-template-columns: 1fr;
    }

    body.cat-categories-page .cat-viewer-prod__image-wrap,
    body.cat-categories-page .cat-viewer-prod__media,
    body.cat-categories-page .cat-vp-img-stage {
        width: 100%;
    }
}

/* ── Product edit modal: blue-glass variant rows (no gray-on-gray) ──────── */
#product-modal .pf-variant-item {
    background: rgba(20, 46, 112, 0.22) !important;
    border-color: rgba(147, 197, 253, 0.25) !important;
}
#product-modal .pf-variant-item:not([data-collapsed]) > .pf-variant-header {
    border-bottom-color: rgba(147, 197, 253, 0.15) !important;
}
#product-modal .pf-variant-header:hover {
    background: rgba(147, 197, 253, 0.08) !important;
}
#product-modal .pv-option-block {
    background: rgba(20, 46, 112, 0.16) !important;
    border-color: rgba(147, 197, 253, 0.18) !important;
}
#product-modal .pf-gallery-item {
    background: rgba(20, 46, 112, 0.22) !important;
    border-color: rgba(147, 197, 253, 0.22) !important;
}
/* text-gray-400 override (variant summary, helper text) */
#product-modal .admin-form-modal-body .text-gray-400 {
    color: rgba(148, 163, 184, 0.65) !important;
}
/* pf-gallery-status text */
#product-modal .admin-form-modal-body .pf-gallery-status {
    color: rgba(148, 163, 184, 0.7) !important;
}

/* ── Inline chart period buttons (product page + account page) ─────────── */
.js-pic-sales-period.is-active,
.js-pic-price-period.is-active,
.js-activity-period.is-active {
    background: var(--finland-blue, #003580) !important;
    color: #ffffff !important;
    border-color: var(--finland-blue, #003580) !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Comment / Review: tombstone, edited badge, owner actions, edit form
   ───────────────────────────────────────────────────────────────────────── */
.comment-deleted-placeholder {
    color: var(--muted-500, #9ca3af);
    font-style: italic;
    font-size: .82rem;
    padding: .2rem 0;
}
.comment-edited-badge {
    display: inline-block;
    font-size: .68rem;
    font-style: italic;
    color: var(--muted-500, #9ca3af);
    margin-left: .3rem;
    vertical-align: middle;
}
.is-deleted-row {
    opacity: .65;
}
.filter-hide-deleted .is-deleted-row {
    display: none !important;
}
.comment-owner-actions {
    display: flex;
    gap: .4rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.comment-action-btn {
    font-size: .72rem;
    padding: .15rem .55rem;
    border-radius: .35rem;
    border: 1px solid var(--glass-border, rgba(0,0,0,.12));
    background: var(--glass-bg, rgba(255,255,255,.18));
    color: var(--ink, #1e293b);
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.comment-action-btn:hover {
    background: rgba(0,48,135,.09);
}
.comment-action-btn--danger {
    color: #b91c1c;
    border-color: rgba(185,28,28,.25);
}
.comment-action-btn--danger:hover {
    background: rgba(185,28,28,.09);
}
.comment-edit-form-wrap {
    margin-top: .5rem;
}
.comment-edit-form-wrap .textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: .45rem;
    padding: .45rem .6rem;
    font-size: .85rem;
    background: var(--glass-bg, rgba(255,255,255,.25));
    border: 1px solid var(--glass-border, rgba(0,0,0,.13));
    resize: vertical;
}
.comment-edit-form-wrap .input {
    width: 100%;
    box-sizing: border-box;
    border-radius: .45rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    background: var(--glass-bg, rgba(255,255,255,.25));
    border: 1px solid var(--glass-border, rgba(0,0,0,.13));
}

/* ── Site confirm modal (site-confirm-modal) ────────────────────────────── */
/* z-index is managed by Modal.open() via specialZIndexes (9980); no !important here
   to avoid fighting the inline style set by normalizeStack(). */
.scm-backdrop {
    z-index: var(--z-confirm-modal);
}
.scm-panel {
    background: linear-gradient(135deg, rgba(10, 30, 90, 0.90) 0%, rgba(18, 52, 130, 0.86) 55%, rgba(8, 24, 78, 0.92) 100%);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(75, 140, 240, 0.32);
    border-radius: 1px;
    padding: 1.75rem 2rem;
    max-width: 26rem;
    width: calc(100% - 2rem);
    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);
    position: relative;
}
.scm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.scm-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.scm-message {
    font-size: .88rem;
    color: rgba(219, 234, 254, 0.82);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}
.scm-close {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    border-radius: 2px;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
}
.scm-close:hover {
    background: rgba(59, 130, 246, 0.22);
    border-color: rgba(59, 130, 246, 0.45);
}
.scm-footer {
    display: flex;
    justify-content: flex-end;
    gap: .625rem;
}
/* ── Comment action buttons: glass-themed edit/delete (modal + product page) */
.comment-action-btn {
    font-size: .7rem;
    padding: .15rem .55rem;
    border-radius: .3rem;
    border: 1px solid rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.18);
    color: #2563eb;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s, border-color .15s, box-shadow .15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12), 0 1px 4px rgba(59, 130, 246, 0.14);
    letter-spacing: .01em;
}
.comment-action-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.75);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 2px 6px rgba(59, 130, 246, 0.2);
}
.comment-action-btn--danger {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1), 0 1px 4px rgba(239, 68, 68, 0.12);
}
.comment-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.75);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16), 0 2px 6px rgba(239, 68, 68, 0.18);
}

/* ======================================================================= */
/*  * ◀ End of   §06  Cursor Glow                                          */
/*  * ▶ Start of §33b  Catalog Small Grid — 6-column compact card view     */
/* ======================================================================= */

/* Base grid: 2 cols on mobile; responsive breakpoints in media-queries.css */
body.view-small-grid #catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

/* Card: compact padding, smaller base font */
body.view-small-grid #catalog-grid .product-card {
    padding: .45rem .4rem;
}

/* Media wrap: scaled proportionally from the 4-col 200px height
   Ratio: 6-col card width (~200px) / 4-col card width (~297px) ≈ 0.674
   200px × 0.674 ≈ 135px. Video and ImageFX rules inherit from the existing
   #catalog-grid .product-card .catalog-media-wrap selectors. */
body.view-small-grid #catalog-grid .product-card .catalog-media-wrap {
    height: 135px;
}

/* Card title row: compact margin, bold readable heading */
body.view-small-grid #catalog-grid .product-card .flex.items-start.gap-1 {
    margin-top: .3rem;
}
body.view-small-grid #catalog-grid .product-card h3,
body.view-small-grid #catalog-grid .product-card .font-bold.leading-tight.flex-1 {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer !important;
}
body.view-small-grid #catalog-grid .product-card h3 .js-product-open-name,
body.view-small-grid #catalog-grid .product-card .flex.items-start.gap-1 .js-product-open-name {
    font-weight: 700;
    cursor: pointer !important;
}

/* Compact favourite button */
body.view-small-grid #catalog-grid .catalog-card-fav-btn {
    font-size: .8rem;
    padding: 0 .05rem;
    line-height: 1;
}

/* Category badges: smaller, tighter */
body.view-small-grid #catalog-grid .catalog-flag-badge {
    font-size: .62rem;
    padding: .08rem .22rem;
    margin-top: .15rem;
    font-weight: 700;
}

/* Featured badge: compact */
body.view-small-grid #catalog-grid .catalog-featured-badge {
    font-size: .62rem;
    padding: .06rem .2rem;
}

/* Rating summary: compact */
body.view-small-grid #catalog-grid .catalog-rating-summary {
    font-size: .62rem;
    margin-top: .15rem;
}

/* Hide short description (doesn't fit in compact layout) */
body.view-small-grid #catalog-grid .product-card p.flex-1 {
    display: none !important;
}

/* Variant count: compact bold */
body.view-small-grid #catalog-grid .product-card .text-xs.text-gray-500.mt-2 {
    font-size: .62rem;
    margin-top: .12rem;
    font-weight: 700;
}

/* Stock text: compact bold */
body.view-small-grid #catalog-grid .catalog-stock-text {
    font-size: .65rem;
    margin-top: .12rem;
    font-weight: 700;
}

/* Bought-before badge: compact bold */
body.view-small-grid #catalog-grid .catalog-bought-before {
    font-size: .62rem;
    margin-top: .08rem;
    font-weight: 700;
}

/* Price block: compact, pinned above cart indicator and buttons */
body.view-small-grid #catalog-grid .mt-3.flex.items-center.justify-between {
    margin-top: 0;
    padding-top: .3rem;
    order: 2;
}
body.view-small-grid #catalog-grid .catalog-price-current {
    font-size: .82rem;
    font-weight: 800;
}
body.view-small-grid #catalog-grid .catalog-price-original {
    font-size: .62rem;
}

/* Button area + in-cart indicator: both pinned to card bottom.
   A ::after spacer on the card (order 1) absorbs all free vertical space so
   price (order 2), cart indicator (order 3), and the button wrapper (order 4)
   always sit together at the bottom, regardless of card content height.
   When card-in-cart is hidden (display:none) the spacer still works and the
   button wrapper stays at the bottom. */
body.view-small-grid #catalog-grid .product-card::after {
    content: '';
    display: block;
    flex: 1;
    min-height: 0;
    order: 1;
}
body.view-small-grid #catalog-grid .product-card .card-in-cart {
    order: 3;
}
body.view-small-grid #catalog-grid .product-card .mt-3.flex.flex-col {
    order: 4;
    margin-top: 0;
    padding-top: .3rem;
}

/* ── Secondary buttons: hide non-essential actions ──
   Hidden: sales history, price history, reviews, comments.
   Kept: favourite, product-page, quick-view, row toggle, add-to-cart.        */
body.view-small-grid #catalog-grid .js-product-page-link {
    display: none !important;
}
body.view-small-grid #catalog-grid .js-product-sales,
body.view-small-grid #catalog-grid .js-product-price-history,
body.view-small-grid #catalog-grid .js-open-reviews,
body.view-small-grid #catalog-grid .js-open-card-comments {
    display: none !important;
}
/* Hide the icon row (now empty after hiding all its children) */
body.view-small-grid #catalog-grid .product-card .mt-3.flex.flex-col > .flex:has(.js-product-sales) {
    display: none !important;
}

/* View button stretches to fill its row alone */
body.view-small-grid #catalog-grid .btn-card-action.js-product-view {
    flex: 1 1 100%;
}

/* All action buttons: compact height and font */
body.view-small-grid #catalog-grid .btn-card-action {
    height: 1.65rem !important;
    min-height: 1.65rem !important;
    max-height: 1.65rem !important;
    font-size: .7rem !important;
    padding: .15rem .18rem !important;
    font-weight: 700 !important;
}

body.view-small-grid #catalog-grid .card-row-1 .js-product-page-link {
    display: inline-flex !important;
    min-width: 0;
}

body.view-small-grid #catalog-grid .card-row-1 .btn-card-action.js-product-view {
    min-width: 0;
}

body.view-small-grid #catalog-grid .product-card .card-row-2 {
    display: grid !important;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows 0.28s ease, opacity 0.18s ease;
}

body.view-small-grid #catalog-grid .product-card .card-row-2.is-open {
    display: grid !important;
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
}

body.view-small-grid #catalog-grid .product-card .card-row-2 .btn-card-action {
    display: inline-flex !important;
}

body.view-small-grid #catalog-grid .product-card .card-row-2 .flex.flex-1 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.view-small-grid #catalog-grid .product-card .card-row-1 {
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr) 1.65rem;
}

body.view-small-grid #catalog-grid .js-card-row2-toggle {
    width: 1.65rem !important;
    height: 1.65rem !important;
    min-width: 1.65rem !important;
    max-width: 1.65rem !important;
    flex: 0 0 1.65rem !important;
    padding: 0 !important;
}

/* ======================================================================= */
/*  * ◀ End of   §33b  Catalog Small Grid — 6-column compact card view     */

/* ======================================================================= */
/*  * ▶ Start of §33d  Catalog Mini Grid — collapsed horizontal row view   */
/* ======================================================================= */

/* Grid: 8-column responsive compact cards */
body.view-mini-grid #catalog-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Compact card: image + title/heart header, price strip, then expanded-only icon actions. */
body.view-mini-grid #catalog-grid .product-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-auto-flow: row !important;
    align-self: start !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid var(--line-soft) !important;
    border-radius: 5px !important;
    background: var(--surface-soft);
    color: var(--ink);
    transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease !important;
    overflow: hidden !important;
    min-height: 134px;
}

body.view-mini-grid #catalog-grid .product-card:hover {
    transform: translateY(-2px);
    border-color: var(--finland-blue-400);
}

/* Summary header: media (column 1) + name/chevron (column 2), both in row 1 */
body.view-mini-grid #catalog-grid .product-card .catalog-media-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin: 4px !important;
    padding: 0 !important;
}

body.view-mini-grid #catalog-grid .product-card .catalog-media-wrap img,
body.view-mini-grid #catalog-grid .product-card .catalog-media-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.view-mini-grid #catalog-grid .product-card .catalog-media-wrap .img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Header: product name in right column */
body.view-mini-grid #catalog-grid .product-card .flex.items-start.gap-1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 0.45rem 0.5rem 0.35rem 0.55rem !important;
    margin: 0 !important;
    background: var(--surface-soft) !important;
    border: none !important;
    min-width: 0;
}

body.view-mini-grid #catalog-grid .product-card h3,
body.view-mini-grid #catalog-grid .product-card .font-bold.leading-tight.flex-1 {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

body.view-mini-grid #catalog-grid .product-card h3 .js-product-open-name {
    display: block;
    color: inherit !important;
    width: 100%;
    cursor: pointer !important;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none !important;
}

body.view-mini-grid #catalog-grid .product-card .catalog-card-fav-btn {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 2px !important;
    border: 1px solid var(--line-soft) !important;
    background: var(--surface-strong) !important;
    color: var(--muted-700) !important;
    font-size: 1rem !important;
}

body.view-mini-grid #catalog-grid .product-card .catalog-card-fav-btn.is-favourite {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
}

body.view-mini-grid #catalog-grid .product-card > *:not(.catalog-media-wrap):not(.flex.items-start.gap-1):not(.mt-3.flex.items-center.justify-between):not(.mt-3.flex.flex-col) {
    grid-column: 1 / -1 !important;
    display: none !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded > *:not(.catalog-media-wrap):not(.flex.items-start.gap-1):not(.mt-3.flex.items-center.justify-between):not(.mt-3.flex.flex-col):not(.card-in-cart):not(.mini-grid-expand-btn) {
    display: block !important;
}

body.view-mini-grid #catalog-grid .product-card .mini-grid-expand-btn {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 2px !important;
    border: 1px solid var(--line-soft) !important;
    background: var(--surface-strong) !important;
    color: var(--muted-700) !important;
}
body.view-mini-grid #catalog-grid .product-card .mini-grid-expand-btn .cttr-arrow {
    transition: transform 0.22s ease;
}
body.view-mini-grid #catalog-grid .product-card.is-expanded .mini-grid-expand-btn .cttr-arrow {
    transform: rotate(180deg);
}

/* Expanded body styling — uniform horizontal padding (0.618rem), consistent vertical rhythm */
body.view-mini-grid #catalog-grid .product-card.is-expanded .catalog-flag-badge,
body.view-mini-grid #catalog-grid .product-card.is-expanded .catalog-featured-badge {
    display: block !important;
    padding: 0.3rem 0.618rem !important;
    margin: 0 0 0 0.45rem !important;
    font-size: 0.65rem !important;
    border-top: 1px solid var(--line-soft) !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .text-xs.text-gray-500.mt-2 {
    padding: 0.35rem 0.618rem 0.3rem 0.45rem !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .catalog-rating-summary {
    display: block !important;
    padding: 0.3rem 0.618rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    font-size: 0.68rem !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded p.flex-1 {
    padding: 0.45rem 0.618rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    font-size: 0.68rem !important;
    line-height: 1.32 !important;
    color: var(--muted-700) !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .catalog-stock-text,
body.view-mini-grid #catalog-grid .product-card.is-expanded .catalog-bought-before {
    padding: 0.3rem 0.618rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    font-size: 0.68rem !important;
}

body.view-mini-grid #catalog-grid .product-card .mt-3.flex.items-center.justify-between {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.35rem 0.618rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    gap: 0.35rem !important;
    min-height: 32px;
}

body.view-mini-grid #catalog-grid .product-card .catalog-price-stack,
body.view-mini-grid #catalog-grid .product-card .mt-3.flex.items-center.justify-between > .flex-1 {
    min-width: 0;
}

body.view-mini-grid #catalog-grid .product-card .catalog-price-current {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: var(--finland-blue) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.view-mini-grid #catalog-grid .product-card .catalog-price-original {
    font-size: 0.62rem !important;
    color: var(--muted-600) !important;
    text-decoration: line-through !important;
    display: inline !important;
}

body.view-mini-grid #catalog-grid .product-card .mt-3.flex.flex-col {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    padding: 0.5rem 0.55rem 0.55rem !important;
    gap: 0.382rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    background: var(--surface-soft);
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .mt-3.flex.flex-col {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.view-mini-grid #catalog-grid .product-card .card-row-2,
body.view-mini-grid #catalog-grid .product-card .js-product-page-link,
body.view-mini-grid #catalog-grid .product-card .js-card-row2-toggle,
body.view-mini-grid #catalog-grid .product-card .js-product-sales,
body.view-mini-grid #catalog-grid .product-card .js-product-price-history,
body.view-mini-grid #catalog-grid .product-card .js-open-reviews,
body.view-mini-grid #catalog-grid .product-card .js-open-card-comments,
body.view-mini-grid #catalog-grid .product-card .js-open-qr,
body.view-mini-grid #catalog-grid .product-card .js-leave-review {
    display: none !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .card-row-1,
body.view-mini-grid #catalog-grid .product-card.is-expanded .card-row-2,
body.view-mini-grid #catalog-grid .product-card.is-expanded .card-row-2 > .flex,
body.view-mini-grid #catalog-grid .product-card.is-expanded .card-row-3 {
    display: contents !important;
}

body.view-mini-grid #catalog-grid .product-card.is-expanded .js-product-view,
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-open-reviews,
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-open-card-comments,
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-add-to-cart {
    display: inline-flex !important;
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    width: 30px !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    border-radius: 4px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 0 !important;
}

body.view-mini-grid #catalog-grid .product-card .js-product-view {
    background: var(--finland-blue) !important;
    color: #fff !important;
    border: 1px solid var(--finland-blue) !important;
}

body.view-mini-grid #catalog-grid .product-card .js-open-reviews,
body.view-mini-grid #catalog-grid .product-card .js-open-card-comments {
    background: var(--surface-strong) !important;
    color: var(--muted-700) !important;
    border: 1px solid var(--line-soft) !important;
}

body.view-mini-grid #catalog-grid .product-card .js-add-to-cart {
    background: var(--finland-blue) !important;
    color: #fff !important;
    border: 1px solid var(--finland-blue) !important;
}

body.view-mini-grid #catalog-grid .product-card .js-product-view:hover,
body.view-mini-grid #catalog-grid .product-card .js-open-reviews:hover,
body.view-mini-grid #catalog-grid .product-card .js-open-card-comments:hover,
body.view-mini-grid #catalog-grid .product-card .js-add-to-cart:hover {
    transform: translateY(-1px) scale(1.08);
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Mini-grid action button SVG animations ────────────────────────────────
   Eye blinks hello · Star spins with overshoot · Bubble jumps · Cart bounces
   ───────────────────────────────────────────────────────────────────────── */
@keyframes mgEyeBlink {
    0%   { transform: scaleY(1);    }
    18%  { transform: scaleY(0.12); }
    30%  { transform: scaleY(1.22); }
    48%  { transform: scaleY(0.82); }
    62%  { transform: scaleY(1.08); }
    80%  { transform: scaleY(0.96); }
    100% { transform: scaleY(1);    }
}
@keyframes mgStarSpin {
    0%   { transform: rotate(0deg)   scale(1);    }
    35%  { transform: rotate(210deg) scale(1.32); }
    65%  { transform: rotate(385deg) scale(0.88); }
    82%  { transform: rotate(370deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1);    }
}
@keyframes mgBubbleJump {
    0%   { transform: translate(0, 0)    scale(1,    1);    }
    22%  { transform: translate(0, -6px) scale(0.9, 1.12);  }
    44%  { transform: translate(0, -8px) scale(1.1, 0.9);   }
    64%  { transform: translate(0, -3px) scale(0.96, 1.04); }
    82%  { transform: translate(0, -1px) scale(1.02, 0.99); }
    100% { transform: translate(0, 0)    scale(1,    1);    }
}
/* Eye button: SVG blinks like a winking emoji */
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-product-view:hover svg {
    animation: mgEyeBlink 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center;
    will-change: transform;
}
/* Star button: spins with elastic overshoot — like a star being flicked */
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-open-reviews:hover svg {
    animation: mgStarSpin 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: center;
    will-change: transform;
}
/* Chat button: speech bubble pops up to say something */
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-open-card-comments:hover svg {
    animation: mgBubbleJump 0.48s ease both;
    transform-origin: center bottom;
    will-change: transform;
}
/* Cart button: reuses the product-modal cart bounce — familiar and charming */
body.view-mini-grid #catalog-grid .product-card.is-expanded .js-add-to-cart:hover svg {
    animation: pmCartBounce 0.42s ease both;
    transform-origin: center;
    will-change: transform;
}

body.view-mini-grid #catalog-grid .product-card .btn-card-action:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}

body.view-mini-grid #catalog-grid .product-card .btn-card-action svg {
    width: 18px !important;
    height: 18px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    stroke-width: 2.8 !important;
}

body.view-mini-grid #catalog-grid .product-card .catalog-card-action-icon,
body.view-mini-grid #catalog-grid .product-card .catalog-card-action-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
}

body.view-mini-grid #catalog-grid .product-card .catalog-card-action-text,
body.view-mini-grid #catalog-grid .catalog-sale-badge-wrap,
body.view-mini-grid #catalog-grid .card-in-cart {
    display: none !important;
}

/* ======================================================================= */
/*  * ◀ End of   §33d  Catalog Mini Grid — collapsed horizontal row view   */

/* ======================================================================= */
/*  * ▶ Start of §34  Shop Section Banner                                  */
/* ======================================================================= */

.shop-container {
    display: block;
}

.shop-section-banner {
    padding: 1.75rem 0 1.5rem;
    padding-left: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--finland-blue-rgb, 0 51 102) / 0.12);
    border-left: 3px solid var(--finland-blue, #003366);
}

.shop-section-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.shop-section-banner__title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--flag-blue, #002f6c);
    letter-spacing: -0.02em;
    margin: 0;
}

.shop-section-banner__desc {
    font-size: 0.9375rem;
    color: var(--gray-600, #4b5563);
    margin: 0;
    line-height: 1.5;
}

.shop-section-banner__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.5rem;
}

.shop-section-banner__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--finland-blue, #003366);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.15s, color 0.15s;
    padding-bottom: 1px;
}

.shop-section-banner__link:hover,
.shop-section-banner__link:focus-visible {
    color: var(--flag-blue, #002f6c);
    border-bottom-color: var(--finland-blue, #003366);
}

.shop-section-banner__sep {
    color: var(--gray-400, #9ca3af);
    font-size: 0.875rem;
    line-height: 1;
    user-select: none;
}

/* ======================================================================= */
/*  * ◀ End of   §34  Shop Section Banner                                  */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §34b  Latest Conversations Panel                          */
/* ======================================================================= */

.catalog-latest-conversations {
    padding: 1rem;
    border: 1px solid rgba(43, 90, 168, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.42));
}

.catalog-latest-conversations__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.catalog-latest-conversations__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--finland-blue-400);
}

.catalog-latest-conversations__title {
    margin: 0.2rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--ink);
}

.catalog-latest-conversations__subtitle {
    margin: 0.28rem 0 0;
    font-size: 0.84rem;
    color: var(--muted-700);
}

.catalog-latest-conversations__toggle {
    flex-shrink: 0;
    white-space: nowrap;
}

.catalog-latest-conversations__toggle-expanded {
    display: none;
}

.catalog-latest-conversations[data-expanded="1"] .catalog-latest-conversations__toggle-collapsed {
    display: none;
}

.catalog-latest-conversations[data-expanded="1"] .catalog-latest-conversations__toggle-expanded {
    display: inline;
}

.catalog-latest-conversations__collapsed,
.catalog-latest-conversations__expanded {
    display: grid;
    gap: 0.55rem;
}

.catalog-latest-conversations__collapsed {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.catalog-latest-conversations__expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.catalog-latest-conversations__column {
    display: grid;
    gap: 0.42rem;
    align-content: start;
}

.catalog-latest-conversations__column-title {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--finland-blue);
}

.catalog-latest-conversations__column-list {
    display: grid;
    gap: 0.55rem;
}

@media (max-width: 900px) {
    .catalog-latest-conversations__expanded {
        grid-template-columns: minmax(0, 1fr);
    }
}

.catalog-latest-conversation-item {
    border: 1px solid rgba(43, 90, 168, 0.18);
    background: rgba(255, 255, 255, 0.46);
    border-radius: 1px;
}

.catalog-latest-conversation-item__link {
    display: block;
    width: 100%;
    padding: 0.7rem 0.78rem;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.catalog-latest-conversation-item__link:hover {
    background: rgba(43, 90, 168, 0.08);
}

.catalog-latest-conversation-item__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.catalog-latest-conversation-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2rem;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--finland-blue);
    background: rgba(43, 90, 168, 0.12);
    border: 1px solid rgba(43, 90, 168, 0.24);
    border-radius: 999px;
}

.catalog-latest-conversation-item__product {
    font-size: 0.84rem;
    font-weight: 750;
    color: var(--ink);
}

.catalog-latest-conversation-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.3rem 0 0;
    color: var(--muted-700);
    font-size: 0.74rem;
}

.catalog-latest-conversation-item__rating {
    margin: 0.22rem 0 0;
    color: #d97706;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.catalog-latest-conversation-item__body {
    margin: 0.32rem 0 0;
    color: var(--muted-800);
    font-size: 0.84rem;
    line-height: 1.45;
}

.catalog-latest-conversation-item__replies {
    border-top: 1px solid rgba(43, 90, 168, 0.14);
    padding: 0.48rem 0.78rem 0.68rem;
    display: grid;
    gap: 0.28rem;
}

.catalog-latest-conversation-item__reply {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--muted-700);
}

.catalog-latest-conversation-item__reply-author {
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.25rem;
}

/* ======================================================================= */
/*  * ◀ End of   §34b  Latest Conversations Panel                          */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ Start of §35b  POTD Carousel                                       */
/* ======================================================================= */

.shop-potd-section {
    margin-bottom: 2.5rem;
    position: relative;
}

.shop-potd-header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.shop-potd-star {
    font-size: 1.5rem;
    color: #f59e0b;
    line-height: 1;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.shop-potd-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--flag-blue, #002f6c);
    margin: 0 0 0.125rem;
    line-height: 1.25;
}

.shop-potd-subtitle {
    font-size: 0.8125rem;
    color: var(--gray-500, #6b7280);
    margin: 0;
}

.shop-potd-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.shop-potd-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-y;
}

.shop-potd-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.shop-potd-card {
    flex-shrink: 0;
    width: 180px;
    scroll-snap-align: start;
    cursor: pointer;
    border-radius: 2px;
    background: var(--surface-soft, #f8f9fa);
    border: 1px solid rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.1s;
    position: relative;
    outline: none;
}

.shop-potd-card:hover,
.shop-potd-card:focus-visible {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.shop-potd-card__badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    color: var(--finland-blue, #003366);
    border-radius: 2px;
    padding: 0.15rem 0.4rem;
    line-height: 1.4;
    z-index: 1;
    pointer-events: none;
}

.shop-potd-card__img-wrap {
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: var(--gray-100, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-potd-card__img-wrap img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 0;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.shop-potd-card__img-placeholder {
    width: 180px;
    height: 180px;
    background: var(--gray-200, #e5e7eb);
}

.shop-potd-card__body {
    padding: 0.5rem 0.5rem 0.6rem;
}

.shop-potd-card__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.25rem;
}

.shop-potd-card__price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--finland-blue, #003366);
}

.shop-potd-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 2px;
    background: var(--surface-soft, #f8f9fa);
    color: var(--gray-600, #4b5563);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}

.shop-potd-nav:hover,
.shop-potd-nav:focus-visible {
    background: var(--finland-blue, #003366);
    color: #fff;
    border-color: var(--finland-blue, #003366);
}

/* ======================================================================= */
/*  * ◀ End of   §35b  POTD Carousel                                       */
/* ======================================================================= */

/* ======================================================================= */
/*  * ▶ §50 Favourites Page: Button Group & Help Text Animations          */
/* ======================================================================= */

/* Button container smoothly expands, pushing help text */
.fav-page-btns-outer {
    display: flex;
    gap: 0.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: flex-start;
}

/* Button grid smooth expand/collapse */
.fav-page-btn-grid {
    display: grid;
    grid-auto-flow: row;
    gap: 0.5rem;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                visibility 0.4s linear;
    opacity: 1;
    visibility: visible;
}

.fav-page-btn-grid.is-collapsed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Help text smoothly reflows as parent flex container changes width */
.fav-page-help {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth toggle button icon rotation */
.fav-btns-toggle__plus,
.fav-btns-toggle__minus {
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.fav-btns-toggle.is-active .fav-btns-toggle__plus {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
    pointer-events: none;
}

.fav-btns-toggle.is-active .fav-btns-toggle__minus {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.fav-btns-toggle:not(.is-active) .fav-btns-toggle__plus {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.fav-btns-toggle:not(.is-active) .fav-btns-toggle__minus {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    pointer-events: none;
}

/* ======================================================================= */
/*  * ◀ End of §50 Favourites Page: Button Group & Help Text Animations   */
/* ======================================================================= */

/* ======================================================================= */
/*  ▶ Start of §51 News / Uutiset Page                                     */
/* ======================================================================= */

/* ── Page wrapper ────────────────────────────────────────────────────── */
.news-page {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 1.5rem 1rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Shared section chrome ───────────────────────────────────────────── */
.news-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.news-section__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.news-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1px;
  font-size: 1.3rem;
  font-weight: 900;
  flex-shrink: 0;
}
.news-section__icon--spotlight { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.news-section__icon--outlet    { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.news-section__icon--news      { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.news-section__icon--upcoming  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.news-section__icon--social    { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.news-section__icon[role="button"] {
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.news-section__icon[role="button"]:hover {
  transform: scale(1.13);
  filter: brightness(1.12) drop-shadow(0 3px 10px rgba(0,0,0,0.22));
}
.news-section__icon[role="button"]:active {
  transform: scale(0.92);
}
.news-section__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--flag-blue, #1a3a6b);
  line-height: 1.2;
}
.news-section__subtitle {
  font-size: 0.875rem;
  color: var(--ink-muted, #6b7280);
  margin-top: 0.15rem;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.news-empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted, #9ca3af);
  background: rgba(0,0,0,0.02);
  border-radius: 1px;
  border: 1px dashed rgba(0,0,0,0.1);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.news-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(26,58,107,0.06) 0%, rgba(255,255,255,0) 60%);
}
.news-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.news-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.news-hero__text {
  flex: 1;
  min-width: 280px;
}
.news-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--finland-blue, #003580);
  margin-bottom: 0.5rem;
}
.news-hero__title {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--flag-blue, #1a3a6b);
  line-height: 1.15;
}
.news-hero__body {
  margin-top: 0.75rem;
  color: var(--ink-muted, #374151);
  max-width: 480px;
  line-height: 1.55;
}
.news-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.news-hero__visual {
  flex-shrink: 0;
}
.news-hero__badge-ring {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
.news-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 1px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.news-hero__badge--news     { background: rgba(59,130,246,0.12); color: #2563eb; }
.news-hero__badge--outlet   { background: rgba(239,68,68,0.12);  color: #dc2626; }
.news-hero__badge--upcoming { background: rgba(139,92,246,0.12); color: #7c3aed; }

/* ── Spotlight ───────────────────────────────────────────────────────── */
.news-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.news-spotlight-card {
  position: relative;
  border-radius: 1px;
  overflow: hidden;
  background: var(--glass-bg, rgba(255,255,255,0.72));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(26,58,107,0.08);
  box-shadow: 0 4px 24px rgba(26,58,107,0.07);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.news-spotlight-card:hover,
.news-spotlight-card:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 36px rgba(26,58,107,0.14);
  outline: 2px solid var(--flag-blue, #1a3a6b);
}
.news-spotlight-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 1px;
}
.news-spotlight-card__badge-star { font-size: 0.8rem; }
.news-spotlight-card__media {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.news-spotlight-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.news-spotlight-card:hover .news-spotlight-card__img { transform: scale(1.04); }
.news-spotlight-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26,58,107,0.04), rgba(26,58,107,0.09));
}
.news-spotlight-card__body {
  padding: 1rem 1.1rem 1.2rem;
}
.news-spotlight-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--flag-blue, #1a3a6b);
  margin-bottom: 0.3rem;
}
.news-spotlight-card__price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink, #111827);
}
.news-spotlight-card__prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.news-spotlight-card__price--sale {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-error, #dc2626);
}
.news-spotlight-card__price--orig {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-muted, #9ca3af);
  text-decoration: line-through;
}
.news-spotlight-card__hint {
  font-size: 0.72rem;
  color: var(--ink-muted, #9ca3af);
  margin-top: 0.5rem;
}

/* ── Outlet canvas (sea-of-products style embedded section) ──────────── */
.news-outlet-section {
  position: relative;
}
/* Two-column layout: cart zone left, canvas right */
.news-outlet-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: stretch;
}
.news-outlet-canvas-wrap {
  position: relative;
  height: 660px;
  border-radius: 1px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15,31,77,0.11) 0%, rgba(30,64,175,0.08) 42%, rgba(37,99,235,0.05) 72%, rgba(96,165,250,0.03) 100%);
  border: 1px solid rgba(29,78,216,0.13);
  flex: 1 1 0;
  cursor: grab;
}
.news-outlet-canvas-wrap.is-panning { cursor: grabbing; }
.news-outlet-canvas-wrap.is-panning * { user-select: none; }
.news-outlet-shimmer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 38% 32%, rgba(59,130,246,0.11) 0%, rgba(29,78,216,0.05) 48%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.news-outlet-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  /* width + height set dynamically by scatterOutletCards() based on card count */
  min-width: 100%;
  min-height: 100%;
  will-change: transform;
  transform-origin: 0 0;
}
/* Floating toolbar overlay on canvas */
.news-outlet-toolbar {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.news-outlet-toolbar__row {
  display: flex;
  gap: 0.35rem;
}
/* Each button in a row stretches equally so both rows are the same width */
.news-outlet-toolbar__row .news-outlet-tool {
  flex: 1;
  justify-content: center;
}
.news-outlet-tool {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 1px;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-muted, #6b7280);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.news-outlet-tool:hover {
  background: rgba(255,255,255,0.96);
  color: var(--flag-blue, #1e40af);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.news-outlet-tool svg { flex-shrink: 0; }
/* Canvas minimap overlay */
.news-outlet-minimap {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 20;
  background: rgba(0,0,0,0.44);
  backdrop-filter: blur(6px);
  border-radius: 1px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: crosshair;
  line-height: 0;
  pointer-events: all;
  transition: opacity 0.2s;
}
.news-outlet-minimap:hover { opacity: 0.9; }
.news-outlet-minimap canvas { display: block; border-radius: 1px; }
/* Canvas directional pan buttons */
.news-outlet-nav-btn {
  position: absolute;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-muted, #6b7280);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  padding: 0;
  pointer-events: all;
}
.news-outlet-nav-btn:hover {
  background: rgba(255,255,255,0.96);
  color: var(--flag-blue, #1e40af);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.js-outlet-pan-up    { top: 0.5rem;    left: 50%; transform: translateX(-50%); }
.js-outlet-pan-down  { bottom: 0.5rem; left: 50%; transform: translateX(-50%); }
.js-outlet-pan-left  { left: 0.5rem;   top: 50%;  transform: translateY(-50%); }
.js-outlet-pan-right { right: 0.5rem;  top: 50%;  transform: translateY(-50%); }
.news-outlet-nav-btn svg { flex-shrink: 0; }
.news-outlet-card {
  position: absolute;
  width: 190px;
  cursor: grab;
  user-select: none;
  transition: box-shadow 0.18s ease;
}
.news-outlet-card:hover,
.news-outlet-card.is-dragging { width: 190px; }
.news-outlet-card { --card-rot: 0deg; }
.news-outlet-card:hover { transform: rotate(var(--card-rot)) translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.13); }
.news-outlet-card.is-dragging { opacity: 0.55; cursor: grabbing; }
.news-spotlight-card.is-dragging { opacity: 0.55; cursor: grabbing; }
/* Header cart link becomes a drop target when a spotlight card is dragged */
.site-header-cart-link.drop-over {
    box-shadow: 0 0 0 3px rgba(99,102,241,0.55), 0 4px 16px rgba(99,102,241,0.22);
    transform: scale(1.1);
    transition: box-shadow 0.12s, transform 0.12s;
}
.news-outlet-card:nth-child(2)  { animation-delay: 0.04s; }
.news-outlet-card:nth-child(3)  { animation-delay: 0.08s; }
.news-outlet-card:nth-child(4)  { animation-delay: 0.12s; }
.news-outlet-card:nth-child(5)  { animation-delay: 0.16s; }
.news-outlet-card:nth-child(6)  { animation-delay: 0.20s; }
.news-outlet-card:nth-child(7)  { animation-delay: 0.24s; }
.news-outlet-card:nth-child(8)  { animation-delay: 0.28s; }
.news-outlet-card:nth-child(n+9){ animation-delay: 0.32s; }
@keyframes outlet-float-in {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.news-outlet-card__desc {
  font-size: 0.7rem;
  color: var(--ink-muted, #6b7280);
  margin-top: 0.3rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-outlet-card__stock {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.3rem;
  font-size: 0.65rem;
  color: var(--ink-muted, #6b7280);
}
.news-outlet-card__stock-count {
  font-weight: 700;
  color: var(--ink, #111827);
  transition: color 0.3s ease;
}
.news-outlet-card__stock-count.is-low {
  color: #b45309;
}
.news-outlet-card__stock-badge {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 1px;
  background: rgba(245,158,11,0.15);
  color: #b45309;
  letter-spacing: 0.02em;
}
.news-outlet-card__variant-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted-fg, #6b7280);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-outlet-card__drag-hint {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  color: var(--ink-muted, #9ca3af);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.news-outlet-card:hover .news-outlet-card__drag-hint { opacity: 1; }
.sea-card__outlet-ribbon {
  position: absolute;
  top: 2.6rem;
  right: -1.15rem;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 2rem;
  transform: rotate(38deg);
  transform-origin: top right;
  z-index: 5;
  pointer-events: none;
}
/* ── Outlet ribbon on product quick-view modal ───────────────────────── */
.pm-outlet-ribbon {
  position: absolute;
  top: 7rem;
  right: -3rem;
  width: calc(100% + 6rem);
  text-align: right;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 5rem 0.3rem 0;
  transform: rotate(38deg);
  transform-origin: top right;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(220,38,38,0.35);
}
/* ── Outlet cart panel (glass/light, inside section) ─────────────────── */
.news-outlet-cart {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  border-radius: 1px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  min-height: 380px;
  max-height: 100%;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  align-self: stretch;
}
.news-outlet-cart.drop-over {
  border-color: rgba(99,102,241,0.55);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 4px 24px rgba(99,102,241,0.12);
}
.news-outlet-cart.is-saving { opacity: 0.7; pointer-events: none; }
.news-outlet-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem 0.55rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
}
.news-outlet-cart__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--flag-blue, #1e40af);
  letter-spacing: 0.02em;
}
.news-outlet-cart__header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.news-outlet-cart__count {
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--flag-blue, #1e40af);
  color: #fff;
  border-radius: 1px;
  padding: 0.05rem 0.48rem;
  min-width: 1.4rem;
  text-align: center;
}
.news-outlet-cart__icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 1px;
  color: var(--ink-muted, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.news-outlet-cart__icon-btn:hover:not(:disabled) { color: #ef4444; background: rgba(239,68,68,0.08); }
.news-outlet-cart__icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.news-outlet-cart__drop-zone {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 80px;
}
.news-outlet-cart__items {
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.news-outlet-cart__empty {
  padding: 1.4rem 0.85rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-muted, #9ca3af);
  line-height: 1.5;
}
.news-outlet-cart__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 1px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}
.news-outlet-cart__thumb {
  width: 36px;
  height: 36px;
  border-radius: 1px;
  object-fit: cover;
  flex-shrink: 0;
}
.news-outlet-cart__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.06);
  font-size: 1rem;
  color: var(--ink-muted, #9ca3af);
}
.news-outlet-cart__info {
  flex: 1 1 0;
  min-width: 0;
}
.news-outlet-cart__name {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink, #111827);
}
.news-outlet-cart__meta {
  font-size: 0.65rem;
  color: var(--ink-muted, #6b7280);
}
.news-outlet-cart__qty {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.news-outlet-cart__qty-btn {
  background: none;
  border: 1px solid rgba(0,0,0,0.12);
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 1px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, #111827);
  padding: 0;
  transition: background 0.12s;
}
.news-outlet-cart__qty-btn:hover { background: rgba(0,0,0,0.06); }
.news-outlet-cart__qty-value {
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 1.1rem;
  text-align: center;
}
.news-outlet-cart__line {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink, #111827);
  white-space: nowrap;
}
.news-outlet-cart__remove {
  color: #ef4444;
}
.news-outlet-cart__remove:hover:not(:disabled) { color: #dc2626; background: rgba(239,68,68,0.1); }
.news-outlet-cart__footer {
  padding: 0.6rem 0.75rem 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
}
.news-outlet-cart__subtotal {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink, #111827);
}
.news-outlet-cart__checkout {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 1px;
  background: var(--flag-blue, #1e40af);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
  pointer-events: none;
  opacity: 0.35;
}
.news-outlet-cart:not(.is-empty) .news-outlet-cart__checkout {
  pointer-events: auto;
  opacity: 1;
}
.news-outlet-cart__checkout:hover { background: #1e3a8a; transform: translateY(-1px); }
.news-outlet-cart__reserve-notice {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.62rem;
  color: var(--ink-muted, #6b7280);
  text-align: center;
  line-height: 1.4;
}

/* ── News cards grid ─────────────────────────────────────────────────── */
.news-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  border-radius: 1px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,58,107,0.12);
}
.news-card__media {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.news-card:hover .news-card__img { transform: scale(1.04); }
.news-card__body {
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.news-card__date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--finland-blue, #003580);
}
.news-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--flag-blue, #1a3a6b);
  line-height: 1.3;
}
.news-card__snippet {
  font-size: 0.85rem;
  color: var(--ink-muted, #4b5563);
  line-height: 1.5;
  flex: 1;
}
.news-card__link {
  align-self: flex-start;
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
/* Inside a news card the parent card already lifts on hover — neutralise the
   btn-ghost's own translateY so the button does not add a second jump. */
.news-card .news-card__link.btn-ghost,
.news-card .news-card__link.btn-ghost:hover {
  transform: none !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
/* Timeline items have no card-level hover lift; give the link a subtle own lift. */
.news-timeline__content .news-card__link.btn-ghost:hover {
  transform: translateY(-2px) !important;
}

/* ── Timeline (upcoming) ─────────────────────────────────────────────── */
.news-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  padding-left: 2rem;
}
.news-timeline::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: linear-gradient(to bottom, rgba(139,92,246,0.4), rgba(139,92,246,0.05));
}
.news-timeline__item {
  position: relative;
  margin-bottom: 1.25rem;
}
.news-timeline__item:last-child { margin-bottom: 0; }
.news-timeline__dot {
  position: absolute;
  left: -1.9rem;
  top: 1.1rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.3);
}
.news-timeline__content {
  padding: 1rem 1.2rem;
  border-radius: 1px;
  overflow: hidden; /* clips the full-bleed .news-timeline__media image */
}
/* Full-bleed image at the top of a timeline item: break out of the padding */
.news-timeline__media {
  margin: -1rem -1.2rem 0.75rem;
  border-radius: 0;
}
.news-timeline__date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c3aed;
}
.news-timeline__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--flag-blue, #1a3a6b);
  margin-top: 0.2rem;
  line-height: 1.3;
}
.news-timeline__body {
  font-size: 0.83rem;
  color: var(--ink-muted, #4b5563);
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ── Social section ──────────────────────────────────────────────────── */
.news-social-card {
  padding: 2rem;
  border-radius: 1px;
  text-align: center;
}
.news-social-card__bio {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--flag-blue, #1a3a6b);
  margin-bottom: 1.5rem;
}
.news-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.news-social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--flag-blue, #1a3a6b);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.75rem 1.1rem;
  border-radius: 1px;
  background: rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.news-social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26,58,107,0.12);
  background: rgba(26,58,107,0.06);
  color: var(--flag-blue, #1a3a6b);
}

/* ======================================================================= */
/*  * ◀ End of §51 News / Uutiset Page                                     */
/* ======================================================================= */

/* ======================================================================= */
/*  §52 Category landing pages  /en/category/{slug}  /fi/kategoria/{slug}  */
/* ======================================================================= */

/* Breadcrumb nav */
.cat-landing-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.78rem;
  margin-bottom: 1rem;
  color: var(--muted-500, #6b7280);
}
.cat-landing-breadcrumb__link {
  color: var(--flag-blue, #1a3a6b);
  text-decoration: none;
  font-weight: 500;
}
.cat-landing-breadcrumb__link:hover { text-decoration: underline; }
.cat-landing-breadcrumb__sep { color: var(--muted-400, #9ca3af); }
.cat-landing-breadcrumb__current { font-weight: 600; color: inherit; }

/* Category description below H1 */
.cat-landing-desc {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--muted-600, #4b5563);
  max-width: 62ch;
}

/* Product grid */
.cat-landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

/* Product card */
.cat-landing-card {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cat-landing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(26,58,107,0.13);
}
body.theme-dark .cat-landing-card {
  background: rgba(30,41,59,0.72);
  border-color: rgba(255,255,255,0.08);
}
.cat-landing-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Image wrapper */
.cat-landing-card__img-wrap {
  position: relative;
  aspect-ratio: 350 / 280;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.cat-landing-card__img-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-landing-card__img-wrap--empty::after {
  content: '📦';
  font-size: 2.5rem;
  opacity: 0.3;
}
.cat-landing-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cat-landing-card:hover .cat-landing-card__img { transform: scale(1.04); }

/* Badges */
.cat-landing-card__badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  pointer-events: none;
}
.cat-landing-card__badge--sale { background: #ef4444; color: #fff; }
.cat-landing-card__badge--new  { background: #22c55e; color: #fff; }

/* Card body */
.cat-landing-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem 0.85rem 0.9rem;
  gap: 0.35rem;
}
.cat-landing-card__name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--flag-blue, #1a3a6b);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.theme-dark .cat-landing-card__name { color: #93c5fd; }

.cat-landing-card__desc {
  font-size: 0.75rem;
  color: var(--muted-500, #6b7280);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer: price + stock */
.cat-landing-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}
.cat-landing-card__price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--flag-blue, #1a3a6b);
}
.cat-landing-card__price--sale { color: #dc2626; }
body.theme-dark .cat-landing-card__price { color: #93c5fd; }
body.theme-dark .cat-landing-card__price--sale { color: #f87171; }

.cat-landing-card__stock {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.cat-landing-card__stock--in  { background: #dcfce7; color: #15803d; }
.cat-landing-card__stock--out { background: #fee2e2; color: #b91c1c; }
body.theme-dark .cat-landing-card__stock--in  { background: rgba(34,197,94,0.15); color: #4ade80; }
body.theme-dark .cat-landing-card__stock--out { background: rgba(239,68,68,0.15); color: #f87171; }

/* Empty state */
.cat-landing-empty {
  text-align: center;
  padding: 3rem 2rem;
  margin-top: 1.5rem;
  border-radius: 1rem;
}
.cat-landing-empty p {
  margin-bottom: 1.25rem;
  color: var(--muted-500, #6b7280);
}

/* Back/nav footer links */
.cat-landing-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ======================================================================= */
/*  * ◀ End of §52 Category landing pages                                  */
/* ======================================================================= */