/*rzm:s80*/
/* ===================================
   SCOPE: ONLY APPLY TO SHOP/CATEGORY PAGES
   All styles target pages with these body classes:
   - post-type-archive-product (shop page)
   - tax-product_cat (category page)
   =================================== */

:root {
    --rozhika-primary: #7c4dff;
    --rozhika-primary-light: #a47dff;
    --rozhika-primary-dark: #5c2de0;
    --rozhika-primary-glow: rgba(124, 77, 255, 0.35);
    --rozhika-secondary: #e91e63;
    --rozhika-secondary-light: #ff4081;
    --rozhika-gradient-primary: linear-gradient(135deg, #7c4dff 0%, #a47dff 50%, #c084fc 100%);
    --rozhika-gradient-hot: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #e91e63 100%);
    --rozhika-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    --rozhika-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
    --rozhika-shadow-medium: 0 8px 40px rgba(0, 0, 0, 0.12);
    --rozhika-shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.18);
    --rozhika-shadow-glow: 0 10px 40px var(--rozhika-primary-glow);
    --rozhika-radius-sm: 12px;
    --rozhika-radius-md: 16px;
    --rozhika-radius-lg: 24px;
    --rozhika-radius-xl: 32px;
    --rozhika-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --rozhika-transition-medium: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --rozhika-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --rozhika-font-display: var(--font-family, IRANYekan, sans-serif);
    --rozhika-text-primary: #1a1a2e;
    --rozhika-text-secondary: #4a4a68;
    --rozhika-text-muted: #8b8ba7;
    --rozhika-bg-primary: #ffffff;
    --rozhika-bg-secondary: #f8f9ff;
    --rozhika-bg-accent: #f0f0ff;
    --rozhika-border-light: rgba(124, 77, 255, 0.1);
    --rozhika-border-medium: rgba(124, 77, 255, 0.2);
}

/* ===================================
   HIDE DEFAULT ELEMENTS - SHOP ONLY
   =================================== */
body.post-type-archive-product .woocommerce-result-count,
body.post-type-archive-product .woocommerce-ordering,
body.tax-product_cat .woocommerce-result-count,
body.tax-product_cat .woocommerce-ordering,
body.post-type-archive-product .products-header,
body.tax-product_cat .products-header,
body.post-type-archive-product .shop-header,
body.tax-product_cat .shop-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================
   4 COLUMN GRID - SHOP PAGES ONLY
   =================================== */
body.post-type-archive-product .products,
body.post-type-archive-product ul.products,
body.tax-product_cat .products,
body.tax-product_cat ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.post-type-archive-product .products .product,
body.post-type-archive-product .products .col,
body.tax-product_cat .products .product,
body.tax-product_cat .products .col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column;
    flex: none !important;
    height: auto;
    align-self: stretch;
}

body.post-type-archive-product .products .product .product-small,
body.tax-product_cat .products .product .product-small,
body.post-type-archive-product .products .product .box,
body.tax-product_cat .products .product .box {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

body.post-type-archive-product .products .product .box-text,
body.tax-product_cat .products .product .box-text {
    display: flex;
    flex-direction: column;
    /* RZK 2026-08-27: dead `gap: 8px` removed; won by L3851 */;
    height: 100%;
    flex: 1;
}

body.post-type-archive-product .products .product .button,
body.tax-product_cat .products .product .button {
    margin-top: 12px;
}

body.post-type-archive-product .row-main,
body.post-type-archive-product .large-columns-3,
body.tax-product_cat .row-main,
body.tax-product_cat .large-columns-3 {
    display: grid !important;
}

/* ===================================
   MAIN SHOP LAYOUT - SHOP ONLY
   =================================== */
body.post-type-archive-product .rozhika-shop-layout,
body.tax-product_cat .rozhika-shop-layout {
    display: flex;
    gap: 20px;
    max-width: 100%;
    margin: 0;
    direction: rtl;
    width: 100%;
}

/* ===================================
   SIDEBAR FILTERS - GLASSMORPHISM DESIGN
   =================================== */
body.post-type-archive-product .rozhika-sidebar,
body.tax-product_cat .rozhika-sidebar {
    /* RZK 2026-08-27: dead `width: 300px` removed; won by L3999 */;
    flex-shrink: 0;
    background: var(--rozhika-gradient-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* RZK 2026-08-27: dead `border-radius: var(--rozhika-radius-xl)` removed; won by L4001 */;
    /* RZK 2026-08-27: dead `padding: 24px` removed; won by L4000 */;
    border: 1px solid rgba(255, 255, 255, 0.8);
    height: fit-content;
    max-height: calc(100vh - (var(--rozhika-header-height, 0px) + 40px));
    max-height: calc(var(--rozhika-viewport-height, 100vh) - (var(--rozhika-header-height, 0px) + 100px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    position: sticky;
    top: 20px;
    box-shadow: var(--rozhika-shadow-medium), 
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    z-index: 100;
}

/* `body.rozhika-sidebar-dragging *` was a universal descendant selector, so
   toggling this class recalculated style for EVERY element in the document --
   measured 79-99 ms on a mobile profile at 4x CPU throttle. Worse, the class is
   toggled during a DRAG gesture, so that cost could land on every drag.

   The `*` half was redundant: `user-select` is an INHERITED property, so setting
   it on <body> already applies to the whole subtree. Deleting the selector is
   visually identical and removes the cost entirely. */
body.rozhika-sidebar-dragging {
    user-select: none;
}

.rozhika-sidebar.is-dragging {
    cursor: grabbing;
}

@media (min-width: 768px) {
    body.post-type-archive-product .rozhika-sidebar,
    body.tax-product_cat .rozhika-sidebar {
        top: calc(var(--rozhika-header-height, 0px) + 20px);
    }
}

body.post-type-archive-product .rozhika-sidebar .sidebar-title,
body.tax-product_cat .rozhika-sidebar .sidebar-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--rozhika-text-primary);
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--rozhika-border-medium);
    background: var(--rozhika-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* ===================================
   MAIN CONTENT - PREMIUM
   =================================== */
body.post-type-archive-product .rozhika-main-content,
body.tax-product_cat .rozhika-main-content {
    flex: 1;
    min-width: 0;
}

body.post-type-archive-product .shop-container,
body.tax-product_cat .shop-container {
    max-width: 100% !important;
    padding: 0 20px !important;
}

/* ===================================
   FILTER SECTIONS - PREMIUM CARDS
   =================================== */
.rozhika-shop-layout .filter-section,
.modal-body .filter-section {
    margin-bottom: 16px;
    padding: 0;
    border-bottom: none;
    background: var(--rozhika-bg-primary);
    border-radius: var(--rozhika-radius-md);
    overflow: hidden;
    border: 1px solid var(--rozhika-border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rozhika-shop-layout .filter-section:hover,
.modal-body .filter-section:hover {
    border-color: var(--rozhika-border-medium);
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.08);
    transform: translateY(-1px);
}

.rozhika-shop-layout .filter-section:last-child,
.modal-body .filter-section:last-child {
    margin-bottom: 0;
}

.rozhika-shop-layout .filter-title,
.modal-body .filter-title {
    /* RZK 2026-08-27: dead `font-size: 15px` removed; won by L4006 */;
    font-weight: 700;
    color: var(--rozhika-text-primary);
    margin: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    user-select: none;
    /* RZK 2026-08-27: dead `padding: 18px 20px` removed; won by L4007 */;
    background: linear-gradient(135deg, var(--rozhika-bg-secondary) 0%, var(--rozhika-bg-primary) 100%);
    gap: 12px;
}

.rozhika-shop-layout .filter-title:hover,
.modal-body .filter-title:hover {
    background: linear-gradient(135deg, var(--rozhika-bg-accent) 0%, var(--rozhika-bg-secondary) 100%);
}

.rozhika-shop-layout .filter-title:active,
.modal-body .filter-title:active {
    transform: scale(0.99);
}

.rozhika-shop-layout .filter-title.expanded,
.modal-body .filter-title.expanded {
    background: var(--rozhika-bg-secondary);
    border-bottom: 1px solid var(--rozhika-border-light);
}

.filter-title .toggle-icon {
    /* RZK 2026-08-27: dead `width: 32px` removed; won by L4011 */;
    /* RZK 2026-08-27: dead `height: 32px` removed; won by L4012 */;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 !important;
    background: var(--rozhika-gradient-primary);
    /* RZK 2026-08-27: dead `border-radius: 10px` removed; won by L4013 */;
    border: none;
    box-shadow: 0 4px 12px var(--rozhika-primary-glow);
}

.filter-title .toggle-icon svg {
    /* RZK 2026-08-27: dead `width: 16px` removed; won by L4017 */;
    /* RZK 2026-08-27: dead `height: 16px` removed; won by L4018 */;
    stroke: white;
    stroke-width: 3;
    fill: none;
    display: block;
}

.filter-title.expanded .toggle-icon {
    transform: rotate(180deg);
    box-shadow: 0 6px 18px var(--rozhika-primary-glow);
}

.filter-title:hover .toggle-icon {
    transform: scale(1.05);
}

.filter-title.expanded:hover .toggle-icon {
    transform: rotate(180deg) scale(1.05);
}

.filter-title:active .toggle-icon {
    transform: scale(0.95);
}

.filter-title.expanded:active .toggle-icon {
    transform: rotate(180deg) scale(0.95);
}

.filter-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    background: var(--rozhika-bg-primary);
    visibility: hidden;
}

.filter-content.filter-collapsible.expanded {
    max-height: 2000px !important;
    opacity: 1;
    padding: 8px 0;
    visibility: visible;
}

/* ===================================
   CHECKBOX FILTER ITEMS - PREMIUM
   =================================== */
.filter-checkbox-item {
    display: flex;
    align-items: center;
    /* RZK 2026-08-27: dead `gap: 14px` removed; won by L4023 */;
    /* RZK 2026-08-27: dead `padding: 14px 20px` removed; won by L4022 */;
    cursor: pointer;
    border-radius: 0;
    user-select: none;
    position: relative;
    border-right: 3px solid transparent;
}

.filter-checkbox-item:hover {
    background: linear-gradient(90deg, var(--rozhika-bg-accent) 0%, transparent 100%);
    border-right-color: var(--rozhika-primary-light);
}

.filter-checkbox-item:active {
    background: linear-gradient(90deg, rgba(124, 77, 255, 0.1) 0%, transparent 100%);
}

.filter-checkbox-item input[type="checkbox"] {
    /* RZK 2026-08-27: dead `width: 22px` removed; won by L4033 */;
    /* RZK 2026-08-27: dead `height: 22px` removed; won by L4034 */;
    margin: 0;
    cursor: pointer;
    accent-color: var(--rozhika-primary);
    flex-shrink: 0;
    border-radius: 6px;
}

.filter-checkbox-item input[type="checkbox"]:hover {
    transform: scale(1.1);
}

/* RZK 2026-08-27 -- tap-target floor. Two filter rows measured 300x19px inside
   the modal, under the 24px minimum Lighthouse audits for. The row is a <label>
   wrapping the checkbox and its text, so giving it a minimum height enlarges the
   hit area without changing the layout or the type size. */
.filter-checkbox-item,
.filter-stock .filter-checkbox,
.filter-toggle-variations {
    min-height: 24px;
}

.filter-checkbox-item .filter-label-text {
    flex: 1;
    /* RZK 2026-08-27: dead `font-size: 14px` removed; won by L4047 */;
    color: var(--rozhika-text-secondary);
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.5;
    font-weight: 500;
}

.filter-checkbox-item:hover .filter-label-text {
    color: var(--rozhika-text-primary);
}

.filter-checkbox-item input[type="checkbox"]:checked + .filter-label-text {
    color: var(--rozhika-primary);
    font-weight: 700;
}

/* ===================================
   HIERARCHICAL CATEGORIES - PREMIUM
   =================================== */
.hierarchical-categories .category-tree {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
}

.category-node {
    padding: 0;
    border: none;
    background: transparent;
}

.category-node.depth-1 {
    padding-right: 20px;
}

.category-node.depth-2 {
    padding-right: 40px;
}

.category-node.depth-3,
.category-node.depth-4 {
    padding-right: 60px;
}

/* RZK 2026-08-27 -- the 8px horizontal spill in the category tree.
   Measured on live with the modal open and populated: `.category-tree` and
   every `.category-node.depth-0` reported scrollWidth 348 against clientWidth
   340 at 390px, and 318 against 310 at 360px -- 8px of overflow at both.
   The cause is on this rule: `width: 100%` asks for the parent content box in
   full and `margin: 2px 8px` then adds 16px beside it, so the row is always
   wider than its parent. A block-level flex container already fills the space
   left over by its margins, so the declaration is not just wrong, it is
   unnecessary; it is removed.
   `flex: 1` on the same rule was inert -- `.category-node` is a block, so its
   children are not flex items -- and is removed with it. */
.category-node-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--rozhika-radius-sm);
    margin: 2px 8px;
    font-size: 14px;
    color: var(--rozhika-text-secondary);
    font-weight: 600;
    cursor: pointer;
}

.category-node-label:hover {
    background: var(--rozhika-bg-accent);
    color: var(--rozhika-text-primary);
}

/* RZK 2026-08-27 -- tap-target floor. Declared 20px but measured 18.17px at
   390px and 17.98px at 360px: it is a flex item and the default shrink factor
   let the row squeeze it. A fixed flex basis stops that, and the touch floor
   is 24px as above, dropping back to the original 20px from 768px up. */
.category-node-label input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0;
    accent-color: var(--rozhika-primary);
}

.category-node-label input[type="checkbox"]:hover {
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .category-node-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }
}

.category-label-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

/* RZK 2026-08-27 fluid type. This element had NO font-size of its own -- it
   inherited, and the inherited value measured a flat 14px at both 390px and
   1280px inside the filter modal. It is the largest block of flat text in there
   by area (the category tree rows). An explicit ramp: 12px at 320px, 14px from
   768px up, matching `.filter-checkbox-item .filter-label-text` so the tree reads
   consistently. */
.category-name {
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.category-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-inline-start: auto;
    background: var(--rozhika-bg-accent);
}

.category-arrow:hover {
    background: rgba(124, 77, 255, 0.15);
}

.category-node-label .category-arrow svg {
    width: 14px;
    height: 14px;
    stroke: var(--rozhika-primary);
    stroke-width: 3;
    fill: none;
    transform: rotate(0deg);
}

.category-node.is-expanded > .category-node-label .category-arrow {
    background: var(--rozhika-primary);
}

.category-node.is-expanded > .category-node-label .category-arrow svg {
    transform: rotate(180deg);
    stroke: white;
}

.category-children {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
}

.hierarchical-categories .category-node.is-expanded > .category-children {
    display: block;
}

/* ===================================
   STOCK FILTER - PREMIUM TOGGLE
   =================================== */
.filter-stock .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 2px solid #81c784;
    border-radius: var(--rozhika-radius-md);
    cursor: pointer;
    margin: 8px 12px;
}

.filter-stock .filter-checkbox:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
    border-color: #66bb6a;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.25);
    transform: translateY(-2px);
}

/* RZK 2026-08-27 -- tap-target floor, same reasoning as the filter rows: 24px
   on touch, the original 22px from 768px up. */
.filter-stock .filter-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0;
    cursor: pointer;
    accent-color: #4caf50;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .filter-stock .filter-checkbox input[type="checkbox"] {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }
}

.filter-stock .filter-checkbox .checkmark {
    display: none;
}

/* RZK 2026-08-27 fluid type: was a flat 14px. Same ramp as the tree rows. */
.filter-stock .filter-checkbox .label-text {
    flex: 1;
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    color: #2e7d32;
    font-weight: 700;
    cursor: pointer;
}

.filter-stock .filter-checkbox input[type="checkbox"]:checked ~ .label-text {
    color: #1b5e20;
}

