/* VIBRATO ARCHIVE - HOMEPAGE CONSISTENT */

.vibrato-archive-wrapper {
    background-color: var(--background-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    padding-bottom: 100px;
}

#vibrato-filters-top {
    scroll-margin-top: 120px;
    /* Offset for sticky header */
}

.vibrato-archive-wrapper .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .vibrato-archive-wrapper .container {
        padding: 0 24px;
    }
}

@media (min-width: 1024px) {
    .vibrato-archive-wrapper .container {
        padding: 0 64px;
    }
}

/* --- HERO ---
   2026-06-11: 80px/60px padding + 64px H1 was a slab that ate ~40 %
   of viewport above the fold for one line of text. Compacted to the
   sizing we'd been using for search results (and basically what
   mobile already had). Category hero now mirrors search hero. */
.archive-hero {
    padding: 40px 0 28px;
    background: var(--surface-alt);
    border-bottom: 1px solid rgba(16, 41, 31, 0.09);
    margin-bottom: 24px;
}

.archive-hero .archive-title {
    font-size: 40px;
}

/* Empty search state — drop H1 entirely (search-empty-state carries
   the headline) so the page doesn't open with a duplicated sentence.
   Keep breadcrumb for navigation. */
.archive-hero--minimal {
    padding: 18px 0 14px;
    margin-bottom: 0;
}

.archive-hero--minimal .archive-breadcrumb {
    margin-bottom: 0;
}

.archive-breadcrumb {
    margin-bottom: 15px;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.archive-title {
    font-family: var(--font-display);
    font-size: 64px;
    font-style: normal;
    color: var(--text-main);
    line-height: 1;
    margin: 0;
}

/* Mobile: hero padding + title bylo overkill (zabíralo ~50% prvního viewportu).
   40px/28px padding + 36px title dostane subcategories nahoru. */
@media (max-width: 768px) {
    .archive-hero {
        padding: 40px 0 28px;
        margin-bottom: 24px;
    }

    .archive-breadcrumb {
        margin-bottom: 10px;
        font-size: 9.5px;
    }

    .archive-title {
        font-size: 36px;
    }

    .archive-desc {
        font-size: 13px;
        margin-top: 8px;
    }
}

.archive-desc {
    color: var(--text-muted);
    margin-top: 12px;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.6;
}

.archive-desc a {
    color: var(--primary, #2F7559);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.archive-desc a:hover {
    color: var(--primary-deep, #153629);
}

/* --- SUBCATEGORIES (text-first list-row) ---
   Horizontal row: malý čtvercový thumb vlevo (jen accent/ilustrace),
   název kategorie = main signal vpravo. Cíl: kompaktnější, víc kategorií
   nad foldem, jasná čitelnost dlouhých názvů typu
   "Příslušenství ke kancelářskému nábytku". */
.subcat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin-bottom: 40px;
}

.subcat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    min-height: 64px;
    background: var(--surface-elevated);
    border: 1px solid rgba(16, 41, 31, 0.09);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.subcat-card:hover {
    border-color: rgba(16, 41, 31, 0.24);
    background: rgba(16, 41, 31, 0.04);
    transform: translateX(2px);
}

.subcat-thumb {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    background-color: rgba(16, 41, 31, 0.04);
    background-size: cover;
    background-position: center;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    overflow: hidden;
}

.subcat-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcat-card:hover .subcat-thumb {
    opacity: 1;
}

/* No-image: thumb je soft brand-tinted square */
.subcat-card.no-img .subcat-thumb {
    background: linear-gradient(135deg, rgba(45, 108, 69, 0.18), rgba(45, 108, 69, 0.05));
    opacity: 1;
}

.subcat-name {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
    /* Dlouhé názvy přes 2 řádky max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: stejný pattern, jen tighter padding a 1-2 col grid auto */
@media (max-width: 768px) {
    .subcat-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 6px;
        margin-bottom: 20px;
    }

    .subcat-card {
        padding: 8px 12px;
        min-height: 56px;
        gap: 10px;
    }

    .subcat-thumb {
        width: 40px;
        height: 40px;
    }

    .subcat-name {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .subcat-grid {
        grid-template-columns: 1fr;
    }
}

/* --- MAIN LAYOUT --- */
@media (min-width: 1024px) {
    .archive-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 60px;
        align-items: flex-start;
    }

    .archive-sidebar {
        position: sticky;
        top: 160px;
        align-self: start;
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        padding-right: 5px;
        scrollbar-width: auto;
        /* Ensure it's not too thin on Firefox */
        scrollbar-color: var(--text-soft) rgba(16, 41, 31, 0.09);
    }

    /* Chrome/Safari/Edge Scrollbar Styling */
    .archive-sidebar::-webkit-scrollbar {
        width: 8px;
        /* Wider for better visibility */
    }

    .archive-sidebar::-webkit-scrollbar-track {
        background: rgba(16, 41, 31, 0.04);
        border-radius: 4px;
    }

    .archive-sidebar::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        /* Subtle default state */
        border-radius: 4px;
        border: 2px solid var(--surface-alt);
        /* Padding effect */
    }

    .archive-sidebar::-webkit-scrollbar-thumb:hover {
        background: var(--text-soft);
        /* Highlight on interaction */
    }

    /* Filter Actions (Apply/Reset) */
    .filter-actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
        position: sticky;
        bottom: 0;
        background: var(--surface-alt);
        padding: 16px 0 4px;
        z-index: 10;
        border-top: 1px solid rgba(16, 41, 31, 0.09);
    }

    .filter-apply {
        background: var(--accent-gradient);
        color: var(--text-inverse);
        border: none;
        border-radius: 4px;
        padding: 14px 20px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .filter-apply:hover {
        background: var(--accent-gradient-hover);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 41, 31, 0.3);
    }

    .filter-apply:active {
        transform: translateY(0);
    }

    .filter-reset {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(16, 41, 31, 0.45);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        letter-spacing: 0.05em;
        transition: color 0.2s ease;
    }

    .filter-reset:hover {
        color: var(--text-main);
    }
}

