/* =====================================================================
 * Dataveli Cart — Media queries
 * Loaded after theme-dark.css.
 * All @media and @supports blocks belong here.
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Disable expensive blob animations on low-power / touch / narrow devices */
@media (prefers-reduced-motion: reduce), (pointer: coarse), (max-width: 767px) {
    body::before, body::after {
        animation: none !important;
        will-change: auto !important;
    }
}
/* Reduce backdrop-filter cost on coarse/narrow devices */
@media (pointer: coarse), (max-width: 767px) {
    .glass {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .product-card:hover {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 640px) {
    .fhfs-content {
        flex-direction: column;
        padding: 0 1.2rem;
        gap: 1.2rem;
    }
    .fhfs-image-wrap {
        flex: none;
        max-width: 100%;
        width: 100%;
        position: static;
    }
    .fhfs-name { font-size: 1.15rem; }
    .fhfs-nav--prev { left: .3rem; }
    .fhfs-nav--next { right: .3rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
    .fhfs-content { padding: 0 3rem; gap: 1.6rem; }
    .fhfs-image-wrap { flex: 0 0 52%; max-width: 52%; }
    .fhfs-name { font-size: 1.25rem; }
}
/* Hide badges on mobile — nav is also hidden md: */
@media (max-width: 767px) {
    .header-cat-badges { display: none !important; }
}
/* ---------- Storefront header responsive breakpoints ----------
 *
 *  ≤ 1360px  actions move to left (flex-direction reverses order via order)
 *  ≤ 1200px  Vihjeet tooltip toggle hidden
 *  ≤  960px  quick-start menu hidden
 *  ≤  640px  logo → theme-toggle gap removed
 *  ≤  480px  locale selector hidden
 */

/* At 1360px and below: nav is already left next to brand; just prevent wrapping
   and ensure the badges strip can shrink gracefully. */
@media (max-width: 1360px) {
    .site-header-inner {
        flex-wrap: nowrap;
    }
    .header-cat-badges {
        /* Let the badge strip shrink more aggressively; badges clip via overflow:hidden */
        flex-shrink: 2;
    }
}

/* At 960px and below: hide the quick-start dropdown menu */
@media (max-width: 960px) {
    .quick-start-menu {
        display: none !important;
    }
}

/* At 1500px and above: center the nav between brand and actions using equal-flex pillars */
@media (min-width: 1500px) {
    .site-header-brand {
        flex: 1 1 0;
    }
    .site-header-nav {
        flex: 0 0 auto;
        margin-right: 0;
    }
    .header-cat-badges {
        display: none;
    }
    .site-header-actions {
        flex: 1 1 0;
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* At 640px and below: collapse brand → actions gap to zero */
@media (max-width: 640px) {
    .site-header-brand {
        padding-right: 0;
        margin-right: 0;
    }
    .site-header-actions {
        gap: .3rem;
        padding-left: 0;
        margin-left: .3rem;
    }
}

/* At 480px and below: hide the locale/language selector */
@media (max-width: 480px) {
    .site-header-ctrl-form {
        display: none !important;
    }
}

@media (min-width: 768px) { .admin-header__email { display: block; } }
/* Hide the audio + tooltip toggles in the admin header on narrow (mobile) screens */
@media (max-width: 639px) {
    .admin-header .sidebar-audio-toggle,
    .admin-header .site-header-tooltip-toggle,
    .admin-header .admin-header__locale-form { display: none !important; }
}
@media (max-width: 760px) {
    .usm-panel {
        max-width: 95vw;
    }
    .usm-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .pm-image-nav--prev {
        left: 1.5rem;
    }
    .pm-image-nav--next {
        right: 1.5rem;
    }
    .product-image-modal-actions {
        top: 1.5rem;
        right: 1.5rem;
    }
}

/* On small screens sticky thead causes layout issues — revert to normal flow */
@media (max-width: 767px) {
    #catalog-table thead {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 767px) {
    .order-status-filter-bar {
        top: 3rem;
        flex-wrap: nowrap;
        align-items: center;
        gap: .6rem;
    }
    .order-status-filter-select-wrap {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    .order-status-filter-switches .js-order-status-filter {
        display: none;
    }
    .order-status-filter-switches {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
    }
    .admin-product-filter-category-wrap {
        width: 100%;
    }
    .product-filter-bar {
        align-items: flex-start;
    }
    .product-filter-bar .order-status-filter-bar__heading {
        display: none;
    }
    .product-filter-bar .admin-product-filter-category-wrap {
        display: none;
    }
    .product-filter-bar .order-status-filter-switches {
        width: 100%;
        justify-content: flex-start;
        gap: .5rem;
    }
    .order-status-switch {
        white-space: nowrap;
    }
}
@media (min-width: 768px) {
    .back-to-top-shell {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@media (min-width: 768px) {
    #admin-sidebar-toggle { display: none !important; }
}

@media (max-width: 767px) {
    #catalog-list {
        padding: .75rem !important;
    }
}
@media (max-width: 720px) {
    .admin-product-view-top-section {
        min-height: 0;
        padding-right: 0;
    }
    .admin-product-view-hero {
        position: static;
        width: min(100%, 18rem);
        max-width: none;
        margin: 0 0 1rem auto;
    }
}
/* Desktop (≥641px, 2-column grid): left column stays fixed, right column scrolls.
   This replaces the unreliable position:sticky approach on the media column. */
@media (min-width: 641px) {
    #product-modal .product-quick-view-modal-body {
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #product-modal .product-quick-view-modal-body-favourites {
        flex-shrink: 0 !important;
        position: relative !important;
        top: auto !important;
    }
    #product-modal .product-quick-view-modal-layout {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }
    /* Left column: fixed height, no scroll — image + gallery stay in place */
    #product-modal .product-quick-view-modal-media {
        overflow: hidden;
        align-self: stretch;
    }
    /* Right column: scrolls independently */
    #product-modal .product-quick-view-modal-layout > .flex.flex-col {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: none !important;
        padding-bottom: 1rem;
        min-height: 0;
    }
    #product-modal .product-quick-view-modal-layout > .flex.flex-col::-webkit-scrollbar {
        display: none;
    }
}
/* Mobile (≤640px): revert to body scrolling — both columns stacked */
@media (max-width: 640px) {
    #product-modal .product-quick-view-modal-body {
        overflow-y: auto !important;
        display: block !important;
    }
    #product-modal .product-quick-view-modal-layout {
        flex: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    #product-modal .product-quick-view-modal-layout > .flex.flex-col {
        overflow-y: visible !important;
        overflow-x: visible !important;
    }
}
@media (max-width: 640px) {
    #product-modal #pm-comments-list,
    #product-modal #pm-reviews-list {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .cart-quick-add-card {
        padding: .85rem;
    }
    .cart-quick-add-layout {
        grid-template-columns: minmax(0, 1fr) 5.75rem;
        gap: .7rem;
    }
    .cart-quick-add-button {
        grid-column: 1 / -1;
    }
    .cart-quick-add-result {
        grid-template-columns: 2.65rem minmax(0, 1fr);
        min-height: 3.65rem;
        gap: .65rem;
        padding: .52rem .58rem;
    }
    .cart-quick-add-result__image,
    .cart-quick-add-result__placeholder {
        width: 2.65rem;
        height: 2.65rem;
    }
    .cart-quick-add-result__badge {
        grid-column: 2;
        justify-self: start;
        min-width: 0;
        height: 1.35rem;
        margin-top: -.1rem;
    }
    .cart-quick-add-result__meta {
        gap: .3rem;
    }
    .cart-quick-add-result__meta span {
        max-width: 7.5rem;
    }
    .cart-quick-add-options-summary {
        grid-template-columns: 3.75rem minmax(0, 1fr);
        gap: .8rem;
        padding: .72rem;
    }
    .cart-quick-add-options-image,
    .cart-quick-add-options-placeholder {
        width: 3.75rem;
        height: 3.75rem;
    }
    .cart-quick-add-options-footer {
        flex-direction: column-reverse;
    }
    .cart-quick-add-options-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    #product-modal .product-quick-view-modal-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    #product-modal .pm-image-main,
    #product-modal .pm-image-placeholder {
        height: clamp(180px, 32vh, 300px) !important;
    }
    #product-modal.has-gallery .pm-image-main,
    #product-modal.has-gallery .pm-image-placeholder {
        height: clamp(160px, 28vh, 240px) !important;
    }
    #product-modal #pm-gallery {
        max-height: 54px;
    }
    #product-modal #pm-gallery .pm-thumb {
        flex-basis: 62px;
        width: 62px;
        height: 50px;
    }
    .product-quick-view-modal-header,
    .product-quick-view-modal-body,
    .product-quick-view-modal-footer {
        padding: 0.75rem;
    }
    .product-quick-view-modal-footer {
        flex-wrap: wrap;
    }
    .product-quick-view-modal-footer .btn {
        flex: 1 1 calc(50% - .25rem);
        min-width: calc(50% - .25rem);
        max-width: none;
    }
    .product-quick-view-modal-footer .btn:last-child {
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
    }
}

