/*
 * Category / search grid: density switcher (3/4/6 desktop, 1/2/3 mobile).
 * Loaded by catalog_category_view.xml and catalogsearch_result_index.xml.
 */
:is(.catalog-category-view, .catalogsearch-result-index) {
    --grid-gap: 1rem;
    --grid-row-gap: 1rem;
    --catalog-grid-cols-mobile: 2;
    --catalog-grid-cols-desktop: 4;
}

:is(.catalog-category-view, .catalogsearch-result-index) {
    #product-list [data-drubunet-product-list],
    #product-list .catalog-product-grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(var(--catalog-grid-cols-mobile, 2), minmax(0, 1fr));
        gap: var(--grid-row-gap, var(--grid-gap)) var(--grid-gap);
        align-items: start;
    }

    #product-list [data-drubunet-product-list] > li {
        align-items: stretch;
        min-width: 0;
    }

    #product-list .product-item {
        width: 100% !important;
        max-width: none !important;
    }

    #product-list .product-item-photo,
    #product-list .product-image-container,
    #product-list .product-item-photo img {
        width: 100% !important;
        max-width: none !important;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    :is(.catalog-category-view, .catalogsearch-result-index) #product-list [data-drubunet-product-list],
    :is(.catalog-category-view, .catalogsearch-result-index) #product-list .catalog-product-grid {
        grid-template-columns: repeat(var(--catalog-grid-cols-desktop, 4), minmax(0, 1fr));
    }
}

html.catalog-grid-view-large body,
body.catalog-grid-view-large,
#product-list.catalog-grid-view-large {
    --catalog-grid-cols-mobile: 1;
    --catalog-grid-cols-desktop: 3;
}

html.catalog-grid-view-standard body,
body.catalog-grid-view-standard,
#product-list.catalog-grid-view-standard {
    --catalog-grid-cols-mobile: 2;
    --catalog-grid-cols-desktop: 4;
}

html.catalog-grid-view-mosaic body,
body.catalog-grid-view-mosaic,
#product-list.catalog-grid-view-mosaic {
    --catalog-grid-cols-mobile: 3;
    --catalog-grid-cols-desktop: 6;
    --grid-row-gap: var(--grid-gap);
}

html.catalog-grid-view-large #product-list [data-drubunet-product-list],
body.catalog-grid-view-large #product-list [data-drubunet-product-list],
#product-list.catalog-grid-view-large [data-drubunet-product-list] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

html.catalog-grid-view-standard #product-list [data-drubunet-product-list],
body.catalog-grid-view-standard #product-list [data-drubunet-product-list],
#product-list.catalog-grid-view-standard [data-drubunet-product-list] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.catalog-grid-view-mosaic #product-list [data-drubunet-product-list],
body.catalog-grid-view-mosaic #product-list [data-drubunet-product-list],
#product-list.catalog-grid-view-mosaic [data-drubunet-product-list] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (min-width: 1024px) {
    html.catalog-grid-view-large #product-list [data-drubunet-product-list],
    body.catalog-grid-view-large #product-list [data-drubunet-product-list],
    #product-list.catalog-grid-view-large [data-drubunet-product-list] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html.catalog-grid-view-standard #product-list [data-drubunet-product-list],
    body.catalog-grid-view-standard #product-list [data-drubunet-product-list],
    #product-list.catalog-grid-view-standard [data-drubunet-product-list] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html.catalog-grid-view-mosaic #product-list [data-drubunet-product-list],
    body.catalog-grid-view-mosaic #product-list [data-drubunet-product-list],
    #product-list.catalog-grid-view-mosaic [data-drubunet-product-list] {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

:is(.catalog-category-view, .catalogsearch-result-index) {
    .gdr-catalog-title-bar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .gdr-catalog-page-title {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }

    .gdr-catalog-toolbar-actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 1rem;
        margin-left: auto;
    }

    .catalog-grid-switcher {
        display: inline-flex;
        align-items: center;
        gap: 0.3125rem;
    }

    .catalog-grid-switcher__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.625rem;
        height: 1.625rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111;
        cursor: pointer;
        opacity: 0.35;
        transition: opacity 0.15s ease;
        flex: 0 0 1.625rem;
    }

    .catalog-grid-switcher__button:hover,
    .catalog-grid-switcher__button:focus-visible,
    .catalog-grid-switcher__button.is-active {
        opacity: 1;
        outline: none;
    }

    .catalog-grid-switcher__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        line-height: 0;
    }

    .catalog-grid-switcher__icon-svg {
        display: none;
        width: 18px;
        height: 18px;
        line-height: 0;
    }

    .catalog-grid-switcher__svg {
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .catalog-grid-switcher__icon-svg--mobile {
        display: inline-flex;
    }

    @media (min-width: 1024px) {
        .catalog-grid-switcher__icon-svg--mobile {
            display: none;
        }

        .catalog-grid-switcher__icon-svg--desktop {
            display: inline-flex;
        }
    }

    .catalog-grid-switcher__label {
        font-size: 12px;
        line-height: 1;
        text-transform: uppercase;
    }

    #product-list > .toolbar-products:not(:has(.pages)):not(:has([data-drubunet-grid-switcher])) {
        display: none;
    }
}

html.catalog-grid-view-mosaic #product-list .product-item .product-info,
body.catalog-grid-view-mosaic #product-list .product-item .product-info,
#product-list.catalog-grid-view-mosaic .product-item .product-info {
    display: none !important;
}

html.catalog-grid-view-mosaic #product-list .product-item .product-item-photo,
body.catalog-grid-view-mosaic #product-list .product-item .product-item-photo,
#product-list.catalog-grid-view-mosaic .product-item .product-item-photo {
    margin-bottom: 0 !important;
}

/* DrubuNet InfinitScroll (previous + next) */
.drubunet-infinite-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 0 24px;
}

.drubunet-infinite-scroll--previous {
    padding: 8px 0 0;
}

.drubunet-infinite-scroll__button {
    min-width: 180px;
    padding: 12px 28px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s ease, background .2s ease, color .2s ease;
}

.drubunet-infinite-scroll__button:hover {
    background: #fff;
    color: #111;
}

.drubunet-infinite-scroll__button[disabled] {
    opacity: .6;
    cursor: wait;
}

.drubunet-infinite-scroll__button--secondary {
    background: #fff;
    color: #111;
}

.drubunet-infinite-scroll__button--secondary:hover {
    background: #111;
    color: #fff;
}

.drubunet-infinite-scroll__loading {
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
}

.drubunet-infinite-scroll__sentinel {
    width: 100%;
    height: 1px;
}

/* PSI (precio sin impuestos) — flat class + overrides until next Tailwind build */
.price-psi,
.product-item .price-container .price-excluding-tax .price,
#elasticsuite-search-container .price-box .price-excluding-tax span,
#html-body.catalog-product-view .related-product-slider .product-info .price-excluding-tax span {
    font-size: 8px;
    line-height: 1.35;
    font-weight: 400;
    color: #a5a5a5;
}

@media (min-width: 768px) {
    .price-psi,
    .product-item .price-container .price-excluding-tax .price,
    #elasticsuite-search-container .price-box .price-excluding-tax span,
    #html-body.catalog-product-view .related-product-slider .product-info .price-excluding-tax span {
        font-size: 10px;
    }
}
