/* Variabili globali aggiuntive per Prodotti */
:root {
    --synergy-ivory: #f7f3ec;
    --synergy-pearl: #ece9e2;
    --synergy-white: #ffffff;
    --synergy-silver: #c9ced6;
    --synergy-platinum: #dce0e6;
    --synergy-champagne: #e6d7bd;
    --synergy-soft-gold: #d8c39a;
    --synergy-charcoal: #202020;
    --synergy-muted: #6f6f6f;
}

/* ==========================================
   HERO PRODOTTI
========================================== */
.prodotti-hero {
    background-color: var(--synergy-ivory);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
}

.prodotti-hero::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230, 215, 189, 0.4) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-eyebrow {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--synergy-soft-gold);
    margin-bottom: 1rem;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--synergy-charcoal);
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--synergy-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.btn-outline-champagne {
    background: transparent;
    border: 1px solid var(--synergy-champagne);
    color: var(--synergy-charcoal);
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-outline-champagne:hover {
    background: var(--synergy-champagne);
    color: var(--synergy-charcoal);
}

/* ==========================================
   CATEGORY PILLS BAR (HORIZONTAL SCROLL)
========================================== */
.synergy-category-pills-bar {
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    box-sizing: border-box;
}

.category-pills-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 4px 4px 12px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.category-pills-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.category-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--synergy-charcoal, #1f2023);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.category-pill-btn:hover {
    border-color: var(--synergy-charcoal, #1f2023);
    background: #ffffff;
}

.category-pill-btn.active {
    background: var(--synergy-charcoal, #1f2023) !important;
    color: #ffffff !important;
    border-color: var(--synergy-charcoal, #1f2023) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(31, 32, 35, 0.25) !important;
}

/* ==========================================
   CATALOG TOP BAR
========================================== */
.prodotti-catalog-section {
    padding: 60px 0;
    background-color: var(--synergy-white);
}

.catalog-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--synergy-white);
    padding: 12px 24px;
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid var(--synergy-platinum);
    margin-bottom: 40px;
}

.catalog-results-count {
    font-size: 0.95rem;
    color: var(--synergy-charcoal);
}

.catalog-active-filters {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    flex: 1;
    width: 100%;
    margin-top: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.catalog-active-filters::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    background: var(--synergy-white);
    border: 1px solid var(--synergy-silver);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--synergy-charcoal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: var(--synergy-charcoal);
}

.filter-chip span.remove {
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1;
}

.catalog-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-clear-filters {
    background: none;
    border: none;
    color: var(--synergy-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.btn-clear-filters:hover {
    color: var(--synergy-charcoal);
}

.btn-clear-filters.hidden {
    display: none;
}

/* Custom Synergy Sort Dropdown */
.synergy-custom-dropdown {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 240px;
    box-sizing: border-box;
}

.synergy-dropdown-trigger {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--synergy-white, #ffffff);
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--synergy-charcoal, #202020);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.synergy-dropdown-trigger:hover,
.synergy-custom-dropdown.active .synergy-dropdown-trigger {
    border-color: var(--synergy-soft-gold, #d8c39a);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.synergy-dropdown-chevron {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--synergy-charcoal, #202020);
    flex-shrink: 0;
}

.synergy-custom-dropdown.active .synergy-dropdown-chevron {
    transform: rotate(180deg);
}

.synergy-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 250px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.synergy-custom-dropdown.active .synergy-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.synergy-dropdown-item {
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #444444;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.synergy-dropdown-item:hover,
.synergy-dropdown-item:focus-visible {
    background: var(--synergy-ivory, #f7f3ec);
    color: var(--synergy-charcoal, #202020);
}

.synergy-dropdown-trigger:focus-visible,
.synergy-dropdown-item:focus-visible,
.btn-mobile-filter:focus-visible,
#close-mobile-filter:focus-visible,
#mobile-reset-filters:focus-visible,
#mobile-apply-filters:focus-visible {
    outline: 3px solid var(--synergy-soft-gold, #d8c39a);
    outline-offset: 3px;
}

.synergy-dropdown-item.active {
    background: var(--synergy-ivory, #f7f3ec);
    color: var(--synergy-charcoal, #202020);
    font-weight: 600;
}

.synergy-dropdown-item.active::after {
    content: '✓';
    font-size: 0.9rem;
    color: var(--synergy-soft-gold, #d8c39a);
    font-weight: 700;
}

.btn-mobile-filter {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--synergy-charcoal);
    color: var(--synergy-white);
    border: none;
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ==========================================
   LAYOUT PRINCIPALE
========================================== */
.catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
}

/* ==========================================
   GRIGLIA PRODOTTI
========================================== */
.prodotti-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    transition: opacity 0.3s ease;
}

.prodotti-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================
   CARD PRODOTTO
========================================== */
@keyframes card-shimmer {
    0% { transform: translateX(-150%) skewX(-25deg); }
    35% { transform: translateX(250%) skewX(-25deg); }
    100% { transform: translateX(250%) skewX(-25deg); }
}

.synergy-product-card {
    background: rgba(247, 243, 236, 0.5); /* translucent ivory */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(220, 224, 230, 0.5); /* translucent platinum */
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.synergy-product-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-150%) skewX(-25deg);
    animation: card-shimmer 4.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.synergy-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.product-card-clickable-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.product-card-clickable-area:hover .product-title {
    color: var(--synergy-soft-gold, #d8c39a);
}

.synergy-add-to-cart-btn.loading {
    opacity: 0.75;
    cursor: wait;
}

.synergy-add-to-cart-btn.added {
    background-color: #276749 !important;
    border-color: #276749 !important;
    color: #ffffff !important;
}

.product-card-image-wrap {
    position: relative;
    z-index: 2;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    background-color: rgba(236, 233, 226, 0.3); /* highly translucent pearl */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.product-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

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

.product-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--synergy-muted);
    gap: 8px;
    opacity: 0.6;
}

.placeholder-brand {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--synergy-charcoal);
    color: var(--synergy-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sale-badge {
    background: #d4a373; /* Colore gold/bronze per offerta */
}

.product-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.product-cat-badge {
    font-size: 0.75rem;
    color: var(--synergy-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.product-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: var(--synergy-charcoal);
    margin: 0 0 4px;
    line-height: 1.2;
}

.product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-title a:hover {
    color: var(--synergy-soft-gold);
}

.product-brand {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--synergy-soft-gold);
    margin-bottom: 12px;
    display: block;
}

.product-desc {
    font-size: 0.9rem;
    color: var(--synergy-muted);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.product-card-footer {
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.product-price-wrapper {
    font-weight: 600;
    color: var(--synergy-charcoal);
    font-size: 1.1rem;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.product-price-wrapper:hover {
    color: var(--synergy-soft-gold, #d8c39a);
}

.product-price.on-sale del {
    font-size: 0.85rem;
    color: var(--synergy-muted);
    font-weight: 400;
    margin-right: 4px;
}

.product-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.btn-scopri {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--synergy-charcoal);
    color: var(--synergy-white);
    padding: 12px 20px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border: 1px solid var(--synergy-charcoal);
    transition: all 0.3s ease;
}

.btn-scopri:hover {
    background-color: var(--synergy-soft-gold);
    border-color: var(--synergy-soft-gold);
    color: var(--synergy-white);
}

.secondary-link {
    font-size: 0.75rem;
    color: var(--synergy-muted);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.secondary-link:hover {
    color: var(--synergy-charcoal);
}

/* ==========================================
   SIDEBAR FILTRI
========================================== */
.catalog-sidebar {
    background: var(--synergy-white);
    border: 1px solid var(--synergy-silver);
    border-radius: 28px;
    padding: 28px;
}

.sidebar-header-mobile, .sidebar-footer-mobile {
    display: none;
}

.filter-widget {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--synergy-platinum);
}

.filter-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--synergy-charcoal);
    margin: 0 0 16px;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

details > summary.filter-title {
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    margin-bottom: 0; /* Let details[open] handle spacing */
    transition: color 0.2s ease;
}

details > summary.filter-title::-webkit-details-marker {
    display: none;
}

details > summary.filter-title::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--synergy-muted);
    transition: transform 0.3s ease;
}

details[open] > summary.filter-title::after {
    content: '-';
    transform: rotate(180deg);
}

details[open] > summary.filter-title {
    margin-bottom: 16px;
}

.term-count {
    font-size: 0.8rem;
    color: var(--synergy-muted);
    font-weight: 400;
    margin-left: 4px;
}

.custom-checkbox.filter-empty {
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   PRICE SLIDER & HISTOGRAM
   ========================================================================== */
.price-filter-widget {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--synergy-platinum);
}

.price-histogram {
    display: flex;
    align-items: flex-end;
    height: 60px;
    padding: 0 8px; /* Align with slider track */
    gap: 4px;
    margin-bottom: -10px; /* Overlap with slider track slightly */
}

.histogram-bar {
    flex: 1;
    background-color: var(--synergy-charcoal);
    border-radius: 4px 4px 0 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    min-height: 2px;
}

.histogram-bar.inactive {
    opacity: 0.15;
}

.price-slider-wrapper {
    padding: 10px 8px;
    margin-bottom: 24px;
}

/* noUiSlider Overrides */
.noUi-target {
    background: var(--synergy-platinum);
    border: none;
    border-radius: 4px;
    box-shadow: none;
    height: 6px;
}

.noUi-connect {
    background: var(--synergy-charcoal);
}

.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    right: -10px;
    top: -7px;
    border-radius: 4px;
    border: 3px solid var(--synergy-charcoal);
    background: #fff;
    box-shadow: none;
    cursor: grab;
}

.noUi-horizontal .noUi-handle:active {
    cursor: grabbing;
}

.noUi-handle:before, .noUi-handle:after {
    display: none; /* Hide default lines */
}

/* Price Inputs UI */
.price-inputs {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.price-input-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-suffix-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--synergy-platinum);
    border-radius: 4px;
    background: transparent;
    transition: border-color 0.3s ease;
}

.input-suffix-wrapper:focus-within {
    border-color: var(--synergy-charcoal);
}

.input-suffix-wrapper input[type="number"] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--synergy-charcoal);
    outline: none;
    -moz-appearance: textfield;
}

.input-suffix-wrapper input[type="number"]::-webkit-outer-spin-button,
.input-suffix-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.currency-suffix {
    padding-right: 12px;
    color: var(--synergy-charcoal);
    font-weight: 500;
    font-size: 0.95rem;
    user-select: none;
    pointer-events: none;
}

.price-input-label {
    font-size: 0.85rem;
    color: var(--synergy-muted);
    font-weight: 400;
}

/* Ricerca */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--synergy-silver);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: var(--synergy-ivory);
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input-wrapper input:focus {
    border-color: var(--synergy-charcoal);
}

.search-input-wrapper svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--synergy-muted);
}

/* Custom Checkbox */
.filter-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start; /* Align top for multiline text */
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--synergy-charcoal);
    user-select: none;
    line-height: 1.4;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 2px; /* Position relative to first line */
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--synergy-white);
    border: 1px solid var(--synergy-silver);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.custom-checkbox:hover input ~ .checkmark {
    border-color: var(--synergy-charcoal);
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--synergy-charcoal);
    border-color: var(--synergy-charcoal);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Prezzo */
.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.price-inputs input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--synergy-silver);
    border-radius: 8px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.price-inputs span {
    color: var(--synergy-muted);
}

