.donde-comprar-wrap {
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    display: block;
}

.donde-comprar-wrap.bg-pattern {
    background-color: #f8fafc;
    background-image: radial-gradient(rgba(251, 112, 27, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.donde-comprar-wrap ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.donde-comprar-wrap ::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.donde-comprar-wrap ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

.donde-comprar-wrap ::-webkit-scrollbar-thumb:hover {
    background: #fb701b;
}

.donde-comprar-wrap .dc-filter-btn.dc-active-filter {
    border-color: #fb701b !important;
    background-color: #fb701b !important;
    color: #fff !important;
}

/*
 * Padding del buscador reforzado con !important: algunos temas de WordPress
 * traen reglas globales tipo `input[type="text"] { padding: ... }` con más
 * especificidad que una sola clase utility de Tailwind, y eso hacía que la
 * lupa quedara pisando el texto. Fijamos acá el espacio real que ocupan los
 * íconos absolutos a cada lado.
 */
.donde-comprar-wrap .dc-search-wrap {
    --dc-search-icon-size: 3.25rem;
}

.donde-comprar-wrap .dc-search {
    padding-left: var(--dc-search-icon-size) !important;
    padding-right: var(--dc-search-icon-size) !important;
    box-sizing: border-box !important;
}

.donde-comprar-wrap .dc-search-icon {
    width: var(--dc-search-icon-size);
}

.donde-comprar-wrap .dc-clear-search {
    width: var(--dc-search-icon-size);
}

/* Barra de filtros y de región: scroll horizontal prolijo en mobile, sin
   mostrar la barra de scroll (el gesto de deslizar ya es intuitivo ahí). */
.donde-comprar-wrap .dc-filter-bar,
.donde-comprar-wrap .dc-region-bar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.donde-comprar-wrap .dc-filter-bar::-webkit-scrollbar,
.donde-comprar-wrap .dc-region-bar::-webkit-scrollbar {
    display: none;
    height: 0;
}

@media (max-width: 1023px) {
    .donde-comprar-wrap .dc-filter-bar {
        justify-content: flex-start;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }
}