/* =============================================
   Categorías - Carrusel circular (Swiper)
   Título a la izquierda + enlace "Ver todo",
   tarjetas con imagen circular, nombre y
   subtítulo, y flechas laterales.
   ============================================= */

.lv-categories-section {
    --cc-ink: #1e1e1e;
    --cc-muted: #7a7a7a;
    --cc-soft: #f3f1ed;
    --cc-gold: #C4A35A;
    --cc-font: 'Montserrat', sans-serif;

    padding: 70px 0 80px;
    background: #fff;
}

/* Ancho y márgenes laterales: utilidad .lv-container-wide (css/style.css),
   compartida con la lista de productos */

/* ── Cabecera ────────────────────────────── */
.lv-categories-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
}
.lv-categories-title {
    margin: 0;
    font-size: clamp(30px, 3vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--cc-ink);
}
.lv-categories-all {
    flex-shrink: 0;
    padding-bottom: 4px;
    font-family: var(--cc-font);
    font-size: 17px;
    font-weight: 600;
    color: var(--cc-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--cc-ink);
    transition: color .25s, border-color .25s;
}
.lv-categories-all:hover,
.lv-categories-all:focus-visible {
    color: var(--cc-gold);
    border-color: var(--cc-gold);
    text-decoration: none;
}

/* ── Carrusel ────────────────────────────── */
.lv-cat-carousel { position: relative; }
.lv-cat-carousel .swiper { overflow: hidden; }

/* Sin JS: fila con scroll horizontal */
.lv-cat-carousel:not(.is-ready) .swiper-wrapper {
    display: flex;
    gap: 24px;
    overflow-x: auto;
}
.lv-cat-carousel:not(.is-ready) .swiper-slide { flex: 0 0 min(260px, 42vw); }

/* ── Tarjeta ─────────────────────────────── */
.lv-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--cc-ink);
}
.lv-cat-card:hover,
.lv-cat-card:focus-visible { text-decoration: none; color: var(--cc-ink); }

.lv-cat-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--cc-soft);
    transition: box-shadow .35s;
}
.lv-cat-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.lv-cat-card:hover .lv-cat-card__img img { transform: scale(1.07); }
.lv-cat-card:focus-visible .lv-cat-card__img {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--cc-gold);
}

.lv-cat-card__name {
    margin-top: 26px;
    font-family: var(--cc-font);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.3;
    transition: color .25s;
}
.lv-cat-card:hover .lv-cat-card__name { color: var(--cc-gold); }
.lv-cat-card__meta {
    margin-top: 8px;
    font-family: var(--cc-font);
    font-size: 15px;
    font-weight: 400;
    color: var(--cc-muted);
}

/* ── Flechas ─────────────────────────────── */
.lv-cat-nav {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    color: var(--cc-ink);
    background: #fff;
    border: 1px solid var(--cc-ink);
    border-radius: 50%;
    cursor: pointer;
    /* centrada respecto al círculo; --cc-img la calcula el JS */
    transform: translateY(calc(var(--cc-img, 260px) / 2 - 50%));
    transition: background .25s, color .25s, border-color .25s, opacity .25s;
}
.lv-cat-nav--prev { left: -28px; }
.lv-cat-nav--next { right: -28px; }
.lv-cat-nav:hover,
.lv-cat-nav:focus-visible {
    color: #fff;
    background: var(--cc-ink);
    outline: none;
}
.lv-cat-nav.swiper-button-disabled {
    color: var(--cc-ink);
    background: #e6e6e6;
    border-color: #e6e6e6;
    cursor: default;
}
.lv-cat-nav.swiper-button-lock { display: none; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1199px) {
    .lv-cat-nav--prev { left: -18px; }
    .lv-cat-nav--next { right: -18px; }
}
@media (max-width: 991px) {
    .lv-cat-card__name { font-size: 18px; margin-top: 20px; }
    .lv-cat-card__meta { font-size: 14px; }
    .lv-cat-nav { width: 46px; height: 46px; font-size: 18px; }
    .lv-cat-nav--prev { left: -10px; }
    .lv-cat-nav--next { right: -10px; }
}
@media (max-width: 767px) {
    .lv-categories-section { padding: 50px 0 60px; }
    .lv-categories-head { margin-bottom: 30px; align-items: center; }
    .lv-categories-all { font-size: 14px; }
    .lv-cat-card__name { font-size: 16px; margin-top: 16px; }
    .lv-cat-card__meta { font-size: 13px; margin-top: 4px; }
    /* En móvil se desliza con el dedo */
    .lv-cat-nav { display: none; }
}