/* USP strip nad toolbarem — thin pill style, žádný card border.
   Desktop: 4 inline items, vystředěné, žádný scroll.
   Mobile: 2x2 grid se všemi 4 USPs (vyvážený layout, žádný hidden content).
   Cíl: trust signál nad produkty, vždy viditelný. */
.archive-usps {
    list-style: none;
    margin: 0 0 8px;
    padding: 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 32px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #5a5a5a);
    line-height: 1.2;
    border-bottom: 1px solid rgba(16, 41, 31, 0.06);
}

.archive-usps li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

.archive-usps .material-symbols-outlined {
    font-size: 16px;
    color: var(--brand-primary, #2d6c45);
    line-height: 1;
    flex: 0 0 auto;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

@media (max-width: 768px) {
    .archive-usps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        padding: 12px 0;
        font-size: 11.5px;
    }

    .archive-usps li {
        white-space: normal;
        justify-content: flex-start;
    }

    .archive-usps .material-symbols-outlined {
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .archive-usps {
        font-size: 11px;
        gap: 8px 10px;
    }
}

/* 2-col mobile tooltip — bubble defaultně 260px wide, ale karta je jen
   ~165px. Shrink bubble na šířku karty + center na trigger. Některý
   overlap do gap mezi cards akceptujeme (popup nature), ale ne celé
   neighbor card přebití. */
@media (max-width: 1023px) {
    .archive-products-grid .feat-tooltip-bubble {
        width: 175px;
        font-size: 11px;
        padding: 8px 10px;
        line-height: 1.35;
    }

    /* Per-column kotvení: vycentrovaný bubble na ikoně u kraje karty přečuhával
       za viewport (i skrytý → visibility:hidden pořád zabírá místo → trvalý
       horizontální scroll). Levý sloupec (odd) otevíráme doprava, pravý (even)
       doleva — vždy dovnitř stránky, takže nikdy nepřeteče viewport. */
    .archive-products-grid > .p-card:nth-child(odd) .feat-tooltip-bubble {
        --tooltip-left: 0;
        --tooltip-right: auto;
        --tooltip-tx: 0;
        --tooltip-arrow-left: 10px;
        --tooltip-arrow-tx: -50%;
    }
    .archive-products-grid > .p-card:nth-child(even) .feat-tooltip-bubble {
        --tooltip-left: auto;
        --tooltip-right: 0;
        --tooltip-tx: 0;
        --tooltip-arrow-left: calc(100% - 10px);
        --tooltip-arrow-tx: -50%;
    }
}

/* --- PRODUCT GRID --- */
.archive-products-grid {
    display: grid;
    /* Mobile 2-col baseline (Alza/Mall/Zalando CZ pattern) — comparison
       shopping density nad single-col single-product feel. */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 16px 0;
    list-style: none;
    margin: 0;
}

@media (min-width: 768px) {
    .archive-products-grid {
        gap: 16px;
        padding: 24px 0;
    }
}

@media (min-width: 1024px) {
    .archive-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding: 40px 0;
    }
}

/* Force override Woo default widths/floats - increased specificity */
.vibrato-archive-wrapper .archive-products-grid .product,
.woocommerce .vibrato-archive-wrapper ul.products li.product,
.woocommerce-page .vibrato-archive-wrapper ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
}