/* ===================================
   PRICE RANGE - LUXURY SLIDER
   =================================== */
.price-range-container {
    padding: 20px;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.price-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.price-input-group label {
    font-size: 12px;
    color: var(--rozhika-text-muted);
    white-space: nowrap;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* RZK 2026-08-26 -- the price fields were a flat 16px. Now fluid: 13px at 320px,
   16px from 768px up. See the :focus rule below for why 16px still matters. */
.price-input-group input.price-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--rozhika-border-medium);
    border-radius: var(--rozhika-radius-sm);
    font-size: clamp(13px, 10.86px + 0.6696vw, 16px);
    font-weight: 800;
    text-align: center;
    direction: ltr;
    color: var(--rozhika-text-primary);
    background: var(--rozhika-bg-secondary);
}

/* RZK 2026-08-26 -- iOS auto-zoom countermeasure.

   iOS Safari zooms the whole viewport when you focus a text field whose computed
   font-size is under 16px. That is the only reason these fields were pinned at a
   flat 16px, which made them oversized on phones.

   Raising the size to exactly 16px ON FOCUS gets both: the field reads small
   while idle, and the moment it is focused it is 16px, so iOS has no reason to
   zoom. Above 768px the idle size is already 16px, so this changes nothing there.

   Why not the other options:
     * `maximum-scale=1` / `user-scalable=no` in the viewport meta also stops the
       zoom, but it stops the USER zooming too -- a WCAG 1.4.4 failure that costs
       accessibility score. Not used.
     * a transform-based scale would break hit-testing and caret position.

   This cannot hurt CLS: layout shifts within 500ms of a user interaction are
   excluded from the metric, and a focus is exactly that. */
.price-input-group input.price-input:focus {
    font-size: 16px;
    outline: none;
    border-color: var(--rozhika-primary);
    background: var(--rozhika-bg-primary);
    box-shadow: 0 0 0 4px var(--rozhika-primary-glow);
}

/* RZK 2026-08-27 fluid type. This was already small at 11px, and flat. Per the
   brief, already-small things get a ramp too and may go a little smaller on
   phones: 9.5px at 320px, 11px from 768px up.
   The 9.5px floor is deliberate and safe here: this is a UNIT label next to a
   numeric field, not body copy, so the 12px legible-font-size threshold (which
   applies to readable text blocks) is not the relevant constraint -- the number
   itself stays at 13px+. */
.price-input-group .currency {
    font-size: 12px;;
    color: var(--rozhika-text-muted);
    font-weight: 600;
    text-align: center;
    margin-top: -4px;
}

.price-slider-wrapper {
    padding: 28px 16px 20px 16px;
    margin: 0;
}

.price-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;;
    color: var(--rozhika-text-muted);
    padding: 0 4px;
    margin-top: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#price-range-slider-desktop,
#price-range-slider-mobile {
    height: 8px;
}

#price-range-slider-desktop .noUi-connect,
#price-range-slider-mobile .noUi-connect {
    background: var(--rozhika-gradient-primary);
    border-radius: 4px;
}

#price-range-slider-desktop .noUi-handle,
#price-range-slider-mobile .noUi-handle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid var(--rozhika-primary);
    background: var(--rozhika-bg-primary);
    box-shadow: 0 4px 16px var(--rozhika-primary-glow);
    cursor: grab;
}

#price-range-slider-desktop .noUi-handle:hover,
#price-range-slider-mobile .noUi-handle:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 24px var(--rozhika-primary-glow);
}

#price-range-slider-desktop .noUi-handle:active,
#price-range-slider-mobile .noUi-handle:active {
    cursor: grabbing;
    transform: scale(1.3);
    box-shadow: 0 8px 32px var(--rozhika-primary-glow);
}

#price-range-slider-desktop .noUi-handle:before,
#price-range-slider-desktop .noUi-handle:after,
#price-range-slider-mobile .noUi-handle:before,
#price-range-slider-mobile .noUi-handle:after {
    display: none;
}

#price-range-slider-desktop.noUi-horizontal,
#price-range-slider-mobile.noUi-horizontal {
    height: 8px;
}

#price-range-slider-desktop.noUi-horizontal .noUi-handle,
#price-range-slider-mobile.noUi-horizontal .noUi-handle {
    top: -8px;
}

#price-range-slider-desktop .noUi-base,
#price-range-slider-mobile .noUi-base {
    background: var(--rozhika-bg-accent);
    border-radius: 4px;
}

body.post-type-archive-product .rozhika-mm-category-rail,
body.tax-product_cat .rozhika-mm-category-rail {
    --rmm-rail-pad-y: clamp(12px, 2.2vw, 18px);
    --rmm-rail-pad-x: clamp(12px, 3vw, 24px);
    --rmm-rail-mb: clamp(14px, 2.6vw, 22px);
    --rmm-head-gap: clamp(10px, 2vw, 12px);
    --rmm-head-mb: clamp(10px, 2.2vw, 14px);
    --rmm-title-fs: clamp(14px, 2.4vw, 18px);
    --rmm-subtitle-fs: 12px;
    --rmm-cta-fs: clamp(12px, 1.9vw, 13px);
    --rmm-cta-pad-y: clamp(8px, 1.7vw, 10px);
    --rmm-cta-pad-x: clamp(10px, 2.2vw, 14px);
    --rmm-track-gap-row: clamp(8px, 2vw, 14px);
    --rmm-track-gap-col: clamp(10px, 2.5vw, 18px);
    --rmm-track-pad-top: clamp(18px, 3.6vw, 32px);
    --rmm-track-pad-x: var(--rmm-rail-pad-x);
    --rmm-track-pad-bottom: clamp(20px, 4.4vw, 40px);
    --rmm-chip-gap: clamp(8px, 2vw, 12px);
    --rmm-chip-pad-y: clamp(8px, 2vw, 10px);
    --rmm-chip-pad-x: clamp(10px, 2.2vw, 16px);
    --rmm-chip-radius: clamp(14px, 3vw, 18px);
    --rmm-chip-min-h: clamp(44px, 6vw, 56px);
    --rmm-media-size: clamp(44px, 6vw, 70px);
    --rmm-media-radius: clamp(10px, 2vw, 14px);
    --rmm-icon-size: calc(var(--rmm-media-size, 70px) - 10px);
    --rmm-name-fs: clamp(12px, calc(10px + (14 - 10) * ((100vw - 320px) / (1024 - 320))), 14px);
    --rmm-name-max: clamp(70px, 12vw, 140px);

    margin-bottom: var(--rmm-rail-mb);
    padding: var(--rmm-rail-pad-y) var(--rmm-rail-pad-x);
    background: var(--rozhika-gradient-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--rozhika-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--rozhika-shadow-soft);
    position: relative;
    overflow: hidden;
}

body.post-type-archive-product .rozhika-mm-category-rail::before,
body.tax-product_cat .rozhika-mm-category-rail::before {
    content: '';
    position: absolute;
    inset: -40% -25%;
    background:
        radial-gradient(circle at 20% 25%, rgba(124, 77, 255, 0.18), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(233, 30, 99, 0.14), transparent 58%);
    filter: blur(16px);
    opacity: 0.95;
    pointer-events: none;
}

body.post-type-archive-product .rozhika-mm-category-rail > *,
body.tax-product_cat .rozhika-mm-category-rail > * {
    position: relative;
    z-index: 1;
}

.rozhika-mm-category-rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rmm-head-gap, 12px);
    margin-bottom: var(--rmm-head-mb, 14px);
    position: relative;
    z-index: 2;
}

.rozhika-mm-category-rail-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rozhika-mm-category-rail-title {
    font-size: var(--rmm-title-fs, 18px);
    font-weight: 900;
    color: var(--rozhika-text-primary);
    letter-spacing: -0.4px;
}

.rozhika-mm-category-rail-subtitle {
    font-size: var(--rmm-subtitle-fs, 12px);
    font-weight: 700;
    color: var(--rozhika-text-muted);
}

.rozhika-mm-category-rail-cta {
    font-size: var(--rmm-cta-fs, 13px);
    font-weight: 800;
    text-decoration: none;
    color: var(--rozhika-primary);
    background: rgba(124, 77, 255, 0.10);
    border: 1px solid rgba(124, 77, 255, 0.18);
    padding: var(--rmm-cta-pad-y, 10px) var(--rmm-cta-pad-x, 14px);
    border-radius: 999px;
    white-space: nowrap;
}

/* ===================================================================
 * RZK 2026-10-16 (INP): HOVER POLISH IS GATED ON A REAL HOVER POINTER.
 *
 * Every `:hover` rule of the shop/category product-card polish (card tint,
 * image zoom, back-image cross-fade, badge lift, title colour) and of the
 * category rail chips is wrapped in
 *     @media (hover: hover) and (pointer: fine) { ... }
 *
 * WHY. On a touch screen a tap applies :hover to the tapped element and all
 * of its ancestors *before* the click is dispatched, so the whole card was
 * restyled, laid out and repainted (second image + badge drop-shadows) in
 * the pre-click frame. That frame is the click's input delay. Measured on
 * /shop/ at 412 px, 4x CPU: tapping a product card went 168 ms -> 92 ms
 * (median of 4), input delay ~100 ms -> ~35 ms. 98% of this site's visitors
 * are on phones, where these effects only ever flashed during the tap.
 *
 * DESKTOP IS UNCHANGED: a mouse/trackpad matches the query, and wrapping a
 * rule in @media changes neither its specificity nor its cascade order.
 * Only the hover-state selectors were moved; base rules (transitions,
 * resting styles) and :active press feedback are untouched. A mixed
 * selector list (the badge-stack border reset) was split so its non-hover
 * selectors still apply everywhere.
 * =================================================================== */

@media (hover: hover) and (pointer: fine) {
.rozhika-mm-category-rail-cta:hover{
    transform: translateY(-2px);
    background: rgba(124, 77, 255, 0.14);
    box-shadow: 0 12px 35px rgba(124, 77, 255, 0.18);
}
}

.rozhika-mm-category-rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: none;
    grid-auto-columns: max-content;
    gap: var(--rmm-track-gap-row, 14px) var(--rmm-track-gap-col, 18px);
    overflow-x: auto;
    overflow-y: clip;
    padding: var(--rmm-track-pad-top, 40px) var(--rmm-track-pad-x, 24px) var(--rmm-track-pad-bottom, 50px);
    margin: calc(0px - var(--rmm-track-pad-top, 40px)) calc(0px - var(--rmm-track-pad-x, 24px)) calc(0px - var(--rmm-track-pad-bottom, 50px));
    scroll-snap-type: x proximity;
    scroll-padding-right: var(--rmm-track-pad-x, 24px);
    scroll-padding-left: var(--rmm-track-pad-x, 24px);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-x;
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.rozhika-mm-category-rail-track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.rozhika-mm-category-rail-track::after {
    content: '';
    grid-row: 1 / -1;
    width: 6px;
    min-width: 6px;
}

.rozhika-mm-category-rail-track::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1023px) {
    .rozhika-mm-category-rail-track {
        touch-action: pan-y pan-x;
        cursor: auto;
    }
}

.rozhika-mm-category-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--rmm-chip-gap, 12px);
    min-height: var(--rmm-chip-min-h, 56px);
    padding: var(--rmm-chip-pad-y, 10px) var(--rmm-chip-pad-x, 16px);
    border-radius: var(--rmm-chip-radius, 18px);
    text-decoration: none;
    color: var(--rozhika-text-primary);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(124, 77, 255, 0.10);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    scroll-snap-align: start;
}

@media (hover: hover) and (pointer: fine) {
.rozhika-mm-category-chip:hover{
    transform: translateY(-3px);
    border-color: rgba(124, 77, 255, 0.22);
    box-shadow: 0 18px 50px rgba(124, 77, 255, 0.18);
}
}

.rozhika-mm-category-chip:active {
    transform: translateY(-1px) scale(0.99);
}

.rozhika-mm-category-chip.is-selected {
    background: rgba(124, 77, 255, 0.10);
    border-color: rgba(124, 77, 255, 0.28);
    box-shadow: 0 18px 55px rgba(124, 77, 255, 0.22);
}

.rozhika-mm-category-chip.is-selected .rozhika-mm-category-chip-media {
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(233, 30, 99, 0.12));
    border-color: rgba(124, 77, 255, 0.26);
    box-shadow: 0 14px 34px rgba(124, 77, 255, 0.22);
}

.rozhika-mm-category-chip-media {
    width: var(--rmm-media-size, 70px);
    height: var(--rmm-media-size, 70px);
    border-radius: var(--rmm-media-radius, 14px);
    background: linear-gradient(180deg, rgba(124, 77, 255, 0.10), rgba(233, 30, 99, 0.06));
    border: 1px solid rgba(124, 77, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rozhika-primary);
    flex-shrink: 0;
    box-shadow: 0 10px 24px rgba(124, 77, 255, 0.14);
}

.rozhika-mm-category-chip-icon {
    width: var(--rmm-icon-size, 60px);
    height: var(--rmm-icon-size, 60px);
    fill: currentColor;
}

.rozhika-mm-category-chip-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

.rozhika-mm-category-chip-name {
    font-size: var(--rmm-name-fs, 14px);
    font-weight: 800;
    color: var(--rozhika-text-primary);
    white-space: nowrap;
    display: block;
}

.rozhika-mm-category-chip-count {
    font-size: var(--rmm-subtitle-fs, 12px);
    font-weight: 700;
    color: var(--rozhika-text-muted);
}

/* ===================================
   SORT BAR - LUXURY DESIGN
   =================================== */
body.post-type-archive-product .rozhika-sort-bar,
body.tax-product_cat .rozhika-sort-bar {
    display: flex;
    align-items: center;
    /* RZK 2026-08-27: dead `gap: 12px` removed; won by L3960 */;
    /* RZK 2026-08-27: dead `padding: 16px 24px` removed; won by L3961 */;
    background: var(--rozhika-gradient-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* RZK 2026-08-27: dead `border-radius: var(--rozhika-radius-lg)` removed; won by L3962 */;
    /* RZK 2026-08-27: dead `margin-bottom: 28px` removed; won by L3963 */;
    border: 1px solid rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
    box-shadow: var(--rozhika-shadow-soft);
}

body.post-type-archive-product .sort-option,
body.tax-product_cat .sort-option {
    /* RZK 2026-08-27: dead `padding: 12px 22px` removed; won by L3968 */;
    /* RZK 2026-08-27: dead `border-radius: var(--rozhika-radius-sm)` removed; won by L3970 */;
    color: var(--rozhika-text-secondary);
    text-decoration: none;
    /* RZK 2026-08-27: dead `font-size: 14px` removed; won by L3969 */;
    font-weight: 700;
    border: 2px solid transparent;
    background: transparent;
    position: relative;
    overflow: hidden;
}

body.post-type-archive-product .sort-option:hover,
body.tax-product_cat .sort-option:hover {
    background: var(--rozhika-bg-accent);
    color: var(--rozhika-primary);
    border-color: var(--rozhika-border-medium);
    transform: translateY(-2px);
}

body.post-type-archive-product .sort-option.active,
body.tax-product_cat .sort-option.active {
    background: var(--rozhika-gradient-primary);
    color: white;
    border-color: transparent;
    box-shadow: var(--rozhika-shadow-glow);
    transform: translateY(-2px);
}

body.post-type-archive-product .sort-option.active:hover,
body.tax-product_cat .sort-option.active:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--rozhika-primary-glow);
}

/* ===================================
   FILTER BUTTONS - PREMIUM
   =================================== */
.filter-apply-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--rozhika-border-light);
}

/* NOTE (RZK 2026-08-26): the `font-size` in this block is DEAD. The grouped
   `.filter-apply-button, .filter-clear-button` rule further down declares the
   same property with the same specificity and comes later, so it wins. Change
   the size there, not here. */
