/* CASCADE-LAYER: intentionally-unlayered — page composition. See .planning/phases/01-foundation-activation/01-CONTEXT.md D-01. */
/* stylelint-disable media-feature-name-disallowed-list -- Phase 6: max-width media queries retained; mobile-first conversion deferred (D-08). Strict-value/!important/order cleaned. */

/*
Products Catalog Styles - IMPROVED INHERITANCE STRUCTURE
Advanced filtering and product display styles for Rhuarc's Pet Supplies

ARCHITECTURE:
1. SHARED BASE STYLES - Common to both Grid and List views
2. GRID VIEW OVERRIDES - Grid-specific modifications
3. LIST VIEW OVERRIDES - List-specific modifications
4. RESPONSIVE BEHAVIOR - Shared responsive logic
*/

/* ====================================
   PRODUCTS CATALOG PAGE FOUNDATION
   ==================================== */

.products-catalog-page {
    min-height: 100vh;
    overflow: visible; /* Allow badge to extend beyond page container */
}

/* ====================================
   COMPACT HERO SECTION - SHARED
   ==================================== */

/* shimmer animation available in style.css */

/* The .products-hero-compact box-metrics (padding + margin-bottom) were re-folded
   into css/components/hero.css .hero--compact (@layer components) in Phase 6
   (D-03), once the aggressive *{margin:0;padding:0} reset moved into @layer reset.
   The descendant rules below (.hero-content / h1 / .hero-description) stay here —
   they style page-specific child elements, not the hero box itself. */
.products-hero-compact .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.products-hero-compact .hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, var(--text-3xl));
    margin-bottom: var(--space-3);
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    text-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    letter-spacing: var(--tracking-tight);
}

.products-hero-compact .hero-description {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: rgb(255 255 255 / 90%);
    margin-bottom: var(--space-4);
}

/* Hero decoration classes consolidated in utilities.css */

/* hero-stats-compact classes available in page-header.css */

/* ====================================
   LAYOUT AND FILTERS - SHARED
   ==================================== */

.products-main-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
    gap: var(--space-8);
    overflow: visible; /* Allow badge to extend beyond container */
}

.mobile-filter-toggle {
    position: relative;
    display: none;
    width: auto;                    /* NOT 100% - prevents bloat */

    /* CONS-04 / D-10: 44px tap-target floor (rendered 336x43 — 1px short). */
    min-block-size: 44px;
    padding: var(--space-2) var(--space-4);           /* 8px 16px - compact */
    font-family: var(--font-family-base);
    font-size: var(--text-btn);
    font-weight: var(--font-weight-semibold);
    color: var(--secondary-color);
    background: white;
    border: 1.5px solid var(--secondary-color);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    cursor: pointer;
    margin-bottom: var(--space-3);
}

/* FIXED: Badge positioning to prevent clipping behind sub header */
.mobile-filter-toggle::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    background: var(--error);
    border: 2px solid white;
    border-radius: var(--radius-circle);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 2px 8px rgb(229 57 53 / 30%);
    transform: translateZ(0);
    pointer-events: none;
}

.mobile-filter-toggle.has-filters::after {
    display: flex;
}

/* Enhanced mobile filter toggle with better visual hierarchy */
.mobile-filter-toggle.has-filters {
    color: var(--text-on-purple);
    background: var(--gradient-purple-subtle);
    box-shadow: var(--shadow-purple-md);
    animation: pulse 2s infinite;
}

/* pulse animation moved to utilities.css to avoid duplication */

/* bounce animation moved to utilities.css to avoid duplication */

.mobile-filter-toggle:hover {
    color: var(--text-on-purple);
    background: var(--secondary-color);
}

.mobile-filter-toggle .filter-icon {
    margin-right: var(--space-2);
    font-size: var(--font-size-xl);
}

.active-filter-count {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    background: var(--error-text);
    border: 2px solid white;
    border-radius: var(--radius-circle);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 2px 8px rgb(229 57 53 / 30%);
    transform: translateZ(0);
    transition: all var(--transition-base);
    pointer-events: none;
}

/* Sidebar Filters */
.products-sidebar {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    padding: var(--space-6);
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    align-self: start;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--background-tertiary);
}

.sidebar-header h2 {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--secondary-color);
}

/* Filter Sections */
.filter-section {
    padding: var(--space-6);
    background: var(--lavender-50);
    border: 2px solid var(--background-tertiary);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    margin-bottom: var(--space-10);
}

.filter-section:hover {
    border-color: var(--lavender-200);
}

.filter-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

.filter-icon {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.3rem;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.filter-option {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    cursor: pointer;
}

.filter-option:hover {
    background: var(--purple-tint-soft);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 15%);
    transform: translateY(-2px);
    border-color: var(--secondary-color);
}

.filter-option.active {
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    border-color: var(--secondary-color);
}

.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
    display: none;
}

.option-text {
    flex: 1;
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
}

.option-count {
    min-width: 30px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--secondary-color);
    background: rgb(123 43 133 / 10%); /* token-exempt: compound rgba background tint — no token covers this alpha variant */
    border-radius: var(--border-radius-md);
    text-align: center;
}

.filter-option.active .option-count {
    color: var(--text-on-purple);
    background: rgb(255 255 255 / 20%);
}

.filter-option.disabled,
.filter-option:has(input:disabled) {
    position: relative;
    color: var(--neutral-600);
    background: var(--neutral-50);
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--neutral-300);
    pointer-events: none;
}

.filter-option.disabled:hover,
.filter-option:has(input:disabled):hover {
    background: var(--neutral-50);
    box-shadow: none;
    transform: none;
    border-color: var(--neutral-300);
}

.filter-option.disabled .option-count,
.filter-option:has(input:disabled) .option-count {
    color: var(--neutral-600);
    background: var(--neutral-200);
}

.filter-option.disabled .option-text,
.filter-option:has(input:disabled) .option-text {
    color: var(--neutral-600);
}

/* FIXED: Add visual indicator for disabled state */
.filter-option:has(input:disabled)::after {
    content: '🔒';
    position: absolute;
    top: 50%;
    right: 8px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.8rem;
    opacity: 0.6;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Visual indicator for "All Product Types" when it cannot be unchecked */
.filter-option.all-products-option.active {
    position: relative;
}

.filter-option.all-products-option.active::after {
    content: '•';
    position: absolute;
    top: 50%;
    right: 8px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.2rem;
    font-weight: var(--font-bold);
    color: var(--purple-700);
    opacity: 0.7;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-option.all-products-option.active:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Price Range Slider */
.price-range-container {
    position: relative;
}

.price-slider {
    position: relative;

    /* CONS-04 / D-10: 44px tap-target floor — the dual-handle range inputs are
       absolutely positioned inside this container; bump it to >=44 tall so the
       grown inputs fit (visual track stays thin — drawn by the slider-track
       pseudo). +4px from the former 40px (sanctioned hit-area delta). */
    min-block-size: 44px;
    height: 40px;
    margin: var(--space-4) 0;
}

.price-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* CONS-04 / D-10: 44px tap-target floor on the <input type=range> (rendered
       218x6). The boundingBox gate measures the input box, so it must reach >=44
       tall; the native thumb stays vertically centred and the visible track is
       still the 6px ::-webkit-slider-track / ::-moz-range-track below. */
    min-block-size: 44px;
    height: 6px;
    background: transparent;
    outline: none;
    appearance: none;
    appearance: auto;
    pointer-events: none;
}

.price-slider input[type="range"]::-webkit-slider-track {
    height: 6px;
    background: var(--border-color);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 3px;
}

.price-slider input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    appearance: none;
    cursor: pointer;
    pointer-events: all;
}