/* Remove any potential pseudo elements on list items and the container itself that breaks layout */
.archive-products-grid::before,
.archive-products-grid::after,
.archive-products-grid .product::before,
.archive-products-grid .product::after {
    content: none !important;
    display: none !important;
}

/* --- PRODUCT CARD ---
   Padding 0 v base `.p-card` (style.css). Image clipping rohů je na
   `.p-img-box` self, ne na kartě — tooltip u `.p-price del` "i" ikony
   musí escape ven (overflow: visible). */
.vibrato-archive-wrapper .p-card,
.woocommerce .vibrato-archive-wrapper ul.products li.product.p-card,
.woocommerce-page .vibrato-archive-wrapper ul.products li.product.p-card {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(16, 41, 31, 0.03) !important;
    border: 1px solid rgba(16, 41, 31, 0.09) !important;
    border-radius: 4px !important;
    overflow: visible !important;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}



.vibrato-archive-wrapper .p-card:hover {
    background: rgba(16, 41, 31, 0.06);
    border-color: rgba(16, 41, 31, 0.24);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.vibrato-archive-wrapper .p-img-box {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: var(--surface-elevated);
}

.vibrato-archive-wrapper .p-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.7s;
}

.vibrato-archive-wrapper .p-card:hover .p-img-box img {
    transform: scale(1.05);
}

.vibrato-archive-wrapper .p-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vibrato-archive-wrapper .p-badge.sale {
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase;
}

.vibrato-archive-wrapper .p-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.vibrato-archive-wrapper .p-card:hover .p-overlay {
    opacity: 1;
}

.vibrato-archive-wrapper .p-zoom-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(16, 41, 31, 0.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.vibrato-archive-wrapper .p-zoom-btn .material-symbols-outlined {
    color: #fff;
}

.vibrato-archive-wrapper .p-title-wrapper {
    height: 64px;
    overflow: hidden;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.vibrato-archive-wrapper .p-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    font-family: var(--font-body);
}

.vibrato-archive-wrapper .p-title a {
    color: var(--text-main);
    text-decoration: none;
}

.vibrato-archive-wrapper .p-variants-slot {
    min-height: 16px;
    margin-bottom: 10px;
    overflow: hidden;
}

.vibrato-archive-wrapper .p-variant-note {
    display: inline-block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-muted); /* a11y kontrast: --text-soft padal na off-white kartě (4.4:1) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vibrato-archive-wrapper .p-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 12px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
}

.vibrato-archive-wrapper .p-price ins {
    text-decoration: none;
    color: var(--text-main);
}

.vibrato-archive-wrapper .p-price del {
    font-size: 12px;
    color: var(--text-muted); /* a11y kontrast: přeškrtnutá MOC byla --text-soft (pod 4.5:1) */
    margin-left: 6px;
    font-weight: 500;
    position: relative;
    padding-right: 18px;
    cursor: help;
}

.vibrato-archive-wrapper .p-price del::after {
    content: "i";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    background: var(--surface-elevated);
}


.vibrato-archive-wrapper .p-footer {
    display: flex;
    gap: 10px;
}

.vibrato-archive-wrapper .qty-box {
    display: flex;
    background: var(--surface-strong);
    border: 1px solid var(--border-color);
    border-radius: 2px;
}

.vibrato-archive-wrapper .qty-btn {
    width: 30px;
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
}

.vibrato-archive-wrapper .qty-input {
    width: 30px;
    background: none;
    border: none;
    color: var(--text-main);
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
}

.vibrato-archive-wrapper .qty-input::-webkit-outer-spin-button,
.vibrato-archive-wrapper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.vibrato-archive-wrapper .btn-buy-card {
    flex: 1;
    background: var(--accent-gradient);
    color: var(--text-inverse);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 2px;
    transition: 0.3s;
    height: 44px;
    padding: 0 16px;
}