.filter-apply-button {
    width: 100%;
    padding: 16px 24px;
    background: var(--rozhika-gradient-primary);
    border: none;
    border-radius: var(--rozhika-radius-md);
    /* RZK 2026-08-27: dead `color: white` removed; won by L1564 */;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    /* RZK 2026-08-27: dead `box-shadow: var(--rozhika-shadow-glow)` removed; won by L1565 */;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-apply-button:hover {
    transform: translateY(-3px);
    /* RZK 2026-08-27: dead `box-shadow: 0 12px 40px var(--rozhika-primary-glow)` removed; won by L1570 */;
}

.filter-apply-button:active {
    /* RZK 2026-08-27: dead `transform: translateY(-1px)` removed; won by L1574 */;
}

.filter-clear-button {
    width: 100%;
    padding: 14px 24px;
    background: var(--rozhika-bg-secondary);
    /* RZK 2026-08-27: dead `border: 2px solid var(--rozhika-border-medium)` removed; won by L1580 */;
    border-radius: var(--rozhika-radius-md);
    /* RZK 2026-08-27: dead `color: var(--rozhika-text-secondary)` removed; won by L1579 */;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.filter-clear-button:hover {
    background: var(--rozhika-bg-primary);
    /* RZK 2026-08-27: dead `border-color: var(--rozhika-primary)` removed; won by L1585 */;
    color: var(--rozhika-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(124, 77, 255, 0.15);
}

/* ===================================
   PRODUCT BADGES - SHOP ONLY (NO STOCK BADGE)
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
    position: absolute;
    top: -25px;
    left: -2px;
    right: -2px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    pointer-events: none;
    width: calc(100% + 4px);
    padding: 0;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-top-badge-stack,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-top-badge-stack {
    flex-shrink: 0;
    order: 1;
    margin-left: auto;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
    flex-shrink: 0;
    order: 2;
    margin-right: auto;
    margin-top: 4px;
}

.rozhika-top-badge-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    align-items: flex-end;
    text-align: right;
}

.rozhika-top-badge {
    /* RZK 2026-08-27: dead `padding: 0` removed; won by L3639 */;
    /* RZK 2026-08-27: dead `margin: 0` removed; won by L3640 */;
    /* RZK 2026-08-27: dead `background: transparent` removed; won by L3641 */;
    /* RZK 2026-08-27: dead `border: none` removed; won by L3642 */;
    /* RZK 2026-08-27: dead `box-shadow: none` removed; won by L3643 */;
    /* RZK 2026-08-27: dead `pointer-events: none` removed; won by L3644 */;
}

.rozhika-top-badge.is-hidden {
    display: none;
}

.rozhika-hot-callout.is-hidden {
    display: none;
}

.rozhika-hot-callout {
    pointer-events: none;
}

.rozhika-top-badge .badge-inner {
    /* RZK 2026-08-27: dead `border-radius: 999px` removed; won by L3650 */;
    /* RZK 2026-08-27: dead `padding: 6px 14px` removed; won by L3651 */;
    /* RZK 2026-08-27: dead `display: inline-flex` removed; won by L3652 */;
    /* RZK 2026-08-27: dead `align-items: center` removed; won by L3653 */;
    /* RZK 2026-08-27: dead `justify-content: center` removed; won by L3654 */;
    /* RZK 2026-08-27: dead `font-size: 11px` removed; won by L3655 */;
    /* RZK 2026-08-27: dead `font-weight: 800` removed; won by L3656 */;
    /* RZK 2026-08-27: dead `color: #ffffff` removed; won by L3657 */;
    /* RZK 2026-08-27: dead `letter-spacing: 0.4px` removed; won by L3658 */;
    /* RZK 2026-08-27: dead `text-transform: none` removed; won by L3659 */;
    /* RZK 2026-08-27: dead `box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18)` removed; won by L3660 */;
}

.rozhika-top-badge--tier .badge-inner {
    /* RZK 2026-08-27: dead `background: transparent` removed; won by L3690 */;
    /* RZK 2026-08-27: dead `box-shadow: none` removed; won by L3691 */;
    /* RZK 2026-08-27: dead `border: none` removed; won by L3692 */;
    /* RZK 2026-08-27: dead `padding: 0` removed; won by L3693 */;
}

.rozhika-top-badge--hot .badge-inner {
    /* RZK 2026-08-27: dead `background: linear-gradient(135deg, #ffb199 0%, #ff6f91 ` removed; won by L3700 */;
    /* RZK 2026-08-27: dead `box-shadow: 0 8px 20px rgba(255, 77, 143, 0.35)` removed; won by L3701 */;
}

.rozhika-top-badge--combo .badge-inner {
    /* RZK 2026-08-27: dead `background: linear-gradient(135deg, #d6bcfa 0%, #a855f7 ` removed; won by L3705 */;
    /* RZK 2026-08-27: dead `box-shadow: 0 10px 24px rgba(168, 85, 247, 0.4)` removed; won by L3706 */;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badge,
body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `display: inline-flex` removed; won by L3758 */;
    /* RZK 2026-08-27: dead `align-items: center` removed; won by L3759 */;
    /* RZK 2026-08-27: dead `justify-content: center` removed; won by L3760 */;
    /* RZK 2026-08-27: dead `padding: 6px 14px` removed; won by L3761 */;
    /* RZK 2026-08-27: dead `border-radius: 4px` removed; won by L3762 */;
    /* RZK 2026-08-27: dead `font-size: 12px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `font-weight: 700` removed; won by L3764 */;
    text-transform: uppercase;
    /* RZK 2026-08-27: dead `letter-spacing: 0.5px` removed; won by L3765 */;
    /* RZK 2026-08-27: dead `box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)` removed; won by L3766 */;
    /* RZK 2026-08-27: dead `backdrop-filter: blur(8px)` removed; won by L3767 */;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    color: #ffffff;
    /* RZK 2026-08-27: dead `padding: 8px 14px` removed; won by L2748 */;
    border-radius: 999px;
}

.rozhika-badge-sale--default {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.rozhika-badge-sale--hot {
    background: linear-gradient(135deg, #ffb199 0%, #ff6f91 45%, #ff2d7f 100%);
}

.rozhika-badge-sale--tier {
    background: linear-gradient(135deg, #d6bcfa 0%, #a855f7 45%, #7c3aed 100%);
}

.rozhika-badge-sale--combo {
    background: linear-gradient(135deg, #d6bcfa 0%, #a855f7 30%, #ff6f91 70%, #ff2d7f 100%);
}

/* HIDE STOCK BADGES - We'll use grayscale instead */
body.post-type-archive-product .rozhika-main-content .rozhika-badge-stock,
body.post-type-archive-product .rozhika-main-content .rozhika-badge-available,
body.tax-product_cat .rozhika-main-content .rozhika-badge-stock,
body.tax-product_cat .rozhika-main-content .rozhika-badge-available {
    display: none !important;
}

/* ===================================
   OUT OF STOCK = GRAYSCALE (DEAD LOOK)
   =================================== */
body.post-type-archive-product .rozhika-main-content .product.outofstock,
body.post-type-archive-product .rozhika-main-content .product-small.outofstock,
body.tax-product_cat .rozhika-main-content .product.outofstock,
body.tax-product_cat .rozhika-main-content .product-small.outofstock {
    filter: grayscale(100%);
    opacity: 0.6;
    position: relative;
}

body.post-type-archive-product .rozhika-main-content .product.outofstock::after,
body.post-type-archive-product .rozhika-main-content .product-small.outofstock::after,
body.tax-product_cat .rozhika-main-content .product.outofstock::after,
body.tax-product_cat .rozhika-main-content .product-small.outofstock::after {
    content: 'ناموجود';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    /* RZK 2026-08-27: dead `padding: 10px 20px` removed; won by L4075 */;
    /* RZK 2026-08-27: dead `border-radius: 4px` removed; won by L4076 */;
    /* RZK 2026-08-27: dead `font-size: 14px` removed; won by L4074 */;
    font-weight: 700;
    z-index: 100;
    pointer-events: none;
}

/* ===================================
   PRODUCT TITLE - SHOP ONLY
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-product-title,
body.tax-product_cat .rozhika-main-content .rozhika-product-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin: 10px 0;
    min-height: 48px;
    display: flex;
    align-items: flex-start;
}

body.post-type-archive-product .rozhika-main-content .rozhika-product-title a,
body.tax-product_cat .rozhika-main-content .rozhika-product-title a {
    color: #333333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .rozhika-main-content .rozhika-product-title a:hover,
body.tax-product_cat .rozhika-main-content .rozhika-product-title a:hover{
    color: #7c4dff;
}
}

body.post-type-archive-product .rozhika-main-content .rozhika-rating-count,
body.tax-product_cat .rozhika-main-content .rozhika-rating-count {
    font-size: 13px;
    color: #999999;
    margin-top: -5px;
}

/* ===================================
   INFINITE SCROLL OVERLAY - SHOP ONLY
   =================================== */
body.post-type-archive-product .rozhika-loading-overlay,
body.tax-product_cat .rozhika-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7, 7, 14, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

/* RZK 2026-10-16 (INP round 11): the frosted blur behind the loading overlay is
   drawn only on mouse/trackpad devices. On phones the spinner animates inside a
   full-screen backdrop-filter, which forced the whole-screen blur to be
   re-rendered on every frame while products load (lab: GPU frame time ~30x).
   Phones keep the same dimmed overlay, popup and spinner, without the frosting. */
@media (hover: hover) and (pointer: fine) {
    body.post-type-archive-product .rozhika-loading-overlay,
    body.tax-product_cat .rozhika-loading-overlay {
        backdrop-filter: blur(6px);
    }
}

body.post-type-archive-product .rozhika-loading-popup,
body.tax-product_cat .rozhika-loading-popup {
    background: #ffffff;
    /* RZK 2026-08-27: dead `border-radius: 18px` removed; won by L4112 */;
    /* RZK 2026-08-27: dead `padding: 32px 48px` removed; won by L4113 */;
    box-shadow: 0 25px 60px rgba(12, 7, 31, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 340px;
    width: 100%;
}

body.post-type-archive-product .rozhika-loading-overlay .spinner-icon,
body.tax-product_cat .rozhika-loading-overlay .spinner-icon {
    /* RZK 2026-08-27: dead `width: 54px` removed; won by L4118 */;
    /* RZK 2026-08-27: dead `height: 54px` removed; won by L4119 */;
    border: 4px solid rgba(124, 77, 255, 0.2);
    border-top-color: #7c4dff;
    border-radius: 50%;
    /* RZK 2026-08-27: dead `margin: 0 auto 18px` removed; won by L4120 */;
}

@keyframes rozhikaSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body.post-type-archive-product .rozhika-loading-overlay p,
body.tax-product_cat .rozhika-loading-overlay p {
    color: #1f1f1f;
    /* RZK 2026-08-27: dead `font-size: 15px` removed; won by L4125 */;
    font-weight: 600;
    margin: 0;
}

/* ===================================
   PAGINATION - SHOP ONLY
   =================================== */
body.post-type-archive-product .woocommerce-pagination,
body.tax-product_cat .woocommerce-pagination {
    text-align: center;
    /* RZK 2026-08-27: dead `margin-top: 40px` removed; won by L4055 */;
    /* RZK 2026-08-27: dead `padding: 20px 0` removed; won by L4056 */;
}

body.post-type-archive-product .woocommerce-pagination .page-numbers,
body.tax-product_cat .woocommerce-pagination .page-numbers {
    display: inline-block;
    /* RZK 2026-08-27: dead `padding: 10px 16px` removed; won by L4061 */;
    /* RZK 2026-08-27: dead `margin: 0 5px` removed; won by L4062 */;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    /* RZK 2026-08-27: dead `border-radius: 6px` removed; won by L4064 */;
    color: #333333;
    text-decoration: none;
    font-weight: 600;
}

body.post-type-archive-product .woocommerce-pagination .page-numbers:hover,
body.post-type-archive-product .woocommerce-pagination .page-numbers.current,
body.tax-product_cat .woocommerce-pagination .page-numbers:hover,
body.tax-product_cat .woocommerce-pagination .page-numbers.current {
    background-color: #7c4dff;
    color: #ffffff;
    border-color: #7c4dff;
}

.pagination-arrow {
    font-weight: bold;
}

/* ===================================
   PRODUCT BOX - SHOP ONLY
   =================================== */
body.post-type-archive-product .product-small .box-image,
body.tax-product_cat .product-small .box-image {
    position: relative !important;
    overflow: hidden !important;
}

body.post-type-archive-product .rozhika-main-content .product-small .rozhika-badges-container,
body.tax-product_cat .rozhika-main-content .product-small .rozhika-badges-container {
    position: absolute;
    top: -25px;
    left: -2px;
    right: -2px;
    width: calc(100% + 4px);
}

body.post-type-archive-product .product-small .box-image img,
body.tax-product_cat .product-small .box-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ===================================
   HOVER IMAGE FIX - SHOP ONLY
   =================================== */
body.post-type-archive-product .product-small .box-image .back-image,
body.tax-product_cat .product-small .box-image .back-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .product-small .box-image:hover .back-image,
body.post-type-archive-product .product-small:hover .box-image .back-image,
body.tax-product_cat .product-small .box-image:hover .back-image,
body.tax-product_cat .product-small:hover .box-image .back-image{
    opacity: 1 !important;
}
}

body.post-type-archive-product .product-small .box-image > a > img:first-child,
body.tax-product_cat .product-small .box-image > a > img:first-child {
    position: relative !important;
    z-index: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .product-small .box-image:hover > a > img:first-child,
body.post-type-archive-product .product-small:hover .box-image > a > img:first-child,
body.tax-product_cat .product-small .box-image:hover > a > img:first-child,
body.tax-product_cat .product-small:hover .box-image > a > img:first-child{
    opacity: 0 !important;
}
}

/* ===================================
   APPLY/CLEAR BUTTONS - DESKTOP SIDEBAR
   =================================== */
.rozhika-sidebar .filter-apply-section {
    padding: 20px 0 0 0;
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
}

/* RZK 2026-08-26 -- this grouped rule is the one that actually wins for both
   buttons (measured 14px on the page). `.filter-apply-button` also declares
   15px further up this file and `.filter-clear-button` declares 14px, but both
   are earlier with the same specificity, so they never applied. Ramped here, at
   the winning declaration: 12px at 320px, 14px from 768px up. */
.filter-apply-button,
.filter-clear-button {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
}

.filter-apply-button {
    background-color: #7c4dff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.2);
}

.filter-apply-button:hover {
    background-color: #6839eb;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
}

.filter-apply-button:active {
    transform: scale(0.98);
}

.filter-clear-button {
    background-color: #ffffff;
    color: #666666;
    border: 2px solid #e0e0e0;
}

.filter-clear-button:hover {
    background-color: #f8f8f8;
    border-color: #d0d0d0;
}

.filter-clear-button:active {
    transform: scale(0.98);
}

/* ===================================
   HIDE DEFAULT SIDEBAR - SHOP ONLY
   =================================== */
body.post-type-archive-product #secondary,
body.post-type-archive-product .shop-sidebar,
body.tax-product_cat #secondary,
body.tax-product_cat .shop-sidebar {
    display: none !important;
}

body.post-type-archive-product #primary,
body.post-type-archive-product .large-12,
body.tax-product_cat #primary,
body.tax-product_cat .large-12 {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===================================
   MOBILE TOOLBAR (FILTER + SORT BUTTONS)
   =================================== */
.rozhika-mobile-toolbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    /* RZK 2026-08-27: dead `padding: 12px 15px` removed; won by L3977 */;
    /* RZK 2026-08-27: dead `gap: 10px` removed; won by L3978 */;
}

/* Mobile toolbar - stays below stuck header on shop pages */
/*
 * RZK 2026-09-24: fallback 0px -> 100px.
 *
 * This native `position: sticky` layer is the progressive-enhancement path: it
 * works with NO JavaScript at all, and is deliberately switched off again
 * (`position: relative !important`) once `body.rozhika-shop-toolbar-mechanic-ready`
 * signals that the JS clone has taken over.
 *
 * But `--rozhika-header-height` is only ever set by updateHeaderHeight() in
 * ux-enhancer.js, which WP Rocket Delay JS holds back until the first user
 * interaction. So for the whole ~3.75s before that script runs, this resolved to
 * `top: 0` and the toolbar stuck itself at the very top of the viewport - i.e.
 * BEHIND the 100px sticky header, invisible. Measured live: `position: sticky`,
 * `top: 0px`, toolbar at viewport y=0, header bottom at y=100, usable=false for
 * 200ms..2200ms, and the JS clone only appeared at ~3750ms.
 *
 * That is exactly the "scroll fast after a reload and the bar is missing for a
 * few seconds" report. 100px is the real stuck-header height on shop pages
 * (70px logo row + 30px #wide-nav), so the bar now sits correctly from the very
 * first frame with zero JavaScript. Once the script does load, the variable
 * supplies the exact value and the clone takes over as before.
 */
body.post-type-archive-product .rozhika-mobile-toolbar,
body.tax-product_cat .rozhika-mobile-toolbar {
    /*
     * RZK 2026-09-24 (3): the fallback is the height of the STUCK header, which
     * is 70px (the 70px logo row; the 30px #wide-nav row steps aside while a
     * page bar is up - see the .header-wrapper.stuck rule at the end of this
     * file). --rozhika-header-height is only set by ux-enhancer.js, so before
     * Delay-JS releases that script the fallback is all we have; 100px parked
     * the native layer 30px lower than the JS clone, which is exactly the
     * "it sticks differently at first" jump. Both layers now use one offset.
     */
    top: var(--rozhika-header-height, 70px);
}

/* RZK 2026-09-24 (task 1): the pre-JS dressing that used to live here is gone.
 * It gave the in-page toolbar the clone's surface while it stood in for the
 * bar. The header bar now covers that window, so dressing the in-page
 * element only restyled it at rest for no reason. */

/* Desktop view (850px+) - fixed top position */
@media (min-width: 850px) {
    body.post-type-archive-product .rozhika-mobile-toolbar,
    body.tax-product_cat .rozhika-mobile-toolbar {
        top: 152px;
    }
}

.rozhika-mobile-filter-btn,
.rozhika-mobile-sort-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* RZK 2026-08-27: dead `gap: 8px` removed; won by L3984 */;
    background: #ffffff;
    border: 1px solid #d0d0d0;
    /* RZK 2026-08-27: dead `border-radius: 8px` removed; won by L3985 */;
    /* RZK 2026-08-27: dead `font-size: 14px` removed; won by L3983 */;
    font-weight: 600;
    color: #333333;
    cursor: pointer;
    margin-bottom: 0;
}

.rozhika-mobile-filter-btn:active,
.rozhika-mobile-sort-btn:active {
    background: #f5f5f5;
    transform: scale(0.98);
}

.rozhika-mobile-filter-btn svg,
.rozhika-mobile-sort-btn svg {
    flex-shrink: 0;
}

/* ===================================
   MODAL STYLES - PREMIUM DESIGN
   =================================== */
.rozhika-sort-modal,
.rozhika-filter-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    height: var(--rozhika-viewport-height, 100dvh);
    z-index: 99999;
    direction: rtl;
}

.rozhika-sort-modal.active,
.rozhika-filter-modal.active {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 90vh;
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - 12px));
    max-height: min(90vh, calc(var(--rozhika-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - 12px));
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .rozhika-sort-modal.rozhika-swipe-sheet .modal-content,
    .rozhika-filter-modal.rozhika-swipe-sheet .modal-content {
        transform: translate3d(0, var(--rozhika-sheet-translate, 0px), 0);
        will-change: transform;
    }

    .rozhika-sort-modal.rozhika-swipe-sheet.is-dragging .modal-content,
    .rozhika-filter-modal.rozhika-swipe-sheet.is-dragging .modal-content {
    }

    .rozhika-sort-modal.rozhika-swipe-sheet .modal-header,
    .rozhika-filter-modal.rozhika-swipe-sheet .modal-header {
        touch-action: none;
        user-select: none;
        cursor: grab;
    }

    .rozhika-sort-modal.rozhika-swipe-sheet.is-dragging .modal-header,
    .rozhika-filter-modal.rozhika-swipe-sheet.is-dragging .modal-header {
        cursor: grabbing;
    }

    .rozhika-sort-modal.rozhika-swipe-sheet .modal-body,
    .rozhika-filter-modal.rozhika-swipe-sheet .modal-body {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    position: relative;
}

/* Drag Handle Indicator */
.modal-header::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

.modal-header h3 {
    margin: 0;
    /* RZK 2026-08-26 fluid type: was a flat 20px at every viewport.
       House scale -> 16px at 320px, 20px from 768px up, so tablet and
       desktop are unchanged. */
    font-size: clamp(16px, 13.14px + 0.8929vw, 20px);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
}

/* RZK 2026-08-26 -- single, self-sufficient definition of the modal close
   control. What was wrong before, measured on production:

     * `width/height: 36px` did not survive. Flatsome's `button{padding:0 1.2em}`
       applies here, and at the 22px font that is 26.4px each side, so the button
       measured 52.8 x 55px instead of a 36px square -- and not even square.
     * `border-radius: 50%` lost outright to Flatsome's
       `button:not(.icon){border-radius:8px!important}`, so a control designed as
       a circle rendered as an 8px rounded rectangle.
     * the glyph was the text character `&times;`, whose ink measured 1.83px
       above the optical centre in the filter modal and 2.50px above in the sort
       modal. Text is placed by font metrics, not geometry, so it cannot be
       reliably centred and the error differed between the two panels.

   All three are fixed at source rather than with another override. The markup
   now carries Flatsome's own `icon` class, so `:not(.icon)` stops matching and
   there is no !important left to out-shout. Padding is zeroed explicitly because
   the theme sets it on the bare `button` element, and the glyph is now an inline
   SVG symmetric about its viewBox centre.

   44px square is deliberate: a comfortable tap target, and an even number so the
   icon lands on whole pixels instead of straddling one. */
.modal-close {
    box-sizing: border-box;
    /* `.modal-header` is a flex container, so this button is a flex item and the
       default `flex-shrink: 1` was squeezing it: measured 36.7px wide at 320px
       rising to 42.2px at 1280px against a fixed 44px height, i.e. never square
       and never the same twice. `flex: 0 0 44px` pins it. */
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    color: #666666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* the button holds no text now, so no line box can bias the icon */
    line-height: 0;
    font-size: 0;
}

/* The glyph. Sized in px so it is independent of any inherited font-size, and
   `pointer-events:none` so a tap always resolves to the button itself -- the
   handlers are delegated on `#close-filter-modal` / `#close-sort-modal`, and on
   `.modal-close` via closest(). */
.modal-close > svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    pointer-events: none;
}

.modal-close:hover {
    background: #e8e8e8;
    color: #333333;
}

.modal-close:active {
    transform: scale(0.95);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 24px 24px;
    -webkit-overflow-scrolling: touch;
}

.modal-body::-webkit-scrollbar {
    width: 4px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.modal-footer {
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fafafa;
}

.modal-apply-btn {
    width: 100%;
    padding: 16px;
    background: #7c4dff;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    /* RZK 2026-08-26 fluid type: was a flat 16px. House scale, floored at
       12.8px (0.80 x 16) rather than 12px, because this is the panel's
       primary action and it keeps a clear step above the option labels.
       768px and above unchanged. */
    font-size: clamp(12.8px, 10.51px + 0.7143vw, 16px);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.2);
}

.modal-apply-btn:active {
    background: #6839eb;
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
}

/* ===================================
   SORT MODAL OPTIONS
   =================================== */
.sort-option-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.sort-option-radio:hover {
    background: #f5f5f5;
}

.sort-option-radio.active {
    background: #f0e7ff;
    border-color: #7c4dff;
}

.sort-option-radio input[type="radio"] {
    /* RZK 2026-08-26: 20px -> 24px. Measured at 20x20px, under the 24px
       minimum tap-target size Lighthouse audits for. The label beside it is
       clickable too, so this only enlarges the smallest hit area; it does
       not change the interaction. */
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    accent-color: #7c4dff;
}

.sort-option-radio .option-label {
    flex: 1;
    /* RZK 2026-08-26 fluid type: was a flat 15px at every viewport.
       House scale -> 12px at 320px, 15px from 768px up, so tablet and
       desktop are unchanged. */
    font-size: clamp(12px, 9.86px + 0.6696vw, 15px);
    color: #333333;
    font-weight: 500;
}

.sort-option-radio.active .option-label {
    font-weight: 700;
    color: #7c4dff;
}

/* ===================================
   FILTER MODAL SPECIFIC - MOBILE OPTIMIZED
   =================================== */
.filter-modal-content {
    max-height: 92vh;
    max-height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px) - 12px));
    max-height: min(92vh, calc(var(--rozhika-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - 12px));
}

.filter-modal-content .modal-body {
    padding: 12px 24px 24px 24px;
}

.rozhika-shop-layout .filter-modal-content .filter-section {
    margin-bottom: 8px;
}

.filter-modal-content .filter-apply-section {
    display: flex;
    gap: 12px;
    margin-top: 0;
    padding: 0;
    border-top: none;
}

/* RZK 2026-08-27 -- THIS is why the earlier button fix was not visible in the
   modal. The base rule `.filter-apply-button, .filter-clear-button` was ramped in
   an earlier round, but this rule is scoped to `.filter-modal-content`, which is
   specificity 20 against the base rule's 10 -- so inside the modal it won and the
   buttons stayed a flat 15px. Measured with the modal open and populated:
   15.00px at both 390px and 1280px.

   Ramped here, at the declaration that actually wins inside the modal:
   12px at 320px, 15px from 768px up, so desktop is unchanged. */
.filter-modal-content .filter-apply-button,
.filter-modal-content .filter-clear-button {
    flex: 1;
    padding: 16px;
    font-size: clamp(12px, 9.86px + 0.6696vw, 15px);
    font-weight: 600;
    border-radius: 12px;
}

.filter-modal-content .filter-apply-button {
    background: #7c4dff;
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.2);
}