.price-slider input[type="range"]::-webkit-slider-thumb:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 40%);
    transform: scale(1.2);
}

.price-slider input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--border-color);
    border: none;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 3px;
}

.price-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border: none;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.price-inputs {
    text-align: center;
    margin-top: var(--space-4);
}

.price-display {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--secondary-color);
    background: var(--lavender-100);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

/* Availability Filters */
.availability-filters .filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.availability-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.availability-indicator.in-stock {
    background: var(--success-color);
}

.availability-indicator.limited-stock {
    background: var(--warning-color);
}

.availability-indicator.out-of-stock {
    background: var(--danger-color);
}

/* Filter Actions */
.filter-actions {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--background-tertiary);
}

.clear-filters-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    width: auto;                    /* NOT 100% */
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
    padding: 0.5rem 0.875rem;       /* 8px 14px - compact */
    font-size: var(--text-xs);             /* 12px - smaller */
    font-weight: var(--font-medium);

    /* Quiet brand-purple secondary look (replaces the off-brand slate
       gradient) — consistent with the design system's outline buttons. */
    color: var(--purple-700);
    background: transparent;
    border: 2px solid var(--purple-200);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    cursor: pointer;
}

.clear-filters-btn:hover {
    background: var(--purple-50);
    border-color: var(--purple-700);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    transform: translateY(-1px);    /* Subtle lift */
}

.btn-icon {
    font-size: var(--font-size-lg);
}

/* ====================================
   SEARCH CONTROLS (PREFERENCES) - ENHANCED
   Distinct from filters - these are viewing preferences
   ==================================== */

.search-controls,
.search-preferences {
    position: relative;
    z-index: 1;
    padding: var(--space-8);
    background: white;
    border: 2px solid var(--background-tertiary);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
    margin-bottom: var(--space-4);
    overflow: visible; /* Prevent clipping of focus states */
}

.search-controls:hover,
.search-preferences:hover {
    border-color: var(--lavender-200);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 15px 40px rgb(123 43 133 / 10%);
}

/* Single Click Toggle Switch - Sidebar Optimized */
.view-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    margin: 0 0 var(--space-8);
    background: var(--lavender-100);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    overflow: visible; /* Prevent clipping of hover effects */
}

.view-toggle-container:hover {
    background: var(--lavender-150);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 10%);
    transform: translateY(-1px);
    border-color: var(--secondary-color);
}

.view-toggle-switch {
    position: relative;
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, var(--violet-100) 0%, var(--violet-200) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 24px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: inset 0 2px 6px rgb(123 43 133 / 10%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
}

.view-toggle-switch:hover {
    position: relative;
    z-index: 2; /* Ensure hover effects aren't clipped */
    background: linear-gradient(135deg, var(--violet-200) 0%, var(--violet-300) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: inset 0 2px 6px rgb(123 43 133 / 15%), 0 6px 20px rgb(123 43 133 / 15%);
    transform: translateY(-1px);
}

.view-toggle-switch:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.switch-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 21px;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 30%), 0 2px 4px rgb(0 0 0 / 10%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* z-index: 2; */
}

.view-toggle-switch[data-current-view="list"] .switch-slider {
    transform: translateX(100%);
}

.switch-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
}

.switch-option {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    font-family: var(--font-family-base);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    color: var(--secondary-color);
    transition: all 0.3s ease;
    pointer-events: none;
}

.switch-icon {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.switch-text {
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

/* Active state styling - WHITE TEXT for selected view */
.view-toggle-switch[data-current-view="grid"] .switch-grid {
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

.view-toggle-switch[data-current-view="list"] .switch-list {
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

/* Hover effects on icons */
.view-toggle-switch:hover .switch-icon {
    transform: scale(1.1);
}

.view-toggle-switch:hover .switch-text {
    letter-spacing: 0.8px;
}

/* Focus styling inherited from the canonical base.css :focus-visible ring (CONS-05/D-11). */

/* Subtle animation for the active text */
.view-toggle-switch[data-current-view="grid"] .switch-grid .switch-icon,
.view-toggle-switch[data-current-view="list"] .switch-list .switch-icon {
    animation: gentle-pulse 2s ease-in-out infinite;
}

/* gentle-pulse animation available in pet-gallery.css */

.search-container {
    position: relative;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.product-search-input {
    flex: 1;
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: var(--lavender-50);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    border-color: var(--secondary-color);
    outline: none;
}

.product-search-input:focus {
    position: relative;
    z-index: 2; /* Ensure focus state isn't clipped */
    background: white;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 0 4px rgb(123 43 133 / 10%);
    transform: translateY(-2px);
    border-color: var(--secondary-color);
}

/* ====================================
   ENHANCED PREFERENCE VISUAL INDICATORS
   Show when search controls have non-default values
   ==================================== */

/* Visual indicators for active preferences */
.sort-select.has-value,
.items-per-page-select.has-custom-value {
    position: relative;
    background: linear-gradient(135deg, #fff 0%, var(--purple-50) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 0 1px rgb(123 43 133 / 15%);
    border-color: var(--purple-600);
}

.product-search-input.has-value {
    border-color: var(--purple-600);
    background: linear-gradient(135deg, #fff 0%, var(--purple-50) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 0 1px rgb(123 43 133 / 15%);
}

/* Add subtle indicator dots for active preference controls */
.sort-select.has-value::after,
.items-per-page-select.has-custom-value::after {
    content: "●";
    position: absolute;
    top: 50%;
    right: 2rem;
    z-index: 1;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.5rem;
    color: var(--purple-600);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Enhanced search controls section styling */
.search-controls {
    position: relative;
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-200) 100%);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    overflow: visible;
}

.search-controls::before {
    content: "Search & Display Preferences";
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-300);
    padding-bottom: var(--space-2);
}

.product-search-input::placeholder {
    color: var(--color-placeholder);
    font-style: italic;
}

.search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 36px;
    height: 36px;                   /* Reduced from 40px */

    /* CONS-04 / D-10: 44px tap-target floor (rendered 48x36 — height short).
       Logical min-* sit outside order/properties-order; they win over height. */
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: var(--space-2) var(--space-3);        /* 8px 12px - compact */
    font-size: var(--text-sm);            /* 14px */
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    border: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    cursor: pointer;
}

.search-btn:hover {
    background: linear-gradient(135deg, var(--purple-600) 0%, var(--tertiary-color) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 25%);
    transform: translateY(-1px);    /* Subtle lift */
}

.search-btn:active {
    transform: translateY(0);
}

.display-preferences-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-6);
    border-top: 2px solid var(--background-tertiary);
}

.sort-and-display-group {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-6);
}

.sort-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--lavender-100);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
}

