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

/* ======================================================================= */
/*  * ▶ 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: 10;
    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: 10;
    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-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(240, 255, 248, 0.90) !important;
    border-color: rgba(134, 239, 172, 0.50) !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: 10;
    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(248, 245, 255, 0.90) !important;
    border-color: rgba(196, 181, 253, 0.50) !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::-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;
}
.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);
}
.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 {
    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 {
    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: 10;
    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: 0.85rem;
    color: var(--ink);
}

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

.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: center;
    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);
}

/* ─── 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__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(4, minmax(0, 1fr));
    gap: 1rem;
}

.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.45rem 0.5rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.32);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, padding .2s ease;
}

.cat-dir__col.is-expanded {
    padding: 0.65rem 0.6rem 0.55rem;
}

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

.cat-dir__col.is-active {
    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 24px -16px rgba(0, 53, 128, 0.55);
}

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

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

.cat-dir__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.45rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.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 36px;
    width: 36px;
    height: 36px;
    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: 1rem;
    font-weight: 700;
    line-height: 1;
}

.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 {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dir__count {
    color: var(--muted-2, #6b7280);
    font-size: 0.78rem;
    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);
}

/* ────────────────── 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: 1px solid rgba(0, 53, 128, 0.25);
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.cat-dir-floating__add-btn svg {
    width: 10px;
    height: 10px;
    pointer-events: none;
}
.cat-dir-floating__add-btn:hover,
.cat-dir-floating__add-btn:focus-visible {
    background: rgba(0, 53, 128, 0.18);
    border-color: rgba(0, 53, 128, 0.45);
    outline: none;
    transform: rotate(45deg);
}
.cat-dir-floating__add-btn.is-open {
    background: var(--finland-blue, #003580);
    border-color: var(--finland-blue, #003580);
    color: #fff;
    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: 1px solid rgba(0, 53, 128, 0.25);
    border-radius: 50%;
    background: rgba(0, 53, 128, 0.07);
    color: var(--finland-blue, #003580);
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.cat-dir-floating__close-btn svg {
    width: 10px;
    height: 10px;
    pointer-events: none;
}
.cat-dir-floating__close-btn:hover,
.cat-dir-floating__close-btn:focus-visible {
    background: rgba(0, 53, 128, 0.18);
    border-color: rgba(0, 53, 128, 0.45);
    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;
}
.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: flex;
    align-items: center;
    gap: .35rem;
}

#catalog-list .catalog-list-btns-row.catalog-list-btns-row2 {
    display: none;
    order: -1;
}

#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 .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;
}

#catalog-list .catalog-share-dropdown-wrap {
    display: inline-block;
}

/* 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-btns-row {
    flex-wrap: wrap;
}

#catalog-list .catalog-list-btns-wrap.is-expanded .catalog-list-btns-row2 {
    display: flex;
    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;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   §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 §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 */
}
.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;
}
.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;
}
.cat-dir.is-dir-collapsed .cat-dir__grid {
    display: none;
}
.cat-dir.is-dir-collapsed .cat-dir__chips-group--sort {
    display: none;
}
.cat-dir.is-dir-collapsed .cat-dir__col {
    min-width: 0;
    width: 100%;
    padding: 0;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.48);
    order: 0;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded {
    order: 1;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.6rem 0.55rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.36);
}
.cat-dir.is-dir-collapsed .cat-dir__header-row {
    display: flex;
    width: 100%;
    min-width: 0;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded .cat-dir__header-row {
    display: flex;
    max-width: 100%;
}
.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;
    min-width: 0;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded .cat-dir__header {
    padding: 0.4rem 0.45rem;
    border-radius: 0.5rem;
}
.cat-dir.is-dir-collapsed .cat-dir__header-shop {
    display: none;
}
.cat-dir.is-dir-collapsed .cat-dir__col.is-expanded .cat-dir__header-shop,
.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__col.is-expanded .cat-dir__thumb {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
}
.cat-dir.is-dir-collapsed .cat-dir__title {
    flex: 1 1 auto;
    min-width: 0;
}
.cat-dir.is-dir-collapsed .cat-dir__name {
    max-width: none;
    font-size: 0.88rem;
}
.cat-dir.is-dir-collapsed .cat-dir__count {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.08rem 0.38rem;
    border-radius: 999px;
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    font-size: 0.68rem;
    font-weight: 700;
}
.cat-dir.is-dir-collapsed .cat-dir__indicator {
    width: 1.35rem;
    height: 1.35rem;
}
.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;
}
/* ── Phase 2: chip-grid view (6 compact columns) ────────────────────────── */
.cat-dir.is-dir-chip-grid .cat-dir__overflow,
.cat-dir.is-dir-chip-grid .cat-dir__empty { display: none; }
.cat-dir.is-dir-chip-grid .cat-dir__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.3rem;
}
.cat-dir.is-dir-chip-grid .cat-dir__col {
    padding: 0.22rem 0.3rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.cat-dir.is-dir-chip-grid .cat-dir__body,
.cat-dir.is-dir-chip-grid .cat-dir__sub-list,
.cat-dir.is-dir-chip-grid .cat-dir__indicator--toggle,
.cat-dir.is-dir-chip-grid .cat-dir__header-shop { display: none; }
.cat-dir.is-dir-chip-grid .cat-dir__header {
    padding: 0.16rem 0.2rem;
    gap: 0.28rem;
    min-height: auto;
    border-radius: 0.35rem;
}
.cat-dir.is-dir-chip-grid .cat-dir__thumb {
    flex-basis: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.68rem;
}
.cat-dir.is-dir-chip-grid .cat-dir__title { flex: 1 1 auto; min-width: 0; }
.cat-dir.is-dir-chip-grid .cat-dir__name {
    font-size: 0.8rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    word-break: break-word;
    line-height: 1.3;
}
.cat-dir.is-dir-chip-grid .cat-dir__count {
    font-size: 0.58rem;
    padding: 0.04rem 0.24rem;
    border-radius: 999px;
    background: rgba(0, 53, 128, 0.08);
    color: var(--finland-blue, #003580);
    font-weight: 700;
    align-self: flex-start;
}
/* Toggle button icon states */
.cat-dir-toggle-icon--chevron { display: none; }
.cat-dir-toggle-icon--grid { display: none; }
#cat-dir-toggle-btn[data-dir-phase="1"] .cat-dir-toggle-icon--grid-4 { display: none; }
#cat-dir-toggle-btn[data-dir-phase="1"] .cat-dir-toggle-icon--grid { display: block; }
#cat-dir-toggle-btn[data-dir-phase="2"] .cat-dir-toggle-icon--grid-4 { display: none; }
#cat-dir-toggle-btn[data-dir-phase="2"] .cat-dir-toggle-icon--grid { display: none; }
#cat-dir-toggle-btn[data-dir-phase="2"] .cat-dir-toggle-icon--chevron { display: block; }
#cat-dir-toggle-btn[data-dir-phase="2"] { 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;
}

.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;
}