/* ---------- Catalog toolbar ---------- */
/* Single-row layout for view toggle + category filter + search input.
 * `min-width: 0` on the search input lets flex shrink it below its intrinsic
 * size on narrow screens so the whole toolbar stays on one line. */
/* Force the toolbar onto a single row. The search input grows to fill
 * remaining space while the dropdowns keep fixed widths. */
/* On mobile: toolbar wraps so view-toggle stays on row 1 with collapse buttons,
   and the search input fills the full width of row 2. */
@media (max-width: 1023px) {
    /* Two-row layout on mobile:
       Row 1: view-toggle (auto width)
       Row 2: search (100% width) */
    .site-main .catalog-filters-card .catalog-toolbar {
        flex-wrap: wrap;
        row-gap: 0 !important;
    }
    /* Search drops to its own full-width row */
    .site-main .catalog-filters-card .catalog-toolbar .catalog-search-input {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
    }
    /* toolbar-body has no visible children on mobile — hide it so it
       does not steal flex space from the search input */
    .site-main .catalog-filters-card .catalog-toolbar-body {
        display: none !important;
    }
    /* Nollaa/reset button is desktop-only — keep it hidden on mobile */
    .site-main .catalog-filters-card .catalog-toolbar .catalog-reset-mobile {
        display: none !important;
    }
    /* Collapsed filter bar: no border */
    .site-main .catalog-filters-card.is-collapsed {
        border: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        background: transparent !important;
        background-color: rgba(0,0,0,0);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
@media (max-width: 767px) {
    /* Hide price filter pair from the secondary filters on mobile */
    .catalog-secondary-filters > .catalog-toolbar-price-pair {
        display: none !important;
    }
}
@media (min-width: 1024px) {
    .site-main #catalog-filters-card.is-collapsed {
        padding-left: 0 !important;
        transition-property: padding-left, background, border-color, box-shadow, padding-top, padding-bottom;
        transition-duration: 260ms, 520ms, 520ms, 520ms, 520ms, 520ms;
        transition-timing-function: cubic-bezier(.22, 1, .36, 1), linear, linear, linear, linear, linear;
    }
    .site-main #catalog-filters-card.is-collapsed.is-sticky {
        padding-left: 18px !important;
    }
}

@media (max-width: 767px) {
    .pm-nav-btn--prev { left: 4px; }
    .pm-nav-btn--next { right: 4px; }
    .pm-nav-btn { width: 32px; height: 56px; font-size: 22px; }
}