.sort-container:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 10%);
    transform: translateY(-1px);
    border-color: var(--secondary-color);
}

.sort-container label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    white-space: nowrap;
}

.sort-select {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: var(--space-10);
}

.sort-select:hover {
    border-color: var(--secondary-color);
    background-color: var(--lavender-50);
}

.sort-select:focus {
    border-color: var(--secondary-color);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 0 3px rgb(123 43 133 / 10%);
}

/* Clear filters buttons - unified compact styling */
.clear-filters-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-1);                   /* 4px - tight */
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
    padding: 0.375rem 0.75rem;      /* 6px 12px - compact */
    font-size: var(--text-xs);             /* 12px - refined */
    font-weight: var(--font-medium);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--neutral-600) 0%, var(--neutral-700) 100%);
    border: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.clear-filters-desktop:hover {
    background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-800) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 3px 8px rgb(0 0 0 / 15%);
    transform: translateY(-1px);
}

.clear-filters-desktop .btn-icon {
    font-size: var(--text-sm);            /* 14px - proportional */
}

.clear-filters-desktop:active {
    transform: translateY(0);
}

/* Items Per Page Control - FIXED STYLING */
.items-per-page-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 140px;
    padding: var(--space-2) var(--space-4);
    background: var(--lavender-100);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
}

.items-per-page-control:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 10%);
    transform: translateY(-1px);
    border-color: var(--secondary-color);
}

.items-per-page-control label {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    white-space: nowrap;
}

.items-per-page-select {
    flex: 1;
    min-width: 80px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.8rem;
    padding-right: var(--space-8);
}

.items-per-page-select:hover {
    border-color: var(--secondary-color);
    background-color: var(--lavender-50);
}

.items-per-page-select:focus {
    border-color: var(--secondary-color);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 0 3px rgb(123 43 133 / 10%);
}

/* ====================================
   ENHANCED ACTIVE FILTERS SECTION
   Only shows actual filters, not preferences
   ==================================== */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: linear-gradient(135deg, var(--amber-100) 0%, var(--amber-200) 100%);
    border: 2px solid var(--amber-400);
    border-radius: var(--border-radius-lg);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 2px 4px rgb(255 193 7 / 10%);
    transition: var(--transition-base);
    margin-bottom: var(--space-6);
}

.active-filters:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 8px rgb(255 193 7 / 15%);
    transform: translateY(-1px);
}

.active-filters-label {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--amber-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
    white-space: nowrap;
}

.active-filters-label::before {
    content: "⚙ ";
    margin-right: var(--space-1);
}

.active-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
    padding: 0.375rem 0.75rem;
    margin: var(--space-1);
    font-size: var(--text-sm);
    background: linear-gradient(135deg, #fff 0%, var(--neutral-50) 100%);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    transition: all 0.3s ease;
    animation: slide-in-tag 0.3s ease;
}

.active-filter-tag:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    transform: translateY(-1px);
    border-color: var(--purple-600);
}

.filter-category {
    font-weight: var(--font-semibold);
    color: var(--neutral-700);
    margin-right: var(--space-1);
}

.filter-label {
    color: var(--neutral-900);
}

/* Animation moved to utilities.css for consistency */

.remove-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: var(--text-lg);
    color: var(--error);
    background: none;
    border: none;
    border-radius: var(--radius-circle);
    transition: all 0.2s ease;
    margin-left: var(--space-2);
    cursor: pointer;
}

.remove-filter:hover {
    color: var(--text-on-purple);
    background-color: var(--error);
    transform: scale(1.1);
}

/* Results Info Section */
.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--lavender-100);
    border: 2px solid var(--neutral-200);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 15px;
    margin-bottom: var(--space-8);
    margin-top: var(--space-4);
}

.results-count {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

.results-count #current-count {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.1rem;
    font-weight: var(--font-bold);
    color: var(--purple-600);
}

/* Loading States */
.loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--secondary-color);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--secondary-color);
    border-radius: var(--radius-circle);
    animation: spin 1s linear infinite;
}

/* Enhanced Product Footer */
.product-footer {
    margin-top: auto;
    padding-top: var(--space-6);
    border-top: 2px solid var(--ui-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
}

/* Enhanced Product Stock Display */
.product-stock {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-family-base);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}

/* Enhanced View Button with ripple effect */
.view-btn {
    position: relative;
    display: inline-block;
    min-width: 160px;
    padding: var(--space-5) var(--space-10);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border: none;
    border-radius: var(--border-radius-full);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 8px 25px rgb(123 43 133 / 30%);
    transition: var(--transition-base);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

/* Ripple effect animation */
.view-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgb(255 255 255 / 20%);
    border-radius: var(--radius-circle);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.view-btn:hover::after {
    width: 300px;
    height: 300px;
}

.view-btn:hover {
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 8px 25px rgb(123 43 133 / 40%);
    transform: translateY(-3px);
    text-decoration: none;
}

.view-btn:active {
    transform: translateY(-1px);
}


/* ====================================
   LIST VIEW SPECIFIC OVERRIDES
   Inherits ALL base styles, only overrides what's different
   ==================================== */

/* .products-grid.list-view {
    display: flex;
    flex-direction: column;
} */

/* List View: Horizontal layout */
.products-grid.list-view .product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 900px;
    min-height: 320px;
    margin: 0 auto var(--space-2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* List View: Square image container */
.products-grid.list-view .product-image {
    width: 200px; /* FIXED: Making list view product thumbnails SMALLER */
    min-width: 200px;
    height: 200px;
    margin: var(--space-5);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

/* List View: Content area */
.products-grid.list-view .product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    min-width: 400px;
    padding: var(--space-8) var(--space-10);
}

/* List View: Header with title and price side by side */
.products-grid.list-view .product-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    gap: var(--space-8);
}

/* List View: Title section takes available space */
.products-grid.list-view .product-title-section {
    flex: 1;
    min-width: 0;
}

/* List View: Large prominent title */
.products-grid.list-view .product-title a {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

/* List View: Large prominent price */

/* .products-grid.list-view .product-price {
    font-size: var(--font-size-3xl);
    flex-shrink: 0;
    text-align: right;
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
} */

/* List View: Tags display */
.products-grid.list-view .product-tags {
    margin-bottom: var(--space-6);
    justify-content: flex-start;
}

/* List View: Description */
.products-grid.list-view .product-description {
    flex: 1;
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* List View: Footer */
.products-grid.list-view .product-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    margin-top: auto;
    padding-top: var(--space-6);
    border-top: 2px solid var(--ui-gray-100);
}

/* List View: Stock display */
.products-grid.list-view .product-stock {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: var(--font-semibold);
}

/* List View: Button */
.products-grid.list-view .view-btn {
    width: auto;
    min-width: 160px;
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-base);
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
    white-space: nowrap;
}

/* List View: Better quick actions positioning */
.products-grid.list-view .quick-actions {
    top: 25px;
    left: 25px;
}

/* ====================================
   NO PRODUCTS MESSAGE - SHARED
   ==================================== */

.no-products {
    padding: var(--space-12);
    margin: var(--space-8) 0;
    color: var(--text-secondary);
    background: white;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
    grid-column: 1 / -1;
    text-align: center;
}

.no-products:hover {
    border-color: var(--secondary-color);
}

.no-products .no-products-icon {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 4rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.no-products h3 {
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.no-products p {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.no-products-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.reset-filters-btn {
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--danger-color) 0%, var(--error) 100%);
    border: none;
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    cursor: pointer;
}

.reset-filters-btn:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 6px 20px rgb(220 53 69 / 30%);
    transform: translateY(-2px);
}

/* UI-06 / D-04: Always-in-DOM, CSS-class-hidden archive empty-state.
 * Default hidden via class; JS (apply.js) toggles .is-visible on AJAX results.
 * PHP adds .is-visible server-side when found_posts === 0 (JS-off fallback).
 * D-05: No inline style="display:none" — mechanism is this CSS class only. */
.no-results {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.no-results.is-visible {
    display: block;
}

.empty-state-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* Whimsy empty state — replaces the default .no-products on AJAX empty */
.no-products--whimsy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-16) var(--space-8);
    background: white;
    border: 2px dashed var(--border-purple);
    animation: no-products-entrance 0.45s ease-out;
}