.vibrato-archive-wrapper .btn-buy-card:hover {
    background: var(--emerald-dark);
    box-shadow: var(--shadow-emerald-sm);
}

/* ---- Mobile 2-col product card tweaks ----
   Edge-to-edge image pattern (base v style.css). Mobile zmenšuje
   horizontal padding text rows z 14px → 10px, drop hover overlay,
   word-break safety na title pro defensive overflow prevention. */
@media (max-width: 768px) {
    /* Tighter horizontal padding na text rows (vs desktop 14px) */
    .p-card > .p-title-wrapper,
    .p-card > .p-variants-slot,
    .p-card > .p-price,
    .p-card > .p-meta,
    .p-card > .p-footer {
        padding-left: 10px;
        padding-right: 10px;
    }

    .p-card > .p-title-wrapper {
        padding-top: 10px;
    }

    .p-card > .p-footer {
        padding-bottom: 10px;
    }

    /* Flex children min-width: 0 → povolí shrink místo overflow */
    .vibrato-archive-wrapper .p-card * {
        min-width: 0;
    }

    .vibrato-archive-wrapper .p-title {
        word-break: break-word;
        font-size: 13px;
        line-height: 1.3;
    }

    .vibrato-archive-wrapper .p-title-wrapper {
        /* 3 řádky × 13px × 1.3 = ~50.7px. Buffer 7px ať line-clamp stihne
           dorenderovat ellipsis "..." místo brutálně oseknutého textu. */
        height: 58px;
        margin-bottom: 8px;
    }

    .vibrato-archive-wrapper .p-price {
        flex-wrap: wrap;
        row-gap: 2px;
        font-size: 17px;
        margin-bottom: 8px;
        min-height: 24px;
    }

    .vibrato-archive-wrapper .p-price del {
        font-size: 11px;
    }

    .vibrato-archive-wrapper .p-footer {
        gap: 6px;
    }

    /* Hide qty controls — qty=1 default, plný buy button má víc tap area */
    .vibrato-archive-wrapper .qty-box {
        display: none;
    }

    /* "DETAIL" button — text + icon visible, kompaktní fonty pro 2-col tile. */
    .vibrato-archive-wrapper .btn-buy-card {
        font-size: 10.5px;
        padding: 0 10px;
        height: 40px;
        gap: 6px;
        letter-spacing: 0.04em;
    }

    .vibrato-archive-wrapper .btn-buy-card .material-symbols-outlined {
        font-size: 15px;
    }

    /* Hover overlay ZOOM icon — too cramped na 2-col tile, hide */
    .vibrato-archive-wrapper .p-overlay {
        display: none;
    }

    /* Meta stack (stock + freeship) — povolit wrap pokud potřeba */
    .p-meta {
        gap: 6px 8px;
        margin-bottom: 8px;
    }

    .p-freeship {
        font-size: 9.5px;
        padding: 3px 6px;
    }

    .p-freeship .material-symbols-outlined {
        font-size: 12px;
    }
}

/* --- CUSTOM FILTRATION SIDEBAR --- */
.archive-sidebar .widget {
    margin-bottom: 40px;
}

.archive-sidebar .widget-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-style: normal;
    color: var(--text-main);
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Woo widgets styling */
.archive-sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-sidebar .widget a {
    color: var(--text-muted);
    font-size: 14px;
    transition: 0.3s;
    text-decoration: none;
}

.archive-sidebar .widget a:hover {
    color: var(--text-main);
}

.archive-sidebar .widget_layered_nav li,
.archive-sidebar .widget_layered_nav_filters li,
.archive-sidebar .widget_product_categories li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.archive-sidebar .widget_layered_nav li a,
.archive-sidebar .widget_product_categories li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.archive-sidebar .widget_layered_nav li a::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-color);
    background: var(--surface-strong);
    border-radius: 2px;
    display: inline-block;
}

.archive-sidebar .widget_layered_nav li.chosen a,
.archive-sidebar .widget_layered_nav_filters li a {
    color: var(--text-main);
    font-weight: 700;
}

.archive-sidebar .widget_layered_nav li.chosen a::before {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(16, 41, 31, 0.45);
}