.filter-modal-content .filter-clear-button {
    background: #ffffff;
    border: 2px solid #e0e0e0;
}

/* ===================================
   MOBILE CHEVRON STYLING (<1024px)
   =================================== */
@media (max-width: 1023px) {
    .filter-title .toggle-icon {
    /* RZK 2026-08-27: dead `width: 32px` removed; won by L4011 */;
    /* RZK 2026-08-27: dead `height: 32px` removed; won by L4012 */;
    }
    
    .filter-title .toggle-icon svg {
    /* RZK 2026-08-27: dead `width: 18px` removed; won by L4017 */;
    /* RZK 2026-08-27: dead `height: 18px` removed; won by L4018 */;
    }
}

/* ===================================
   HIDE ELEMENTS ON MOBILE
   =================================== */
@media (max-width: 768px) {
    body.post-type-archive-product .rozhika-mobile-toolbar,
    body.tax-product_cat .rozhika-mobile-toolbar {
        display: flex !important;
    }
    
    body.post-type-archive-product .rozhika-sort-bar,
    body.tax-product_cat .rozhika-sort-bar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-sidebar,
    body.tax-product_cat .rozhika-sidebar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-shop-layout,
    body.tax-product_cat .rozhika-shop-layout {
        display: block !important;
    }
    
    body.post-type-archive-product .rozhika-main-content,
    body.tax-product_cat .rozhika-main-content {
        width: 100%;
    }
}

/* ===================================
   PROGRESSIVE BADGE SIZING
   =================================== */

/* Desktop Large: 1200px+ */
@media (min-width: 1201px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -25px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 11px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 5px 10px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 15px` removed; won by L3742 */;
    }
}

/* Desktop: 1024px-1200px */
@media (max-width: 1200px) and (min-width: 1025px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -23px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 10px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 4px 9px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 14px` removed; won by L3742 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 5px;
    }
}

/* Tablet: 769px-1024px - Same as mobile (768px and below) */
@media (max-width: 1024px) and (min-width: 769px) {
    body.post-type-archive-product .rozhika-mobile-toolbar,
    body.tax-product_cat .rozhika-mobile-toolbar {
        display: flex !important;
    }
    
    body.post-type-archive-product .rozhika-sort-bar,
    body.tax-product_cat .rozhika-sort-bar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-sidebar,
    body.tax-product_cat .rozhika-sidebar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-shop-layout,
    body.tax-product_cat .rozhika-shop-layout {
        display: block !important;
    }
    
    body.post-type-archive-product .rozhika-main-content,
    body.tax-product_cat .rozhika-main-content {
        width: 100%;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -22px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 9px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 3px 8px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 13px` removed; won by L3742 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 6px;
    }
}

/* Tablet Small: 600px-768px */
@media (max-width: 768px) and (min-width: 601px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -20px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 8px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 3px 7px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 12px` removed; won by L3742 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 6px;
    }
}

/* ====== 600px-430px = 3 COLUMNS ====== */
@media (max-width: 600px) and (min-width: 431px) {
    body.post-type-archive-product .products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat .products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    /* gap 12px deleted 2026-08-26: dead. `gap: 0 !important` on the
       unconditional rule below wins at every width. See its note. */
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -25px;
        left: -2px;
        right: -2px;
        width: calc(100% + 4px);
        gap: 3px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 7px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 2px 5px` removed; won by L3761 */;
    /* RZK 2026-08-27: dead `letter-spacing: 0.2px` removed; won by L3765 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    /* RZK 2026-08-27: dead `padding: 3px 6px` removed; won by L2748 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 11px` removed; won by L3742 */;
    }
    
    body.post-type-archive-product .sort-option,
    body.tax-product_cat .sort-option {
    /* RZK 2026-08-27: dead `padding: 6px 10px` removed; won by L3968 */;
    /* RZK 2026-08-27: dead `font-size: 12px` removed; won by L3969 */;
    }
}

.rozhika-badge-sale.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.rozhika-price-shell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.rozhika-price-caption {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
}

.rozhika-price-regular {
    font-size: max(12px, 0.85rem);;
    color: #a0a3ab;
    text-decoration: line-through;
}

.rozhika-price-regular.is-hidden {
    display: none;
}

body.post-type-archive-product .products .product .box-text .category,
body.post-type-archive-product .products .product .box-text .product-category,
body.post-type-archive-product .products .product .box-text .meta-cat,
body.tax-product_cat .products .product .box-text .category,
body.tax-product_cat .products .product .box-text .product-category,
body.tax-product_cat .products .product .box-text .meta-cat {
    order: 1;
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: max(12px, 0.8rem);;
    color: #7b7f89;
    margin: 0;
}

body.post-type-archive-product .products .product .woocommerce-loop-product__title,
body.tax-product_cat .products .product .woocommerce-loop-product__title {
    order: 2;
}

body.post-type-archive-product .products .product .rozhika-price-shell,
body.tax-product_cat .products .product .rozhika-price-shell {
    order: 3;
    /* RZK 2026-08-27: dead `min-height: 64px` removed; won by L3806 */;
    margin: 0 0 4px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* RZK 2026-08-27: dead `gap: 4px` removed; won by L3804 */;
}

body.post-type-archive-product .products .product .rozhika-rating-row,
body.tax-product_cat .products .product .rozhika-rating-row {
    order: 4;
    /* RZK 2026-08-27: dead `min-height: 50px` removed; won by L3828 */;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* RZK 2026-08-27: dead `gap: 4px` removed; won by L3826 */;
    /* RZK 2026-08-27: dead `margin: 0 0 10px 0` removed; won by L3827 */;
    width: 100%;
}