@keyframes no-products-entrance {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.no-products--whimsy .no-products-svg {
    margin-bottom: var(--space-6);
    filter: drop-shadow(0 4px 8px rgb(92 31 113 / 12%)); /* token-exempt: drop-shadow filter — no --shadow-purple-* filter variant exists */
}

.no-products--whimsy .no-products-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
}

.no-products--whimsy .no-products-message {
    max-width: 380px;
    margin: 0 0 var(--space-6);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    text-align: center;
}

.no-products--whimsy .no-products-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: var(--gradient-purple);
    border: none;
    border-radius: var(--radius-full);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
}

.no-products--whimsy .no-products-cta:hover {
    box-shadow: var(--shadow-purple-md);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .no-products--whimsy { animation: none; }
}

/* ====================================
   RESPONSIVE DESIGN - SHARED LOGIC
   Both views inherit responsive behavior
   ==================================== */

@media (width <= 768px) {
    /* CRITICAL MOBILE CONTAINER FIXES */
    .products-catalog-page {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* FIXED: Mobile sidebar accessibility */
    .products-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999; /* Higher than header to prevent overlap */
        width: 85%;
        max-width: 320px;
        height: 100vh;
        max-height: 100vh;
        background: white;
        border-radius: 0;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
        box-shadow: 4px 0 20px rgb(0 0 0 / 30%);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }
    
    .products-sidebar.sidebar-open {
        display: block;
        visibility: visible;
        transform: translateX(0);
    }
    
    /* Container styles moved to utilities.css for consistency */
    
    /* Shared Mobile Hero Adjustments */
    .products-hero-compact {
        padding: var(--space-6) 0;
        margin-bottom: var(--space-4);
    }
    
    .hero-content-compact {
        flex-direction: column;
        text-align: center;
        gap: var(--space-6);
        padding: 0;
        margin: 0;
    }
    
    /* hero-stats-compact responsive styles available in page-header.css */
    
    .products-hero-compact .hero-title {
        margin: 0 0 var(--space-3);
        font-size: var(--font-size-2xl);
    }
    
    .products-hero-compact .hero-description {
        margin: 0;
        font-size: var(--font-size-base);
    }
    
    /* Shared Mobile Layout */
    .products-main-content {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        overflow: visible; /* Allow badge to extend beyond container */
    }
    
    .mobile-filter-toggle {
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
        width: auto;                    /* NOT 100% */
        max-width: 100%;
        padding: var(--space-2) var(--space-4);           /* 8px 16px - compact */
        margin: 0 0 var(--space-4);
        background: white;
        border: 1.5px solid var(--secondary-color);
        border-radius: var(--radius-sm);
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
        box-shadow: 0 2px 8px rgb(123 43 133 / 10%);
        box-sizing: border-box;
        overflow: visible;
    }
    
    .active-filter-count {
        top: -8px; /* Back to reasonable positioning */
        right: -8px; /* Back to reasonable positioning */
        width: 22px;
        height: 22px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 0.7rem;
    }
    
    /* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
    .products-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 90%;
        max-width: 320px;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        transform: translateX(-100%);
        transition: var(--transition-base);
    }
    
    /* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
    .products-sidebar.sidebar-open {
        transform: translateX(0);
    }

    .search-controls,
    .search-preferences {
        width: 100%;
        max-width: 100%;
        padding: var(--space-4);
        margin: 0 0 var(--space-4);
        box-sizing: border-box;
    }
    
    .search-container {
        margin-bottom: var(--space-4);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .product-search-input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
    
    .search-btn {
        min-width: 36px;
        max-width: 48px;
        flex-shrink: 0;
        height: 36px;
    }

    .display-preferences-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sort-and-display-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        width: 100%;
    }

    .sort-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        width: 100%;
        min-width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sort-select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .clear-filters-desktop {
        justify-content: center;
        width: auto;                /* NOT 100% on tablet */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Mobile View Toggle Switch Adjustments */
    .view-toggle-container {
        margin-bottom: var(--space-6);
        padding: var(--space-3);
    }
    
    .view-toggle-switch {
        height: 44px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
        border-radius: 22px;
    }
    
    .switch-slider {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
        border-radius: 19px;
    }
    
    .switch-option {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        gap: 0.3rem;
        padding: 0 var(--space-2);
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 0.8rem;
    }
    
    .switch-icon {
        font-size: var(--text-base);
    }
    
    .switch-text {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }
    
    /* Mobile List View */
    .products-grid.list-view .product-card {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        margin: 0 0 var(--space-6);
    }
    
    .products-grid.list-view .product-image {
        width: calc(100% - 40px);
        min-width: auto;
        height: 180px; /* FIXED: Making tablet list view product thumbnails SMALLER */
        margin: var(--space-5);
        aspect-ratio: 1/1;
    }
    
    .products-grid.list-view .product-info {
        min-width: auto;
        min-height: auto;
        padding: var(--space-6);
    }
    
    .products-grid.list-view .product-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }
    
    .products-grid.list-view .product-title a {
        font-size: var(--font-size-xl);
        text-align: center;
    }
    
    /* .products-grid.list-view .product-price {
        font-size: var(--font-size-2xl);
        text-align: center;
        padding: 1rem;
        background: rgba(233, 213, 255, 0.3);
        border-radius: var(--border-radius-lg);
        border: 2px solid rgba(233, 213, 255, 0.5);
    } */
    
    .products-grid.list-view .product-tags {
        justify-content: center;
        margin-bottom: var(--space-6);
    }
    
    .products-grid.list-view .product-description {
        text-align: center;
        font-size: var(--font-size-base);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    .products-grid.list-view .product-footer {
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);
        text-align: center;
    }
    
    .products-grid.list-view .product-stock {
        justify-content: center;
        font-size: var(--font-size-base);
    }
    
    .products-grid.list-view .view-btn {
        width: 100%;
        max-width: 280px;
        padding: var(--space-5);
        font-size: var(--font-size-base);
    }
}