.archive-sidebar .widget_layered_nav_filters li a::before {
    content: 'close';
    font-family: 'Material Symbols Outlined';
    font-size: 14px;
    color: var(--text-main);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.archive-sidebar .widget_layered_nav_filters ul {
    gap: 8px;
}

.archive-sidebar .widget_layered_nav_filters li {
    justify-content: flex-start;
}

/* Woo price filter (jQuery UI or noUi fallback) */
.archive-sidebar .widget_price_filter .price_slider {
    margin: 20px 10px 30px;
}

.archive-sidebar .widget_price_filter .price_slider_wrapper {
    padding: 0;
}

.archive-sidebar .widget_price_filter .price_slider_amount {
    display: flex;
    align-items: center;
    gap: 10px;
}

.archive-sidebar .widget_price_filter .price_slider_amount .button {
    background: var(--emerald-luxury);
    color: var(--text-main);
    border: none;
    height: 40px;
    padding: 0 16px;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.archive-sidebar .widget_price_filter .price_label {
    color: var(--text-muted);
    font-size: 12px;
}

.archive-sidebar .widget_price_filter input {
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.archive-sidebar .ui-slider,
.archive-sidebar .noUi-target {
    background: var(--surface-strong);
    border: none;
    box-shadow: none;
    height: 4px;
}

.archive-sidebar .ui-slider-range,
.archive-sidebar .noUi-connect {
    background: var(--primary);
    box-shadow: 0 0 10px rgba(16, 41, 31, 0.38);
}

.archive-sidebar .ui-slider-handle,
.archive-sidebar .noUi-handle {
    border: none;
    background: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(16, 41, 31, 0.45);
    cursor: pointer;
    top: -6px;
}

/* Legacy Woo Filters (if still used) */
.archive-sidebar .widget_layered_nav_filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 41, 31, 0.17);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    border-radius: 3px;
    background: rgba(16, 41, 31, 0.09);
}

/* Custom filters */
.vibrato-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.filter-block {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 18px;
}

.filter-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: normal;
    color: var(--text-main);
    margin-bottom: 14px;
}

/* Filtry defaultně sbalené (accordion) — při mnoha filtrech přehlednější. */
button.filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    gap: 10px;
}
.filter-chevron {
    font-size: 24px;
    color: var(--text-muted, #888);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.filter-block:not(.is-collapsed) .filter-chevron {
    transform: rotate(180deg);
}
.filter-block.is-collapsed .filter-title {
    margin-bottom: 0;
}
.filter-block.is-collapsed .filter-options {
    display: none;
}

.filter-price {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.filter-price input {
    background: rgba(16, 41, 31, 0.06);
    border: 1px solid rgba(16, 41, 31, 0.17);
    color: var(--text-main);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
    transition: all 0.3s ease;
    outline: none;
}

.filter-price input:focus {
    border-color: rgba(16, 41, 31, 0.45);
    background: rgba(16, 41, 31, 0.11);
    box-shadow: 0 0 15px rgba(16, 41, 31, 0.09);
}

/* Hide number input arrows */
.filter-price input::-webkit-outer-spin-button,
.filter-price input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.filter-price input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.price-sep {
    color: var(--text-muted);
    font-size: 12px;
}

/* Auto-apply loading overlay — během full reload po debounced submit
   uživatel viděl prázdný grid několik 100ms a vypadalo to broken. Overlay
   s spinnerem na .archive-main signalizuje "probíhá filtrování". */
.archive-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(246, 251, 247, 0.78);
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: vibratoLoadingFadeIn 0.15s ease-out;
}

.archive-main {
    position: relative;
}

.archive-loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(45, 108, 69, 0.2);
    border-top-color: var(--brand-primary, #2d6c45);
    animation: vibratoLoadingSpin 0.8s linear infinite;
}

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

@keyframes vibratoLoadingSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .archive-loading-spinner {
        animation-duration: 2s;
    }
}

/* Desktop: hide sticky bottom "Filtrovat / Zrušit filtry" v sidebaru —
   auto-apply je dělá redundantními. Sidebar je trvale visible (sticky),
   user nepotřebuje explicit "Apply" button. */
@media (min-width: 1024px) {
    .filter-actions {
        display: none !important;
    }
}

.price-range {
    position: relative;
    height: 48px;
    /* Increased touch area */
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.price-range-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(16, 41, 31, 0.28);
    /* More visible */
    border-radius: 2px;
    z-index: 1;
}

