/* ==========================================================
   Carrusel de Categorías — mecánica del slider
   ========================================================== */
.mtcat-cat-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mtcat-cat-carousel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mtcat-cat-carousel .swiper-wrapper {
    align-items: stretch;
}

.mtcat-cat-carousel .swiper-slide {
    height: auto;
}

/* Espaciado entre slides (WoodMart aplica padding a .wd-col; en el
   carrusel el gap lo controla Swiper via spaceBetween, así que se
   anula el padding nativo para no duplicar espacio). */
.mtcat-cat-carousel .wd-col {
    padding: 0 !important;
    width: 100% !important;
}

/* Flechas de navegación */
.mtcat-cc-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #222;
    transition: background-color .2s ease, transform .2s ease;
}

.mtcat-cc-arrow:hover {
    background: #f2f2f2;
    transform: scale(1.05);
}

.mtcat-cc-arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* Paginación (puntos) */
.mtcat-cat-carousel .swiper-pagination {
    position: static;
    margin-top: 14px;
}

.mtcat-cat-carousel .swiper-pagination-bullet {
    background: #bbb;
    opacity: 1;
}

.mtcat-cat-carousel .swiper-pagination-bullet-active {
    background: #222;
}

@media (max-width: 767px) {
    .mtcat-cc-arrow {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================================
   Tarjeta de categoría (cat-design-zoom-out) — pill glass
   Mismas clases nativas de WoodMart: aplica también al grid
   estático existente si comparte el mismo `cat-design-zoom-out`.
   ========================================================== */

/* Capa de oscurecido sobre la imagen completa (nativa de WoodMart,
   valores de referencia confirmados: .1 en reposo). El valor de
   hover (.35) es una estimación pendiente de confirmar contra el
   tema — ajustar aquí si difiere. */
.wd-col.wd-cat.cat-design-zoom-out:hover .wd-cat-thumb:before {
    opacity: .35;
}

/* Border-radius fijo de la tarjeta — igual en reposo y en hover.
   La forma ovalada reportada NO la producía .wd-cat-image/.wd-cat-thumb
   (donde yo había apuntado antes), sino --wd-cat-brd-radius: 50% —
   variable global definida por el tema en :root — aplicada en
   .wd-cat-inner. Se sobreescribe la variable y el border-radius
   directamente ahí, en ambos estados. */
.wd-col.wd-cat.cat-design-zoom-out .wd-cat-inner {
    --wd-cat-brd-radius: 20px;
    border-radius: 20px !important;
    overflow: hidden;
}

.wd-col.wd-cat.cat-design-zoom-out:hover .wd-cat-inner,
.wd-col.wd-cat.cat-design-zoom-out .wd-cat-inner:hover {
    --wd-cat-brd-radius: 20px;
    border-radius: 20px !important;
}

/* Pill glass — nombre de categoría */
.wd-col.wd-cat.cat-design-zoom-out .wd-cat-header .wd-entities-title {
    background: rgba(20, 20, 20, 0.4) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-top-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.25) !important;
    border-radius: 20px !important;
    padding: 8px 22px !important;
    margin: 0 !important;
    display: inline-block !important;
    width: auto !important;
}

.wd-col.wd-cat.cat-design-zoom-out .wd-cat-header .wd-entities-title,
.wd-col.wd-cat.cat-design-zoom-out .wd-cat-header .wd-entities-title a {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Conteo de productos — texto blanco plano, oculto hasta el hover */
.wd-col.wd-cat.cat-design-zoom-out .wd-cat-count {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .3s ease, max-height .3s ease;
}

.wd-col.wd-cat.cat-design-zoom-out:hover .wd-cat-count {
    opacity: 1;
    max-height: 20px;
}