@media (width <= 480px) {
    /* CRITICAL SMALL MOBILE CONTAINER FIXES */

    /* Container styles moved to utilities.css for consistency */
    
    /* Small Mobile Shared Adjustments */
    .products-hero-compact {
        padding: var(--space-4) 0;
        margin-bottom: var(--space-3);
    }
    
    .hero-content-compact {
        gap: var(--space-4);
        padding: 0;
    }
    
    /* hero-stats-compact mobile responsive styles available in page-header.css */
    
    .mobile-filter-toggle {
        padding: var(--space-2) var(--space-3);        /* 8px 12px - compact */
        margin: 0 0 var(--space-2);
        font-size: var(--text-xs);             /* 12px */
    }
    
    .search-preferences {
        padding: var(--space-3);
        margin: 0 0 var(--space-3);
    }
    
    .search-container {
        /* No flex-direction override: the base rule's row layout keeps the
           input (flex: 1) and the 44px search button on ONE row on mobile. */
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .product-search-input {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.875rem 1rem;
        font-size: var(--font-size-sm);
    }
    
    .search-btn {
        justify-content: center;
        width: auto;                    /* NOT 100% */
        min-width: 36px;
        height: 36px;
        padding: var(--space-2) var(--space-3);        /* Compact */
    }

    .display-preferences-bar {
        gap: var(--space-2);
        padding-top: var(--space-2);
    }

    .sort-container {
        gap: var(--space-1);
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.375rem 0.5rem;
    }

    .sort-container label {
        font-size: var(--text-xs);
    }

    .sort-select {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.5rem 0.625rem;
        font-size: var(--text-xs);
    }

    .clear-filters-desktop {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.375rem 0.625rem;     /* 6px 10px - compact */
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 0.6875rem;
    }
    
    /* Small Mobile List View */
    .products-grid.list-view .product-image {
        width: calc(100% - 30px);
        height: 140px; /* FIXED: Making small mobile list view product thumbnails SMALLER */
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        margin: 15px;
        aspect-ratio: 1/1;
    }
    
    .products-grid.list-view .product-info {
        padding: var(--space-4);
    }
    
    .products-grid.list-view .product-title a {
        font-size: var(--font-size-lg);
    }
    
    /* .products-grid.list-view .product-price {
        font-size: var(--font-size-xl);
        padding: 0.75rem;
    } */
    
    .products-grid.list-view .product-tags {
        justify-content: center;
        gap: var(--space-2);
    }
    
    .products-grid.list-view .product-description {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .products-grid.list-view .product-footer {
        gap: var(--space-4);
    }
    
    .products-grid.list-view .view-btn {
        padding: var(--space-4);
        font-size: var(--font-size-sm);
    }
}

/* ====================================
   ANIMATION KEYFRAMES
   ==================================== */

/* spin animation available in pet-gallery.css */

/* Animation moved to utilities.css for consistency */

/* slideInUp animation available in single-product.css */

.product-card.animate-in {
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ====================================
   FOCUS STYLES FOR ACCESSIBILITY
   ==================================== */

/* Focus styling for filter/view controls inherited from the canonical
   base.css :focus-visible ring (CONS-05/D-11) — divergent outline removed. */

/* ====================================
   INFINITE SCROLL LOADING
   ==================================== */

.infinite-scroll-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
    color: var(--text-secondary);
}

.infinite-scroll-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--secondary-color);
    border-radius: var(--radius-circle);
    animation: spin 1s linear infinite;
}

/* ====================================
   DESKTOP LAYOUT FIXES
   ==================================== */

/* Fix desktop alignment of search controls and sidebar */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.products-main-content {
    align-items: flex-start;
}

/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.search-controls {
    width: 100%;
}

/* FIXED: Footer overlap and alignment issues on desktop */
@media (width >= 769px) {
    .products-sidebar {
        position: sticky;
        top: 2rem;
        z-index: 15; /* Higher to ensure it's above footer */
    }
    
    /* FIXED: Ensure footer doesn't interfere with filter menu */
    .site-footer {
        position: relative;
        z-index: 5;
        clear: both;
    }
    
    /* FIXED: Proper alignment of search controls and sidebar */
    .products-main-content {
        position: relative;
        z-index: 10;
        display: grid;
        grid-template-columns: 320px 1fr;
        align-items: start;
        gap: var(--space-8);
        min-height: calc(100vh - 200px); /* Ensure proper height */
    }
    
    /* FIXED: Search controls alignment */
    .search-controls {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        align-self: start;
    }
    
    /* FIXED: Products content takes remaining space */
    .products-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ====================================
   COMPLETE PAGINATION STYLES
   ==================================== */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    margin: var(--space-12) 0 var(--space-8);
}

.pagination-nav {
    background: linear-gradient(135deg, white 0%, var(--lavender-50) 100%);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 8px 25px rgb(123 43 133 / 10%);
    transition: var(--transition-base);
    overflow: hidden;
}

.pagination-nav:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 12px 35px rgb(123 43 133 / 15%);
    border-color: var(--secondary-color);
}

.pagination-list {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination-item {
    margin: 0;
    border-right: 1px solid var(--border-color);
}

.pagination-item:last-child {
    border-right: none;
}

.page-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    height: 48px;

    /* CONS-04 / D-10: 44px tap-target floor (the <=768px media block drops this to
       height:40px and it renders 36x36 at 360px). Logical min-* restore >=44 at
       every viewport — they win over the responsive height. */
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    box-sizing: border-box;
}

.page-link:hover {
    z-index: 2;
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 20%);
    transform: translateY(-2px);
}

.page-link.current {
    font-weight: var(--font-bold);
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 10%);
    transform: none;
    cursor: default;
}

.page-link.current:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 10%);
    transform: none;
}

/* Disabled pagination buttons */
.page-link.disabled {
    color: var(--neutral-600);
    background: var(--neutral-50);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.page-link.disabled:hover {
    color: var(--neutral-600);
    background: var(--neutral-50);
    box-shadow: none;
    transform: none;
}

/* Previous/Next buttons */
.page-link.prev-page,
.page-link.next-page {
    padding: var(--space-4) var(--space-6);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: linear-gradient(135deg, #f8f9ff 0%, var(--neutral-200) 100%);
}

.page-link.prev-page:hover,
.page-link.next-page:hover {
    color: var(--text-on-purple);
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--tertiary-color) 100%);
}

/* Ellipsis styling */
.pagination-ellipsis {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-4) var(--space-2);
    font-weight: var(--font-medium);
    color: var(--text-light);
    background: var(--lavender-100);
    border-right: 1px solid var(--border-color);
}

/* Loading state for pagination */
.pagination-nav.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Screen reader text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
    margin: -1px;
    overflow: hidden;
    /* stylelint-disable-next-line property-no-deprecated -- clip: rect() is the cross-browser .sr-only idiom; clip-path alone is not equivalent for legacy AT */
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive pagination adjustments */
@media (width <= 768px) {
    .pagination-container {
        padding: var(--space-2);
        margin: var(--space-8) 0 var(--space-6);
    }
    
    .pagination-nav {
        max-width: 100%;
        border-radius: var(--border-radius-lg);
        overflow-x: auto;
    }
    
    .page-link {
        min-width: 40px;
        height: 40px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }
    
    .page-link.prev-page,
    .page-link.next-page {
        padding: var(--space-3) var(--space-5);
    }
    
    .pagination-ellipsis {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.75rem 0.375rem;
        font-size: var(--font-size-sm);
    }
}