body.post-type-archive-product .products .product .rozhika-rating-row .star-rating,
body.tax-product_cat .products .product .rozhika-rating-row .star-rating {
    margin: 0;
    float: none;
    width: 100%;
    display: block;
    overflow: visible;
}

body.post-type-archive-product .products .product .rozhika-rating-row .rating-average,
body.tax-product_cat .products .product .rozhika-rating-row .rating-average,
body.post-type-archive-product .products .product .rozhika-rating-row .rozhika-rating-count,
body.tax-product_cat .products .product .rozhika-rating-row .rozhika-rating-count {
    display: block;
    width: 100%;
    text-align: right;
}

body.post-type-archive-product .products .product .rozhika-rating-row .rating-average,
body.tax-product_cat .products .product .rozhika-rating-row .rating-average {
    /* RZK 2026-08-27: dead `font-size: 0.82rem` removed; won by L3833 */;
    font-weight: 600;
    color: #5c2bb9;
    margin-top: 2px;
}

body.post-type-archive-product .products .product .rozhika-rating-row .rozhika-rating-count,
body.tax-product_cat .products .product .rozhika-rating-row .rozhika-rating-count {
    /* RZK 2026-08-27: dead `font-size: 0.78rem` removed; won by L3838 */;
    color: #8a8e98;
    margin-top: 4px;
}

body.post-type-archive-product .products .product .rozhika-variant-shell,
body.tax-product_cat .products .product .rozhika-variant-shell {
    order: 5;
    margin-top: auto;
    padding-top: 16px;
    flex-shrink: 0;
}

.rozhika-variant-shell {
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 64px;
    position: relative;
}

.rozhika-variant-shell.variant-placeholder {
    min-height: 64px;
    border-top: none;
    padding-top: 0;
    visibility: hidden;
}

.rozhika-variant-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: #f8f6ff;
    color: #3b2d60;
    border: 1px solid rgba(92, 43, 185, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: max(12px, 0.9rem);;
    cursor: pointer;
    min-height: 48px;
}

.rozhika-variant-toggle:hover {
    border-color: rgba(92, 43, 185, 0.5);
    background: #f2ecff;
}

.rozhika-variant-toggle:focus-visible {
    outline: 2px solid rgba(92, 43, 185, 0.5);
    outline-offset: 2px;
}

.variant-toggle-label {
    display: block;
    width: 100%;
    text-align: right;
    line-height: 1.4;
}

.rozhika-variant-panel {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    pointer-events: none;
}

.rozhika-variant-panel.is-open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 6px;
    padding-top: 4px;
}

.variant-panel-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* RZK 2026-08-27 fluid type: 0.85rem resolved to a flat 13.6px at every
       width. 11.5px at 320px, 13.6px from 768px up. */
    font-size: clamp(12px, 10.00px + 0.4687vw, 13.6px);;
    color: #5c2bb9;
    font-weight: 600;
}

.variant-panel-meta .variant-meta-price {
    font-weight: 700;
    text-align: right;
}

.variant-chip-list {
    display: flex;
    flex-wrap: nowrap;
    /* RZK 2026-08-27: dead `gap: 16px` removed; won by L3903 */;
    overflow-x: auto;
    overflow-y: clip;
    /* RZK 2026-08-27: dead `padding: 20px 16px 40px` removed; won by L3904 */;
    /* RZK 2026-08-27: dead `margin: -20px -16px -40px` removed; won by L3905 */;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: scroll-position;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.variant-chip-list::-webkit-scrollbar {
    display: none;
}

.variant-chip-list.is-dragging {
    cursor: grabbing;
}

.variant-chip {
    flex: 0 0 200px;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(92, 43, 185, 0.25);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    color: #21242b;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.05);
    min-height: 108px;
}

.variant-chip.is-active {
    background: linear-gradient(135deg, #5c2bb9 0%, #8b5cf6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(92, 43, 185, 0.3);
}

.variant-chip:focus-visible {
    outline: 2px solid rgba(92, 43, 185, 0.8);
    outline-offset: 2px;
}

.variant-chip .chip-label-text {
    font-size: max(12px, 0.85rem);;
    font-weight: 600;
    line-height: 1.4;
}

.variant-chip .chip-quantity-text {
    font-size: max(12px, 0.75rem);;
    color: #7d46c0;
    opacity: 0.8;
}

.variant-chip.is-active .chip-quantity-text {
    color: rgba(255, 255, 255, 0.9);
}

.variant-chip .chip-price-value {
    font-size: max(12px, 0.95rem);;
    font-weight: 700;
    color: #111;
    margin-top: auto;
}

.variant-chip.is-active .chip-price-value {
    color: #fff;
}

.variant-chip .chip-regular-value {
    display: none;
}

/* ====== MOBILE OPTIMIZATION: 320px-768px ====== */

/* 768px and below - Show mobile toolbar */
@media (max-width: 768px) {
    body.post-type-archive-product .rozhika-mobile-toolbar,
    body.tax-product_cat .rozhika-mobile-toolbar {
        display: flex !important;
    }
    
    body.post-type-archive-product .rozhika-sort-bar,
    body.tax-product_cat .rozhika-sort-bar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-sidebar,
    body.tax-product_cat .rozhika-sidebar {
        display: none !important;
    }
    
    body.post-type-archive-product .rozhika-shop-layout,
    body.tax-product_cat .rozhika-shop-layout {
        display: block !important;
    }
    
    body.post-type-archive-product .rozhika-main-content,
    body.tax-product_cat .rozhika-main-content {
        width: 100%;
        padding: 0 10px;
    }
}

/* Tablet Small: 600px-768px = 3 COLUMNS */
@media (max-width: 768px) and (min-width: 601px) {
    body.post-type-archive-product .products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat .products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    /* gap 12px deleted 2026-08-26: dead. `gap: 0 !important` on the
       unconditional rule below wins at every width. See its note. */
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -20px;
        left: -16px;
        right: -16px;
        width: calc(100% + 32px);
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 8px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 3px 6px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 11px` removed; won by L3742 */;
    }
}

/* ====== 430px-600px = 3 COLUMNS ====== */
@media (max-width: 600px) and (min-width: 431px) {
    body.post-type-archive-product .products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat .products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    /* gap 10px deleted 2026-08-26: dead. `gap: 0 !important` on the
       unconditional rule below wins at every width. See its note. */
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -18px;
        left: -14px;
        right: -14px;
        width: calc(100% + 28px);
        gap: 3px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 7px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 2px 5px` removed; won by L3761 */;
    /* RZK 2026-08-27: dead `letter-spacing: 0.1px` removed; won by L3765 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    /* RZK 2026-08-27: dead `padding: 3px 6px` removed; won by L2748 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 10px` removed; won by L3742 */;
    }
}

/* ====== 320px-430px = 2 COLUMNS ====== */
@media (max-width: 430px) {
    body.post-type-archive-product .products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat .products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    /* gap 8px deleted 2026-08-26: dead. `gap: 0 !important` on the
       unconditional rule below wins at every width. See its note. */
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -25px;
        left: -2px;
        right: -2px;
        width: calc(100% + 4px);
        gap: 2px;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 6px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 2px 4px` removed; won by L3761 */;
    /* RZK 2026-08-27: dead `letter-spacing: 0px` removed; won by L3765 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    /* RZK 2026-08-27: dead `padding: 2px 4px` removed; won by L2748 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 9px` removed; won by L3742 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .product.outofstock::after,
    body.post-type-archive-product .rozhika-main-content .product-small.outofstock::after,
    body.tax-product_cat .rozhika-main-content .product.outofstock::after,
    body.tax-product_cat .rozhika-main-content .product-small.outofstock::after {
    /* RZK 2026-08-27: dead `font-size: 9px` removed; won by L4074 */;
    /* RZK 2026-08-27: dead `padding: 5px 10px` removed; won by L4075 */;
    }
    
    body.post-type-archive-product .rozhika-main-content,
    body.tax-product_cat .rozhika-main-content {
        padding: 0 8px;
    }
    
    .rozhika-mobile-toolbar {
    /* RZK 2026-08-27: dead `padding: 10px 12px` removed; won by L3977 */;
    /* RZK 2026-08-27: dead `gap: 8px` removed; won by L3978 */;
    }
    
    .rozhika-mobile-filter-btn svg,
    .rozhika-mobile-sort-btn svg {
    /* RZK 2026-08-27: dead `width: 16px` removed; won by L3990 */;
    /* RZK 2026-08-27: dead `height: 16px` removed; won by L3991 */;
    }
}

/* ====== EXTRA SMALL: 320px ====== */
@media (max-width: 360px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container {
        top: -25px;
        left: -2px;
        right: -2px;
        width: calc(100% + 4px);
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge,
    body.tax-product_cat .rozhika-main-content .rozhika-badge {
    /* RZK 2026-08-27: dead `font-size: 5px` removed; won by L3763 */;
    /* RZK 2026-08-27: dead `padding: 1px 3px` removed; won by L3761 */;
    }
    
    body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
    body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: 8px` removed; won by L3742 */;
    }
    
    .rozhika-mobile-filter-btn,
    .rozhika-mobile-sort-btn {
    /* RZK 2026-08-27: dead `font-size: 12px` removed; won by L3983 */;
    }
}

@media (max-width: 600px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 6px;
    }
}

@media (max-width: 480px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 8px;
    }
}

@media (max-width: 360px) {
    body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
    body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
        margin-top: 10px;
    }
}

/* ===================================
   BADGE SCALE OVERRIDES
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    min-height: auto;
    min-width: auto;
    padding: clamp(4px, 1vw, 8px) clamp(10px, 2vw, 16px);
    font-size: clamp(12px, 1.8vw, 13px);;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: auto;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    /* RZK 2026-08-27: dead `font-size: clamp(12px, 2.3vw, 16px)` removed; won by L3742 */;
    /* RZK 2026-08-27: dead `line-height: 1.05` removed; won by L3743 */;
    /* RZK 2026-08-27: dead `display: inline-flex` removed; won by L3746 */;
    /* RZK 2026-08-27: dead `align-items: center` removed; won by L3747 */;
    /* RZK 2026-08-27: dead `justify-content: center` removed; won by L3748 */;
    min-width: unset;
    padding: 0;
    /* RZK 2026-08-27: dead `font-variant-numeric: tabular-nums` removed; won by L3745 */;
    white-space: nowrap;
}

/* ===================================
   VARIATIONS TOGGLE - PREMIUM
   =================================== */
.filter-section.filter-toggle-variations {
    margin-bottom: 16px;
    padding: 0;
    background: linear-gradient(135deg, var(--rozhika-bg-secondary) 0%, var(--rozhika-bg-primary) 100%);
    border-radius: var(--rozhika-radius-md);
    border: 1px solid var(--rozhika-border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.filter-section.filter-toggle-variations .filter-content {
    max-height: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    visibility: visible !important;
}

.filter-toggle-variations .toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.filter-toggle-variations .toggle-switch:hover .toggle-label {
    color: var(--rozhika-text-primary);
}

.filter-toggle-variations .toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-toggle-variations .toggle-switch .slider {
    position: relative;
    width: 56px;
    height: 30px;
    background: #e0e0e0;
    border-radius: 30px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.filter-toggle-variations .toggle-switch .slider:before {
    content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.filter-toggle-variations .toggle-switch input:checked + .slider {
    background: var(--rozhika-gradient-primary);
    box-shadow: 0 4px 16px var(--rozhika-primary-glow);
}

.filter-toggle-variations .toggle-switch input:checked + .slider:before {
    transform: translateX(26px);
}

.filter-toggle-variations .toggle-switch:active .slider:before {
    width: 28px;
}

/* RZK 2026-08-27 fluid type: was a flat 14px. Same ramp as the tree rows. */
.filter-toggle-variations .toggle-label {
    flex: 1;
    font-size: clamp(12px, 10.57px + 0.4464vw, 14px);
    font-weight: 700;
    color: var(--rozhika-text-secondary);
    line-height: 1.5;
    text-align: right;
}

/* ===================================
   ATTRIBUTE FILTERS - VISIBILITY
   =================================== */
.filter-section.filter-attribute {
    display: none !important;
}

.filter-section.filter-attribute.is-visible {
    display: block !important;
}

body.tax-product_cat .filter-section.filter-attribute {
    display: block !important;
}

/* ===================================
   RTL SUPPORT
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-rtl .rozhika-badges-container,
body.tax-product_cat .rozhika-main-content .rozhika-rtl .rozhika-badges-container {
    left: -20px;
    right: -20px;
    width: calc(100% + 40px);
    flex-direction: row-reverse;
}

/* ===================================
   CUSTOM HOT DEAL BADGE (REPLACES FLATSOME DEFAULT)
   =================================== */
body.post-type-archive-product .badge-container.absolute.left.top,
body.tax-product_cat .badge-container.absolute.left.top {
    left: auto !important;
    right: -18px;
    top: -20px;
    transform: translate(0, -4px);
    z-index: 20;
}

body.post-type-archive-product .badge-container.absolute.left.top .callout.badge,
body.tax-product_cat .badge-container.absolute.left.top .callout.badge {
    background: transparent !important;
    border-radius: 999px;
    border: none;
    padding: 0;
    box-shadow: 0 10px 24px rgba(255, 111, 145, 0.35);
    position: relative;
}

body.post-type-archive-product .badge-container.absolute.left.top .callout.badge::before,
body.tax-product_cat .badge-container.absolute.left.top .callout.badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    padding: 1.6px;
    background: linear-gradient(135deg, #ffb199 0%, #ff6f91 45%, #ff2d7f 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

body.post-type-archive-product .badge-container.absolute.left.top .badge-inner.secondary.on-sale,
body.tax-product_cat .badge-container.absolute.left.top .badge-inner.secondary.on-sale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: none;
    box-shadow: none;
    padding: 6px 14px;
    background: transparent;
}

body.post-type-archive-product .badge-container.absolute.left.top .badge-inner.secondary.on-sale .onsale,
body.tax-product_cat .badge-container.absolute.left.top .badge-inner.secondary.on-sale .onsale {
    color: transparent;
    background: linear-gradient(135deg, #ffb199 0%, #ff6f91 45%, #ff2d7f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    padding: 0;
}

body.post-type-archive-product .badge-container.absolute.left.top .badge-frame .badge-inner,
body.post-type-archive-product .badge-container.absolute.left.top .badge-outline .badge-inner,
body.tax-product_cat .badge-container.absolute.left.top .badge-frame .badge-inner,
body.tax-product_cat .badge-container.absolute.left.top .badge-outline .badge-inner {
    background-color: transparent !important;
    border: none !important;
}

/* ===================================
   CLEAN LAYOUT
   =================================== */
body.post-type-archive-product .shop-container > .row,
body.tax-product_cat .shop-container > .row {
    max-width: 100% !important;
}

body.post-type-archive-product .products,
body.tax-product_cat .products {
    margin-bottom: 40px;
}

/* ===================================
   SPECTACULAR EMPTY STATE - $100,000 DESIGN
   =================================== */

.rozhika-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* RZK 2026-08-27: dead `padding: clamp(60px, 10vw, 120px) 20px` removed; won by L4083 */;
    text-align: center;
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}

@keyframes emptyFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animated Icon Container */
.rozhika-empty-icon {
    /* RZK 2026-08-27: dead `width: clamp(180px, 25vw, 280px)` removed; won by L4087 */;
    /* RZK 2026-08-27: dead `height: clamp(180px, 25vw, 280px)` removed; won by L4088 */;
    /* RZK 2026-08-27: dead `margin-bottom: clamp(30px, 5vw, 50px)` removed; won by L4089 */;
    position: relative;
    filter: drop-shadow(0 20px 60px rgba(102, 126, 234, 0.3));
}

@keyframes emptyFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

.rozhika-empty-icon svg {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
 * Never animate inside an SVG sprite definition.
 *
 * The empty-state artwork below lives in <symbol id="rozhika-icon-empty-search-pro">.
 * A <symbol> is a template: it is never painted itself, only its <use> instances
 * are. Chrome nevertheless keeps ticking CSS animations declared on elements
 * inside the symbol, and because these keyframes animate SVG geometry (scale and
 * translate on <circle>, <g> and <path>) every tick forces a full style
 * recalculation plus layout. Measured on /shop/: 121 layouts and 121 style
 * recalculations every 2 seconds, forever, for artwork nobody can see.
 *
 * Scoping the exception to `symbol` descendants is deliberate. A rendered <use>
 * instance is cloned into a shadow tree in which the <symbol> is no longer an
 * ancestor, so a genuinely visible empty state keeps its animation. Verified on
 * the no-results search page: the icon renders at 144x144 and still moves.
 *
 * `symbol .empty-*` is (0,1,1) against the (0,1,0) of the rules below, so it
 * wins on specificity and needs no !important.
 * --------------------------------------------------------------------------- */
symbol .empty-bg-circle,
symbol .empty-main-icon,
symbol .empty-eye,
symbol .empty-sad-line {
}

/* Background Circles Animation */

.empty-circle-1 {
}

.empty-circle-2 {
}

.empty-circle-3 {
}

@keyframes emptyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.15;
    }
}

/* Main Icon Animation */
.empty-main-icon {
    transform-origin: center;
}

@keyframes emptyIconBreathe {
    0%, 100% {
        transform: translate(100px, 100px) scale(1);
    }
    50% {
        transform: translate(100px, 100px) scale(1.05);
    }
}

/* Sad Face Animation */
.empty-sad-line {
    transform-origin: center;
}

@keyframes emptySadness {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
}

/* Eye Blink Animation */

.empty-eye:nth-child(1) {
}

@keyframes emptyBlink {
    0%, 48%, 52%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.1);
    }
}

/* Title Styling */
.rozhika-empty-title {
    /* RZK 2026-08-27: dead `font-size: clamp(24px, 4vw, 36px)` removed; won by L4093 */;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* RZK 2026-08-27: dead `margin: 0 0 clamp(12px, 2vw, 20px) 0` removed; won by L4094 */;
    background-position: 0% 50%;
    background-size: 200% 200%;
    letter-spacing: -0.5px;
}

@keyframes emptyTitleShine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Subtitle Styling */
.rozhika-empty-subtitle {
    /* RZK 2026-08-27: dead `font-size: clamp(14px, 2.5vw, 18px)` removed; won by L4098 */;
    color: #666666;
    /* RZK 2026-08-27: dead `margin: 0 0 clamp(30px, 5vw, 40px) 0` removed; won by L4099 */;
    line-height: 1.6;
    max-width: 500px;
}

@keyframes emptySubtitleFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Suggestions Box */
.rozhika-empty-suggestions {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px solid rgba(102, 126, 234, 0.1);
    /* RZK 2026-08-27: dead `border-radius: 16px` removed; won by L4104 */;
    /* RZK 2026-08-27: dead `padding: clamp(20px, 4vw, 30px)` removed; won by L4103 */;
    max-width: 450px;
    margin: 0 auto 30px auto;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    text-align: right;
}

.rozhika-empty-suggestions::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

@keyframes emptyShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes emptySuggestionsFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rozhika-empty-suggestions > p {
    font-size: clamp(13px, 2vw, 15px);
    font-weight: 600;
    color: #333333;
    margin: 0 0 15px 0;
    text-align: center;
}

/* Suggestions List Container */
.rozhika-empty-suggestions .suggestions-list {
    display: block;
    text-align: right;
    direction: rtl;
    width: 100%;
}

/* Individual Suggestion Item */
.rozhika-empty-suggestions .suggestion-item {
    display: block;
    padding: 10px 0;
    direction: rtl;
    text-align: right;
    margin: 0;
}

/* Suggestion Icon (Emoji) */
.rozhika-empty-suggestions .suggestion-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 0;
}

.rozhika-empty-suggestions .suggestion-icon img {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* Suggestion Text */
.rozhika-empty-suggestions .suggestion-text {
    display: inline-block;
    vertical-align: middle;
    font-size: clamp(12px, 1.8vw, 14px);
    color: #666666;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
}

/* Animation delays for icons */
.rozhika-empty-suggestions .suggestion-item:nth-child(1) .suggestion-icon {
}

.rozhika-empty-suggestions .suggestion-item:nth-child(2) .suggestion-icon {
}

.rozhika-empty-suggestions .suggestion-item:nth-child(3) .suggestion-icon {
}

/* Sparkle animation */
@keyframes emptySparkle {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Hover effect */
.rozhika-empty-suggestions .suggestion-item:hover {
    padding-right: 10px;
}

.rozhika-empty-suggestions .suggestion-item:hover .suggestion-text {
    color: #667eea;
    font-weight: 600;
}

/* Clear button styling */
.no-products-clear-btn {
    padding: 12px 28px !important;
    font-size: 14px !important;
    margin: 0 !important;
    cursor: pointer;
    display: inline-block;
}

.no-products-clear-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 77, 255, 0.25) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .rozhika-empty-state {
    /* RZK 2026-08-27: dead `padding: 40px 15px` removed; won by L4083 */;
        min-height: 50vh;
    }
    
    .rozhika-empty-icon {
    /* RZK 2026-08-27: dead `width: 160px` removed; won by L4087 */;
    /* RZK 2026-08-27: dead `height: 160px` removed; won by L4088 */;
    /* RZK 2026-08-27: dead `margin-bottom: 25px` removed; won by L4089 */;
    }
    
    .rozhika-empty-suggestions {
    /* RZK 2026-08-27: dead `padding: 20px` removed; won by L4103 */;
    }
}

/* ===================================
   DIGIKALA-STYLE GRID SEPARATORS
   Subtle hairlines between products only
   NO changes to card sizes
   =================================== */

/* Separator lines using pseudo-elements - doesn't affect card size */
body.post-type-archive-product .products .product::before,
body.tax-product_cat .products .product::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* RZK 2026-08-27: dead `height: 1px` removed; won by L3913 */;
    /* RZK 2026-08-27: dead `background: #ebebeb` removed; won by L3914 */;
    z-index: 1;
}

body.post-type-archive-product .products .product::after,
body.tax-product_cat .products .product::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* RZK 2026-08-27: dead `width: 1px` removed; won by L3919 */;
    /* RZK 2026-08-27: dead `background: #ebebeb` removed; won by L3920 */;
    z-index: 1;
}

/* Remove left border from first column - 4 columns default */
body.post-type-archive-product .products .product:nth-child(4n+1)::after,
body.tax-product_cat .products .product:nth-child(4n+1)::after {
    display: none;
}

/* Hover effect - subtle background change */
@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover,
body.tax-product_cat .products .product:hover{
    /* RZK 2026-08-27: dead `background: #fafafa` removed; won by L3934 */;
    /* RZK 2026-08-27: dead `z-index: 2` removed; won by L3935 */;
}
}