#price-range-highlight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #fff;
    /* Neutral white active range */
    z-index: 2;
    border-radius: 2px;
    pointer-events: none;
    /* Let clicks pass through to inputs */
}

.price-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none;
    background: transparent;
    z-index: 3;
    margin: 0;
    padding: 0;
    height: 100%;
    /* Fix visibility */
    margin: 0;
    padding: 0;
}

.price-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    /* Neutral white thumb */
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-top: -8px;
    /* Center partially */
}

.price-range input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.price-range input[type="range"]::-webkit-slider-runnable-track {
    height: 0;
    background: transparent;
}

.price-range input[type="range"]::-moz-range-track {
    height: 0;
    background: transparent;
}

.price-values {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-block-async.is-loading .filter-options {
    opacity: 0.72;
}

.filter-load-error {
    font-size: 12px;
    color: #9f3a3a;
}

/* Skeleton loader rows — gray shimmering bars místo "Načítám…" textu.
   Reduce perceived loading time. Variable widths per nth-child = víc
   natural feeling než identical rows. */
.filter-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 0;
}

.filter-skeleton-row {
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(16, 41, 31, 0.05) 0%,
        rgba(16, 41, 31, 0.10) 50%,
        rgba(16, 41, 31, 0.05) 100%);
    background-size: 200% 100%;
    animation: vibratoFilterSkeleton 1.4s ease-in-out infinite;
}

.filter-skeleton-row:nth-child(1) { width: 90%; }
.filter-skeleton-row:nth-child(2) { width: 70%; }
.filter-skeleton-row:nth-child(3) { width: 85%; }
.filter-skeleton-row:nth-child(4) { width: 60%; }

@keyframes vibratoFilterSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .filter-skeleton-row {
        animation: none;
    }
}

.filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.filter-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(16, 41, 31, 0.17);
    border-radius: 3px;
    background: rgba(16, 41, 31, 0.06);
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.filter-option input:hover {
    border-color: rgba(16, 41, 31, 0.35);
}