@media (width <= 480px) {
    .pagination-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .page-link {
        /* CONS-04 / D-10: 44px tap-target floor — this <=480px override formerly
           set min-width:36px (rendered 36 wide). min-inline-size:44px restores the
           >=44 width floor at 360px (logical prop wins on this axis here as it is
           declared after the base min-width); height floor comes from the base
           rule's min-block-size:44. Sanctioned hit-area growth. */
        min-inline-size: 44px;
        height: 36px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.625rem 0.875rem;
        flex-shrink: 0;
    }
    
    .pagination-ellipsis {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid spacing — no --space-* token is byte-identical; literal preserves zero-diff */
        padding: 0.625rem 0.25rem;
    }
}

/* Enhanced animations */

/* Animation moved to utilities.css for consistency */

/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.pagination-nav {
    animation: pagination-slide-in 0.4s ease;
}

/* Focus ring inherited from the canonical base.css :focus-visible (CONS-05/D-11);
   the focused pagination link keeps its raised stacking only. */
.page-link:focus {
    z-index: 3;
}

/* ====================================
   ENHANCED MOBILE SIDEBAR MODAL BEHAVIOR
   Advanced dimming and input isolation system
   ==================================== */

/* FIXED: Blur the actual content elements, not an overlay that affects everything */
.sidebar-active #main-products-page {
    position: relative;
    background: transparent; /* Make container transparent for enhanced blur effect */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Block all user interactions with main content */
    user-select: none; /* Prevent text selection */
}

/* Apply blur and dimming directly to main content areas + BLOCK ALL INTERACTIONS */
.sidebar-active .products-hero-compact,
.sidebar-active .search-controls,
.sidebar-active .products-content,
.sidebar-active .results-info,
.sidebar-active .pagination-container,
.sidebar-active .mobile-filter-toggle {
    position: relative;
    z-index: 1; /* Lower than sidebar - force override of higher z-index */
    opacity: 0.6;
    transition: all 0.3s ease;
    filter: blur(4px);
    pointer-events: none; /* Block all clicks and interactions */
    user-select: none; /* Prevent text selection */
    touch-action: none; /* Prevent touch scrolling and gestures */
}

/* Additional blocking for any nested interactive elements */
.sidebar-active .products-hero-compact *,
.sidebar-active .search-controls *,
.sidebar-active .products-content *,
.sidebar-active .results-info *,
.sidebar-active .pagination-container *,
.sidebar-active .mobile-filter-toggle * {
    pointer-events: none; /* Ensure nested elements are also blocked */
    user-select: none;
    touch-action: none;
}

/* Enhanced Mobile Filter Overlay - Now fully interactive */
.mobile-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 998; /* Below sidebar, above dimmed content */
    background: transparent; /* Transparent - visual dimming handled by main page overlay */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mobile-filter-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Allow clicks to close sidebar */
}

/* Ensure sidebar remains fully interactive */
.sidebar-active .products-sidebar {
    pointer-events: auto; /* Override any blocking */
    user-select: auto; /* Allow text selection in sidebar */
    z-index: 999; /* Highest priority */
}

/* Enhanced sidebar transition effects */
.sidebar-active .products-sidebar.sidebar-open {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 50px rgb(0 0 0 / 30%); /* Enhanced shadow when active */
}

/* Prevent body scrolling when sidebar is active - ENHANCED with surgical touch control */
body.sidebar-active {
    overflow: hidden; /* Prevent background scrolling */

    /* Removed position: fixed to prevent scroll position jumping */
    width: 100%; /* Maintain width */
    height: 100vh; /* Lock viewport height */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling when restored */
}

/* Surgical touch control - block only main content area */
body.sidebar-active #main-products-page {
    touch-action: none; /* Prevent touch scrolling only on main content */
}

/* Ensure sidebar maintains touch scrollability */
body.sidebar-active .products-sidebar {
    touch-action: auto; /* Restore touch scrolling for sidebar */
    -webkit-overflow-scrolling: touch; /* Smooth sidebar scrolling */
}

/* Enhanced Z-index hierarchy for modal behavior */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.mobile-filter-overlay { z-index: 998; }
.products-sidebar.sidebar-open { z-index: 9999; } /* elevated within its wrapper; the header trap is handled by body.sidebar-active .site-header below */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.products-sidebar { z-index: 25; }
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.products-main-content { z-index: 15; }

/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.search-preferences,
.search-controls { z-index: 14; }
.products-content { z-index: 12; }
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.mobile-filter-toggle { z-index: 100; }
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.active-filter-count { z-index: 10002; }
.site-footer { z-index: 10; }

/* FILT-01 — header stacking-context trap fix.
   The open drawer (.products-sidebar.sidebar-open) is position:fixed; z-index:9999, but it is
   nested inside .products-catalog-page (position:relative; z-index:1), which traps it in a
   stacking context BELOW the sticky .site-header (z-index:1002, style.css). A fixed child
   cannot escape an ancestor stacking context, so the header's logo painted over the close
   button (verified: elementFromPoint at the close-button centre returned the .site-title link).
   While the drawer is open, drop the header out of the top layer so the drawer and its close
   control sit above it — and the header dims with the rest of the page. The deeper cleanup of
   the redundant wrapper z-indexes is deferred to Phase 6 (cross-page consistency sweep). */
body.sidebar-active .site-header { z-index: 0; }

/* FIXED: Ensure mobile filter toggle gets blurred when sidebar is active */
.sidebar-active .mobile-filter-toggle {
    z-index: 1; /* Force lower than sidebar to ensure blur effect works */
}

/* ====================================
   PAGINATION DYNAMIC UPDATE ENHANCEMENTS
   ==================================== */

/* Pagination updating state */
.pagination-nav.updating {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.pagination-nav.updating::after {
    content: "Updating...";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-on-purple);
    background: rgb(123 43 133 / 90%); /* token-exempt: compound rgba background tint — no token covers this alpha variant */
    border-radius: var(--radius-xs);
    transform: translate(-50%, -50%);
}

/* Enhanced results info with better typography */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-200) 100%);
    border: 1px solid var(--neutral-300);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-scale radius — no --radius-* token is byte-identical; literal preserves zero-diff */
    border-radius: 8px;
    margin-bottom: var(--space-6);
}

/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.results-count {
    font-weight: var(--font-medium);
    color: var(--neutral-700);
}

.results-range {
    font-weight: var(--font-bold);
    color: var(--purple-600);
}

.results-total {
    font-weight: var(--font-bold);
    color: var(--neutral-900);
}

/* Enhanced loading states */
.loading-overlay {
    background: linear-gradient(135deg, rgb(255 255 255 / 95%) 0%, rgb(248 249 250 / 95%) 100%);
    backdrop-filter: blur(4px);
}