/* 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: 340px;
    height: 340px;
    border-radius: 61.8%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 38%, transparent 70%);
    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;
}

/* ── 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.55rem;
}

/* 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; }
.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 .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: #fee2e2 !important;
    border: 1px solid rgba(255,255,255,1) !important;
    color: #991b1b !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: #991b1b !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: #7f1d1d !important;
    border-color: rgba(255,255,255,1) !important;
    color: #fecaca !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: #fecaca !important;
}

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

/* ── 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: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: auto;
    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: rgba(239, 246, 255, 0.55);
    color: rgba(15, 39, 79, 0.72);
    border-color: rgba(255,255,255,1);
    box-shadow: -1px -1px 2px var(--ink);
}

body.cat-categories-page .cat-vp-actions-toggle:hover,
body.cat-categories-page .cat-vp-actions-toggle:focus-visible {
    background: rgba(219, 234, 254, 0.75);
    color: #003580;
    border-color: rgba(255,255,255,1);
    box-shadow: -1px -1px 2px 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 {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}
body.view-small-grid #catalog-grid .product-card h3 .js-product-open-name {
    font-weight: 700;
}

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

body.view-mini-grid #catalog-grid .product-card h3 .js-product-open-name {
    color: inherit !important;
    width: 100%;
    cursor: pointer;
    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: none !important;
}

/* 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 !important;
    font-size: 0.65rem !important;
    border-top: 1px solid var(--line-soft) !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(--surface-strong) !important;
    color: var(--finland-blue) !important;
    border: 1px solid var(--finland-blue-400) !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 §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                                     */
/* ======================================================================= */