body.post-type-archive-product .products .product,
body.tax-product_cat .products .product {
    position: relative;
    /* RZK 2026-08-27: dead `transition: background 0.25s ease` removed; won by L3928 */;
}

/* Image subtle zoom on hover */
body.post-type-archive-product .products .product .box-image img,
body.tax-product_cat .products .product .box-image img {
    /* RZK 2026-08-27: dead `transition: transform 0.35s ease` removed; won by L3940 */;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .box-image img,
body.tax-product_cat .products .product:hover .box-image img{
    /* RZK 2026-08-27: dead `transform: scale(1.02)` removed; won by L3945 */;
}
}

/* ===================================
   FLUID RESPONSIVE TYPOGRAPHY
   Using clamp() for smooth scaling
   =================================== */

/* Product title - fluid scaling */
body.post-type-archive-product .products .product .woocommerce-loop-product__title,
body.post-type-archive-product .products .product .rozhika-product-title,
body.tax-product_cat .products .product .woocommerce-loop-product__title,
body.tax-product_cat .products .product .rozhika-product-title {
    font-size: clamp(12px, 9.86px + 0.6696vw, 15px) !important;
    line-height: 1.5 !important;
}

body.post-type-archive-product .products .product .woocommerce-loop-product__title a,
body.post-type-archive-product .products .product .rozhika-product-title a,
body.tax-product_cat .products .product .woocommerce-loop-product__title a,
body.tax-product_cat .products .product .rozhika-product-title a {
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .woocommerce-loop-product__title a,
body.post-type-archive-product .products .product:hover .rozhika-product-title a,
body.tax-product_cat .products .product:hover .woocommerce-loop-product__title a,
body.tax-product_cat .products .product:hover .rozhika-product-title a{
    /* RZK 2026-08-27: dead `color: var(--rozhika-primary, #7c4dff)` removed; won by L3952 */;
}
}

/* Price - fluid scaling */
body.post-type-archive-product .products .product .price,
body.post-type-archive-product .products .product .rozhika-price-caption,
body.tax-product_cat .products .product .price,
body.tax-product_cat .products .product .rozhika-price-caption {
    font-size: clamp(12px, 2.8vw, 16px) !important;
}

body.post-type-archive-product .products .product .price del,
body.post-type-archive-product .products .product .rozhika-price-regular,
body.tax-product_cat .products .product .price del,
body.tax-product_cat .products .product .rozhika-price-regular {
    font-size: clamp(12px, 2vw, 13px) !important;;
}

/* Category text - fluid */
body.post-type-archive-product .products .product .category,
body.post-type-archive-product .products .product .product-cat,
body.tax-product_cat .products .product .category,
body.tax-product_cat .products .product .product-cat {
    /* RZK 2026-08-27: this caption measured 8.00px at 390px, the smallest text
       on the site, and it carries the category name as words. Its cap is
       already 12px, which is the floor, so there is no room for a ramp that
       does not break legibility: it becomes a flat 12px. Desktop is unchanged,
       since 12px is what it rendered there. */
    font-size: 12px !important;
}

/* Rating text - fluid */
body.post-type-archive-product .products .product .rozhika-rating-count,
body.post-type-archive-product .products .product .rating-average,
body.tax-product_cat .products .product .rozhika-rating-count,
body.tax-product_cat .products .product .rating-average {
    font-size: clamp(12px, 2vw, 13px) !important;;
}

/* Box text padding - fluid */
body.post-type-archive-product .products .product .box-text,
body.tax-product_cat .products .product .box-text {
    padding: clamp(6px, 1.5vw, 12px) !important;
}

/* ===================================
   RESPONSIVE GRID LINE ADJUSTMENTS
   =================================== */

/* 3 columns: 601px - 1024px */
@media (max-width: 1024px) and (min-width: 601px) {
    body.post-type-archive-product .products .product:nth-child(4n+1)::after,
    body.tax-product_cat .products .product:nth-child(4n+1)::after {
        display: block;
    }
    
    body.post-type-archive-product .products .product:nth-child(3n+1)::after,
    body.tax-product_cat .products .product:nth-child(3n+1)::after {
        display: none;
    }
}

/* 3 columns: 431px - 600px */
@media (max-width: 600px) and (min-width: 431px) {
    body.post-type-archive-product .products .product:nth-child(4n+1)::after,
    body.tax-product_cat .products .product:nth-child(4n+1)::after {
        display: block;
    }
    
    body.post-type-archive-product .products .product:nth-child(3n+1)::after,
    body.tax-product_cat .products .product:nth-child(3n+1)::after {
        display: none;
    }
}

/* 2 columns: 320px - 430px */
@media (max-width: 430px) {
    body.post-type-archive-product .products .product:nth-child(4n+1)::after,
    body.post-type-archive-product .products .product:nth-child(3n+1)::after,
    body.tax-product_cat .products .product:nth-child(4n+1)::after,
    body.tax-product_cat .products .product:nth-child(3n+1)::after {
        display: block;
    }
    
    body.post-type-archive-product .products .product:nth-child(2n+1)::after,
    body.tax-product_cat .products .product:nth-child(2n+1)::after {
        display: none;
    }
}

/* 5 columns: 1400px+ */
@media (min-width: 1400px) {
    body.post-type-archive-product .products .product:nth-child(4n+1)::after,
    body.tax-product_cat .products .product:nth-child(4n+1)::after {
        display: block;
    }
    
    body.post-type-archive-product .products .product:nth-child(5n+1)::after,
    body.tax-product_cat .products .product:nth-child(5n+1)::after {
        display: none;
    }
}

/* ===================================
   FLUID BADGE SCALING
   =================================== */
body.post-type-archive-product .rozhika-badge-sale,
body.tax-product_cat .rozhika-badge-sale {
    font-size: clamp(12px, 2vw, 13px) !important;;
    padding: clamp(3px, 0.8vw, 8px) clamp(6px, 1.5vw, 14px) !important;
}

body.post-type-archive-product .rozhika-badge-sale .badge-percent,
body.tax-product_cat .rozhika-badge-sale .badge-percent {
    font-size: clamp(12px, 2.2vw, 16px) !important;;
}

body.post-type-archive-product .rozhika-top-badge .badge-inner,
body.tax-product_cat .rozhika-top-badge .badge-inner {
    font-size: 12px !important;;
    padding: clamp(3px, 0.6vw, 6px) clamp(8px, 1.5vw, 14px) !important;
}

/* ===================================
   FLUID VARIANT TOGGLE  --  REMOVED 2026-08-26
   ===================================
   A block of `!important` fluid rules for `.rozhika-variant-toggle`,
   `.variant-chip`, `.chip-label-text` and `.chip-price-value` used to sit here.
   Every one of its declarations was re-declared further down this same file by
   "VARIANT SYSTEM - FLUID PERFECT", with the same selectors, the same media
   context and the same importance -- so source order made that later block win
   and none of these rules ever reached the page. Two competing fluid scales for
   one component also meant that editing this block appeared to do nothing.

   The variant toggle and chip sizing is governed ONLY by
   "VARIANT SYSTEM - FLUID PERFECT" below. Change it there.
   =================================== */

/* ===================================
   FLUID IMAGE CONTAINER
   =================================== */
body.post-type-archive-product .products .product .box-image,
body.tax-product_cat .products .product .box-image {
    /* RZK 2026-08-27: dead `margin-bottom: clamp(6px, 1.5vw, 12px)` removed; won by L3857 */;
}

/* ===================================
   GRID GAP ZERO FOR SEPARATOR LINES
   Products touch each other, lines at borders
   ===================================
   RZK 2026-08-26 -- DELIBERATE. Verified on live: this rule has no media query
   and is declared last, so it beats six other gap declarations for the same
   grid (a 20px base plus four mobile steps of 12/12/10/8px further up this
   file). That is intended: the design wants the cards flush so their borders
   read as separator lines, which is exactly what the heading above says.

   Do NOT "restore" a gutter here. An audit flagged those four mobile steps as
   dead code and restoring them would have re-introduced a gutter the design
   removed on purpose. The four dead steps have been deleted instead, so the
   intent is now stated once, in one place.
   =================================== */
body.post-type-archive-product .products,
body.post-type-archive-product ul.products,
body.tax-product_cat .products,
body.tax-product_cat ul.products {
    gap: 0 !important;
}

/* ===================================
   STAR RATING FLUID
   =================================== */
body.post-type-archive-product .products .product .star-rating,
body.tax-product_cat .products .product .star-rating {
    font-size: clamp(12px, 2vw, 14px) !important;;
}

/* ===================================
   $100,000 PREMIUM RESPONSIVE SYSTEM
   Perfect fluid scaling for everything
   =================================== */

/* CSS Custom Properties for fluid scaling */
:root {
    --fluid-badge-font: 12px;
    --fluid-badge-padding-y: clamp(3px, 0.7vw, 6px);
    --fluid-badge-padding-x: clamp(6px, 1.4vw, 14px);
    --fluid-badge-gap: clamp(3px, 0.8vw, 6px);
    --fluid-badge-shadow: clamp(4px, 1vw, 8px);
    --fluid-sale-font: clamp(12px, 2vw, 13px);
    --fluid-sale-percent: clamp(12px, 2.2vw, 16px);
    --fluid-tier-svg: clamp(18px, 4vw, 28px);
    --fluid-container-top: clamp(-30px, -4vw, -20px);
    --fluid-container-offset: clamp(2px, 0.5vw, 4px);
}