/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.loading-spinner {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke literal — no token is byte-identical; literal preserves zero-diff */
    border-color: #f3f3f3 #f3f3f3 var(--purple-600) #f3f3f3;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 0 20px rgb(123 43 133 / 20%);
}

/* Skeleton Loader Styles
   NICE-03 / D-15: dimensions reconciled IN PLACE to match the NEW grid-view geometry
   shipped in plan 04-02 (css/components/product-card.css @layer components) so the
   skeleton→results swap does NOT reflow. Track-template, gap, and image aspect-ratio
   must equal the real .products-grid / .product-image values exactly.
   @see css/components/product-card.css — real .products-grid grid-template-columns
   @see css/components/product-card.css — real .products-grid gap (var(--space-3))
   @see css/components/product-card.css — real .product-image aspect-ratio (4/5) */
.skeleton-loader {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.skeleton-product-card {
    /* Subgrid cards are content-sized (no fixed height). Use a representative
     * min-height as a soft floor so the auto-fill track count matches one
     * skeleton per real card — the equality spec injects one skeleton per card. */
    min-height: 380px;
    background: white;

    /* NICE-03: border:1px solid transparent mirrors .product-card's 1px border (product-card.css)
     * so box-sizing:border-box shrinks the content area by the same 2px (1px left + 1px right).
     * Without this, skeleton-image is 2px wider than .product-image → 2.5px height mismatch
     * via aspect-ratio:4/5. Transparent preserves the geometry without adding a visible stroke. */
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-image {
    /* NICE-03: width:auto + margin:var(--space-5) mirrors .product-image (product-card.css:183).
     * display:block is declared explicitly and width is set via calc so the inline size is
     * definite — this lets aspect-ratio derive a non-zero block size that getComputedStyle()
     * can read correctly when the element is dynamically injected (auto block width deferred
     * layout can return 0 for aspect-ratio-only height). */
    display: block;
    width: calc(100% - 2 * var(--space-5));
    margin: 0 var(--space-5) var(--space-5);

    /* aspect-ratio: 4/5 matches .product-image exactly (no fixed height). */
    aspect-ratio: 4 / 5;
    background: linear-gradient(
        90deg,
        var(--ui-gray-100) 25%,
        var(--ui-gray-200) 50%,
        var(--ui-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-content {
    padding: var(--space-6);
}

.skeleton-title,
.skeleton-description,
.skeleton-price,
.skeleton-tag {
    background: linear-gradient(
        90deg,
        var(--ui-gray-100) 25%,
        var(--ui-gray-200) 50%,
        var(--ui-gray-100) 75%
    );
    border-radius: var(--radius-xs);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    background-size: 200% 100%;
    margin-bottom: var(--space-3);
}

.skeleton-title {
    width: 80%;
    height: 20px;
}

.skeleton-title.short {
    width: 60%;
}

.skeleton-description {
    width: 100%;
    height: 14px;
}

.skeleton-price {
    width: 40%;
    height: 24px;
    margin-top: var(--space-4);
}

.skeleton-tags {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.skeleton-tag {
    width: 60px;
    height: 24px;
    margin-bottom: 0;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* NICE-03 / D-06 / Pitfall 3: the existing animations.css:735-748 reduced-motion
   block covers the `.animate-*` entrance classes but NOT this skeleton's
   skeleton-shimmer / skeleton-pulse keyframes (the global `*{animation-duration:
   0.01ms}` only damps them, leaving a fast-flashing gradient). Stop them outright
   so reduced-motion users see a flat, static placeholder. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-product-card,
    .skeleton-image,
    .skeleton-title,
    .skeleton-description,
    .skeleton-price,
    .skeleton-tag {
        background: var(--ui-gray-100);
        animation: none;
    }
}

/* Filter Loading Indicator */
.filter-loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--primary-color);
    background: linear-gradient(135deg, rgb(123 43 133 / 10%), rgb(92 31 113 / 10%)); /* token-exempt: compound rgba background tint — no token covers this alpha variant */
    border-radius: var(--border-radius);
    animation: slide-in-down 0.3s ease;
    margin-bottom: var(--space-4);
}

.mini-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgb(123 43 133 / 20%); /* token-exempt: rgba border tint — no token covers this alpha variant */
    border-top-color: var(--primary-color);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}

@keyframes slide-in-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================================
   ACCESSIBILITY AND FOCUS IMPROVEMENTS
   ==================================== */

.search-controls [data-preference-type],
.active-filter-tag,
.remove-filter {
    position: relative;
}

/* Preference/filter-tag focus styling inherited from the canonical
   base.css :focus-visible ring (CONS-05/D-11) — divergent outline removed. */

/* Print styles - hide interactive elements */
@media print {
    .search-controls,
    .search-preferences,
    .active-filters,
    .mobile-filter-toggle,
    .pagination-container {
        display: none;
    }
}

/* ENHANCED: Mobile filter badge positioning improvements */
@media (width <= 768px) {
    .mobile-filter-toggle {
        position: relative;
        z-index: 100;
        padding: var(--space-2) var(--space-4);           /* 8px 16px - compact */
        margin: 0 0 var(--space-6);
        isolation: isolate;
        overflow: visible;
        margin-top: var(--space-3);
        contain: style;
    }
    
    .mobile-filter-toggle::after,
    .active-filter-count {
        top: -12px;
        right: -12px;
        z-index: 10002;
        width: 24px;
        height: 24px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
        box-shadow: 0 3px 12px rgb(255 71 87 / 40%);
        transform: translateZ(0);
        will-change: transform;
        isolation: isolate;
    }
    
    .products-main-content,
    .container,
    .products-catalog-page {
        overflow: visible;
        position: relative;
        z-index: 1;
    }
}

/* ENHANCED: Desktop layout improvements for footer overlap prevention */
@media (width >= 769px) {
    .products-sidebar {
        z-index: 25;
        isolation: isolate;
        transform: translateZ(0);
    }
    
    .site-footer {
        z-index: 10;
        margin-top: var(--space-16);
    }
    
    .products-main-content {
        z-index: 15;
        margin-bottom: var(--space-8);
        min-height: calc(100vh - 300px);
    }
    
    .products-content {
        z-index: 12;
        padding-bottom: var(--space-12);
    }
    
    .search-controls {
        z-index: 14;
    }
}

/* ENHANCED: Visual feedback for filter interactions */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.active-filter-tag {
    transition: all 0.3s ease;
}

.active-filter-tag.removing {
    opacity: 0;
    transform: scale(0.8) translateX(-20px);
    transition: all 0.15s ease;
}

/* ENHANCED: Hardware acceleration for better performance */

/* NOTE: .products-sidebar excluded - it uses translateX for mobile hide/show */
.mobile-filter-toggle,
.active-filter-count,
.pagination-nav {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hardware acceleration for sidebar without overriding transforms */
/* stylelint-disable-next-line no-duplicate-selectors -- intentional same-selector cascade split (z-index hierarchy / responsive override / hardware-accel block); merging would reorder the cascade and break zero-diff */
.products-sidebar {
    backface-visibility: hidden;
    will-change: transform;
}

/* ====================================
   QUICK VIEW MODAL STYLES
   ==================================== */

/* Modal backdrop */
.quick-view-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    background: rgb(0 0 0 / 75%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.quick-view-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal container */
.quick-view-modal {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: white;
    border-radius: var(--border-radius-lg);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 25px 50px rgb(0 0 0 / 30%);
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.quick-view-overlay.active .quick-view-modal {
    transform: scale(1) translateY(0);
}

/* Close button */
.quick-view-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10001;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: var(--text-2xl);
    color: var(--text-secondary);
    background: rgb(255 255 255 / 90%);
    border: none;
    border-radius: var(--radius-circle);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-view-close:hover {
    color: var(--text-primary);
    background: white;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    transform: scale(1.1);
}

/* Modal content */
.quick-view-content {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-8);
}

/* Product image section */
.quick-view-image {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.quick-view-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Force 1:1 aspect ratio */
}

.quick-view-image .placeholder-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    font-size: var(--text-5xl);
    color: var(--text-muted);
    background: var(--neutral-50);
    border-radius: var(--border-radius-md);
    aspect-ratio: 1 / 1; /* Force 1:1 aspect ratio */
}

/* Product info section */
.quick-view-info {
    flex: 1;
    min-width: 0;
}

.quick-view-title {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.75rem;
    font-weight: var(--font-bold);
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.quick-view-brand {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
}

.quick-view-price {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--primary-color);
    margin-bottom: var(--space-4);
}

.quick-view-original-price {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.2rem;
    font-weight: var(--font-normal);
    color: var(--text-muted);
    text-decoration: line-through;
    margin-left: var(--space-2);
}

.quick-view-price-contact {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Availability badge */
.quick-view-availability {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.8rem;
    font-weight: var(--font-semibold);
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-4);
}

.quick-view-availability.in_stock {
    color: var(--qv-success-text);
    background: var(--qv-success-bg);
}

.quick-view-availability.limited_stock {
    color: var(--amber-text);
    background: var(--amber-100);
}

.quick-view-availability.out_of_stock {
    color: var(--qv-error-text);
    background: var(--qv-error-bg);
}

/* Product description */
.quick-view-excerpt {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

/* Product tags */
.quick-view-tags {
    margin-bottom: var(--space-6);
}

.quick-view-tags h5 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-view-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.quick-view-tag {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-semibold);
    border: 1px solid transparent;
    border-radius: var(--border-radius-full);
    transition: var(--transition-base);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quick-view-tag:hover {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    transform: translateY(-2px);
}

/* Animal tag styling for quick view */
.animal-tags .quick-view-tag {
    color: var(--violet-800);
    background: linear-gradient(135deg, var(--violet-200) 0%, var(--violet-300) 100%);
    border-color: var(--violet-300);
}

/* Product tag styling for quick view */
.product-tags .quick-view-tag {
    color: var(--rose-700);
    background: linear-gradient(135deg, var(--rose-100) 0%, var(--rose-200) 100%);
    border-color: var(--rose-200);
}

/* Product actions */
.quick-view-actions {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-color);
}

.quick-view-actions h5 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 1.1rem;
    font-weight: var(--font-semibold);
    color: var(--primary-color);
    margin-bottom: var(--space-4);
}

.quick-view-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.quick-view-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
    font-size: 0.9rem;
}

.quick-view-contact-item a {
    font-weight: var(--font-medium);
    color: var(--primary-color);
    text-decoration: none;
}

.quick-view-contact-item a:hover {
    text-decoration: underline;
}

/* Action buttons */
.quick-view-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.quick-view-btn {
    flex: 1;
    min-width: 140px;
    padding: var(--space-3) var(--space-6);
    font-weight: var(--font-semibold);
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
}

.quick-view-btn-primary {
    color: var(--text-on-purple);
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.quick-view-btn-primary:hover {
    background: var(--primary-dark);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
    box-shadow: 0 4px 12px rgb(123 43 133 / 30%);
    transform: translateY(-2px);
    border-color: var(--primary-dark);
}

.quick-view-btn-secondary {
    color: var(--primary-color);
    background: transparent;
    border: 2px solid var(--primary-color);
}

.quick-view-btn-secondary:hover {
    color: var(--text-on-purple);
    background: var(--primary-color);
    transform: translateY(-2px);
}

/* Loading state */
.quick-view-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-12) var(--space-8);
    color: var(--text-secondary);
}

.quick-view-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--neutral-200);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-circle);
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-4);
}