.filter-option input:checked {
    background: var(--primary, #990000);
    border-color: var(--primary, #990000);
    box-shadow: 0 0 10px rgba(16, 41, 31, 0.30);
}

.filter-option input:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-option .filter-label {
    color: var(--text-main);
}

.filter-option:hover .filter-label {
    color: var(--primary);
}

.filter-label {
    flex: 1;
    color: var(--text-main);
}

.filter-count {
    color: var(--text-muted);
    font-size: 11px;
}

/* Kompaktní filtr (shop.attributes.*.compact, doba doručení): hodnoty jako
   řada tlačítek, zaškrtávátko schované, vybraná hodnota zvýrazněná. */
.filter-block-pills .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-block-pills .filter-option {
    position: relative;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    line-height: 1.2;
}

.filter-block-pills .filter-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.filter-block-pills .filter-label {
    flex: 0 1 auto;
}

.filter-block-pills .filter-option:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.filter-block-pills .filter-option:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.filter-block-pills .filter-skeleton-row:nth-child(n+2) {
    display: none;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-apply {
    background: var(--primary);
    color: var(--text-inverse);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 2px;
    padding: 12px 16px;
    cursor: pointer;
    transition: 0.3s;
}

.filter-apply:hover {
    background: #b31212;
    box-shadow: 0 0 18px rgba(16, 41, 31, 0.38);
}

.filter-reset {
    color: var(--text-muted);
    text-align: center;
    text-decoration: underline;
    font-size: 12px;
}

/* --- PAGINATION --- */
.vibrato-pagination {
    margin-top: 0;
    padding-top: 30px;
    padding-bottom: 48px;
    border-top: 1px solid rgba(16, 41, 31, 0.09);
    text-align: center;
}

@media (max-width: 600px) {
    .vibrato-pagination {
        padding-top: 24px;
        padding-bottom: 32px;
    }
}

/* Override WooCommerce defaults strictly */
.vibrato-pagination .woocommerce-pagination,
.vibrato-pagination ul.page-numbers {
    border: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    gap: 20px;
    list-style: none !important;
}

.vibrato-pagination ul.page-numbers li {
    float: none !important;
    border: none !important;
    margin: 0 !important;
    overflow: visible !important;
}

.vibrato-pagination ul.page-numbers li a,
.vibrato-pagination ul.page-numbers li span {
    background: transparent !important;
    border: none !important;
    color: var(--text-soft) !important;
    font-family: var(--font-body);
    font-size: 20px !important;
    font-weight: 800 !important;
    padding: 0 !important;
    min-width: auto !important;
    display: block !important;
    line-height: 1.5 !important;
    transition: 0.3s;
}

.vibrato-pagination ul.page-numbers li span.current {
    color: var(--text-main) !important;
    background: transparent !important;
    position: relative;
}

.vibrato-pagination ul.page-numbers li span.current::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(16, 41, 31, 0.45);
}

.vibrato-pagination ul.page-numbers li a:hover {
    color: var(--text-main) !important;
    background: transparent !important;
    transform: translateY(-2px);
}

/* Toolbar (result count + sorting) */
.archive-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(16, 41, 31, 0.09);
}

.archive-toolbar .result-count {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.filter-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 12px;
    border-radius: 2px;
    cursor: pointer;
}

/* Active filter chips — pill row nad gridem. Per-value chip s × pro
   one-click remove. Vizuální feedback "co je aktivní" bez nutnosti
   otevírat sidebar (off-canvas na mobilu). */
.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 0 4px;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 4px 5px 12px;
    background: rgba(45, 108, 69, 0.08);
    border: 1px solid rgba(45, 108, 69, 0.20);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.active-filter-chip:hover {
    background: rgba(45, 108, 69, 0.16);
    border-color: rgba(45, 108, 69, 0.40);
}

.active-filter-chip .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    color: var(--text-main);
    transition: background 0.15s ease;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.active-filter-chip:hover .material-symbols-outlined {
    background: rgba(0, 0, 0, 0.16);
}

.active-filter-chip-clear {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 4px;
    transition: color 0.15s ease;
}

.active-filter-chip-clear:hover {
    color: var(--text-main);
}

@media (max-width: 768px) {
    .active-filter-chips {
        padding: 10px 0 2px;
        gap: 5px 6px;
    }

    .active-filter-chip {
        font-size: 11.5px;
        padding: 4px 4px 4px 10px;
    }
}

/* Active filter count badge — brand-tinted pill v button/link textu.
   Funguje v `.filter-toggle` (mobile button), `.filter-reset-inline`
   (desktop toolbar link) — vertical-align: middle drží pill v řádce. */
.filter-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-right: 4px;
    background: var(--brand-primary, #2d6c45);
    color: #fff;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
}

.archive-toolbar .v-sorting select {
    background-color: var(--surface-elevated);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 8px 32px 8px 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    /* Chevron down jako inline SVG — guarantee chevron je vidět i na mobile
       full-width selectu kde defaultní native arrow visually mizí na pozadí. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310291F'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
}

.archive-toolbar .v-sorting select:focus {
    outline: none;
    border-color: rgba(16, 41, 31, 0.32);
}

/* Empty state */
.archive-empty {
    padding: 40px 0;
    color: var(--text-muted);
}

.archive-empty-title {
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--text-main);
    font-weight: 600;
}

.archive-empty-reset {
    color: var(--brand-primary, #2d6c45);
    text-decoration: underline;
    font-weight: 500;
}

.archive-empty-reset:hover {
    color: var(--text-main);
}

.archive-empty-suggestions {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(16, 41, 31, 0.09);
}

.archive-empty-suggestions-title {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 20px;
    color: var(--text-main);
    font-weight: normal;
}

/* Dedicated search empty state — full-width recovery panel that
   replaces sidebar+grid when /?s=… returns zero results. */
.search-empty-state {
    max-width: 920px;
    margin: 32px auto 56px;
    padding: 40px 24px;
    text-align: center;
}

.search-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(45, 108, 69, 0.08);
    color: var(--brand-primary, #2d6c45);
}

.search-empty-icon .material-symbols-outlined {
    font-size: 32px;
}

.search-empty-headline {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 32px);
    margin: 0 0 12px;
    color: var(--text-main);
    font-weight: normal;
    line-height: 1.2;
}

.search-empty-hint {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 auto 36px;
    max-width: 520px;
    line-height: 1.5;
}

.search-empty-didyoumean {
    font-size: 16px;
    color: var(--text-main);
    margin: 12px 0 24px;
}

.search-empty-didyoumean a {
    color: var(--brand-primary, #2d6c45);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.search-empty-didyoumean a:hover {
    color: var(--text-main);
}

.search-empty-subhead {
    font-family: var(--font-display);
    font-size: 18px;
    margin: 0 0 20px;
    color: var(--text-main);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-empty-cats {
    margin-top: 0;
}

@media (max-width: 640px) {
    .search-empty-state {
        padding: 24px 16px 40px;
    }
}

/* Prázdné hledání, ke kterému máme co nabídnout: hláška je jen úzký pruh,
   aby související produkty byly vidět bez rolování. */
.search-empty-state--compact {
    margin: 8px auto 0;
    padding: 12px 24px 4px;
}
.search-empty-state--compact .search-empty-icon {
    display: none;
}
.search-empty-state--compact .search-empty-headline {
    font-size: 22px;
    margin-bottom: 6px;
}
.search-empty-state--compact + .search-related {
    margin-top: 16px;
}
.search-empty-state--browse {
    margin-top: 24px;
    padding-top: 8px;
}
.search-corrected-note {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--text-muted);
}

/* Mobile filters off-canvas */
.archive-filters-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s;
    z-index: 9998;
}

@media (max-width: 1024px) {
    .archive-layout {
        grid-template-columns: 1fr;
    }

    .archive-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 100vw;
        background: var(--surface-alt);
        padding: 0 24px 24px;
        /* Removed top padding to allow sticky header to touch top */
        transform: translateX(-100%);
        pointer-events: none;
        transition: transform 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        position: sticky;
        top: 0;
        background: var(--surface-alt);
        padding: 24px 0 15px;
        /* Added internal padding instead of sidebar padding */
        z-index: 10;
        border-bottom: 1px solid rgba(16, 41, 31, 0.09);
        display: flex !important;
        /* Force visibility */
    }

    .sidebar-mobile-title {
        font-family: var(--font-display);
        font-size: 24px;
        font-style: normal;
        color: var(--text-main);
    }

    .filter-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(16, 41, 31, 0.09);
        border: 1px solid rgba(16, 41, 31, 0.17);
        color: var(--text-main);
        font-size: 20px;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex !important;
        /* Force visibility */
    }

    .filter-close:active {
        transform: scale(0.9);
        background: rgba(16, 41, 31, 0.17);
    }

    .filter-toggle-wrapper {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .filter-reset-inline {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: rgba(16, 41, 31, 0.45);
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color 0.2s ease;
    }

    .filter-reset-inline:hover {
        color: var(--text-main);
    }

    .filter-toggle {
        display: inline-flex;
    }

    .filter-actions {
        position: sticky;
        bottom: -24px;
        /* compensate sidebar padding */
        margin-top: 30px;
        margin-left: -24px;
        margin-right: -24px;
        padding: 20px 24px;
        background: var(--surface-alt);
        z-index: 10;
        border-top: 1px solid rgba(16, 41, 31, 0.09);
        box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.5);
    }

    body.filters-open .archive-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    body.filters-open .archive-filters-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.filters-open {
        overflow: hidden;
    }
}

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