@media (min-width: 1024px) {
    .catalog-secondary-filters {
        align-items: stretch;
        max-height: 18rem;
        opacity: 1;
        margin-top: 0;
        /* No max-height transition — container collapses instantly after the
           two-phase JS animation; animating max-height creates a "dead zone"
           pause before/after the visible content height is reached. */
        transition: margin-top .22s linear;
    }
    /* ---- Per-child fly animation for secondary filters ---- */
    /* Children animate independently: opacity + upward-fly when collapsing. */
    /* Expand stagger: left → right (nth-child 1 appears first). */
    .catalog-secondary-filters > * {
        transition: opacity 0.11s linear, transform 0.2s linear;
        will-change: opacity, transform;
    }
    .catalog-secondary-filters > *:nth-child(1) { transition-delay: 0ms; }
    .catalog-secondary-filters > *:nth-child(2) { transition-delay: 22ms; }
    .catalog-secondary-filters > *:nth-child(3) { transition-delay: 44ms; }
    .catalog-secondary-filters > *:nth-child(4) { transition-delay: 66ms; }
    .catalog-secondary-filters > *:nth-child(5) { transition-delay: 88ms; }
    .catalog-secondary-filters > *:nth-child(6) { transition-delay: 110ms; }
    .catalog-secondary-filters > *:nth-child(7) { transition-delay: 132ms; }
    .catalog-secondary-filters > *:nth-child(8) { transition-delay: 154ms; }
    .catalog-reset-wrap {
        min-height: auto;
    }
    .catalog-collapse-btn-group {
        display: flex;
    }
    .catalog-collapse-btn {
        display: flex;
    }
    .site-main .catalog-filters-card .catalog-collapse-btn-group {
        display: inline-flex;
        height: var(--fb-height);
        align-items: center;
        gap: 0;
    }
    .site-main .catalog-filters-card .catalog-toolbar .catalog-reset-wrap,
    .site-main .catalog-filters-card .catalog-toolbar-body .catalog-reset-wrap {
        display: inline-flex;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: var(--fb-height);
        align-items: center;
    }
    /* Smooth bg/border transition when collapsing the card.
       padding-top/bottom animate for the collapse; horizontal padding is
       driven by JS rAF so it is NOT in this list. */
    .catalog-filters-card {
        transition: background .25s linear, border-color .25s linear, box-shadow .25s linear, padding-top .25s linear, padding-bottom .25s linear;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    .catalog-toolbar-body {
        max-height: 12rem;
        opacity: 1;
        overflow: visible;
        transition: max-height .28s linear, opacity .22s linear;
    }
    /* Full bar collapse (is-collapsed): keep only the view toggle visible */
    .catalog-filters-card.is-collapsed .catalog-toolbar-body {
        max-height: 3rem;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: .5rem;
        flex: 0 0 auto;
        min-width: 0;
    }
    .catalog-filters-card.is-collapsed .catalog-toolbar-body > *:not(.view-toggle) {
        display: none !important;
    }
    .catalog-filters-card.is-collapsed .catalog-toolbar-body .view-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }
    /* Hide the search input too — it sits outside toolbar-body but still takes space */
    /* Storefront (.site-main) keeps it visible at 134px; admin hides it */
    .site-main .catalog-filters-card.is-collapsed .catalog-search-input {
        display: block !important;
    }
    .catalog-filters-card.is-collapsed .catalog-secondary-filters {
        max-height: 0;
        margin-top: -.25rem;
        pointer-events: none;
    }
    /* Secondary-only collapse (secondary-collapsed): hide just secondary filters */
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters {
        max-height: 0;
        pointer-events: none;
    }
    /* Children fly up toward toolbar when collapsed; stagger reversed right → left */
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *,
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > * {
        opacity: 0;
        transform: translateY(-13px) scale(0.382);
    }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(1),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(1) { transition-delay: 77ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(2),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(2) { transition-delay: 66ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(3),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(3) { transition-delay: 55ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(4),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(4) { transition-delay: 44ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(5),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(5) { transition-delay: 33ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(6),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(6) { transition-delay: 22ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(7),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(7) { transition-delay: 11ms; }
    .catalog-filters-card.secondary-collapsed .catalog-secondary-filters > *:nth-child(8),
    .catalog-filters-card.is-collapsed .catalog-secondary-filters > *:nth-child(8) { transition-delay: 0ms; }

    /* ---- Suppress child transitions for instant init/resize/skipAnimation collapse ---- */
    .catalog-filters-card.no-secondary-animation .catalog-secondary-filters > * {
        transition: none !important;
        animation: none !important;
    }

    /* ---- Two-phase secondary collapse: children fly up first, container then snaps ---- */
    /* secondary-is-collapsing: JS adds this, children animate; then JS swaps to secondary-collapsed */
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > * {
        opacity: 0;
        transform: translateY(-13px) scale(0.87);
    }
    /* Right → left stagger: rightmost children depart first */
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(1) { transition-delay: 154ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(2) { transition-delay: 132ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(3) { transition-delay: 110ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(4) { transition-delay:  88ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(5) { transition-delay:  66ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(6) { transition-delay:  44ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(7) { transition-delay:  22ms; }
    .catalog-filters-card.secondary-is-collapsing .catalog-secondary-filters > *:nth-child(8) { transition-delay:   0ms; }

    /* secondary-is-expanding: JS adds this after removing secondary-collapsed */
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > * {
        animation: filterFlyInFromAbove 0.14s linear both;
        transform: translateY(13px) scale(1.1);
    }
    /* Left → right stagger: leftmost children appear first */
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(1) { animation-delay:   0ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(2) { animation-delay:  22ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(3) { animation-delay:  44ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(4) { animation-delay:  66ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(5) { animation-delay:  88ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(6) { animation-delay: 110ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(7) { animation-delay: 132ms; }
    .catalog-filters-card.secondary-is-expanding .catalog-secondary-filters > *:nth-child(8) { animation-delay: 154ms; }

    .catalog-filters-card.secondary-collapsed {
        margin-bottom: .1rem !important;
    }
    .catalog-filters-card.secondary-collapsed .catalog-toolbar {
        margin-bottom: 0;
    }
    /* Laajenna/Kutista arrow: default = down (↓), expanded = up (↑) */
    .catalog-filters-card:not(.secondary-collapsed) .catalog-filters-toggle-icon {
        transform: rotate(180deg);
    }
    .catalog-filters-toggle-icon {
        transform: rotate(0deg);
        transition: transform .22s linear;
    }
    /* Fully collapsed: transparent strip — only the tiny arrow button is visible */
    .catalog-filters-card.is-collapsed {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
        margin-bottom: .5rem !important;
        /* Shrink the card to only wrap the visible buttons */
        width: fit-content !important;
        max-width: fit-content !important;
        min-width: 0 !important;
    }
    .catalog-filters-card.is-collapsed .catalog-toolbar {
        margin-bottom: 0;
        gap: .1rem;
        /* Let the toolbar shrink to its content rather than stretching full width */
        display: inline-flex !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }
    /* Keep the reset button visible when collapsed */
    .catalog-filters-card.is-collapsed .catalog-reset-mobile {
        display: inline-flex !important;
        flex: 0 0 auto !important;
    }
    /* Keep the collapse button fully opaque white when the card is transparent */
    .catalog-filters-card.is-collapsed .catalog-collapse-btn {
        background: rgba(255, 255, 255, 1) !important;
        border-color: rgba(156, 163, 175, .45) !important;
    }
    body.theme-dark .catalog-filters-card.is-collapsed .catalog-collapse-btn {
        background: rgba(30, 41, 59, 1) !important;
        border-color: rgba(148, 163, 184, .4) !important;
    }
    /* Floating arrow: slight lift above the filter card when collapsed */
    .catalog-filters-card.is-collapsed .catalog-collapse-btn {
        transform: translateY(1px);
        transition: background .17s linear, border-color .17s linear, box-shadow .17s linear, transform .26s linear;
    }
    .catalog-filters-card:not(.is-collapsed) .catalog-collapse-btn {
        transform: translateY(0);
        transition: background .17s linear, border-color .17s linear, box-shadow .17s linear, transform .26s linear;
    }

    .catalog-filters-card:not(.is-collapsed) {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    .admin-page-shell .catalog-filters-card.is-collapsed.sticky.is-sticky {
        padding-left: 4rem !important;
        padding-right: 1rem !important;
    }
    .catalog-filters-card:not(.is-collapsed).sticky.is-sticky {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
    .catalog-filters-card.is-collapsed #catalog-filters-toggle.catalog-collapse-btn:hover,
    .catalog-filters-card.is-collapsed #catalog-collapse-btn.catalog-collapse-btn:hover,
    .catalog-filters-card:not(.is-collapsed) #catalog-filters-toggle.catalog-collapse-btn:hover,
    .catalog-filters-card:not(.is-collapsed) #catalog-collapse-btn.catalog-collapse-btn:hover {
        background-color: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 4px 12px rgba(156, 163, 175, 0.32) !important;
        color: black !important;
    }

    /* ---- Primary bar: per-child fly transition (base state) ---- */
    /* Storefront search field: always fully opaque — no fade-in or fade-out.
       Width grows/shrinks with the card's max-width animation; no transition needed. */
    .catalog-filters-card .catalog-search-input {
        transition: none !important;
    }
    /* Collapsed sticky changes bypass the JS sticky-width rAF path, so let the
       search field ease between its base and sticky CSS widths directly. */
    .site-main #catalog-filters-card.is-collapsed .catalog-search-input {
        transition: width 260ms cubic-bezier(.22, 1, .36, 1),
                    min-width 260ms cubic-bezier(.22, 1, .36, 1),
                    max-width 260ms cubic-bezier(.22, 1, .36, 1) !important;
    }

    /* ---- is-collapsing: items fly left toward search bar then collapse ---- */

    /* Right-to-left stagger so farthest items depart first */
    .catalog-filters-card.is-collapsing .catalog-toolbar-body > *:nth-last-child(1) { transition-delay: 0ms !important; }
    .catalog-filters-card.is-collapsing .catalog-toolbar-body > *:nth-last-child(2) { transition-delay: 22ms !important; }
    .catalog-filters-card.is-collapsing .catalog-toolbar-body > *:nth-last-child(3) { transition-delay: 44ms !important; }
    .catalog-filters-card.is-collapsing .catalog-toolbar-body > *:nth-last-child(4) { transition-delay: 66ms !important; }
    /* Search field stays fully visible while other items fly out */
    .catalog-filters-card.is-collapsing .catalog-search-input {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        transition-delay: 0ms !important;
    }

    /* ---- is-expanding: items fly in from the search bar (left) ---- */
    /* JS adds this simultaneously with removing is-collapsed. */
    .catalog-filters-card.is-expanding .catalog-toolbar-body > *,
    .catalog-filters-card.is-expanding .catalog-search-input {
        display: flex !important;           /* un-hide from is-collapsed display:none */
        animation: filterFlyIn 0.88s cubic-bezier(0.2, 1.34, 0.36, 1) both;
    }
    /* Search bar: flies from its collapsed left position all the way to the right */
    .catalog-filters-card.is-expanding #catalog-search-wrap {
        animation: filterSearchFlyRight 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 40ms;
    }
    .catalog-filters-card.is-expanding .catalog-search-input               { animation-delay: 0ms; }
    /* Search field exception: no fly-in animation on the input itself — the wrapper animates */
    .catalog-filters-card.is-expanding .catalog-search-input {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* Toolbar items fly in left → right from the search bar */
    .catalog-filters-card.is-expanding .catalog-toolbar-body > *:nth-child(1) { animation-delay: 64ms; }
    .catalog-filters-card.is-expanding .catalog-toolbar-body > *:nth-child(2) { animation-delay: 120ms; }
    .catalog-filters-card.is-expanding .catalog-toolbar-body > *:nth-child(3) { animation-delay: 176ms; }
    .catalog-filters-card.is-expanding .catalog-toolbar-body > *:nth-child(4) { animation-delay: 232ms; }
    /* Search wrap flies in from right when collapsing (is-collapsing added temporarily by JS after is-collapsed) */
    .catalog-filters-card.is-collapsed.is-collapsing #catalog-search-wrap {
        animation: filterSearchFlyLeft 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}
@media (max-width: 1299px) {
    #catalog-sort {
        display: none;
    }
}
@media (max-width: 1159px) {
    .catalog-subcategory-wrap {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .catalog-category-wrap { display: none; }
    .catalog-subcategory-wrap { display: none !important; }
    #catalog-sort { display: none; }
    .catalog-price-filter { display: none; }
    .catalog-checkbox-filter { display: none; }
    .catalog-reset-wrap { display: none; }
    .catalog-subcategory-chips {
        gap: .5rem;
    }
    .catalog-subcategory-chip {
        width: 100%;
        justify-content: flex-start;
    }
}
/* When collapsed, the toolbar-body shrinks to zero so only the arrow +
   always-visible search remain in the row. */
@media (min-width: 1024px) {
    .admin-order-filters-card.is-collapsed .catalog-toolbar-body,
    .admin-category-filters-card.is-collapsed .catalog-toolbar-body,
    .admin-product-filters-card.is-collapsed .catalog-toolbar-body,
    .catalog-filters-card:not(.admin-order-filters-card):not(.admin-category-filters-card):not(.admin-product-filters-card).is-collapsed .catalog-toolbar-body {
        max-width: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        flex: 0 0 0;
        display: none !important;
    }
    .admin-order-filters-card.is-collapsed .admin-order-secondary-filters,
    .admin-order-filters-card.secondary-collapsed .admin-order-secondary-filters {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        pointer-events: none;
        transition: none; /* container collapses instantly; children animate via JS two-phase */
    }
    .admin-order-secondary-filters {
        max-height: 20rem;
        overflow: visible;
        transition: none;
    }
}
@media (max-width: 767px) {
    body {
        background-attachment: scroll;
    }

    body::before,
    body::after {
        opacity: 0.55;
    }

    .site-header-panel {
        padding-top: .8rem;
        padding-bottom: .8rem;
    }

    .site-header-inner {
        width: 100%;
        gap: .9rem;
    }

    /* On mobile the nav is hidden, so push actions to the right edge with margin-left:auto
       and release the fixed 38.2% basis so it only takes the space it needs. */
    .site-header-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .site-header-account-link {
        display: none;
    }

    .site-header-tooltip-toggle {
        display: none;
    }

    .site-header-cart-link {
        padding-inline: 1rem !important;
        white-space: nowrap;
    }

    .site-main {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .site-footer {
        padding-left: .9rem;
        padding-right: .9rem;
        padding-bottom: 1.25rem;
    }

}


@media (max-width: 767px) {
    .shop-hero-section {
        padding: 1.35rem 1.1rem;
        border-radius: 1.25rem;
    }

    .shop-hero-grid {
        gap: 1.25rem;
    }

    .shop-hero-section h1 {
        font-size: clamp(2rem, 9vw, 2.7rem);
        line-height: 1.02;
    }

    .shop-hero-section p {
        max-width: none;
    }

    .hero-static-btns {
        flex-direction: column;
        align-items: stretch;
    }

    /* Mobile: revert On-Sale button to flexbox flow layout */
    .hero-sale-wrap {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 0;
        margin-left: .9rem !important;
        margin-top: .15rem;
        display: inline-flex;
    }

    .hero-static-btns .btn {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        max-width: 13rem;
        padding: .6rem .95rem;
        font-size: .95rem;
    }

    .featured-hero-modal-panel {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        max-height: calc(100vh - 1rem);
        padding: .75rem;
        display: flex;
        flex-direction: column;
    }

    .featured-hero-modal-status {
        min-height: 18rem;
        padding-inline: .5rem;
    }

    /* On mobile: single-card view — collapse the 3-col grid to 1 col,
       hide side slides so the centre card takes full width */
    .featured-hero-modal-track {
        grid-template-columns: 1fr;
        gap: 0;
        perspective: none;
    }
    .featured-hero-modal-slide--prev,
    .featured-hero-modal-slide--next {
        display: none;
    }
    /* Active card: no 3-D tilt, full width, centred */
    .featured-hero-modal-slide--active {
        opacity: 1;
        transform: none;
        box-shadow:
            0 0 28px 6px rgba(56, 139, 253, 0.40),
            0 16px 40px rgba(0, 0, 0, 0.30);
    }
    /* Also reset the settle/appear/enter animations so they don't
       try to position cards that are now off-screen */
    .featured-hero-modal-slide--settle-prev,
    .featured-hero-modal-slide--settle-next {
        display: none;
    }
    .featured-hero-modal-slide--enter-right,
    .featured-hero-modal-slide--enter-left {
        animation: fhm-enter-right .38s cubic-bezier(.22, 1, .36, 1) both;
    }

    .featured-hero-modal-nav {
        width: 2.35rem;
        min-width: 2.35rem;
        height: 2.35rem;
        min-height: 2.35rem;
        font-size: 1.35rem;
    }

    .featured-hero-modal-nav--prev {
        left: .15rem;
    }

    .featured-hero-modal-nav--next {
        right: .15rem;
    }

    /* Header: row 1 = title + controls + close (order 1)
                row 2 = category select and/or sort pills (order 2)
       This prevents the header from growing beyond two rows regardless of
       how many sort pills or category options are present. */
    .featured-hero-modal-header {
        flex-wrap: wrap;
        flex-shrink: 0;
        overflow: hidden;
    }
    .featured-hero-modal-title-wrap {
        flex: 1 1 auto;
        order: 1;
    }
    .fh-header-controls {
        order: 1;
        flex-shrink: 0;
    }
    .featured-hero-modal-header .modal-close {
        order: 1;
        flex-shrink: 0;
    }
    /* Category select filter — row 2, takes its natural width */
    .fh-cat-select-wrap {
        order: 2;
        flex: 0 0 auto;
        margin-top: .3rem;
        padding-top: .3rem;
        border-top: 1px solid rgba(142, 174, 226, 0.15);
    }
    /* Sort-pills wrap — row 2, fills remaining space */
    .fh-cat-pills-wrap {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        margin-top: .3rem;
        padding-top: .3rem;
        border-top: 1px solid rgba(142, 174, 226, 0.15);
    }
    /* Pills inside the wrap — reset order; fill the wrap horizontally */
    .featured-hero-cat-pills {
        order: 0;
        flex: 1 1 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .fh-cat-pill {
        flex-shrink: 0;
        font-size: .68rem;
        padding: .18rem .48rem;
    }
    /* Inner scroll wrapper: fills remaining panel height, scrolls vertically.
       Panel stays overflow:hidden so the orbs can't inflate scrollHeight. */
    .fh-content-scroll {
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shop-hero-visual {
        order: -1;
    }

    .shop-hero-flag {
        width: min(70vw, 15rem);
        height: min(70vw, 15rem);
    }

    #categories,
    #catalog,
    #newsletter {
        margin-bottom: 1.1rem;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #categories h2,
    #catalog h2,
    #newsletter h2 {
        font-size: 1.45rem;
        line-height: 1.15;
    }

    .category-header-controls {
        display: none !important;
    }

    .category-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .category-chip {
        padding: 1rem .8rem !important;
        min-width: 0;
    }

    .category-chip > div:first-child {
        font-size: .96rem;
        line-height: 1.2;
    }

    .category-chip > div + div {
        margin-top: .35rem;
        font-size: .72rem;
        line-height: 1.35;
    }

    .category-chips-toggle {
        width: 100%;
        min-width: 0;
    }

    .catalog-heading-main {
        flex-wrap: wrap;
    }

    .catalog-heading-reset {
        width: 100%;
        justify-content: center;
    }

    .category-selection-overlay {
        flex-direction: column;
        align-items: stretch;
        top: calc(var(--sticky-header-offset, 96px) - 2.35rem);
        left: 50%;
        width: calc(100vw - 1.5rem);
        min-width: 0;
    }

    .category-selection-overlay__value {
        max-width: none;
        white-space: normal;
    }

    .category-selection-overlay__controls {
        grid-template-columns: 1fr;
    }

    .category-selection-overlay__jump,
    .category-selection-overlay__clear {
        width: 100%;
        min-width: 0;
    }

    #catalog {
        opacity: 1 !important;
        transform: none !important;
    }

    .catalog-filters-card {
        position: static;
        padding: 1rem;
        margin-bottom: .9rem;
        border-radius: 1.15rem;
    }

    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        margin-bottom: .75rem;
    }

    #catalog-filters-card.catalog-filters-card {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .catalog-toolbar-body {
        flex-wrap: wrap;
        gap: .6rem;
    }

    /* Row 1: view toggle — full width */
    .catalog-toolbar-body .catalog-filter-toggle {
        order: 1;
        width: 100%;
        flex: 1 1 100%;
    }

    /* Hide everything else on mobile */
    .catalog-toolbar-body .catalog-category-wrap,
    .catalog-toolbar-body .catalog-subcategory-wrap,
    .catalog-toolbar-body #catalog-filters-toggle {
        display: none !important;
    }

    .catalog-filter-toggle {
        justify-content: stretch;
    }

    .view-toggle {
        width: 100%;
    }

    .view-toggle-btn {
        flex: 1 1 0%;
        justify-content: center;
    }

    .admin-product-filters-card .catalog-toolbar-body .catalog-category-wrap,
    .admin-product-filters-card .catalog-toolbar-body .catalog-subcategory-wrap,
    .admin-product-filters-card .catalog-toolbar-body .admin-product-sort-select {
        display: block !important;
    }

    .admin-product-filters-card .catalog-toolbar-body .catalog-category-wrap,
    .admin-product-filters-card .catalog-toolbar-body .catalog-subcategory-wrap,
    .admin-product-filters-card .catalog-toolbar-body .admin-product-sort-select,
    .admin-product-filters-card .catalog-toolbar-body .admin-product-search-input,
    .admin-product-filters-card .catalog-toolbar-body .admin-product-price-pair,
    .admin-product-filters-card .catalog-toolbar-body .admin-product-secondary-sort-wrap,
    .admin-product-filters-card .admin-product-secondary-filters .admin-product-secondary-switch {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .admin-product-filters-card .catalog-price-filter,
    .admin-product-filters-card .catalog-checkbox-filter {
        display: block !important;
    }

    .admin-product-filters-card .catalog-reset-wrap {
        display: inline-flex !important;
    }

    .admin-order-filters-card .catalog-toolbar-body .admin-order-search-input,
    .admin-order-filters-card .catalog-toolbar-body .order-status-filter-select-wrap {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    .admin-order-filters-card .catalog-toolbar-body .order-status-filter-select-wrap .select {
        width: 100%;
    }

    .admin-order-filters-card .catalog-reset-wrap {
        display: inline-flex !important;
    }

    .admin-product-secondary-filters {
        grid-template-columns: 1fr;
    }

    .report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    .report-summary-card {
        min-height: 5.6rem;
        padding: .95rem .8rem !important;
    }

    .report-summary-card .text-xs {
        font-size: .68rem;
        line-height: 1.2;
    }

    .report-summary-card .text-2xl {
        font-size: 1.35rem;
        line-height: 1.1;
        margin-top: .35rem;
    }

    .report-page-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
        margin-top: 1rem;
    }

    .report-card {
        padding: 1rem !important;
        border-radius: 1rem;
    }

    .report-card-header {
        margin-bottom: .85rem;
        gap: .75rem;
    }

    .report-card-header h2 {
        font-size: 1rem;
        line-height: 1.2;
        margin-bottom: .2rem;
    }

    .report-card-header p {
        font-size: .8rem;
        line-height: 1.35;
    }

    .report-card-actions {
        width: 100%;
        justify-content: stretch;
    }

    .report-card-actions .btn {
        flex: 1 1 calc(33.333% - .35rem);
        min-width: 0;
        padding-inline: .55rem !important;
    }

    .report-chart-shell--md {
        height: 15rem;
    }

    .report-chart-shell--lg {
        height: 16.5rem;
    }

    .report-chart-shell--xl {
        height: 18.5rem;
    }

    .report-summary-modal-panel {
        width: min(94vw, 720px);
        max-height: min(92vh, 900px);
        padding: 1rem;
    }

    .report-zoom-modal-panel {
        width: min(96vw, 1600px);
        height: min(94vh, 1040px);
        padding: 1rem;
    }

    .report-zoom-modal-panel > div:first-child {
        flex-wrap: wrap;
        gap: .75rem;
        margin-bottom: .85rem;
    }

    .report-zoom-modal-panel > div:first-child > div:last-child {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .report-zoom-modal-panel > div:first-child > div:last-child .btn,
    .report-zoom-modal-panel > div:first-child > div:last-child .modal-close {
        flex: 1 1 0;
        min-width: 0;
    }

    .report-zoom-stage {
        min-height: 280px;
    }

    .view-toggle-btn span {
        display: inline !important;
    }

    #catalog-results-meta {
        padding-inline: .15rem;
        margin-bottom: .85rem;
    }

    #catalog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .9rem;
    }

    .product-card {
        padding: 1rem;
        border-radius: 1.15rem;
    }

    .product-card h3 {
        font-size: 1.02rem;
    }

    .product-card .btn {
        flex-shrink: 0;
    }

    /* Full-width action buttons on mobile — only cart/review row (rows 3+) */
    #catalog-grid .product-card .btn-card-action {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
        height: auto !important;
        min-height: 2.6rem !important;
        max-height: none !important;
        padding: .55rem .75rem !important;
        font-size: .875rem !important;
    }
    /* Rows 1 and 2 stay 50/50 on mobile */
    #catalog-grid .product-card .js-product-page-link,
    #catalog-grid .product-card .js-product-view,
    #catalog-grid .product-card .js-product-sales,
    #catalog-grid .product-card .btn-card-icon {
        flex: 1 1 0 !important;
        width: auto !important;
    }
    /* Icon group wrapper stays flex-1 so it holds half the row */
    #catalog-grid .product-card .flex.gap-1.flex-1 {
        flex: 1 1 0;
        min-width: 0;
    }

    .shop-newsletter-form {
        flex-direction: column;
    }

    .shop-newsletter-form .btn {
        width: 100%;
    }

    .back-to-top-shell {
        right: .75rem;
        bottom: .75rem;
    }

    .back-to-top-btn {
        padding: .52rem .72rem .52rem .6rem;
    }

    .back-to-top-btn__label {
        display: none;
    }

    .back-to-top-dismiss {
        width: 1.9rem;
        height: 1.9rem;
    }
}

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 768px) {
    .interaction-report-range__link {
        flex: 1 1 calc(33.333% - .5rem);
        min-width: 0;
    }
    .interaction-heatmap {
        min-width: 760px;
    }
}

@media (max-width: 760px) {
    .pf-video-main-row {
        grid-template-columns: 1fr;
    }
    .pf-video-preview {
        width: 100%;
    }
    .pf-video-actions {
        max-width: none;
        justify-content: flex-start;
    }
    .pf-video-actions .btn {
        flex: 1 1 auto;
    }
    .pf-primary-image-meta-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .product-form-modal-header,
    .product-form-modal-body,
    .product-form-modal-footer,
    .admin-form-modal-header,
    .admin-form-modal-body,
    .admin-form-modal-footer,
    .order-modal-header,
    .order-modal-body,
    .order-modal-footer,
    .admin-view-modal-header,
    .admin-view-modal-body,
    .admin-view-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .admin-view-audit {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .account-page-shell {
        display: grid;
        gap: 1rem;
    }
    .account-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
        margin-bottom: 0;
    }
    .account-page-back-btn {
        align-self: flex-end;
    }
    .account-page-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .account-page-grid > * {
        grid-column: auto !important;
    }
    .account-card,
    .account-subcard {
        padding: 1rem;
    }
    .account-card-header,
    .account-subcard-header {
        flex-direction: column;
        align-items: stretch;
    }
    .account-collapsible-heading {
        align-items: flex-start;
    }
    .account-collapsible-header,
    .account-collapsible-actions {
        align-items: stretch;
    }
    .account-collapsible-header .account-card-toggle {
        margin-left: 0;
    }
    .account-header-thumbs {
        flex-wrap: wrap;
    }
    .account-collapsible-card.is-collapsed .account-header-thumbs {
        max-width: 100%;
    }
    .account-header-thumb-btn {
        width: 3.5rem;
        height: 3.5rem;
        flex-basis: 3.5rem;
    }
    .account-collapsible-actions {
        width: 100%;
    }
    .account-card-toggle {
        margin-left: auto;
    }
    .account-profile-image-actions {
        width: 100%;
        grid-template-columns: 5rem 1.75rem;
    }
    .account-inline-form,
    .account-save-cart-form .input,
    .account-save-cart-form button,
    .account-draft-actions form,
    .account-draft-actions form .btn {
        width: 100%;
    }
    .account-autosave-form {
        justify-content: space-between;
    }
    .account-autosave-form__label {
        max-width: none;
        text-align: left;
    }
    .account-draft-actions,
    .account-saved-cart-actions,
    .account-purchased-product-actions {
        display: grid;
        gap: .45rem;
    }
    .account-profile-more-icon {
        flex-shrink: 0;
        width: 1.5rem !important;
    }
    .account-saved-cart-actions > *,
    .account-purchased-product-actions > * {
        justify-self: stretch;
    }
    .account-saved-cart-actions .btn,
    .account-purchased-product-actions .btn {
        width: 100%;
    }
    .account-order-actions {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
    .account-order-actions__row {
        display: contents;
    }
    .account-order-actions__row > * {
        flex: 1 1 100%;
    }
    .account-order-actions__row .btn {
        width: 100%;
    }
    .account-table-actions-cell {
        text-align: left !important;
    }
    .account-purchased-product-cell {
        min-width: 12rem;
        gap: .65rem;
    }
    .account-purchased-product-cell__image,
    .account-purchased-product-cell__placeholder {
        width: 2.7rem;
        height: 2.7rem;
        flex-basis: 2.7rem;
    }
    .account-table-shell {
        margin-inline: -.15rem;
        padding-bottom: .2rem;
    }
    .account-table-shell--saved-carts table {
        min-width: 40rem;
    }
    .account-table-shell--purchased table {
        min-width: 54rem;
    }
    .account-table-shell--orders table {
        min-width: 70rem;
    }
    .account-page-shell .dataTables_wrapper .datatable-toolbar,
    .account-page-shell .dataTables_wrapper .datatable-footer,
    .account-page-shell .dataTables_wrapper .datatable-toolbar__left,
    .account-page-shell .dataTables_wrapper .datatable-toolbar__right {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .account-page-shell .dataTables_wrapper .dt-buttons {
        width: 100%;
        flex-wrap: wrap;
    }
    .account-page-shell .dataTables_wrapper .dt-button,
    .account-page-shell .dataTables_wrapper button.dt-button,
    .account-page-shell .dataTables_wrapper div.dt-button,
    .account-page-shell .dataTables_wrapper a.dt-button {
        flex: 1 1 auto;
        text-align: center;
    }
    .account-page-shell .dataTables_wrapper .dataTables_filter,
    .account-page-shell .dataTables_wrapper .dataTables_length {
        width: 100%;
    }
    .account-page-shell .dataTables_wrapper .dataTables_filter input,
    .account-page-shell .dataTables_wrapper .dataTables_length select,
    .account-purchased-products-toolbar-filter,
    .account-orders__filter-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .account-purchased-products-toolbar-filters {
        margin-left: 0;
        width: 100%;
        gap: .5rem;
    }
    .account-page-shell .account-purchased-products-toolbar-filters,
    .account-page-shell .account-orders thead tr.account-orders__filters {
        display: none !important;
    }
    .account-orders thead tr.account-orders__filters th {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .audit-change-card__body {
        grid-template-columns: 1fr;
    }
}
/* Responsive */
@media (max-width: 1024px) {
    .admin-sf-nav { width: 10.5rem; }
    .admin-sf-row__control { width: 14rem; }
}
@media (max-width: 820px) {
    .admin-sf-nav { display: none; }
    .admin-sf-layout { display: block; }
    .admin-sf-row {
        flex-direction: column;
        gap: 0.45rem;
    }
    .admin-sf-row__control { width: 100%; }
    .admin-sf-row--toggle {
        flex-direction: row;
        align-items: center;
    }
    .admin-sf-row--toggle .admin-sf-row__control { width: auto; }
}
@supports (background: -webkit-named-image(i)) {
/* Safari: slightly narrower sort and price fields to fit the toolbar */
body main.site-main .catalog-filters-card#catalog-filters-card {
    --catalog-sort-base-width: 150;
    --catalog-sort-sticky-width: 150;
    --catalog-price-base-width: 60;
    --catalog-price-sticky-width: 60;
  }
body main.site-main section#catalog .catalog-filters-card.sticky#catalog-filters-card #catalog-min-price,
body main.site-main section#catalog .catalog-filters-card.sticky#catalog-filters-card #catalog-max-price {
    width: calc(var(--catalog-price-base-width) * 1px) !important;
    min-width: calc(var(--catalog-price-base-width) * 1px) !important;
    max-width: calc(var(--catalog-price-base-width) * 1px) !important;
}
body main.site-main section#catalog .catalog-filters-card.sticky.is-sticky#catalog-filters-card #catalog-min-price,
body main.site-main section#catalog .catalog-filters-card.sticky.is-sticky#catalog-filters-card #catalog-max-price {
    width: calc(var(--catalog-price-sticky-width) * 1px) !important;
    min-width: calc(var(--catalog-price-sticky-width) * 1px) !important;
    max-width: calc(var(--catalog-price-sticky-width) * 1px) !important;
}
body main.site-main section#catalog .catalog-filters-card.sticky.is-sticky-animating#catalog-filters-card #catalog-min-price,
body main.site-main section#catalog .catalog-filters-card.sticky.is-sticky-animating#catalog-filters-card #catalog-max-price {
    width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    min-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    max-width: var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) !important;
    flex: 0 0 auto !important;
    transition: none !important;
}
body main.site-main section#catalog .catalog-filters-card.sticky.is-sticky-animating#catalog-filters-card .catalog-toolbar-price-pair {
    flex: 0 0 calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    min-width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    max-width: calc(var(--catalog-price-width, calc(var(--catalog-price-sticky-width) * 1px)) * 2 + 1px) !important;
    transition: none !important;
}
}@media (max-width: 480px) { .thumb-settings-grid { grid-template-columns: 1fr; } }
@layer theme {
    :root,:host {
        --default-transition-duration: .025s !important;
    }
}

/* Responsive: stack to 2 cols on narrow screens */
@media (max-width: 600px) {
    .fav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .fav-card__name { font-size: 0.78rem; }
    .fav-card__price { font-size: 0.88rem; }
}
@media (max-width: 380px) {
    .fav-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .fav-layout { flex-direction: column; }
    .fav-layout__table { flex: none; width: 100%; position: static; max-height: none; }
}
@media (max-width: 480px) {
    #hero-featured-modal.modal-backdrop {
        padding: 0 !important;
        align-items: flex-end;
    }
    .featured-hero-modal-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 99vh;
        max-height: 99vh;
        border-radius: 1.25rem 1.25rem 0 0 !important;
        padding: .65rem .6rem .9rem !important;
    }
    .featured-hero-modal-title {
        font-size: 1rem;
    }
    .featured-hero-modal-counter {
        font-size: .75rem;
    }
    .featured-hero-modal-nav {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        font-size: 1.15rem;
    }
    .featured-hero-modal-viewport {
        padding: .25rem 0 .4rem;
    }
    .featured-hero-modal-status {
        min-height: 14rem;
    }
}
/* ── Category chips: 6 per row on md+ ──────────────────────────────────── */
@media (min-width: 768px) {
    #category-chips-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
/* ── Hero flag: golden-ratio horizontal on large desktop (≥1440px) ───────── */
/* Flag centre at φ × grid width (≈ 61.8 %). Width = 23.6 % → left edge lands
   at 50 % of grid. top:0 aligns flag top with grid top (section padding-top = φ² 2.618rem). */
@media (min-width: 1440px) {
    .shop-hero-visual {
        position: absolute;
        left: 61.8%;
        top: 0;
        width: 23.6%;
    }
    .shop-hero-flag { width: 100%; }
}
/* ── Hero flag: shifted right on mid-desktop (1024–1439px) ───────────────── */
/* Extra rightward offset keeps the flag clear of the h1 headline at narrower
   desktop widths where the text column is wider relative to the viewport. */
@media (min-width: 1024px) and (max-width: 1439px) {
    .shop-hero-visual {
        position: absolute;
        left: 65%;
        top: 0;
        width: 21%;
    }
    .shop-hero-flag { width: 100%; }
}
/* ── Hero layout: golden-ratio spacing, desktop ≥1024px ───────────────── */
/* padding-top φ² (2.618rem ≈ 42px) + --focal-top 261px = 303px = 490px × φ ✓ */
/* Content shifted right by φ (1.618rem) from grid left edge.                 */
@media (min-width: 1024px) {
    .shop-hero-section {
        padding: 2.618rem;
    }
    .shop-hero-content {
        align-self: center;
        padding-top: 1.618rem;
        padding-left: 1.618rem;
    }
}
/* ── Hero static buttons: same height as animated focal buttons ─────────── */
/* Animated buttons centre at --focal-top (261 px from grid top). Ostoksille  */
/* top: 240 px → centre 261 px — same vertical level as animated buttons.     */
/* Additional buttons (newsletter, favourites) follow in the flex column.     */
@media (min-width: 1024px) {
    .hero-static-btns {
        position: absolute;
        left: 1.618rem;
        top: 240px;
        z-index: 3;
    }
}
@media (max-width: 767px) {
    .cat-page-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cat-vp-img-stage { width: 100%; height: 220px; }
    .cat-vp-gallery   { max-width: 100%; }
}

@media (max-width: 900px) {
    .cat-page-layout {
        grid-template-columns: 1fr;
    }

    .cat-page-hero {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* Restore back button text and shape on smaller screens */
    .cat-page-back {
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        border-radius: 1px !important;
        padding: 0.3rem 0.75rem !important;
        gap: 0.35rem;
    }

    .cat-page-back > span:last-child {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        margin: 0;
        border: 0;
    }

    .cat-page-heading {
        column-gap: 1rem;
    }

    .cat-page-tree-panel {
        position: relative;
        top: auto;
        max-height: none;
    }

    .catpage-cart-card {
        position: static;
        width: auto;
        margin: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHASE 2 — TABLET MEDIA QUERIES (Desktop template, 768 – 1023px portrait
   tablet viewports). Phones (< 768px) use the mobile-only /m/* templates.
   Wide tablets / small desktops (1024 – 1279px) use the desktop layout
   with light tweaks under the second block below.

   Rules here intentionally come last so they win over the existing
   max-width: 1023px mobile-pattern blocks earlier in the file.
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {

    /* ── Filter toolbar: re-enable the toolbar body that the mobile
         block (max-width: 1023px) hides. Allow it to wrap to a second
         row instead of forcing a single line. */
    .site-main .catalog-filters-card .catalog-toolbar-body {
        display: flex !important;
        flex-wrap: wrap;
        gap: .5rem;
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0;
        margin-top: .35rem;
    }
    .site-main .catalog-filters-card .catalog-toolbar-body > * {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
    }
    /* Reset button stays visible on tablets */
    .site-main .catalog-filters-card .catalog-toolbar .catalog-reset-mobile {
        display: inline-flex !important;
    }
    /* Search bar still spans the full first row but no longer the only row */
    .site-main .catalog-filters-card .catalog-toolbar .catalog-search-input {
        flex: 1 1 calc(100% - 12rem) !important;
        min-width: 0 !important;
    }

    /* ── Category chips grid: 6-col is too cramped at tablet portrait,
         force a 4-col layout that keeps the golden-ratio expansion happy. */
    #category-chips-grid.category-chips.grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* Catalog grid: 3 col is fine at md, but ensure card density is OK */
    #catalog-grid {
        gap: 1rem;
    }

    /* Hero section: stack the title/CTA column above the side imagery */
    .shop-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .shop-hero-grid > * {
        min-width: 0;
    }
    /* Hero quick-action buttons keep enough breathing room around the
       starburst when the row gets tight */
    .hero-sale-wrap   { margin-left: .9rem !important; }
    .hero-new-wrap    { margin-left: .9rem !important; }
    /* ── Hero flag: two-row layout at tablet ─────────────────────────────── */
    /* At 768–1023 px the grid is 1-column; the flag flows in a second row    */
    /* below the text (no absolute positioning at this range). Size it so it  */
    /* stays proportional without filling the full column width.              */
    .shop-hero-flag {
        width: min(50vw, 18rem);
        height: min(50vw, 18rem);
    }

    /* ── Product modal panel: cap width so it doesn't bleed to the edges
         on tablet portrait, but stay roomier than mobile. */
    #product-modal .modal-panel {
        max-width: 92vw !important;
        width: 92vw !important;
    }
    #product-modal .modal-panel .grid {
        gap: 1rem;
    }

    /* Hero featured/sale/new modals get a little extra horizontal
       breathing room on tablets (they default to ~95vw which works,
       but the inner content grid wants 2 cols at this width). */
    #hero-featured-modal .modal-panel,
    #hero-sale-modal .modal-panel,
    #hero-new-modal .modal-panel,
    #hero-shop-modal .modal-panel {
        max-width: 94vw !important;
        width: 94vw !important;
    }

    /* Sub-category chips wrap onto two rows comfortably */
    #catalog-subcategory-chips {
        flex-wrap: wrap;
        gap: .35rem;
    }

    /* Catalog list/table view: trim padding so the row doesn't overflow */
    #catalog-table th,
    #catalog-table td {
        padding-left: .55rem !important;
        padding-right: .55rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Wide tablet / small desktop band (1024 – 1279px). Mostly fine on the
   default desktop layout; only minor density adjustments.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
    #category-chips-grid.category-chips.grid {
        /* 6 cols is OK here; ensure desc text stays readable */
        font-size: .92em;
    }
    /* Catalog grid stays at lg:grid-cols-4 — give cards a little more
       horizontal breathing room */
    #catalog-grid {
        gap: 1.1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Touch-primary devices on tablet/desktop widths (e.g. 2-in-1 laptops in
   tablet mode, large tablets in landscape). Disable hover-only chip
   golden-ratio expansion which depends on cursor hover.
   ───────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) and (min-width: 768px) {
    /* Chip golden-ratio expansion uses JS mouseenter/mouseleave; on coarse
       pointer devices these fire on tap and look glitchy. Make the
       transition shorter so taps feel snappy instead of laggy. */
    .category-chip {
        transition-duration: .12s !important;
    }
}

@media (max-width: 900px) {
    .sea-sidebar { width: 100vw; max-width: 100vw; position: static; }
    .sea-main-flex { flex-direction: column; }
    .sea-cart-drop {
        left: .75rem;
        right: .75rem;
        bottom: 4.25rem;
        width: auto;
        max-width: none;
        max-height: 30vh;
    }
    .sea-cart-drop__items {
        max-height: 16vh;
    }
    .sea-cart-drop__item {
        grid-template-columns: 34px minmax(0, 1fr) auto 1.45rem;
    }
    .sea-cart-drop__line {
        display: none;
    }
}

  @media (min-width: 1024px) {
    .product-reviews-screen {
      grid-template-columns: 1fr 1fr;
    }
  }

/* ── Small-grid (view-small-grid) responsive column breakpoints ──────────
   Base: 2 cols (mobile) → 3 → 4 → 5 → 6 (≥1280px desktop).
   Media-wrap height overrides scale the image viewport proportionally so
   the 350×280 thumbnail fills each card without whitespace bars.           */
@media (min-width: 640px) {
    body.view-small-grid #catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    body.view-small-grid #catalog-grid .product-card .catalog-media-wrap {
        height: 130px;
    }
}
@media (min-width: 768px) {
    body.view-small-grid #catalog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    body.view-small-grid #catalog-grid .product-card .catalog-media-wrap {
        height: 133px;
    }
}
@media (min-width: 1024px) {
    body.view-small-grid #catalog-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: .6rem;
    }
    body.view-small-grid #catalog-grid .product-card .catalog-media-wrap {
        height: 135px;
    }
}
@media (min-width: 1280px) {
    body.view-small-grid #catalog-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: .55rem;
    }
    body.view-small-grid #catalog-grid .product-card .catalog-media-wrap {
        height: 138px;
    }
}