/* ===================================
   BADGE CONTAINER - FLUID PERFECT
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badges-container,
body.post-type-archive-product .rozhika-main-content .product-small .rozhika-badges-container,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container,
body.tax-product_cat .rozhika-main-content .product-small .rozhika-badges-container {
    position: absolute !important;
    top: var(--fluid-container-top) !important;
    left: calc(var(--fluid-container-offset) * -1) !important;
    right: calc(var(--fluid-container-offset) * -2) !important;
    width: calc(100% + var(--fluid-container-offset) * 2) !important;
    z-index: 10;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: var(--fluid-badge-gap) !important;
    pointer-events: none;
    padding: 0 !important;
}

/* ===================================
   TOP BADGE STACK - FLUID PERFECT
   =================================== */
.rozhika-top-badge-stack,
body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-top-badge-stack,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-top-badge-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--fluid-badge-gap) !important;
    pointer-events: none;
    align-items: flex-end !important;
    text-align: right;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    max-width: 45% !important;
}

/* ===================================
   TOP BADGE - FLUID SCALING
   =================================== */
.rozhika-top-badge {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform;
}

.rozhika-top-badge .badge-inner {
    border-radius: 999px !important;
    padding: var(--fluid-badge-padding-y) var(--fluid-badge-padding-x) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fluid-badge-font) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    box-shadow: 0 var(--fluid-badge-shadow) calc(var(--fluid-badge-shadow) * 2.5) rgba(0, 0, 0, 0.18) !important;
    white-space: nowrap !important;
}

/* Hover lift effect on badges */
@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge .badge-inner,
body.tax-product_cat .products .product:hover .rozhika-top-badge .badge-inner{
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 3) rgba(0, 0, 0, 0.22) !important;
}
}

/* ===================================
   TIER SVG BADGE - FLUID
   =================================== */
.rozhika-tier-svg {
    width: var(--fluid-tier-svg);
    height: var(--fluid-tier-svg);
    display: block !important;
    filter: drop-shadow(0 var(--fluid-badge-shadow) calc(var(--fluid-badge-shadow) * 2) rgba(124, 58, 237, 0.45)) !important;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-tier-svg,
body.tax-product_cat .products .product:hover .rozhika-tier-svg{
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 2.5) rgba(124, 58, 237, 0.55)) !important;
}
}

.rozhika-top-badge--tier .badge-inner {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ===================================
   HOT & COMBO BADGES - PREMIUM GRADIENTS
   =================================== */
.rozhika-top-badge--hot .badge-inner {
    background: linear-gradient(135deg, #ffb199 0%, #ff6f91 45%, #ff2d7f 100%) !important;
    box-shadow: 0 var(--fluid-badge-shadow) calc(var(--fluid-badge-shadow) * 2.5) rgba(255, 77, 143, 0.35) !important;
}

.rozhika-top-badge--combo .badge-inner {
    background: linear-gradient(135deg, #d6bcfa 0%, #a855f7 30%, #ff6f91 70%, #ff2d7f 100%) !important;
    box-shadow: 0 var(--fluid-badge-shadow) calc(var(--fluid-badge-shadow) * 2.5) rgba(168, 85, 247, 0.4) !important;
}

/* ===================================
   SALE BADGE - FLUID PERFECT
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
body.post-type-archive-product .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badges-container .rozhika-badge-sale {
    color: #ffffff !important;
    padding: var(--fluid-badge-padding-y) var(--fluid-badge-padding-x) !important;
    border-radius: 999px !important;
    font-size: var(--fluid-sale-font) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(3px, 0.6vw, 6px) !important;
    flex-shrink: 0 !important;
    margin-right: auto !important;
    margin-top: clamp(2px, 0.5vw, 6px) !important;
    max-width: 50% !important;
    box-shadow: 0 var(--fluid-badge-shadow) calc(var(--fluid-badge-shadow) * 2) rgba(0, 0, 0, 0.15) !important;
    white-space: nowrap !important;
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-badge-sale,
body.tax-product_cat .products .product:hover .rozhika-badge-sale{
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 3) rgba(0, 0, 0, 0.2) !important;
}
}

body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    font-size: var(--fluid-sale-percent) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 1px !important;
}

/* ===================================
   GENERAL BADGE - FLUID
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badge,
body.tax-product_cat .rozhika-main-content .rozhika-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--fluid-badge-padding-y) var(--fluid-badge-padding-x) !important;
    border-radius: clamp(3px, 0.5vw, 4px) !important;
    font-size: var(--fluid-badge-font) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 clamp(1px, 0.3vw, 2px) clamp(4px, 1vw, 8px) rgba(0, 0, 0, 0.15) !important;
    /* RZK 2026-10-16 (INP): `backdrop-filter: blur(8px) !important` removed. Every
       sale badge variant (default/hot/tier/combo) paints an OPAQUE gradient, so the
       blurred backdrop is fully covered - verified pixel-identical - but it cost one
       backdrop render pass per product card, re-composited on every frame. */
}

/* ===================================
   PRODUCT CONTENT - FLUID PERFECTION
   =================================== */

/* Product title - perfect fluid */
body.post-type-archive-product .products .product .woocommerce-loop-product__title,
body.post-type-archive-product .products .product .rozhika-product-title,
body.tax-product_cat .products .product .woocommerce-loop-product__title,
body.tax-product_cat .products .product .rozhika-product-title {
    font-size: clamp(12px, 9.86px + 0.6696vw, 15px) !important;
    line-height: clamp(1.4, 0.1vw + 1.3, 1.6) !important;
    min-height: clamp(32px, 7vw, 48px) !important;
    margin: clamp(4px, 1vw, 10px) 0 !important;
}

/* Price display - fluid */
body.post-type-archive-product .products .product .price,
body.post-type-archive-product .products .product .rozhika-price-caption,
body.tax-product_cat .products .product .price,
body.tax-product_cat .products .product .rozhika-price-caption {
    font-size: clamp(12px, 2.5vw, 16px) !important;;
    font-weight: 700 !important;
}

body.post-type-archive-product .products .product .price del,
body.post-type-archive-product .products .product .rozhika-price-regular,
body.tax-product_cat .products .product .price del,
body.tax-product_cat .products .product .rozhika-price-regular {
    font-size: clamp(12px, 1.8vw, 13px) !important;;
}

/* Price shell - fluid */
body.post-type-archive-product .products .product .rozhika-price-shell,
body.tax-product_cat .products .product .rozhika-price-shell {
    gap: clamp(2px, 0.5vw, 4px) !important;
    margin-top: clamp(4px, 1vw, 8px) !important;
    min-height: clamp(40px, 9vw, 64px) !important;
}

/* Category text - fluid */
body.post-type-archive-product .products .product .category,
body.post-type-archive-product .products .product .product-cat,
body.tax-product_cat .products .product .category,
body.tax-product_cat .products .product .product-cat {
    /* RZK 2026-08-27: this caption measured 8.00px at 390px, the smallest text
       on the site, and it carries the category name as words. Its cap is
       already 12px, which is the floor, so there is no room for a ramp that
       does not break legibility: it becomes a flat 12px. Desktop is unchanged,
       since 12px is what it rendered there. */
    font-size: 12px !important;
    min-height: clamp(16px, 3.5vw, 24px) !important;
}

/* Rating row - fluid */
body.post-type-archive-product .products .product .rozhika-rating-row,
body.tax-product_cat .products .product .rozhika-rating-row {
    gap: clamp(2px, 0.5vw, 4px) !important;
    margin: 0 0 clamp(6px, 1.5vw, 10px) 0 !important;
    min-height: clamp(35px, 7vw, 50px) !important;
}

body.post-type-archive-product .products .product .rozhika-rating-row .rating-average,
body.tax-product_cat .products .product .rozhika-rating-row .rating-average {
    font-size: clamp(12px, 2vw, 13px) !important;;
}

body.post-type-archive-product .products .product .rozhika-rating-row .rozhika-rating-count,
body.tax-product_cat .products .product .rozhika-rating-row .rozhika-rating-count {
    font-size: 12px !important;;
}

/* Star rating - fluid */
body.post-type-archive-product .products .product .star-rating,
body.tax-product_cat .products .product .star-rating {
    font-size: clamp(12px, 1.8vw, 14px) !important;;
}

/* Box text padding - fluid */
body.post-type-archive-product .products .product .box-text,
body.tax-product_cat .products .product .box-text {
    padding: clamp(4px, 1vw, 12px) !important;
    gap: clamp(4px, 0.8vw, 8px) !important;
}

/* Box image spacing - fluid */
body.post-type-archive-product .products .product .box-image,
body.tax-product_cat .products .product .box-image {
    margin-bottom: clamp(4px, 1vw, 12px) !important;
}

/* ===================================
   VARIANT SYSTEM - FLUID PERFECT
   =================================== */
body.post-type-archive-product .rozhika-variant-shell,
body.tax-product_cat .rozhika-variant-shell {
    margin-top: clamp(8px, 2vw, 16px) !important;
    padding-top: clamp(8px, 1.5vw, 12px) !important;
    gap: clamp(6px, 1.2vw, 10px) !important;
    min-height: clamp(45px, 9vw, 64px) !important;
}

body.post-type-archive-product .rozhika-variant-toggle,
body.tax-product_cat .rozhika-variant-toggle {
    font-size: clamp(12px, 2vw, 14px) !important;;
    padding: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px) !important;
    min-height: clamp(36px, 6vw, 48px) !important;
    border-radius: clamp(8px, 1.5vw, 12px) !important;
}

body.post-type-archive-product .variant-chip,
body.tax-product_cat .variant-chip {
    flex: 0 0 clamp(120px, 22vw, 200px) !important;
    padding: clamp(8px, 1.5vw, 14px) clamp(10px, 2vw, 18px) !important;
    border-radius: clamp(10px, 2vw, 16px) !important;
    min-height: clamp(80px, 15vw, 108px) !important;
}

body.post-type-archive-product .variant-chip .chip-label-text,
body.tax-product_cat .variant-chip .chip-label-text {
    font-size: clamp(12px, 1.8vw, 14px) !important;;
}

body.post-type-archive-product .variant-chip .chip-quantity-text,
body.tax-product_cat .variant-chip .chip-quantity-text {
    font-size: 12px !important;;
}

body.post-type-archive-product .variant-chip .chip-price-value,
body.tax-product_cat .variant-chip .chip-price-value {
    font-size: clamp(12px, 2vw, 15px) !important;;
}

.variant-chip-list {
    gap: clamp(10px, 2vw, 16px) !important;
    padding: clamp(12px, 2.5vw, 20px) clamp(10px, 2vw, 16px) clamp(28px, 5vw, 40px) !important;
    margin: clamp(-12px, -2.5vw, -20px) clamp(-10px, -2vw, -16px) clamp(-28px, -5vw, -40px) !important;
}

/* ===================================
   SEPARATOR LINES - FLUID
   =================================== */
body.post-type-archive-product .products .product::before,
body.tax-product_cat .products .product::before {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e8e8e8 10%, #e8e8e8 90%, transparent 100%);
}

body.post-type-archive-product .products .product::after,
body.tax-product_cat .products .product::after {
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, #e8e8e8 10%, #e8e8e8 90%, transparent 100%);
}

/* ===================================
   HOVER EFFECTS - PREMIUM POLISH
   =================================== */
body.post-type-archive-product .products .product,
body.tax-product_cat .products .product {
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover,
body.tax-product_cat .products .product:hover{
    background: linear-gradient(135deg, #fafbff 0%, #f8f9ff 50%, #f5f7ff 100%) !important;
    z-index: 3 !important;
}
}

body.post-type-archive-product .products .product .box-image img,
body.tax-product_cat .products .product .box-image img {
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .box-image img,
body.tax-product_cat .products .product:hover .box-image img{
    transform: scale(1.03) !important;
}
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .woocommerce-loop-product__title a,
body.post-type-archive-product .products .product:hover .rozhika-product-title a,
body.tax-product_cat .products .product:hover .woocommerce-loop-product__title a,
body.tax-product_cat .products .product:hover .rozhika-product-title a{
    color: var(--rozhika-primary, #7c4dff) !important;
}
}

/* ===================================
   SORT BAR - FLUID
   =================================== */
body.post-type-archive-product .rozhika-sort-bar,
body.tax-product_cat .rozhika-sort-bar {
    gap: clamp(6px, 1.2vw, 12px) !important;
    padding: clamp(10px, 2vw, 16px) clamp(14px, 2.5vw, 24px) !important;
    border-radius: clamp(12px, 2vw, 24px) !important;
    margin-bottom: clamp(16px, 3vw, 28px) !important;
}

body.post-type-archive-product .sort-option,
body.tax-product_cat .sort-option {
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 22px) !important;
    font-size: clamp(12px, 1.8vw, 14px) !important;;
    border-radius: clamp(8px, 1.2vw, 12px) !important;
}

/* ===================================
   MOBILE TOOLBAR - FLUID
   =================================== */
.rozhika-mobile-toolbar {
    padding: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 15px) !important;
    gap: clamp(6px, 1.2vw, 10px) !important;
}

.rozhika-mobile-filter-btn,
.rozhika-mobile-sort-btn {
    font-size: clamp(12px, 2vw, 14px) !important;
    gap: clamp(5px, 1vw, 8px) !important;
    border-radius: clamp(6px, 1vw, 8px) !important;
}

.rozhika-mobile-filter-btn svg,
.rozhika-mobile-sort-btn svg {
    width: clamp(14px, 2.5vw, 18px) !important;
    height: clamp(14px, 2.5vw, 18px) !important;
}

/* ===================================
   SIDEBAR FILTERS - FLUID
   =================================== */
body.post-type-archive-product .rozhika-sidebar,
body.tax-product_cat .rozhika-sidebar {
    width: clamp(220px, 25vw, 300px) !important;
    padding: clamp(16px, 2.5vw, 24px) !important;
    border-radius: clamp(16px, 3vw, 32px) !important;
}

.rozhika-shop-layout .filter-title,
.modal-body .filter-title {
    font-size: clamp(13px, 2vw, 15px) !important;
    padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px) !important;
}

.filter-title .toggle-icon {
    width: clamp(26px, 4vw, 32px) !important;
    height: clamp(26px, 4vw, 32px) !important;
    border-radius: clamp(7px, 1.2vw, 10px) !important;
}

.filter-title .toggle-icon svg {
    width: clamp(12px, 2vw, 16px) !important;
    height: clamp(12px, 2vw, 16px) !important;
}

.filter-checkbox-item {
    padding: clamp(10px, 1.8vw, 14px) clamp(14px, 2.5vw, 20px) !important;
    gap: clamp(10px, 1.8vw, 14px) !important;
}

/* RZK 2026-08-27 -- tap-target floor. This rule made the checkbox fluid, which
   is right for type and wrong for a control: measured 18.00 x 18.00px at 360px
   and 390px, under the 24 x 24 CSS px minimum in WCAG 2.5.8 (Target Size
   Minimum). Touch is the narrow case, so the floor goes up rather than down,
   and the 22px desktop value is restored from 768px up where a pointer is the
   likely input. */
.filter-checkbox-item input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
}

@media (min-width: 768px) {
    .filter-checkbox-item input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }
}

.filter-checkbox-item .filter-label-text {
    font-size: clamp(12px, 1.8vw, 14px) !important;
}

/* ===================================
   PAGINATION - FLUID
   =================================== */