@media (max-width: 600px) {
    .vibrato-pagination ul.page-numbers {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .vibrato-pagination ul.page-numbers li a,
    .vibrato-pagination ul.page-numbers li span {
        font-size: 16px;
    }

    .archive-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .archive-toolbar .v-sorting {
        flex: 1 1 100%;
        order: 1;
    }

    .archive-toolbar .result-count {
        flex: 1 1 100%;
        order: 2;
    }

    .archive-toolbar .v-sorting .orderby,
    .archive-toolbar .v-sorting select {
        width: 100%;
        max-width: 100%;
    }
}

/* Woo product grid + cards */

/* Cleaned up redundant styles that were breaking the grid */

/* --- Prázdný výsledek hledání: bez sidebaru/toolbaru → obsah přes celou
   šířku, skrýt USP lištu i počet/řazení (řešeno v Blade @unless). --- */
.vibrato-archive-wrapper .archive-layout--search-empty {
    display: block;
}
.archive-layout--search-empty .archive-usps {
    display: none;
}

/* --- HLEDÁNÍ: související produkty pod přesnými shodami --- */
.search-related {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(16, 41, 31, 0.09);
    text-align: left;
}

.search-related-title {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text-main);
    font-weight: normal;
}

.search-related-note {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.search-related-grid {
    padding-top: 20px;
}