/* ── Mini-grid (view-mini-grid) responsive column breakpoints ─────────────
   Base: 2 cols (mobile) → 3 → 4 (tablet) → 8 (desktop).
   Chip cards are collapsible, responsive to viewport constraints.          */
@media (max-width: 599px) {
    body.view-mini-grid #catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    body.view-mini-grid #catalog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9rem;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.view-mini-grid #catalog-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}
@media (min-width: 1024px) {
    body.view-mini-grid #catalog-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 1rem;
    }
}

/* ======================================================================= */
/*  Category Directory responsive breakpoints                              */
/*  Desktop default: 4 columns. Step down at narrower widths.              */
/* ======================================================================= */

@media (max-width: 1199px) {
    .cat-dir__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cat-dir.is-dir-collapsed .cat-dir__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .catalog-heading-row {
        align-items: flex-start;
    }
    .cat-simple-view-link {
        max-width: 100%;
    }
    .cat-simple-view-link__text {
        max-width: 12rem;
        opacity: 1;
    }
    .cat-dir__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cat-dir.is-dir-collapsed .cat-dir__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cat-dir__meta {
        text-align: center;
    }
}

@media (max-width: 599px) {
    .catalog-heading-row {
        flex-direction: column;
        align-items: stretch;
    }
    .catalog-heading-row__main {
        justify-content: space-between;
    }
    .cat-simple-view-link {
        grid-template-columns: 3.65rem minmax(0, 1fr);
        max-width: 100%;
    }
    .cat-dir {
        padding: 0.85rem 0.85rem 1rem;
    }
    .cat-dir__grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .cat-dir.is-dir-collapsed .cat-dir__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cat-dir__search-wrap {
        width: 100%;
        max-width: none;
    }
    .cat-dir__controls {
        justify-content: flex-start;
        width: 100%;
    }
    .cat-dir__controls-label {
        flex-basis: 100%;
        min-height: 1.2rem;
    }
    .cat-dir-floating {
        right: 0.6rem;
        left: 0.6rem;
        bottom: 0.6rem;
        max-width: none;
    }
    .cat-dir-floating__token-text {
        max-width: 140px;
    }
}
@media (max-width: 760px) {
    .cookie-consent-options {
        grid-template-columns: 1fr;
    }
}

/* ── Outlet layout: stack on narrow screens ─── */
@media (max-width: 760px) {
    .news-outlet-layout {
        grid-template-columns: 1fr;
    }
    .news-outlet-cart {
        position: static;
        max-height: 320px;
    }
}