body.post-type-archive-product .woocommerce-pagination,
body.tax-product_cat .woocommerce-pagination {
    margin-top: clamp(24px, 5vw, 40px) !important;
    padding: clamp(14px, 2.5vw, 20px) 0 !important;
}

body.post-type-archive-product .woocommerce-pagination .page-numbers,
body.tax-product_cat .woocommerce-pagination .page-numbers {
    padding: clamp(7px, 1.3vw, 10px) clamp(11px, 2vw, 16px) !important;
    margin: 0 clamp(2px, 0.6vw, 5px) !important;
    font-size: clamp(12px, 2vw, 14px) !important;
    border-radius: clamp(4px, 0.8vw, 6px) !important;
}

/* ===================================
   OUT OF STOCK LABEL - FLUID
   =================================== */
body.post-type-archive-product .rozhika-main-content .product.outofstock::after,
body.post-type-archive-product .rozhika-main-content .product-small.outofstock::after,
body.tax-product_cat .rozhika-main-content .product.outofstock::after,
body.tax-product_cat .rozhika-main-content .product-small.outofstock::after {
    font-size: clamp(12px, 2vw, 14px) !important;;
    padding: clamp(6px, 1.2vw, 10px) clamp(12px, 2.5vw, 20px) !important;
    border-radius: clamp(3px, 0.5vw, 4px) !important;
}

/* ===================================
   EMPTY STATE - FLUID
   =================================== */
.rozhika-empty-state {
    padding: clamp(40px, 8vw, 120px) clamp(15px, 3vw, 20px) !important;
}

.rozhika-empty-icon {
    width: clamp(140px, 22vw, 280px) !important;
    height: clamp(140px, 22vw, 280px) !important;
    margin-bottom: clamp(20px, 4vw, 50px) !important;
}

.rozhika-empty-title {
    font-size: clamp(20px, 4vw, 36px) !important;
    margin: 0 0 clamp(10px, 2vw, 20px) 0 !important;
}

.rozhika-empty-subtitle {
    font-size: clamp(13px, 2.2vw, 18px) !important;
    margin: 0 0 clamp(20px, 4vw, 40px) 0 !important;
}

.rozhika-empty-suggestions {
    padding: clamp(16px, 3vw, 30px) !important;
    border-radius: clamp(12px, 2vw, 16px) !important;
}

/* ===================================
   LOADING OVERLAY - FLUID
   =================================== */
body.post-type-archive-product .rozhika-loading-popup,
body.tax-product_cat .rozhika-loading-popup {
    border-radius: clamp(12px, 2vw, 18px) !important;
    padding: clamp(24px, 4vw, 32px) clamp(32px, 6vw, 48px) !important;
}

body.post-type-archive-product .rozhika-loading-overlay .spinner-icon,
body.tax-product_cat .rozhika-loading-overlay .spinner-icon {
    width: clamp(40px, 7vw, 54px) !important;
    height: clamp(40px, 7vw, 54px) !important;
    margin: 0 auto clamp(12px, 2vw, 18px) !important;
}

body.post-type-archive-product .rozhika-loading-overlay p,
body.tax-product_cat .rozhika-loading-overlay p {
    font-size: clamp(13px, 2vw, 15px) !important;
}

/* ===================================
   SMOOTH SCROLL & PERFORMANCE
   =================================== */
body.post-type-archive-product,
body.tax-product_cat {
    scroll-behavior: smooth;
}

body.post-type-archive-product .products .product *,
body.tax-product_cat .products .product * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU acceleration for animated elements */
body.post-type-archive-product .products .product .box-image,
body.post-type-archive-product .products .product .rozhika-badges-container,
body.tax-product_cat .products .product .box-image,
body.tax-product_cat .products .product .rozhika-badges-container {
    transform: translateZ(0);
    will-change: transform;
}

/* ===================================
   FIX: 2 COLUMNS AT 480px AND BELOW
   =================================== */
@media (max-width: 480px) {
    body.post-type-archive-product .products,
    body.post-type-archive-product ul.products,
    body.tax-product_cat .products,
    body.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Reset 3-column border rules */
    body.post-type-archive-product .products .product:nth-child(3n+1)::after,
    body.tax-product_cat .products .product:nth-child(3n+1)::after {
        display: block !important;
    }
    
    /* Apply 2-column border rules */
    body.post-type-archive-product .products .product:nth-child(2n+1)::after,
    body.tax-product_cat .products .product:nth-child(2n+1)::after {
        display: none !important;
    }
}

/* ===================================
   FIX: REMOVE BORDER ON BADGE STACK HOVER
   =================================== */
.rozhika-top-badge-stack,
.rozhika-top-badge-stack * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* RZK 2026-10-16 (INP): the :hover half of this rule, gated - see the note above. */
@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge-stack,
body.post-type-archive-product .products .product:hover .rozhika-top-badge-stack *,
body.post-type-archive-product .products .product:hover .rozhika-badges-container,
body.post-type-archive-product .products .product:hover .rozhika-badges-container *,
body.tax-product_cat .products .product:hover .rozhika-top-badge-stack,
body.tax-product_cat .products .product:hover .rozhika-top-badge-stack *,
body.tax-product_cat .products .product:hover .rozhika-badges-container,
body.tax-product_cat .products .product:hover .rozhika-badges-container * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
}

/* Re-apply correct shadows only to badge-inner */
@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge .badge-inner,
body.tax-product_cat .products .product:hover .rozhika-top-badge .badge-inner{
    box-shadow: 0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 3) rgba(0, 0, 0, 0.22) !important;
}
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge--hot .badge-inner,
body.tax-product_cat .products .product:hover .rozhika-top-badge--hot .badge-inner{
    box-shadow: 0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 3) rgba(255, 77, 143, 0.4) !important;
}
}

@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge--combo .badge-inner,
body.tax-product_cat .products .product:hover .rozhika-top-badge--combo .badge-inner{
    box-shadow: 0 calc(var(--fluid-badge-shadow) * 1.5) calc(var(--fluid-badge-shadow) * 3) rgba(168, 85, 247, 0.45) !important;
}
}

/* Keep tier badge shadow-free */
@media (hover: hover) and (pointer: fine) {
body.post-type-archive-product .products .product:hover .rozhika-top-badge--tier .badge-inner,
body.tax-product_cat .products .product:hover .rozhika-top-badge--tier .badge-inner{
    box-shadow: none !important;
}
}

/* ===================================
   FIX: SALE BADGE VERTICAL ALIGNMENT
   =================================== */
body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale {
    padding-top: calc(var(--fluid-badge-padding-y) + 1px) !important;
    padding-bottom: calc(var(--fluid-badge-padding-y) - 1px) !important;
    line-height: 1 !important;
}

body.post-type-archive-product .rozhika-main-content .rozhika-badge-sale .badge-percent,
body.tax-product_cat .rozhika-main-content .rozhika-badge-sale .badge-percent {
    transform: translateY(0.5px) !important;
}

.rozhika-toolbar-in-mega-menu {
    display: none !important;
    opacity: 0;
    transform: translateY(-10px);
    will-change: transform, opacity;
}

.rozhika-toolbar-in-mega-menu.rozhika-visible {
    opacity: 1;
    transform: translateY(0);
}

.rozhika-toolbar-in-mega-menu .rozhika-mobile-toolbar {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    gap: 8px !important;
    background: transparent !important;
}

.rozhika-sticky-toolbar-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*
     * RZK 2026-09-24: 900 - deliberately BELOW the site header.
     *
     * This bar is appended to <body>, so its z-index competes at the ROOT
     * stacking level, where the sticky header (.header-wrapper.stuck) is 1001.
     * At the old value 9998 this bar therefore painted above the ENTIRE header
     * and everything inside it: the mini cart dropdown, the account dropdown and
     * the mega-menu panel all appeared underneath it. Those dropdowns cannot win
     * by raising their own z-index, because they live inside the header's
     * stacking context and are capped by it (the mini cart is already 9999 and
     * still lost).
     *
     * 900 keeps the bar above page content (max ~100 here) while staying under
     * the header, which is also what its own `top: <headerHeight><meta charset="utf-8">px` placement
     * assumes. This replaces the old per-overlay workaround in ux-enhancer.js
     * that hand-lowered the bar to 999 for the search panel only.
     */
    z-index: 900;
    direction: rtl;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 10px 12px;
    align-items: center;
    overflow: visible;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    visibility: hidden;
    will-change: transform, opacity;
}

/* RZK 2026-10-16 (INP round 11): blur only on mouse/trackpad devices. The bar is
   92% opaque white, so on phones it is pixel-identical without it, but as a fixed
   bar it cost one extra GPU render pass on every scroll frame (4.0 -> 3.0). */
@media (hover: hover) and (pointer: fine) {
    .rozhika-sticky-toolbar-bar {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.rozhika-sticky-toolbar-bar.rozhika-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.rozhika-sticky-toolbar-bar.rozhika-hiding {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.rozhika-sticky-toolbar-bar .rozhika-mobile-toolbar {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    gap: 10px !important;
    background: transparent !important;
}

@media (min-width: 850px) {
    .rozhika-sticky-toolbar-bar {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    /*
 * RZK 2026-09-24 (2): keyed on .rzk-pagebar-on, NOT .rozhika-shop-toolbar-mechanic-ready.
 *
 * `mechanic-ready` is set by init() BEFORE the JS clone is actually shown, so it
 * switched this native layer off while the clone was still hidden - leaving a
 * measured ~800ms window with no bar at all. `.rzk-pagebar-on` is added exactly
 * when the clone becomes visible and removed when it hides, so the handoff is
 * now seamless in both directions.
 */
/*
 * RZK 2026-09-24 (task 1): unconditional now.
 *
 * The in-page toolbar used to double as a native position:sticky fallback for
 * the Delay-JS window. That job belongs to the server-rendered bar inside the
 * header (see render_sticky_toolbar_bar()), which exists from the first frame
 * and needs no JavaScript - so leaving this one sticky as well would simply put
 * two toolbars on screen at once. It now stays in normal flow always, and there
 * is no handoff between two mechanisms to get wrong.
 */
body.post-type-archive-product .rozhika-main-content .rozhika-mobile-toolbar,
body.tax-product_cat .rozhika-main-content .rozhika-mobile-toolbar {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}
}

body.post-type-archive-product .products .product,
body.tax-product_cat .products .product,
body.post-type-archive-product .products li.product,
body.tax-product_cat .products li.product,
body.post-type-archive-product .products .product-small,
body.tax-product_cat .products .product-small {
    content-visibility: visible;
    contain: none;
    overflow: visible;
}

@media (hover: none) and (pointer: coarse) {
    body.post-type-archive-product .rozhika-mm-category-rail,
    body.tax-product_cat .rozhika-mm-category-rail {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.post-type-archive-product .rozhika-mm-category-rail::before,
    body.tax-product_cat .rozhika-mm-category-rail::before {
        filter: none;
    }

    .rozhika-mm-category-rail:focus,
    .rozhika-mm-category-rail:focus-within,
    .rozhika-mm-category-chip:focus,
    .rozhika-mm-category-chip:focus-visible,
    .rozhika-mm-category-chip:active {
        outline: none !important;
    }

    .rozhika-mm-category-chip {
        -webkit-tap-highlight-color: transparent;
    }
}

/*
 * RZK 2026-09-24: while a page-level sticky bar is up, the header's bottom row
 * (#wide-nav) steps aside so the bar sits flush under the logo row.
 *
 * This is how the shop/product sticky bars always looked: they used to be
 * z-index 9998 and painted straight over #wide-nav, so that row was never
 * visible while scrolling. Now that the bars correctly sit BELOW the header
 * (so the mini cart, account dropdown, mega menu and search panel can open on
 * top of them), the row would otherwise reappear and push the bar 30px down.
 * Hiding it keeps the original look while the bars stay safely under every
 * header overlay - no z-index race, and nothing to enumerate per overlay.
 *
 * #wide-nav lives inside the sticky (position:fixed) header wrapper, so hiding
 * it does not reflow page content - it only shrinks the fixed header 100px->70px.
 */
body.rzk-pagebar-on #wide-nav {
    display: none !important;
}

/*
 * RZK 2026-09-24 (3): ...and step aside as soon as the header is STUCK, not
 * only once the JS clone is up.
 *
 * The clone only exists after Delay-JS releases ux-enhancer.js (~3.75s after
 * the first gesture). Keying purely on .rzk-pagebar-on therefore left the row
 * visible for the whole pre-JS window - and also for the scroll band between
 * "header sticks" (~230px) and "bar shows" (~376px) in normal post-JS use. In
 * both cases the header was 100px instead of 70px, so the bar sat 30px lower
 * and then jumped up. Keying on .header-wrapper.stuck makes the stuck header
 * exactly 70px in EVERY state, which is what lets the native pre-JS layer and
 * the JS clone share one offset.
 *
 * Scoped to <=849px (the only widths that get a page bar; 850-1024 puts the
 * toolbar in the mega menu and >1024 uses the sidebar) so the desktop header
 * is untouched. .rzk-pagebar-on is kept above as a belt-and-braces path in
 * case .stuck is ever unavailable.
 */

/*
 * ...except while the mobile header search is open. #rzls-msearch-panel lives
 * INSIDE #wide-nav (the search takes over that row), so hiding the row outright
 * would make the header search button do nothing. These two rules bring the row
 * back for exactly the states the search module sets on it.
 */
body.rzk-pagebar-on #wide-nav:has(.rzls-msearch-open),
body.rzk-pagebar-on #wide-nav:has(.rzls-msearch-closing),
body.rzk-pagebar-on #wide-nav:has(.rzls-msearch-active) {
    display: block !important;
}

/*
 * RZK 2026-09-24 (task 1): the filter/sort bar lives INSIDE the header.
 *
 * Printed by Rozhika_UX_Enhancer::render_sticky_toolbar_bar() on
 * flatsome_after_header_bottom, as a sibling of #wide-nav inside
 * .header-wrapper. At z-index 9 it is later in the DOM than #wide-nav (also 9)
 * so it paints over that row, while staying below #masthead (10) so the mini
 * cart, account dropdown and mega menu all still open on top of it. #wide-nav
 * therefore no longer has to be hidden, and stays sticky here just as it does
 * on home, cart and blog.
 *
 * Only POSITION is set here. Visibility belongs to .rozhika-visible /
 * .rozhika-hiding, driven by the nowprocket shim before Delay JS and by
 * ux-enhancer.js afterwards, both from the same thresholds.
 */
@media screen and (max-width: 849px) {
    body.tax-product_cat .rozhika-sticky-toolbar-bar.rzk-headerbar,
    body.post-type-archive-product .rozhika-sticky-toolbar-bar.rzk-headerbar {
        position: fixed;
        left: 0;
        right: 0;
        /* the height of #masthead: the bar takes the place of the header's
           bottom row rather than being pushed below it */
        top: 70px;
        z-index: 9;
    }

    /* Stand down while the mobile search owns the #wide-nav row: the search
       panel lives INSIDE #wide-nav, so a bar on that row would cover it. */
    #wide-nav:has(.rzls-msearch-open) ~ .rozhika-sticky-toolbar-bar.rzk-headerbar,
    #wide-nav:has(.rzls-msearch-closing) ~ .rozhika-sticky-toolbar-bar.rzk-headerbar,
    #wide-nav:has(.rzls-msearch-active) ~ .rozhika-sticky-toolbar-bar.rzk-headerbar {
        display: none !important;
    }
}

/* 850-1024px puts the toolbar in the mega-menu trigger and >1024 uses the
   sidebar, so this bar must never appear above 849px. */
@media screen and (min-width: 850px) {
    .rozhika-sticky-toolbar-bar.rzk-headerbar {
        display: none !important;
    }
}

/* Task 1: #wide-nav is sticky again on shop and category pages. */
body.tax-product_cat.rzk-pagebar-on #wide-nav,
body.post-type-archive-product.rzk-pagebar-on #wide-nav {
    display: flex !important;
}