/* @keyframes spin removed - available in utilities.css */

/* Urgent pulse animation for critical stock */
@keyframes urgent-pulse {
    0%, 100% {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
        box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
        transform: scale(1);
    }

    50% {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- custom shadow geometry/color (purple-600/black/status tints, bespoke offsets+spread) — no --shadow-* token is byte-identical; literal preserves zero-diff */
        box-shadow: 0 6px 20px rgb(239 68 68 / 50%);
        transform: scale(1.05);
    }
}

/* Error state */
.quick-view-error {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    color: var(--error-text);
}

.quick-view-error h4 {
    margin-bottom: var(--space-4);
    color: var(--error-text);
}

/* Responsive design */
@media (width <= 768px) {
    .quick-view-modal {
        max-height: 95vh;
        margin: var(--space-2);
    }
    
    .quick-view-content {
        flex-direction: column;
        gap: var(--space-6);
        padding: var(--space-6);
        padding-top: var(--space-12); /* Space for close button */
    }
    
    .quick-view-title {
        font-size: var(--text-2xl);
    }
    
    .quick-view-price {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 1.3rem;
    }
    
    .quick-view-contact {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .quick-view-buttons {
        flex-direction: column;
    }
    
    .quick-view-btn {
        flex: none;
    }
}

@media (width <= 480px) {
    .quick-view-overlay {
        padding: var(--space-2);
    }
    
    .quick-view-content {
        padding: var(--space-4);
        padding-top: var(--space-10);
    }
    
    .quick-view-title {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 1.3rem;
    }
    
    .quick-view-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 32px;
        height: 32px;
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale-extension size — no --text-* token is byte-identical; literal preserves zero-diff */
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   TOUCH-TARGET FLOOR (CONS-04 / D-10) — multi-selector groups
   ==========================================================================
   WCAG 2.5.5 AAA 44x44 hit-target floors for the archive filter/sort controls
   styled by grouped selectors (the single-selector controls — .search-btn,
   .quick-action-btn, .product-title a, .tag, .page-link, .price-slider*,
   .mobile-filter-toggle — carry their floor inline on the existing rule to keep
   no-duplicate-selectors clean). Mechanism: min-block-size / min-inline-size, a
   no-op on any axis already >= 44 (third sanctioned visual delta). No !important
   (Anti-Pattern L1); 44px is a size literal, outside the strict-value list.

   D-10 EXEMPT (NOT grown — WCAG 2.5.8 inline-text exception), matching the spec
   allow-list verbatim: 'p a', '.entry-content a', '.breadcrumbs a', 'li p a'. */

/* Clear-filters buttons (rendered 35 / 30 tall) */
.clear-filters-btn,
.clear-filters-desktop {
    min-block-size: 44px;
}

/* Sort / items-per-page selects (rendered 38 / 37 tall) */
.sort-select,
.items-per-page-select {
    min-block-size: 44px;
}