.btn-apply-price {
    width: 100%;
    padding: 10px;
    background: var(--synergy-ivory);
    border: 1px solid var(--synergy-silver);
    color: var(--synergy-charcoal);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-apply-price:hover {
    background: var(--synergy-charcoal);
    color: var(--synergy-white);
    border-color: var(--synergy-charcoal);
}

/* LOAD MORE & EMPTY STATE */
.catalog-load-more {
    margin-top: 40px;
}

.synergy-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--synergy-ivory);
    border-radius: 26px;
    border: 1px dashed var(--synergy-silver);
}

.synergy-empty-state h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    margin-bottom: 12px;
}

.synergy-empty-state p {
    color: var(--synergy-muted);
    margin-bottom: 24px;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 1024px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    
    .prodotti-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .catalog-sidebar {
        display: none; /* Nascosta su tablet/mobile, diventa drawer */
    }

    .btn-mobile-filter {
        display: inline-flex;
    }

    /* DRAWER MOBILE PREMIUM */
    .catalog-sidebar.drawer-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: min(86dvh, 760px);
        z-index: 9999;
        background: var(--synergy-ivory, #FAF9F6);
        border-radius: 28px 28px 0 0;
        border: none;
        padding: 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        overflow: hidden;
    }

    .sidebar-header-mobile {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 20px;
        border-bottom: 1px solid var(--synergy-platinum);
        background: var(--synergy-ivory, #FAF9F6);
    }

    .sidebar-header-mobile h3 {
        margin: 0;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
    }

    .sidebar-header-mobile button {
        background: none;
        border: none;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        color: var(--synergy-charcoal);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    .sidebar-inner {
        padding: 22px 20px 120px;
        overflow-y: auto;
        flex: 1;
        background: var(--synergy-white);
    }

    .filter-widget {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .filter-title {
        margin: 0 0 12px;
    }

    details[open] > summary.filter-title {
        margin-bottom: 12px;
    }

    .sidebar-footer-mobile {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 12px;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--synergy-platinum);
        background: var(--synergy-ivory, #FAF9F6);
        z-index: 10;
    }

    .sidebar-footer-mobile button {
        height: 52px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #mobile-reset-filters {
        border: 1px solid var(--synergy-silver);
        color: var(--synergy-charcoal);
        background: transparent;
    }

    #mobile-apply-filters {
        background: var(--synergy-charcoal);
        color: var(--synergy-white);
        border: none;
    }

    .mobile-drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-drawer-overlay.active {
        display: block;
        opacity: 1;
    }

    /* BODY LOCK AND CHAT WIDGET HIDE */
    body.filters-open {
        overflow: hidden;
    }

    body.filters-open .chat-widget,
    body.filters-open .chat-floating-button,
    body.filters-open #wa-chat-btn-root,
    body.filters-open .whatsapp-btn {
        opacity: 0 !important;
        pointer-events: none !important;
    }

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

@media (max-width: 900px) {
    /* Il catalogo ha 60px di padding iniziale, meno dell'header fisso: evita
       che la toolbar filtri venga parzialmente nascosta dall'ancora hero. */
    #catalogo {
        scroll-margin-top: 44px;
    }

    /* Nuova Toolbar Mobile Premium applicata via Grid all'HTML originale */
    .catalog-top-bar {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 16px 16px 14px 16px;
        background: var(--synergy-ivory, #FAF9F6);
        border: 1px solid var(--synergy-platinum);
        border-radius: 22px;
        margin-bottom: 32px;
        box-shadow: none;
        align-items: center;
    }

    .catalog-results-count {
        grid-column: 1;
        grid-row: 1;
        font-size: 1rem;
        margin: 0;
    }

    .catalog-actions {
        display: contents; /* Permette ai figli di diventare grid items */
    }

    .btn-mobile-filter {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        min-width: 112px;
        border-radius: 999px;
        background: var(--synergy-charcoal);
        color: var(--synergy-white);
        border: none;
        font-weight: 600;
        font-size: 15px;
        padding: 0 16px;
        margin: 0;
    }

    .btn-clear-filters {
        display: none !important;
    }

    .catalog-sort {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .catalog-sort .sort-select {
        width: 100%;
        max-width: 280px;
        height: 48px;
        border-radius: 16px;
        background-color: var(--synergy-white);
    }

    .catalog-active-filters:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .catalog-active-filters {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-top: 4px;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .catalog-active-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex: 0 0 auto !important;
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
        white-space: nowrap !important;
        border-radius: 999px;
    }
}

/* ==========================================
   EASTER EGG - EARTHQUAKE ANIMATION HARD
========================================== */
.prodotti-grid.is-earthquake .product-card,
.prodotti-grid.is-earthquake .synergy-product-card {
    animation:
        productQuakeHard 0.42s ease-in-out var(--delay) both,
        productFallOut 1.05s cubic-bezier(.55,.05,.75,.2) calc(var(--delay) + .42s) forwards,
        productReturnFromTop 1.15s cubic-bezier(.16,1,.3,1) calc(var(--delay) + 2.05s) forwards;
    will-change: transform, opacity;
    pointer-events: none;
}

@keyframes productQuakeHard {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    20% { transform: translate3d(var(--quake-x), -4px, 0) rotate(-1.5deg); }
    40% { transform: translate3d(calc(var(--quake-x) * -1), 3px, 0) rotate(1.5deg); }
    60% { transform: translate3d(var(--quake-x), 2px, 0) rotate(-1deg); }
    80% { transform: translate3d(calc(var(--quake-x) * -1), -2px, 0) rotate(1deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes productFallOut {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translate3d(var(--fall-x), var(--fall-y), 0) rotate(var(--fall-rotate)); opacity: 0; }
}

@keyframes productReturnFromTop {
    0% { transform: translate3d(var(--return-x), var(--return-y), 0) rotate(var(--return-rotate)); opacity: 0; }
    15% { opacity: 1; }
    78% { transform: translate3d(0, 8px, 0) rotate(0.5deg); opacity: 1; }
    88% { transform: translate3d(0, -5px, 0) rotate(-0.25deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
}

@media (max-width: 768px) {
    .prodotti-grid.is-earthquake .product-card,
    .prodotti-grid.is-earthquake .synergy-product-card {
        animation:
            productQuakeHard 0.35s ease-in-out var(--delay) both,
            productFallOut 0.85s cubic-bezier(.55,.05,.75,.2) calc(var(--delay) + .35s) forwards,
            productReturnFromTop 0.95s cubic-bezier(.16,1,.3,1) calc(var(--delay) + 1.75s) forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prodotti-grid.is-earthquake .product-card,
    .prodotti-grid.is-earthquake .synergy-product-card {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .prodotti-hero {
        padding: 160px 0 60px;
    }
}

@media (max-width: 640px) {
    .prodotti-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
}